/* Crypto War Room — landing surface
   Re-themed onto the "Factory" system: obsidian canvas, bone cards as the
   only bright surfaces, Geist type at flat weight 400, zero shadow/chamfer,
   orange + green reserved for status marks rather than chrome. Market
   semantics (--gain/--loss/--warn) are the one addition Factory's own spec
   never anticipated, since it was written for a page with no live prices. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
  /* ---- Factory palette, verbatim ---- */
  --bg:            #101010;   /* Obsidian Canvas */
  --bg-elev:       #121215;   /* Carbon Lift — nav wells, raised dark surfaces */
  --bg-elev-2:     #17171b;   /* one step above Carbon Lift, for stacked dark surfaces */
  --bg-inset:      #0d0d0d;   /* sunken wells, the dashboard-frame panel */

  --line:          #3d3a39;   /* Ash Stroke — hairlines, the system's only borders */
  --line-strong:   #3a3a44;   /* Graphite Mid — used where a border needs to read a step darker/heavier */

  --fg:            #eeeeee;   /* Bone — primary text, and the light-card surface colour */
  --fg-2:          #bcbcc6;   /* Pale Stone — secondary copy, eyebrows */
  --fg-3:          #8e8e9a;   /* Warm Granite — muted body text, inactive labels */
  --chalk:         #fafafa;   /* highest-emphasis light fill (the one chromatic-contrast button) */

  /* Two functional accents. Both are reserved for live status and data marks
     — never a button fill, never a card surface, never large text. */
  --accent:        #ff3d63;   /* Signal Orange */
  --accent-hi:     #ff5ba8;
  --accent-soft:   rgba(255,61,99,.12);
  --accent-line:   rgba(255,61,99,.34);
  --accent-ink:    #1a0800;
  --metric-green:  #19d98b;

  /* Market semantics, restated in Factory's own two functional accents per
     the design handoff: green reads gain, the single orange accent does
     double duty as loss/alert/refusal. No red anywhere in this system. */
  --gain:          #19d98b;
  --gain-soft:     rgba(25,217,139,.10);
  --gain-line:     rgba(25,217,139,.34);

  --warn:          #ff3d63;
  --loss:          #ff3d63;

  /* Candles: body filled, wick one step brighter, on the #0d0d0d chart
     panel. Per the handoff, the *live* chart's own candlestick series
     colors are intentionally left alone — these tokens are for the
     redesign's chrome only (legend dots, level-line pills). */
  --candle-up:        #19d98b;
  --candle-up-wick:   #35e39a;
  --candle-down:      #ff2d8f;
  --candle-down-wick: #ff5ba8;

  /* Neutral action fill — every committing button on a dark surface. */
  --btn-neutral:      #1a1a20;
  --btn-neutral-hi:   #24242c;

  /* No shadow dependency. Depth is the Bone-card-on-Obsidian contrast, not
     blur — every shadow token in the system resolves to nothing. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Factory's own scale: 3px buttons/nav, 10px cards, 20px on the single
     largest panel. The chamfer this page used to cut is retired outright —
     Factory's whole signature is a flat rectangle landing on black, not an
     angled corner. */
  --r-sm: 3px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 20px;
  --cut-sm: 0px;
  --cut-md: 0px;
  --cut-lg: 0px;
  --techno: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Prices/P&L/quantities everywhere read off this. */
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1200px;
  --section: clamp(80px, 9.5vw, 148px);

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  /* IBM Plex Mono's Regular weight reads noticeably thinner than
     JetBrains Mono's did at the same size. Every price/P&L/quantity in
     the app inherits this rather than setting its own weight, so bumping
     the base here is what actually fixes "the numbers look thin" instead
     of hunting down every individual rule that uses --mono. */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; }

/* ---------- layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }

.section-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head h2 {
  font-size: clamp(2rem, 3.7vw, 3.05rem);
  margin-bottom: 20px;
}
.section-head p {
  color: var(--fg-2);
  font-size: 1.0625rem;
  max-width: 60ch;
}

/* ---------- buttons ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  font: inherit; font-weight: 700; font-size: .96875rem;
  letter-spacing: -.012em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), opacity .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-line: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -14px rgba(255,90,31,.7);
}
.btn--primary:hover { --btn-bg: var(--accent-hi); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 20px 40px -14px rgba(255,90,31,.8); }

.btn--ghost { --btn-bg: rgba(255,255,255,.03); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.07); --btn-line: var(--line-strong); }

.btn--lg { padding: 16px 28px; font-size: 1.03125rem; border-radius: 14px; }
.btn--sm { padding: 9px 16px; font-size: .875rem; border-radius: 10px; }

.btn__note { font-weight: 500; opacity: .68; }

/* ---------- header ---------- */

.header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.header[data-stuck="true"] {
  background: rgba(8,9,11,.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}
.header__bar {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
/* Logo lockup — supplied master artwork */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__logo { height: 34px; width: auto; }
.brand--lg .brand__logo { height: 74px; }
@media (max-width: 560px) { .brand__logo { height: 27px; } .brand--lg .brand__logo { height: 52px; } }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__type {
  display: grid; gap: 3px;
  font-family: 'Michroma', var(--sans);
  font-weight: 400; line-height: 1; white-space: nowrap;
}
.brand__type b {
  font-weight: 400; font-size: .5625rem; letter-spacing: .46em;
  color: var(--fg); text-indent: .46em;
}
.brand__type span {
  font-size: .875rem; letter-spacing: .13em;
  color: var(--accent); text-indent: .13em;
}
.brand--lg .brand__mark { width: 74px; height: 74px; }
.brand--lg { gap: 22px; }
.brand--lg .brand__type b { font-size: 1rem; letter-spacing: .52em; }
.brand--lg .brand__type span { font-size: 1.65rem; letter-spacing: .15em; }
.brand--lg .brand__type { gap: 8px; }
@media (max-width: 560px) {
  .brand--lg .brand__mark { width: 52px; height: 52px; }
  .brand--lg .brand__type b { font-size: .75rem; }
  .brand--lg .brand__type span { font-size: 1.15rem; }
}

.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a {
  padding: 8px 13px; border-radius: 9px;
  color: var(--fg-2); font-size: .9375rem; font-weight: 500;
  transition: color .16s, background-color .16s;
}
.nav a:hover { color: var(--fg); background: rgba(255,255,255,.05); }

.header__cta { display: flex; align-items: center; gap: 10px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .header__cta .btn--ghost { display: none; }
  .header__cta { margin-inline-start: auto; }
}

/* ---------- hero ---------- */

.hero { position: relative; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(64px, 8vw, 112px); overflow: hidden; }

.hero__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 780px;
  background:
    radial-gradient(58% 52% at 22% 8%, rgba(255,90,31,.15), transparent 70%),
    radial-gradient(46% 44% at 82% 0%, rgba(255,150,40,.08), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  letter-spacing: -.042em;
  margin-bottom: 26px;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__sub {
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  max-width: 54ch;
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  color: var(--fg-3); font-size: .875rem;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { flex: none; color: var(--accent); }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__sub { max-width: 58ch; }
}

/* ---------- discord message card ---------- */

.dcard {
  background: linear-gradient(180deg, #1B1E24 0%, #16181D 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dcard__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.22);
}
.dcard__hash { color: var(--fg-3); flex: none; }
.dcard__chan { font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; }
.dcard__live {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--fg-3); text-transform: uppercase;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gain); flex: none;
  box-shadow: 0 0 0 3px rgba(36,197,94,.16);
}

.dcard__body { padding: 20px 18px 22px; }

.dmsg { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; }
.dmsg__av {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--bg-elev-2);
}
.dmsg__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.dmsg__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.dmsg__name { font-weight: 700; color: #E8B33C; font-size: .9375rem; }
.dmsg__tag {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  padding: 2px 6px; border-radius: 5px; font-weight: 700;
}
.dmsg__time { font-size: .75rem; color: var(--fg-3); font-family: var(--mono); }
.dmsg__text { font-size: .9375rem; line-height: 1.58; color: #D6DAE1; margin-bottom: 13px; }
.dmsg__text strong { color: var(--fg); font-weight: 700; }
.dmsg__text code {
  font-family: var(--mono); font-size: .8125rem;
  background: rgba(255,255,255,.07); padding: 1.5px 5px; border-radius: 4px; color: var(--accent);
}
.dmsg__attach {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-inset);
}
.dmsg__attach img { width: 100%; }
.dmsg__reacts { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.react {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--fg-2);
}
.react svg { color: var(--gain); }

/* ---------- proof strip ---------- */

.proof {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.proof__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  padding-block: 34px;
}
.proof__item { padding-inline: clamp(14px, 2.4vw, 30px); border-inline-start: 1px solid var(--line); }
.proof__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.proof__k {
  font-family: var(--mono); font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--fg); display: block; margin-bottom: 5px;
}
.proof__v { color: var(--fg-3); font-size: .84375rem; line-height: 1.45; display: block; }

@media (max-width: 760px) {
  .proof__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 0; }
  .proof__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------- results ---------- */

.results__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 940px) { .results__grid { grid-template-columns: 1fr; max-width: 620px; } }

