/* =============================================================================
   The launch landing page.

   Structurally different from the terminal on purpose: the terminal is scanned
   by someone who already knows what it does, this page is read once by someone
   deciding whether to open it at all. The order is the argument: the claim,
   live proof, the terminal itself, then plainly what the privacy is not.

   The design system is the aperture, taken from the mark: corner-cut panels,
   lit arcs instead of rules, sweeps instead of shimmers, a faint ring field
   behind everything. Orange is exposure, blue is privacy, green and red are
   pnl semantics only. Authored mobile-first at 390px.
   ============================================================================= */

:root {
  --cut: 18px;
  --head-h: 60px;
}

body.launch {
  background:
    radial-gradient(1100px 640px at 82% -10%, rgba(249, 115, 22, 0.09), transparent 60%),
    radial-gradient(900px 560px at 4% 100%, rgba(0, 82, 255, 0.07), transparent 60%),
    var(--void);
  overflow-x: hidden;
}

/* The ring field. Barely there, and gone entirely on small screens where it
   would just be noise behind text. */
@media (min-width: 720px) {
  body.launch::before {
    content: "";
    position: fixed;
    inset: -40vh -20vw;
    pointer-events: none;
    background:
      repeating-radial-gradient(circle at 78% 18%,
        transparent 0 118px,
        rgba(236, 236, 245, 0.016) 118px 120px);
    z-index: 0;
  }
}

.wrap {
  width: min(100% - 2 * var(--gut), var(--max));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.wrap--wide { width: min(100% - 2 * var(--gut), 1320px); }

.mono { font-family: var(--data); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--org);
  color: #150802;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------------- head */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--head-h);
  padding-inline: var(--gut);
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.top.scrolled {
  background: rgba(7, 7, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.top__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: auto;
}
.top__nav { display: none; }
@media (min-width: 900px) {
  .top__nav { display: flex; gap: 26px; margin-right: 18px; }
  .top__nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
  }
  .top__nav a:hover { color: var(--ink); }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  color: #150802;
  background: linear-gradient(180deg, var(--org-2), var(--org));
  font: 600 15px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.2s, filter 0.2s;
  will-change: transform;
}
.btn:hover { filter: brightness(1.08); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--ghost {
  background: rgba(14, 14, 22, 0.7);
  color: var(--ink);
  border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn--ghost:hover { border-color: var(--org); filter: none; color: var(--org-2); }

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

.hero {
  position: relative;
  padding: calc(var(--head-h) + 56px) 0 46px;
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 42px;
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 7, 11, 0.62), rgba(7, 7, 11, 0.28) 42%, var(--void) 96%),
    radial-gradient(70% 60% at 26% 40%, rgba(7, 7, 11, 0.55), transparent 70%);
}
.hero__copy { z-index: 1; }

h1 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(42px, 9.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 span { display: block; }
h1 .show {
  color: transparent;
  -webkit-text-stroke: 2px var(--org);
  text-stroke: 2px var(--org);
}

.hero__lede {
  max-width: 620px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 18px);
}
.hero__lede b { color: var(--ink); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__note {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 13px;
}

/* Live proof strip. The numbers are baked into the HTML as a dated fallback,
   then replaced from the same API the terminal runs on. */
.proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
@media (min-width: 720px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof__tile {
  background: rgba(14, 14, 22, 0.86);
  padding: 20px 18px 16px;
}
.proof__tile dt {
  margin: 0 0 4px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
}
.proof__tile dd {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.proof__note {
  margin: 10px 2px 0;
  color: var(--faint);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- sections */

.section { padding: 84px 0; position: relative; }
.section--tint {
  background:
    linear-gradient(180deg, transparent, rgba(14, 14, 22, 0.5) 12% 88%, transparent);
}

/* The lit arc. A section opens with a ring segment, not a rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--org);
  font-family: var(--data);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--org) 0 120deg, rgba(249, 115, 22, 0.15) 120deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}

h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 760px;
}
.sub {
  max-width: 640px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 16.5px;
}
.caption {
  max-width: 640px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.caption b { color: var(--ink); }
.caption a { color: var(--org); text-decoration-color: rgba(249, 115, 22, 0.4); }

/* ---------------------------------------------------------------- showcase */

.show-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 18px;
  padding-bottom: 2px;
}
.show-tabs::-webkit-scrollbar { display: none; }
.stab {
  flex: none;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font: 500 14px/1 var(--body);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.stab:hover { color: var(--ink); }
.stab.on {
  color: var(--org-2);
  border-bottom-color: var(--org);
}

.frame {
  background: var(--panel);
  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));
  transform-style: preserve-3d;
  will-change: transform;
}
@media (min-width: 1000px) {
  .frame { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); }
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.frame__dots { display: flex; gap: 6px; }
.frame__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.frame__dots i:first-child { background: rgba(249, 115, 22, 0.55); }
.frame__url {
  color: var(--faint);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.frame__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--org);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.frame__open svg { width: 14px; height: 14px; transition: transform 0.2s; }
.frame__open:hover svg { transform: translateX(3px); }
.frame__view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--void);
}
/* On a phone the window turns portrait and launch.js swaps in the mobile
   capture of the same surface, so the phone shows the phone product. */
@media (max-width: 719px) {
  .frame__view { aspect-ratio: 39 / 56; }
}
.frame__view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transition: opacity 0.25s;
}
/* The captures are much taller than the window, and the pan drifts through
   them top to bottom and back, so every screenshot reads as the page moving. */