.trade {
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease-out), border-color .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.trade:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.trade__shot {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-inset);
  border: 0; padding: 0; cursor: zoom-in;
}
.trade__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: transform .5s var(--ease-out); }
.trade__shot:hover img { transform: scale(1.04); }
.trade__zoom {
  position: absolute; inset-inline-end: 12px; bottom: 12px;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(8,9,11,.78); border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px); color: var(--fg-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.trade__shot:hover .trade__zoom, .trade__shot:focus-visible .trade__zoom { opacity: 1; transform: translateY(0); }

.trade__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.trade__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade__pair { font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.trade__date { font-family: var(--mono); font-size: .75rem; color: var(--fg-3); }

.trade__levels { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .8125rem; }
.trade__levels b { font-weight: 500; color: var(--fg-2); }
.trade__levels svg { color: var(--fg-3); flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-weight: 700; font-size: .8125rem;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gain-soft); color: var(--gain);
  border: 1px solid var(--gain-line);
}

.trade__note { font-size: .875rem; color: var(--fg-3); line-height: 1.5; margin-top: auto; }

.disclaimer-line {
  margin-top: 28px; font-size: .84375rem; color: var(--fg-3);
  max-width: 78ch; line-height: 1.6;
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(4,5,6,.9);
  backdrop-filter: blur(10px);
  border: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease-out), visibility .26s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: scale(.97); transition: transform .3s var(--ease-out);
}
.lightbox[data-open="true"] img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: 18px; inset-inline-end: 18px;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-strong);
  color: var(--fg); cursor: pointer;
  transition: background-color .18s;
}
.lightbox__close:hover { background: rgba(255,255,255,.14); }

/* ---------- bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(14px, 1.5vw, 20px);
}
.tile {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 13px;
  position: relative; overflow: hidden;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.tile:hover { border-color: var(--line-strong); background: var(--bg-elev-2); }
.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 3; }
.tile--third { grid-column: span 2; }
.tile h3 { font-size: 1.1875rem; letter-spacing: -.028em; }
.tile p { color: var(--fg-2); font-size: .9375rem; line-height: 1.58; }

.tile__ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); margin-bottom: 4px;
}

.tile__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.tile__list li { display: flex; gap: 10px; font-size: .9375rem; color: var(--fg-2); }
.tile__list svg { flex: none; color: var(--accent); margin-top: 4px; }

.tf-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tf {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--fg-2);
}
.tf b { color: var(--accent); font-weight: 700; }

@media (max-width: 940px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile--wide, .tile--half, .tile--third { grid-column: span 2; }
}

/* ---------- server preview ---------- */

.server {
  display: grid; grid-template-columns: 232px minmax(0,1fr);
  background: #16181D;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.server__side { background: #0D0F12; border-inline-end: 1px solid rgba(255,255,255,.06); padding: 18px 12px; }
.server__name {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px 16px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-weight: 900; font-size: .9375rem; letter-spacing: -.025em;
}
.server__group {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3); padding: 14px 8px 7px; font-weight: 700;
}
.chan {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px;
  color: var(--fg-3); font-size: .875rem; font-weight: 500;
  transition: color .16s, background-color .16s;
}
.chan svg { flex: none; opacity: .8; }
.chan:hover { color: var(--fg-2); background: rgba(255,255,255,.04); }
.chan[data-active="true"] { color: var(--fg); background: rgba(255,255,255,.08); }
.chan__lock { margin-inline-start: auto; opacity: .55; }

.server__main { padding: 22px clamp(18px, 2.4vw, 30px) 26px; display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 860px) {
  .server { grid-template-columns: 1fr; }
  .server__side { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
}

.msg { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; }
.msg__av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid var(--line); background: var(--bg-elev-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8125rem; font-weight: 700; color: var(--fg-3);
}
.msg__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.msg__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.msg__head .dmsg__tag { align-self: center; }
.msg__name { font-weight: 700; font-size: .9375rem; }
.msg__name[data-role="owner"] { color: #E8B33C; }
.msg__time { font-family: var(--mono); font-size: .6875rem; color: var(--fg-3); }
.msg__text { font-size: .9375rem; color: #CFD4DB; line-height: 1.6; }
.msg__text code { font-family: var(--mono); font-size: .8125rem; background: rgba(255,255,255,.07); padding: 1.5px 5px; border-radius: 4px; color: var(--accent); }

.signal {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  padding: 14px 16px;
  display: grid; gap: 10px;
  max-width: 420px;
}
.signal__top { display: flex; align-items: center; gap: 9px; }
.signal__bot {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-3); margin-inline-start: auto;
}
.signal__pair { font-family: var(--mono); font-weight: 700; font-size: .9375rem; }
.signal__rows { display: grid; gap: 7px; }
.signal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: .8125rem; }
.signal__row span:first-child { color: var(--fg-3); }
.signal__row b { font-weight: 500; color: var(--fg-2); }
.ok { color: var(--gain); font-weight: 700; }

/* ---------- founder ---------- */

.founder {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0,1fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 36px; } }

.founder__shot {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  background: var(--bg-elev-2);
}
.founder__shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }
.founder__shot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,11,.62), transparent 46%);
  pointer-events: none;
}
.founder__badge {
  position: absolute; inset-inline-start: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  background: rgba(8,9,11,.72); border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  padding: 7px 12px; border-radius: 999px; color: var(--fg-2);
}

.founder h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 8px; }
.founder__role { color: var(--accent); font-weight: 700; font-size: 1rem; margin-bottom: 22px; letter-spacing: -.01em; }
.founder__bio { color: var(--fg-2); max-width: 62ch; display: grid; gap: 15px; margin-bottom: 26px; }
.founder__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
  border: 1px solid var(--line); background: var(--bg-elev);
  border-radius: var(--r-md); padding: 13px 17px;
}
.stat b { display: block; font-family: var(--mono); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
.stat span { font-size: .8125rem; color: var(--fg-3); }

/* ---------- pricing ---------- */

.pricing { display: grid; place-items: center; }
.price-card {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.price-card::before {
  content: ''; position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30%, var(--accent-line) 70%, transparent);
}
.price-card h3 { font-size: 1.375rem; margin-bottom: 6px; }
.price-card__lede { color: var(--fg-3); font-size: .9375rem; margin-bottom: 26px; }
.price-card__amount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.price-card__amount b {
  font-family: var(--mono); font-size: clamp(3rem, 6vw, 4rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1;
}
.price-card__amount span { color: var(--fg-3); font-size: 1rem; font-weight: 500; }
.price-card__equiv { font-family: var(--mono); font-size: .8125rem; color: var(--accent); margin-bottom: 28px; }
.price-card ul { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.price-card li { display: flex; gap: 11px; font-size: .9375rem; color: var(--fg-2); }
.price-card li svg { flex: none; color: var(--accent); margin-top: 4px; }
.price-card .btn { width: 100%; }
.price-card__fine { margin-top: 15px; font-size: .8125rem; color: var(--fg-3); text-align: center; }

/* ---------- faq ---------- */

.faq { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: 24px; padding-inline: 0 44px; position: relative;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
  transition: color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; position: absolute; inset-inline-end: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .5;
  transition: transform .28s var(--ease-out), opacity .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; opacity: 1; }
.faq__a { padding-block: 0 26px; padding-inline: 0 60px; color: var(--fg-2); font-size: .96875rem; }
.faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- final cta ---------- */

.final {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  padding: clamp(44px, 6vw, 84px) clamp(28px, 5vw, 72px);
  text-align: center;
}
.final::before {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 420px;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255,90,31,.17), transparent 72%);
  pointer-events: none;
}
.final > * { position: relative; }
.final h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 18px; }
.final p { color: var(--fg-2); max-width: 52ch; margin: 0 auto 32px; }
.final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); padding-block: 52px 40px; margin-top: var(--section); }
.footer__top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer__links a { color: var(--fg-3); font-size: .9375rem; transition: color .16s; }
.footer__links a:hover { color: var(--fg); }
.footer__legal {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  padding: 18px 20px; font-size: .8125rem; color: var(--fg-3); line-height: 1.62;
  max-width: 86ch;
}
.footer__legal b { color: var(--fg-2); }
.footer__base { margin-top: 26px; font-size: .8125rem; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal-ready="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
    transition: opacity .72s var(--ease-out), transform .72s var(--ease-out), filter .72s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  [data-reveal-ready="true"] [data-reveal][data-shown="true"] { opacity: 1; transform: none; filter: none; }
}

/* ---------- language switch ---------- */

.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--fg-2);
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  transition: color .16s, border-color .16s, background-color .16s;
}
.lang:hover { color: var(--fg); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
@media (max-width: 560px) { .lang { display: none; } }

/* ---------- arabic / rtl ---------- */

[dir="rtl"] {
  --sans: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Arabic is a connected script: negative tracking breaks the joins,
   and the taller stack needs more leading than the Latin setting. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .btn, [dir="rtl"] .brand, [dir="rtl"] .server__name,
[dir="rtl"] .faq summary, [dir="rtl"] .tile h3 { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2 { line-height: 1.26; }
[dir="rtl"] .hero h1 { line-height: 1.2; }
[dir="rtl"] .price-card__amount b, [dir="rtl"] .proof__k, [dir="rtl"] .stat b { letter-spacing: -.03em; }

[dir="rtl"] .hero__sub, [dir="rtl"] .section-head p,
[dir="rtl"] .tile p, [dir="rtl"] .founder__bio, [dir="rtl"] .faq__a,
[dir="rtl"] .msg__text, [dir="rtl"] .dmsg__text { line-height: 1.9; }

/* Latin and numeric runs keep their own direction inside Arabic text */
[dir="rtl"] .trade__levels { direction: ltr; justify-content: flex-end; }
[dir="rtl"] .trade__pair, [dir="rtl"] .signal__pair, [dir="rtl"] .trade__date,
[dir="rtl"] .msg__time, [dir="rtl"] .dmsg__time, [dir="rtl"] code {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .price-card__amount { direction: ltr; justify-content: flex-end; }
[dir="rtl"] .price-card__equiv, [dir="rtl"] .price-card__fine { text-align: right; }

/* chart crops: the position box sits on the right of every capture */
[dir="rtl"] .trade__shot img { object-position: 62% 50%; }

/* ---------- logo-derived geometry ---------- */

.cut, .btn, .tile, .trade, .dcard, .server, .price-card, .final,
.signal, .stat, .tf, .lang, .footer__legal, .pill, .react, .dmsg__tag,
.dmsg__attach, .tile__ico, .trade__zoom, .lightbox__close, .founder__shot,
.founder__badge, .lightbox img {
  --cut: var(--cut-sm);
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  border-radius: 0;
}

/* mirror the cut so it still trails the reading direction in Arabic */
[dir="rtl"] .cut, [dir="rtl"] .btn, [dir="rtl"] .tile, [dir="rtl"] .trade,
[dir="rtl"] .dcard, [dir="rtl"] .server, [dir="rtl"] .price-card, [dir="rtl"] .final,
[dir="rtl"] .signal, [dir="rtl"] .stat, [dir="rtl"] .tf, [dir="rtl"] .lang,
[dir="rtl"] .footer__legal, [dir="rtl"] .pill, [dir="rtl"] .react, [dir="rtl"] .dmsg__tag,
[dir="rtl"] .dmsg__attach, [dir="rtl"] .tile__ico, [dir="rtl"] .founder__shot,
[dir="rtl"] .founder__badge {
  clip-path: polygon(
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))
  );
}

.tile, .trade, .founder__shot { --cut: var(--cut-md); }
.dcard, .server, .price-card, .final { --cut: var(--cut-lg); }
.pill, .react, .dmsg__tag, .tf, .lang { --cut: 5px; }

/* clip-path eats box-shadow, so depth moves to drop-shadow, which follows the cut */
.trade, .dcard, .server, .price-card, .founder__shot { box-shadow: none; }
.trade { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.trade:hover { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 18px 34px rgba(0,0,0,.6)); }
.dcard, .server, .price-card, .founder__shot {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 28px 56px rgba(0,0,0,.6));
}
.btn--primary { box-shadow: none; filter: drop-shadow(0 8px 18px rgba(255,90,31,.42)); }
.btn--primary:hover { filter: drop-shadow(0 12px 26px rgba(255,90,31,.55)); }

/* the mark's second material: a hollow outline carrying a solid accent edge */
.dcard, .price-card, .final, .server { position: relative; }
.dcard::after, .server::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0;
  width: var(--cut-lg); height: 2px;
  background: var(--accent);
  transform: translateX(0);
  pointer-events: none;
}

/* wide techno lettering for every measured or structural label */
.server__group, .dcard__live, .signal__bot, .dmsg__tag, .proof__v,
.founder__badge, .brand__type, .price-card__amount span {
  font-family: var(--techno);
  font-weight: 400;
}
.server__group, .dcard__live, .signal__bot, .dmsg__tag {
  letter-spacing: .18em; text-transform: uppercase;
}
.proof__v { letter-spacing: .01em; font-size: .75rem; line-height: 1.6; }
.founder__badge { letter-spacing: .12em; text-transform: uppercase; font-size: .625rem; }
.price-card__amount span { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }

.section-head h2, .final h2, .founder h2, .hero h1 { font-family: var(--sans); }

/* nav + buttons pick up the mark's tracking */
.nav a, .footer__links a {
  font-family: var(--techno); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}
/* Michroma runs wide — buttons need tighter tracking and padding to stay on one line */
.btn { font-family: var(--techno); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; padding: 14px 20px; }
.btn--lg { font-size: .6875rem; letter-spacing: .1em; padding: 17px 24px; }
.btn--sm { font-size: .5625rem; letter-spacing: .09em; padding: 10px 15px; }
.btn__note { text-transform: none; letter-spacing: .02em; font-size: .9em; }
.nav a, .footer__links a { font-size: .625rem; letter-spacing: .11em; }
.nav { gap: 0; }
.nav a { padding: 8px 10px; }
.faq summary { font-family: var(--sans); }