@media (prefers-reduced-motion: no-preference) {
  html.js .frame__view img { animation: shotpan 20s ease-in-out 1.2s infinite alternate; }
}
@keyframes shotpan {
  from { object-position: 50% 0%; }
  to { object-position: 50% 100%; }
}
.frame__view img.swap { opacity: 0; }
.frame__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(0, 82, 255, 0.10) 50%, transparent 56%);
  transform: translateX(-120%);
}
.frame.swept .frame__sweep { animation: sweep 0.9s ease both; }
@keyframes sweep { to { transform: translateX(120%); } }
.frame__claim {
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14.5px;
}

/* ----------------------------------------------------------------- readout */

.readout {
  position: relative;
  background: var(--panel);
  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));
  overflow: hidden;
}
.readout__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.addr { position: relative; display: inline-grid; }
.addr__real, .addr__mask {
  grid-area: 1 / 1;
  font-size: 13.5px;
  transition: opacity 0.6s;
}
.addr__real { color: var(--ink); }
.addr__mask { color: var(--blue-lift); opacity: 0; }
.readout.masked .addr__real { opacity: 0; }
.readout.masked .addr__mask { opacity: 1; }
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--org);
}
@media (prefers-reduced-motion: no-preference) {
  .live i { animation: pulse 2.2s infinite; }
}
@keyframes pulse { 50% { opacity: 0.3; } }

.readout__head {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .readout__head { grid-template-columns: repeat(4, 1fr); } }
.readout__head > div { background: var(--panel); padding: 14px 18px; }
.readout__head span {
  display: block;
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.readout__head strong {
  font-family: var(--data);
  font-weight: 500;
  font-size: 19px;
}
.readout__head strong.pos { color: var(--up); }
.readout__head strong.neg { color: var(--down); }

.scroll-x { overflow-x: auto; }
.book {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}
.book th {
  padding: 12px 18px;
  text-align: left;
  color: var(--faint);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.book td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--data);
  font-size: 13.5px;
}
.book tr:last-child td { border-bottom: 0; }
.book .coin { font-weight: 500; color: var(--ink); }
.tag {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}
.tag.long { color: var(--up); border-color: rgba(34, 197, 94, 0.4); }
.tag.short { color: var(--down); border-color: rgba(239, 68, 68, 0.4); }
.pos { color: var(--up); }
.neg { color: var(--down); }

.readout__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 13px 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 12.5px;
}
.readout__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 46%, rgba(0, 82, 255, 0.14) 50%, transparent 54%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .readout__sweep { animation: bigsweep 7s 1.2s infinite; }
}
@keyframes bigsweep {
  0% { transform: translateX(-130%); }
  32% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* ------------------------------------------------------------------- ghost */

.claim__grid {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
}
@media (min-width: 720px) { .claim__grid { grid-template-columns: 1fr 1fr; } }
.claim {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.claim b {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.claim--no b { color: var(--down); }
.claim--yes b { color: var(--blue-lift); }
.claim ul { margin: 0; padding: 0 0 0 18px; color: var(--muted); }
.claim li { margin-bottom: 8px; font-size: 15px; }
.claim li:last-child { margin-bottom: 0; }

.levels {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.level--std { border-color: rgba(249, 115, 22, 0.5); }
.level__pips { display: flex; gap: 5px; margin-bottom: 12px; }
.level__pips i {
  width: 20px;
  height: 4px;
  background: var(--line);
}
.level__pips i.on { background: var(--org); }
.level b { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 5px; }
.level p { margin: 0; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ venues */

.venues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.venue {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 15px 16px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.venue b { display: block; font-size: 15px; }
.venue span { display: block; color: var(--faint); font-size: 12.5px; margin: 2px 0 9px; }
.chip {
  display: inline-block;
  font-style: normal;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
}
.chip.trade { color: var(--org-2); border-color: rgba(249, 115, 22, 0.5); }
.chip.on { color: var(--up); border-color: rgba(34, 197, 94, 0.35); }
.chip.test { color: var(--blue-lift); border-color: rgba(0, 82, 255, 0.5); }
.chip.soon { color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------------------------ endcap */

.endcap { padding-bottom: 110px; }
.endcap__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.endcap h2 { margin: 18px 0 4px; max-width: none; }
.endcap .sub { margin-bottom: 24px; }
.endcap .hero__note { margin-top: 12px; }

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

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0 48px;
}
.foot__grid {
  display: grid;
  gap: 26px;
}
@media (min-width: 720px) {
  .foot__grid { grid-template-columns: 1.4fr 1fr auto; align-items: start; }
}
.foot__brand { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.foot__brand b { font-family: var(--display); letter-spacing: 0.04em; text-transform: uppercase; font-size: 15px; }
.foot__brand p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--faint); font-size: 13.5px; max-width: 380px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot__links a:hover { color: var(--ink); }
.foot__meta { color: var(--faint); font-size: 13.5px; }
.foot__meta a { color: var(--muted); }

/* ------------------------------------------------------------------ motion */

/* Armed only when launch.js has stamped html.js, so a visitor with JavaScript
   off sees the whole page rather than opacity zero forever. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: perspective(900px) translateY(26px) rotateX(4deg);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  html.js [data-reveal].in {
    opacity: 1;
    transform: none;
  }
}