/* blade-tip corner brackets on the two hero-weight panels */
.dcard::before, .price-card::before {
  content: ''; position: absolute; inset-inline-end: 0; bottom: 0;
  width: 34px; height: 34px;
  border-inline-end: 2px solid var(--accent-line);
  border-bottom: 2px solid var(--accent-line);
  pointer-events: none;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.ico-discord { flex: none; }
.btn--sm .ico-discord { width: 15px; height: 15px; }
.server__name .ico-discord { color: var(--accent); }

/* ---------- member results ---------- */

.mres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  align-items: start;
}

.mres {
  --cut: var(--cut-md);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition: transform .32s var(--ease-out), border-color .32s var(--ease-out), filter .32s var(--ease-out);
}
.mres:hover {
  transform: translateY(-4px); border-color: var(--line-strong);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 18px 34px rgba(0,0,0,.6));
}
[dir="rtl"] .mres {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

.mres__shot {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: #000; border: 0; padding: 0; cursor: zoom-in;
  border-bottom: 1px solid var(--line);
}
.mres__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: transform .5s var(--ease-out);
}
.mres__shot:hover img { transform: scale(1.04); }
.mres__shot:hover .trade__zoom, .mres__shot:focus-visible .trade__zoom { opacity: 1; transform: translateY(0); }

.mres__body { padding: 15px 17px 17px; display: grid; gap: 7px; }
.mres__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mres__fig {
  font-family: var(--mono); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.03em; color: var(--gain);
}
.mres__tag {
  font-family: var(--techno); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 7px; border: 1px solid var(--line-strong); color: var(--fg-3);
  --cut: 4px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.mres__tag[data-mkt="perp"] { color: var(--warn); border-color: rgba(245,165,36,.4); }
.mres__ctx { font-size: .8125rem; color: var(--fg-2); line-height: 1.5; }
.mres__date { font-family: var(--mono); font-size: .6875rem; color: var(--fg-3); }


/* ==========================================================================
   THE DESK — landing redesign
   One workspace seen in overlapping planes at the top of the page, then
   pulled apart section by section. Everything below inherits the existing
   world: logo orange, chamfered corners, Michroma display, Plex Mono data.
   ========================================================================== */

/* ---- browser surfaces. The parts we did not draw still carry the design. */
::selection { background: var(--accent); color: var(--accent-ink); }
html { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg-inset); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, textarea { caret-color: var(--accent); }

/* ---------- hero ---------- */

.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.hero__copy { max-width: 34rem; }
.hero__sub { max-width: 33rem; }

.hero__meta {
  display: grid; gap: 9px; margin: 26px 0 0; padding: 0; list-style: none;
}
.hero__meta li {
  display: flex; align-items: center; gap: 9px;
  color: var(--fg-3); font-size: .875rem;
}
.hero__meta svg { color: var(--accent); flex: none; }

.ico-g { flex: none; }

/* ---- the desk itself ----
   A shallow 3D stage. The planes sit at different depths, and the whole
   arrangement tips very slightly so it reads as a surface being looked at
   rather than a stack of floating cards. */
.desk {
  position: relative;
  min-height: clamp(400px, 42vw, 520px);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.plane {
  position: absolute;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  --cut: var(--cut-md);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .5s var(--ease-out);
}

/* chart: the back plane, largest, tipped away from the reader */
.plane--chart {
  inset-inline-start: 0; top: 0; width: 90%;
  transform: rotateY(6deg) rotateX(3deg) translateZ(-40px);
  background: #080A0D;
}
.plane__bar {
  display: flex; align-items: baseline; gap: 11px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.3);
}
.plane__pair { font-family: var(--mono); font-weight: 700; font-size: .8125rem; color: var(--fg); }
.plane__venue {
  font-family: var(--techno); font-size: .4375rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); border: 1px solid var(--line); padding: 3px 6px; align-self: center;
}
.plane__tf {
  margin-inline-start: auto; font-family: var(--mono); font-size: .6875rem;
  color: var(--accent-ink); background: var(--accent); padding: 2px 7px;
}
.plane__chart { position: relative; }
.plane__chart svg { display: block; width: 100%; height: clamp(190px, 20vw, 250px); }

/* Price-level pills, positioned off the same y the SVG lines use. */
.lvl {
  position: absolute; inset-inline-end: 9px;
  top: calc(var(--y) * (100% / 300));
  transform: translateY(-50%);
  font-family: var(--mono); font-size: .625rem; font-weight: 700; line-height: 1;
  padding: 4px 7px; color: #fff; white-space: nowrap;
}
.lvl--tp    { background: var(--btn-neutral-hi); }
.lvl--entry { background: #2962FF; }
.lvl--sl    { background: #FF9800; color: #1A0E00; }

/* signal card: front plane, nearest the reader */
.plane--signal {
  inset-inline-end: 0; bottom: 12%; width: 54%;
  transform: rotateY(-5deg) translateZ(60px);
  padding: 14px 15px 15px;
}
.sig__top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.sig__av { border-radius: 50%; object-fit: cover; flex: none; }
.sig__who { display: block; font-weight: 700; font-size: .8125rem; color: var(--fg); }
.sig__when { display: block; font-family: var(--mono); font-size: .625rem; color: var(--fg-3); }
.sig__body { font-size: .8125rem; line-height: 1.55; color: var(--fg-2); margin: 0 0 11px; }
.sig__body b { color: var(--fg); font-family: var(--mono); }
.sig__levels { display: flex; gap: 14px; margin: 0; }
.sig__levels div { display: grid; gap: 2px; }
.sig__levels dt {
  font-family: var(--techno); font-size: .4375rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
}
.sig__levels dd { margin: 0; font-family: var(--mono); font-size: .8125rem; font-weight: 700; color: var(--fg); }
.sig__levels dd[data-t="sl"] { color: var(--warn); }
.sig__levels dd[data-t="tp"] { color: var(--gain); }

/* squawk wire: right edge, mid depth */
.plane--wire {
  inset-inline-end: -2%; top: -6%; width: 46%;
  transform: rotateY(-7deg) translateZ(20px);
  padding: 0 0 10px;
}
.wire__bar {
  font-family: var(--techno); font-size: .4375rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); padding: 9px 13px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25);
}
.wire__list { list-style: none; margin: 0; padding: 0; }
.wire__list li {
  padding: 8px 13px; font-size: .75rem; line-height: 1.4; color: var(--fg-2);
  border-bottom: 1px solid var(--line);
}
.wire__src {
  display: block;
  font-family: var(--techno); font-size: .375rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 3px;
}
.wire__meters { display: flex; gap: 12px; padding: 10px 13px 0; }
.mtr {
  display: grid; gap: 2px;
  font-family: var(--techno); font-size: .375rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
.mtr b { font-family: var(--mono); font-size: .875rem; letter-spacing: -.01em; color: var(--fg); }

/* chat: lowest plane, partly behind the signal card */
.plane--chat {
  inset-inline-start: 4%; bottom: 0; width: 42%;
  transform: rotateY(5deg) translateZ(10px);
  padding: 11px 13px;
}
.chat__line { margin: 0 0 6px; font-size: .75rem; line-height: 1.45; color: var(--fg-2); }
.chat__line:last-child { margin-bottom: 0; }
.chat__who { color: var(--accent); font-weight: 700; margin-inline-end: 7px; }

/* The one authored motion moment: the planes settle onto the desk on load,
   coming from further apart than they land. Everything else on the page is
   the existing reveal. */
@media (prefers-reduced-motion: no-preference) {
  .plane { animation: plane-settle .9s var(--ease-out) backwards; }
  .plane--chart  { animation-delay: .05s; }
  .plane--wire   { animation-delay: .16s; }
  .plane--chat   { animation-delay: .24s; }
  .plane--signal { animation-delay: .32s; }
  @keyframes plane-settle {
    from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); filter: blur(6px); }
  }
}

@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; }
  .desk { min-height: 430px; }
}
@media (max-width: 620px) {
  /* Stacked planes are unreadable at phone width; the chart carries it alone
     and the rest become a plain column below. */
  .desk { min-height: 0; perspective: none; display: grid; gap: 12px; }
  .plane { position: static; width: 100% !important; transform: none !important; }
  .plane--wire .wire__list li:nth-child(n+3) { display: none; }
}

/* ---------- terminal ---------- */

.feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }

.feat__main {
  --cut: var(--cut-lg);
  border: 1px solid var(--line); background: var(--bg-elev);
  padding: clamp(22px, 2.8vw, 34px);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.feat__main h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -.032em; margin: 0 0 12px; }
.feat__main p { color: var(--fg-2); line-height: 1.68; max-width: 42ch; margin: 0 0 22px; }

.feat__demo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.demo__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; background: #080A0D;
  font-family: var(--mono); font-size: .8125rem;
}
.demo__row span { color: var(--fg-3); }
.demo__row b { font-weight: 700; }
.demo__row--tp b { color: var(--fg-2); }
.demo__row--en b { color: #6B9BFF; }
.demo__row--sl b { color: var(--warn); }
.demo__row--tp { box-shadow: inset 2px 0 0 var(--line-strong); }
.demo__row--en { box-shadow: inset 2px 0 0 #2962FF; }
.demo__row--sl { box-shadow: inset 2px 0 0 #FF9800; }

.feat__side { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feat__side li { background: var(--bg-elev); padding: 17px 19px; transition: background-color .16s; }
.feat__side li:hover { background: var(--bg-elev-2); }
.feat__side h4 { font-size: .9375rem; letter-spacing: -.02em; margin: 0 0 5px; color: var(--fg); }
.feat__side p { font-size: .84375rem; line-height: 1.6; color: var(--fg-3); margin: 0; max-width: 46ch; }

/* ---------- squawk ---------- */

.squawk-lay { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .squawk-lay { grid-template-columns: 1fr; } }
.squawk-lay h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.038em; line-height: 1.12; margin: 0 0 16px; }
.lede { color: var(--fg-2); line-height: 1.7; max-width: 44ch; margin: 0 0 22px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: .90625rem; line-height: 1.5; }
.ticks svg { color: var(--accent); flex: none; margin-top: 2px; }

.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 12px; }
.gauge { background: var(--bg-elev); padding: 13px 14px 14px; display: grid; gap: 5px; justify-items: start; align-content: start; }
.gauge svg { display: block; margin-inline: auto; }
.gauge__t { font-family: var(--mono); font-size: 22px; font-weight: 700; fill: var(--fg); text-anchor: middle; }
.gauge__n { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.gauge__l { font-family: var(--techno); font-size: .375rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-3); line-height: 1.5; }
.gauge--bars { align-content: end; }
.split { display: flex; width: 100%; height: 7px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.split i { display: block; height: 100%; }
.split i[data-k="btc"] { background: #F7931A; }
.split i[data-k="eth"] { background: #8A92B2; }
.split i[data-k="alt"] { background: var(--accent); }
.split i[data-k="up"]  { background: var(--gain); }

.wirefeed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wirefeed li { position: relative; background: var(--bg-elev); padding: 12px 15px 12px 17px; display: grid; gap: 5px; }
.wirefeed li[data-hot="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.wirefeed__h { font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--fg); }
.wirefeed__m { display: flex; align-items: center; gap: 7px; font-family: var(--techno); font-size: .375rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.wirefeed__m i {
  font-family: var(--mono); font-style: normal; font-size: .625rem; letter-spacing: 0; text-transform: none;
  font-weight: 700; color: var(--accent); border: 1px solid var(--accent-line);
  background: var(--accent-soft); padding: 2px 6px;
}

/* ---------- the room ---------- */

.room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.room-card { position: relative; background: var(--bg-elev); padding: 24px 24px 54px; display: grid; align-content: start; gap: 10px; transition: background-color .18s; }
.room-card:hover { background: var(--bg-elev-2); }
.room-card h3 { font-size: 1.0625rem; letter-spacing: -.026em; margin: 0; }
.room-card > p { color: var(--fg-3); font-size: .875rem; line-height: 1.62; margin: 0; max-width: 40ch; }
.room-card__demo { margin-top: 6px; border: 1px solid var(--line); background: var(--bg-inset); padding: 11px 12px; display: grid; gap: 7px; }
.sigrow, .lessonrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: .75rem; }
.sigrow b, .lessonrow b { font-weight: 700; color: var(--fg-2); }
.lessonrow b { font-family: var(--sans); font-weight: 600; }
.sigrow i, .lessonrow i { font-style: normal; color: var(--fg-3); }
.sigrow i[data-t="tp"] { color: var(--gain); }
.sigrow i[data-t="sl"] { color: var(--loss); }

.tagfree, .tagpaid {
  position: absolute; inset-block-end: 20px; inset-inline-start: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--techno); font-size: .4375rem; letter-spacing: .15em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid;
}
.tagfree { color: var(--gain); border-color: var(--gain-line); background: var(--gain-soft); }
.tagpaid { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---------- plans ---------- */

.section-head--mid { text-align: center; margin-inline: auto; }
.section-head--mid p { margin-inline: auto; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 1.8vw, 22px); max-width: 900px; margin-inline: auto; align-items: start; }

.plan {
  --cut: var(--cut-lg);
  border: 1px solid var(--line); background: var(--bg-elev);
  padding: clamp(24px, 2.8vw, 34px);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  display: grid; gap: 14px; align-content: start;
}
.plan--paid { border-color: var(--line-strong); background: var(--bg-elev); }  /* Factory bars accent from card surfaces outright; the featured plan now separates itself with a stronger neutral border instead of a tinted fill. */
.plan h3 { font-size: 1.1875rem; letter-spacing: -.028em; margin: 0; }
.plan__lede { color: var(--fg-3); font-size: .875rem; line-height: 1.55; margin: 0; }
.plan__amount { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.plan__amount b { font-family: var(--mono); font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--fg); }
.plan__amount span { color: var(--fg-3); font-size: .875rem; }
.plan__list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 9px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--fg-2); }
.plan__list svg { flex: none; margin-top: 2px; color: var(--fg-3); }
.plan--paid .plan__list svg { color: var(--accent); }
.plan .btn { width: 100%; }
.plan__fine { color: var(--fg-3); font-size: .78125rem; text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .plane, .feat__side li, .room-card { transition: none; animation: none; }
}


/* ==========================================================================
   Fix pass — from the first screenshot round and the detector.
   ========================================================================== */

/* Sticky header was landing on top of every section heading. */
section[id] { scroll-margin-top: 84px; }

/* ---- nav: one line, and above the 11px legibility floor ---- */
.nav { flex-wrap: nowrap; gap: clamp(14px, 1.6vw, 26px); }
.nav a { font-size: .6875rem; letter-spacing: .09em; white-space: nowrap; }
.header__cta .lang { font-size: .75rem; white-space: nowrap; }
.header__cta .btn--sm { font-size: .6875rem; letter-spacing: .09em; white-space: nowrap; }
@media (max-width: 1180px) { .nav { display: none; } }

/* ---- hero actions sit side by side; the pair was stacking ---- */
.hero__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.hero__actions .btn { flex: 0 1 auto; }
.hero__actions .btn--ghost { border-color: var(--line-strong); }
.hero__actions .btn--ghost:hover { border-color: var(--accent-line); }
.btn__note { opacity: .72; font-size: .8125rem; letter-spacing: 0; text-transform: none; }

/* ---- the desk: tighter, and the chart no longer hidden behind the wire ----
   The first composition left a dead quadrant bottom-left and buried the
   chart's right edge. The planes now step down the diagonal instead. */
.desk { min-height: clamp(430px, 40vw, 500px); }

.plane--chart  { inset-inline-start: 0; top: 4%;  width: 82%; transform: rotateY(5deg) rotateX(2deg) translateZ(-30px); }
.plane--wire   { inset-inline-end: 0;   top: 0;   width: 40%; transform: rotateY(-6deg) translateZ(30px); }
.plane--signal { inset-inline-end: 2%;  bottom: 0; width: 56%; transform: rotateY(-4deg) translateZ(70px); }
.plane--chat   { inset-inline-start: 0; bottom: 4%; width: 40%; transform: rotateY(4deg) translateZ(15px); }

/* Take-profit pill: white on var(--line-strong) measured 3.6:1. Ink it dark instead. */
.lvl--tp { background: var(--btn-neutral-hi); color: var(--fg); }
.lvl--sl { background: #FF9800; color: #1A0E00; }
.lvl--entry { background: #2962FF; color: #fff; }

/* ---- 11px floor on the Michroma micro-labels ----
   Letterspacing eases off as the size goes up, so they take no more width
   than they did at 6px while actually being readable. */
.plane__venue, .wire__bar, .wire__src, .mtr, .gauge__l,
.wirefeed__m, .sig__levels dt, .tagfree, .tagpaid {
  font-size: .6875rem; letter-spacing: .085em;
}
.wire__src, .wirefeed__m, .gauge__l, .mtr { color: var(--fg-3); }
.lvl { font-size: .6875rem; }
.sig__when, .chat__line, .wire__list li { font-size: .8125rem; }
.demo__row, .sigrow, .lessonrow { font-size: .875rem; }

/* Alts read as the same orange as BTC in the dominance split. */
.split i[data-k="alt"] { background: #7C5CFF; }
.legendalt { color: #7C5CFF; }

/* The detector flagged .feat__main and .final as having children flush to the
   edge; both had padding but no inner rhythm at the top. */
.feat__main > h3:first-child { margin-block-start: 0; }
.feat__side li:first-child { padding-block-start: 19px; }

@media (max-width: 620px) {
  .desk { min-height: 0; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- second fix round ---- */

/* The two CTAs together are wider than the copy column, so they wrapped to
   uneven widths. Stacked at one width reads as a decision instead. */
.hero__actions { flex-direction: column; align-items: stretch; max-width: 27rem; }
.hero__actions .btn { justify-content: center; }

/* Three meters at the 11px floor overran the wire plane and clipped
   "Breadth". Even columns, and the labels are free to wrap. */
.plane--wire { width: 44%; }
.wire__meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mtr { justify-items: start; line-height: 1.35; }

/* The reward band is honestly that tall at 5:1, but at .22 it read as a
   colour field rather than a zone behind the price. */
.plane--chart .plane__chart svg [fill="url(#rw)"] { opacity: .62; }

/* Footer nav and the result-card tags were still under the 11px floor. */
.footer__links a { font-size: .6875rem; letter-spacing: .09em; }
.mres__tag, .founder__badge { font-size: .6875rem; letter-spacing: .08em; }

/* ==========================================================================
   Hero, recomposed — Morpho's calm, this brand's language.
   Centred column, one object, a stat rail on the bottom edge. The chamfers,
   the orange and the X mark stay; the density does not.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(96px, 12vh, 150px) 0;
  overflow: hidden;
}

/* One column, centred, and allowed to breathe. */
.hero__inner {
  display: block; text-align: center;
  padding-bottom: clamp(90px, 12vh, 140px);
}

/* Lighter and looser than the old display setting. Morpho's headline reads
   calm because it is not shouting in 900 weight at -0.045em; this keeps
   Satoshi but stops it clenching. */
.hero h1 {
  font-weight: 500;
  font-size: clamp(2.15rem, 5.2vw, 3.9rem);
  letter-spacing: -.028em;
  line-height: 1.08;
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__sub {
  margin: 20px auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--fg-3);
}

.hero__actions {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px; max-width: none;
  margin-top: clamp(28px, 3.4vh, 40px);
}
.hero__actions .btn { flex: 0 0 auto; }

/* The one object. Nothing overlaps it, nothing competes with it. */
.hero__object {
  margin: clamp(44px, 6.5vh, 78px) auto 0;
  max-width: 880px; width: 100%;
}
.hero__object .plane--chart {
  position: static; width: 100%; transform: none;
  background: #080A0D; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: none;
}
.hero__object .plane__chart svg { height: clamp(210px, 26vw, 330px); }
.hero__object figcaption {
  margin-top: 16px; color: var(--fg-3); font-size: .8125rem; letter-spacing: .01em;
}

/* Stat rail on the bottom edge of the first screen. */
.hero__rail {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.35);
}
.railgrid {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: clamp(22px, 4vw, 58px);
  padding-block: 20px 22px;
}
.rail__item { display: grid; gap: 4px; }
.rail__k {
  font-family: var(--mono); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--fg);
}
.rail__k em { font-style: normal; font-size: .5em; color: var(--fg-3); margin-inline-start: 3px; }
.rail__v { font-size: .78125rem; color: var(--fg-3); line-height: 1.4; }
.rail__scroll {
  margin-inline-start: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78125rem; color: var(--fg-3); text-decoration: none;
  transition: color .16s;
}
.rail__scroll:hover { color: var(--fg); }
.rail__scroll svg { animation: rail-nudge 2.4s var(--ease-out) infinite; }
@keyframes rail-nudge { 0%,72%,100% { transform: translateY(0); } 84% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) { .rail__scroll svg { animation: none; } }

@media (max-width: 700px) {
  .hero { min-height: auto; padding-block: 80px 0; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .railgrid { gap: 18px 26px; }
  .rail__scroll { display: none; }
}

/* The earlier stacked-CTA rule was still winning here and turned both buttons
   into full-width slabs that pushed the chart off the first screen. */
.hero__actions {
  flex-direction: row; align-items: center; justify-content: center;
  max-width: none;
}
.hero__actions .btn { flex: 0 0 auto; width: auto; }

/* Everything above the object gets tighter so the object, and the rail under
   it, land inside the first screen instead of below the fold. */
.hero h1 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); }
.hero__sub { margin-top: 16px; }
.hero__actions { margin-top: clamp(24px, 2.8vh, 32px); }
.hero__object { margin-top: clamp(30px, 4.4vh, 52px); max-width: 800px; }
.hero__object .plane__chart svg { height: clamp(180px, 20vw, 250px); }
.hero__object figcaption { margin-top: 13px; }
.hero__inner { padding-bottom: clamp(52px, 7vh, 82px); }

/* With the chart now carrying the whole screen, the reward band was reading
   as a green field rather than as a zone behind the price. */
.hero__object .plane__chart svg [fill="url(#rw)"] { opacity: .34; }
.hero__object .plane__chart svg [fill="url(#rk)"] { opacity: .5; }

@media (max-width: 700px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

/* The level pills were positioned with calc(var(--y) * (100% / 300)) — px
   times a percentage, which is invalid, so all three collapsed to one spot.
   --y is now a plain number in the chart's own coordinate space. */
.lvl { top: calc(var(--y) / 260 * 100%); }

/* ==========================================================================
   Pricing, recomposed toward Morpho.
   Morpho never puts content in a filled box — it puts it in space and lets a
   hairline do the dividing. The two plans stop being cards and become two
   columns of a single quiet block.
   ========================================================================== */

#pricing .section-head h2 {
  font-weight: 500; letter-spacing: -.028em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  max-width: 20ch; margin-inline: auto;
}
#pricing .section-head p { max-width: 48ch; color: var(--fg-3); }

.plans {
  max-width: 960px;
  gap: 0;
  margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--line);
}

/* No fill, no border, no chamfer, no gradient — the cards are gone. What
   separates the two plans is a single hairline and a lot of air. */
.plan {
  background: none; border: 0; clip-path: none;
  padding: clamp(34px, 4vw, 54px) clamp(24px, 3.2vw, 46px);
  gap: 16px;
}
.plan--paid {
  background: none;
  border-inline-start: 1px solid var(--line);
}

.plan h3 {
  font-family: var(--techno); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 400;
}
.plan--paid h3 { color: var(--accent); }

.plan__amount { margin: 6px 0 0; align-items: baseline; }
.plan__amount b {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(3rem, 6vw, 4.4rem); letter-spacing: -.045em; line-height: .95;
}
.plan__amount span { color: var(--fg-3); font-size: .9375rem; }

.plan__lede { color: var(--fg-2); font-size: .9375rem; line-height: 1.6; max-width: 32ch; }

/* Ticks were competing with the text. A hairline rule per row reads calmer
   and lets the words carry the list. */
.plan__list { margin: 14px 0 8px; gap: 0; }
.plan__list li {
  gap: 0; padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--fg-2); font-size: .875rem; line-height: 1.5;
}
.plan__list li:first-child { border-top: 0; }
.plan__list svg { display: none; }

.plan .btn { width: 100%; margin-top: 10px; }
/* Only the paid plan's action is orange; the free one is quiet by design. */
.plan__fine { text-align: start; color: var(--fg-3); }

@media (max-width: 760px) {
  .plans { border-top: 0; }
  .plan--paid { border-inline-start: 0; border-top: 1px solid var(--line); }
}


/* ==========================================================================
   FACTORY — "terminal war room at midnight"
   This block was Hyperstudio: matte black, hairlines, weight-400 type, no
   chamfers. It is re-pointed here to Factory's own exact palette rather than
   layered under a third override, since it was already the page's active
   skin -- same instinct (contrast over blur, hairlines over shadow), closer
   numbers. A single Bone card landing on Obsidian is the one bright object
   in the room; orange and metric-green stay reserved for live status and
   data marks, never chrome.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:            #101010;   /* Obsidian Canvas */
  --bg-elev:       #121215;   /* Carbon Lift -- nav wells, dark button fills */
  --bg-elev-2:     #17171b;
  --bg-inset:      #0d0d0d;   /* the dashboard-frame panel, sunk one step further */

  /* structure. One hairline colour does nearly all the dividing. */
  --line:          #3d3a39;   /* Ash Stroke */
  --line-strong:   #3a3a44;   /* Graphite Mid */

  /* type */
  --fg:            #eeeeee;   /* Bone */
  --fg-2:          #bcbcc6;   /* Pale Stone */
  --fg-3:          #8e8e9a;   /* Warm Granite -- never plain grey, the warm tilt matters */

  /* Nav CTA only: the system's one light-filled, chromatic-contrast button.
     Every other action stays a neutral dark fill -- see .btn--primary below. */
  --action:        #fafafa;   /* Chalk */
  --action-ink:    #101010;
  --accent-soft:   rgba(255,61,99,.12);
  --accent-line:   rgba(255,61,99,.34);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --cut-sm: 0px; --cut-md: 0px; --cut-lg: 0px;   /* chamfers retired */
  --section: clamp(96px, 11vw, 168px);
}

body { background: var(--bg); color: var(--fg); }

/* ---- type: weight 400 everywhere. Scale and tracking carry hierarchy. ---- */
h1, h2, h3, h4,
.hero h1, .section-head h2, .final h2, .founder h2,
.feat__main h3, .room-card h3, .plan h3, .squawk-lay h2 {
  font-family: var(--sans);
  font-weight: 400;
}
.hero h1        { font-size: clamp(2.4rem, 5.2vw, 3.94rem); line-height: 1.05; letter-spacing: -.011em; }
.section-head h2,
.squawk-lay h2  { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.07; letter-spacing: -.007em; }
.feat__main h3  { font-size: 1.4375rem; line-height: 1.07; letter-spacing: -.004em; }
.room-card h3,
.plan h3        { font-size: 1.3125rem; line-height: 1.07; letter-spacing: -.004em; }
.feat__side h4  { font-size: 1.125rem; font-weight: 400; line-height: 1.31; }

body, p, li { font-weight: 400; }
.hero__sub, .section-head p, .lede, .plan__lede,
.feat__main p, .feat__side p, .room-card > p, .faq__a { color: var(--fg-3); }

/* Meta text, labels and captions take the mono face with tight tracking —
   Hyperstudio's "utilitarian" second voice. Michroma is retired here: this
   system has no techno display face. */
.plane__venue, .wire__bar, .wire__src, .mtr, .gauge__l, .wirefeed__m,
.sig__levels dt, .tagfree, .tagpaid, .squawk__src, .rail__v,
.nav a, .footer__links a, .btn, .plan h3, .mres__tag, .founder__badge {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: -.022em;
  font-weight: 400;
}
.nav a, .footer__links a { font-size: .875rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: .02em; }
.nav a:hover, .footer__links a:hover { color: var(--fg); }

/* ---- every section separated by one hairline, no background shifts ---- */
.section, .hero__rail, .proof { border-top: 1px solid var(--line); background: none; }
.hero { border: 0; }

/* ---- buttons: Factory's 3px, not a pill; dark fill is the default action,
   the chalk fill is spent once, on the nav's own entry point ---- */
.btn {
  border-radius: 3px; clip-path: none;
  font-size: 1rem; letter-spacing: -.022em;
  padding: 13px 26px;
}
.btn--primary { background: var(--bg-elev); color: var(--fg); border: 0; }
.btn--primary:hover { background: var(--bg-elev-2); }
/* The one exception the brief names by name: "the only chromatic-contrast
   button in the system; appears once in the nav." */
.header__cta .btn--primary { background: var(--action); color: var(--action-ink); }
.header__cta .btn--primary:hover { background: #e6e6e6; }
.btn--ghost {
  background: none; color: var(--fg); border: 1px solid var(--line-strong);
}
.btn--ghost:hover { border-color: var(--fg-3); background: none; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--sm { padding: 9px 18px; font-size: .875rem; }
.btn__note { opacity: .6; }

/* ---- panels lose their fill; the border does the work ---- */
.feat__main, .plan, .upsell, .room-card, .trade, .mres,
.squawk__item, .wirefeed li, .gauge, .meter, .feat__side li {
  background: none;
  clip-path: none;
  border-radius: 10px;
}
.feat__main { border: 1px solid var(--line); padding: clamp(28px, 3.2vw, 44px); }
.feat__side { background: none; border: 1px solid var(--line); border-radius: 10px; }
.feat__side li { border-top: 1px solid var(--line); }
.feat__side li:first-child { border-top: 0; }
.feat__side li:hover { background: none; }

.room-grid, .squawk, .gauges, .wirefeed, .plan__list {
  background: none; border-color: var(--line);
}
.room-grid { border: 1px solid var(--line); border-radius: 10px; }
.room-card:hover, .squawk__item:hover { background: rgba(255,255,255,.02); }

/* Data chips and tags: 4px, outline only. */
.chip, .tagfree, .tagpaid, .pill, .mres__tag, .plane__venue, .plane__tf {
  border-radius: 4px; background: none;
  border: 1px solid var(--line-strong); color: var(--fg-3);
}
.chip--go { color: var(--fg); border-color: var(--fg-3); }
.chip--go:hover { background: var(--bg-elev-2); color: var(--fg); border-color: var(--fg-3); }

/* Orange survives only as punctuation — the compass mark. */
.hero h1 em, .plan--paid h3, .squawk__item[data-hot="true"]::before,
.wirefeed li[data-hot="true"] { color: var(--accent); }
.squawk__item[data-hot="true"]::before,
.wirefeed li[data-hot="true"] { box-shadow: inset 2px 0 0 var(--accent); background: none; }
.ticks svg, .hero__meta svg, .plan__list svg { color: var(--accent); }

/* ---- the chart keeps its own world: it is the product, not decoration ----
   Factory's own component list has a name for exactly this: the Dashboard
   Frame, "the live software factory preview" -- its one named large panel,
   and the only surface that gets the 20px largePanels radius. */
.plane--chart, .hero__object .plane--chart {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.plane__bar { background: none; border-bottom: 1px solid var(--line); }

/* ---- pricing keeps the dissolve, restated in this palette ---- */
.plans { border-top: 1px solid var(--line); }
.plan--paid { border-inline-start: 1px solid var(--line); }
.plan__amount b { font-weight: 400; letter-spacing: -.011em; }
.plan__list li { border-top: 1px solid var(--line); }

/* ---- rail + proof strip ---- */
.rail__k, .proof__k { font-weight: 400; letter-spacing: -.011em; }

/* Hyperstudio bans shadows outright; several components still carried them. */
.plane, .trade, .mres, .card, .upsell, .final, .dcard { box-shadow: none; }

/* Hyperstudio: "Never add drop shadows. Elevation comes from hairline borders
   and color contrast alone." The inherited hero glow was bleeding orange
   behind the white pills. */
.hero__glow { display: none; }
.btn, .btn--primary, .btn--ghost, .header__cta .btn { box-shadow: none; filter: none; }

/* ---- hero, restructured to the reference's order ---- */

/* Small status line above the headline, mono caps, with a live dot. */
.statuspill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: -.022em;
  color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 14px; margin: 0 auto;
}
.statuspill__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--metric-green); flex: none;
}

/* Compact buttons carrying a direction glyph, as the reference does. */
.hero__actions .btn { padding: 11px 20px; font-size: .875rem; }
.btn__arw { opacity: .55; margin-inline-start: 2px; }

/* Full-bleed dot band: the price series as a dot matrix. Reads as a chart at
   distance and as texture up close, which is the job a dot-map does. */
.dotband {
  width: 100vw; margin-inline-start: 50%; transform: translateX(-50%);
  margin-top: clamp(40px, 6vh, 76px);
  height: clamp(190px, 24vw, 300px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dotband .dotmap { display: block; width: 100%; height: 100%; }

.hero__inner { padding-bottom: 0; }
.hero { padding-block: clamp(88px, 11vh, 140px) 0; }

/* Dot band sits taller and lands flush on the stat rail, so the dots read as
   rising out from behind the bar rather than floating above it. */
.dotband {
  height: clamp(280px, 32vw, 430px);
  margin-top: clamp(34px, 5vh, 64px);
  margin-bottom: 0;
}
/* margin-top:auto was pushing the rail to the bottom of the viewport and
   opening a gap under the dots. */
.hero__rail { margin-top: 0; }

/* Interactive dot web, behind the hero copy. */
.heroweb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  z-index: 0;
}
.hero__inner, .hero__rail { position: relative; z-index: 1; }
.dotband { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .heroweb { display: none; } }

/* The web ends at the bar's top line, and the dot chart gets its own ground so
   the web reads as passing behind it rather than over it. */
.heroweb { inset: 0 0 auto 0; height: auto; }
.dotband { background: var(--bg); }


/* ---- annotated product shot ---- */

.annot {
  position: relative;
  margin: 0 0 clamp(44px, 6vw, 76px);
  padding: 0;
}
.annot__shot {
  display: block;
  width: 68%; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 8px;
}

/* Leader lines. Non-scaling stroke keeps them a true hairline even though the
   viewBox is stretched to the wrapper's aspect. */
.annot__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.annot__lines polyline {
  fill: none; stroke: var(--line-strong); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.annot__lines circle { fill: var(--accent); }

.annot__l {
  position: absolute; margin: 0;
  width: 15%;
  font-family: var(--mono); font-size: .75rem; line-height: 1.45;
  letter-spacing: -.022em; color: var(--fg-2);
}
.annot__l--a { left: 0; top: 11%; text-align: end; }
.annot__l--b { left: 0; top: 59%; text-align: end; }
.annot__l--c { right: 0; top: 37%; }
.annot__l--d { right: 0; top: 9%; }

/* The same four notes as an ordinary list, for narrow screens and for anyone
   who cannot see the diagram. */
.annot__list { display: none; }

@media (max-width: 900px) {
  .annot__shot { width: 100%; }
  .annot__lines, .annot__l { display: none; }
  .annot__list {
    display: grid; gap: 0; margin: 18px 0 0; padding: 0;
    list-style: none; counter-reset: annot;
    border: 1px solid var(--line); border-radius: 8px;
  }
  .annot__list li {
    counter-increment: annot;
    display: flex; gap: 12px; padding: 12px 15px;
    border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: .8125rem; letter-spacing: -.022em;
    color: var(--fg-2);
  }
  .annot__list li:first-child { border-top: 0; }
  .annot__list li::before { content: counter(annot); color: var(--accent); flex: none; }
}

/* Anchor dots as HTML: inside a stretched viewBox an SVG circle renders as an
   oval, so these cannot live in the diagram's coordinate space. */
.annot__dot {
  position: absolute; left: var(--x); top: var(--y);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--accent);
}
@media (max-width: 900px) { .annot__dot { display: none; } }

/* Wider capture: give the shot more of the wrapper and tighten the gutters. */
.annot__shot { width: 76%; }
.annot__l { width: 11.5%; }
.annot__l--a { top: 8%; }
.annot__l--b { top: 56%; }
.annot__l--c { top: 34%; }
.annot__l--d { top: 6%; }

/* Annotations removed — the shot stands on its own, so it takes the full
   column instead of leaving gutters for labels that no longer exist. */
.annot__shot { width: 100%; }

/* ============================================================
   FAQ — bolder pass
   ============================================================
   The rest of the page cuts its corners and marks its own devices with
   accent orange; the FAQ was the one section that opted out and shipped as
   a bare browser <details> list. This brings it up to the same conviction:
   chamfered rows like every card on the page, and an accent rail that only
   lights on the question actually open — the same "orange marks state, not
   decoration" rule the rest of the page already keeps.
*/

.faq {
  border-top: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  max-width: 760px;
}

.faq details {
  --cut: var(--cut-md);
  position: relative; border-bottom: 0;
  background: var(--bg-elev);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .28s var(--ease-out);
}
[dir="rtl"] .faq details {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.faq details:first-child { --cut: var(--cut-lg); }

/* The rail is the one accent move — it only appears on the question actually
   open, so it reads as a state, not decoration sprinkled on every row. */
.faq details::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .34s var(--ease-out);
}
.faq details[open]::before { transform: scaleY(1); }

.faq summary {
  padding: 22px 30px 22px 30px;
}
/* The chevron's own shape and position are untouched — it is currentColor,
   so tinting the row's text on open carries the arrow with it for free
   rather than fighting its geometry with a second override. */
.faq details[open] summary { color: var(--accent); }
.faq details[open] { background: var(--bg-elev-2); }
.faq details[open] .faq__a { color: var(--fg-2); }

.faq__a { padding: 0 30px 26px 30px; max-width: 62ch; }


/* ---- final CTA: its own dot field, echoing the hero's ---- */
.final-band { position: relative; overflow: hidden; }
.finalweb { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.final-band .wrap { position: relative; z-index: 1; }