/* =========================================================================
   NFA - stylesheet
     1. Fonts
     2. Variables (colors, spacing, typography)  <- change the theme here
     3. Reset and base
     4. Background (grid, hologram, veil, scanlines, grain, vizor, cursor)
     5. Top bar and menu
     6. Components (cut panels, buttons, pills, led, glitch, scramble)
     7. Hero
     8. Band: ticker + counters
     9. Intro
    10. Agent classes (horizontal rail)
    11. Economic loop
    12. How it works
    13. Platform (terminals)
    14. Call to action
    15. Footer
    16. Early-access drawer
    17. Responsive and reduced motion
   ========================================================================= */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('/lp/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('/lp/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/lp/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/lp/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/lp/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/lp/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Variabile ---------- */
:root {
  --bg: #000000;
  --bg-1: #040504;

  --lime: #c6ff3d;
  --lime-dim: rgba(198, 255, 61, 0.42);
  --lime-line: rgba(198, 255, 61, 0.3);
  --hot: #ff3d6e;
  --up: #00c805;

  --text: #edf2ea;
  --text-dim: rgba(237, 242, 234, 0.58);
  --text-faint: rgba(237, 242, 234, 0.34);
  --line: rgba(237, 242, 234, 0.14);
  --line-soft: rgba(237, 242, 234, 0.08);

  /* panouri: muchia si interiorul */
  --edge: rgba(198, 255, 61, 0.22);
  --pane: rgba(6, 8, 6, 0.82);
  --cut: 16px;

  --hud: 14px;
  --nav-h: 74px;
  --pad-x: 72px;
  --maxw: 1560px;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(40px, 6.2vw, 104px);
  --fs-h2: clamp(26px, 2.9vw, 44px);
  --fs-body: 16px;
  --fs-micro: 11px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3. Reset si baza ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--lime); color: #05060a; }

/* the titles: Archivo widened, uppercase, very tight */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.94;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { position: relative; z-index: 2; }

/* ---------- 4. Background ---------- */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* the veil that darkens the hologram as it passes over text sections */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.99) 100%);
  opacity: 0;
  transition: opacity 0.45s linear;
}

.bg-grid {
  position: fixed;
  inset: -60px;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(198, 255, 61, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(198, 255, 61, 0.055) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(80% 62% at 50% 42%, #000 15%, transparent 100%);
  mask-image: radial-gradient(80% 62% at 50% 42%, #000 15%, transparent 100%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { background-position: 80px 80px; } }

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 106%, rgba(198, 255, 61, 0.15) 0%, rgba(198, 255, 61, 0) 70%),
    linear-gradient(180deg, #000 0%, var(--bg-1) 100%);
}

.scan {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0.3) 4px
  );
}

.sweep {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(198, 255, 61, 0) 0%, rgba(198, 255, 61, 0.05) 50%, rgba(198, 255, 61, 0) 100%);
  animation: sweepDown 11s linear infinite;
}
@keyframes sweepDown {
  0% { transform: translateY(-180px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* colturi de vizor + etichete verticale pe margini */
.hud {
  position: fixed;
  inset: var(--hud);
  z-index: 12;
  pointer-events: none;
}
.hud i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--lime);
  opacity: 0.7;
}
.hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hud-side {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.34em;
  white-space: nowrap;
}
.hud-right {
  left: auto;
  right: -6px;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
}

/* custom cursor: a small square that trails with a lag */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor.is-on { opacity: 1; }
.cursor i {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid var(--lime);
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.cursor.is-hot i { transform: scale(1.9) rotate(45deg); }

/* scanteile de la click */
.spark {
  position: fixed;
  z-index: 59;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--lime);
  pointer-events: none;
}

/* ---------- 5. Bara de sus ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 calc(var(--hud) + 18px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
body.is-stuck .nav {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.nav-logo {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.nav-logo b { color: var(--lime); font-weight: 700; }
.nav-logo:hover { color: var(--text); }
/* the wordmark, when `brand.logo` is set in content.js */
/* Height commands, width follows the wordmark's 3.77:1. 20 and not the 32 the
   old tile wore: in that tile the letters stood 34 units inside 64, so 32px of
   tile bought 17px of letter. Here the letters ARE the full height, and 32
   would set them at twice the size this header was drawn around. */
.nav-logo img { display: block; width: auto; height: 20px; transition: transform 0.35s var(--ease); }
.nav-logo:hover img { transform: translateY(-1px); }

.nav-links { display: flex; gap: 28px; color: var(--text-faint); }
/* Centered on the PAGE WIDTH, not between neighbours. With `space-between` the position
   of the links depends on how wide the right-hand group is, and the right differs
   from one face of the site to another (the app also has the ETH price there). The
   result was that the same menu sat in two different places as you moved from the
   landing into the app. This way it sits in the same place everywhere.
   Only from 1320px up. The threshold was raised by the right-hand group: since it holds
   PAGER and PAPER/DOCS, it is wide enough that the page center would fall over it. Measured
   in the page: at 1200px the centered menu touches the right-hand group, at 1320 it has 61px
   of air. Below the threshold the links flow with `space-between`, which does not overlap
   niciodata. Acelasi numar in globals.css, ca cele doua bare sa comute odata. */
@media (min-width: 1320px) {
  .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
}
.nav-links a { transition: color 0.3s var(--ease); }
.nav-links a::before { content: '/ '; color: var(--lime-dim); }
.nav-links a:hover { color: var(--lime); }

/* The second level: the documents. The same letters as the middle menu, but WITHOUT
   the lime slash and dimmer, with the vertical line separating them from the button. That
   way they read at a glance as reading, not as stops on the way through the page. */
.nav-docs { display: flex; align-items: center; gap: 18px; padding-right: 18px; border-right: 1px solid var(--line-soft); }
.nav-docs a { color: var(--text-faint); transition: color 0.3s var(--ease); }
.nav-docs a:hover { color: var(--lime); }
@media (max-width: 900px) { .nav-docs { display: none; } }

/* X: the only social link in the top bar. It does NOT join the documents
   group - those are readings, this is a place where something happens - so it
   stands on its own, as a mark rather than as text, and fills in on hover like
   the primary button. */
.nav-x { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  color: var(--text-faint); border: 1px solid var(--line);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.nav-x svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.nav-x:hover { color: #05070a; background: var(--lime); border-color: var(--lime); }
/* Same cut corners as the button next to it: nothing in this bar has square corners. */
.nav-x { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }



.nav-right { display: flex; align-items: center; gap: 16px; }

.burger {
  display: none;
  width: 28px;
  height: 16px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lime);
  transition: transform 0.45s var(--ease);
}
.burger span:nth-child(1) { top: 3px; }
.burger span:nth-child(2) { top: 10px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed;
  top: 0;
  right: var(--hud);
  z-index: 29;
  min-width: 200px;
  padding: 74px 22px 20px;
  text-align: right;
  background: rgba(3, 5, 3, 0.94);
  border: 1px solid var(--edge);
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0.35s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu a {
  display: block;
  padding: 8px 0;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.menu a:hover { color: var(--lime); }

/* ---------- 6. Componente ---------- */

/* panou cu colt taiat: muchia e fundalul, interiorul e .pane (pus din JS) */
.bracket {
  position: relative;
  isolation: isolate;
  background: var(--edge);
  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 0.4s var(--ease), transform 0.4s var(--ease);
}
.bracket > .pane {
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--pane);
  clip-path: polygon(
    calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px),
    calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)
  );
}
/* the light that follows the cursor, behind the text */
.bracket::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), rgba(198, 255, 61, 0.16), transparent 68%);
  transition: opacity 0.4s var(--ease);
}
.bracket:hover { background: var(--lime); }
.bracket:hover::after { opacity: 1; }
/* the beam that runs along the top edge on hover */
.bracket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 40%;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity: 0;
  transform: translateX(-40%);
}
.bracket:hover::before { opacity: 1; animation: beam 1.4s var(--ease) infinite; }
@keyframes beam {
  from { transform: translateX(-100%); }
  to { transform: translateX(280%); }
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  background: var(--lime-line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  --cut: 12px;
  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 0.35s var(--ease), color 0.35s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #05070a;
  clip-path: polygon(
    calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px),
    calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)
  );
  transition: background 0.35s var(--ease);
}
.btn:hover { background: var(--lime); color: var(--lime); }
/* Opaque ON PURPOSE. A translucent fill here sits over the button's own
   background, which on hover is FULL lime: the interior turns lime, the text
   is lime, and the label vanishes. This is that same 10% lime tint,
   pre-mixed over #05070a. */
.btn:hover::before { background: #181f0f; }

.btn-solid { background: var(--lime); color: #05070a; }
.btn-solid::before { background: var(--lime); }
.btn-solid:hover { color: #05070a; }
.btn-solid:hover::before { background: #d9ff74; }

.btn-sm { height: 36px; padding: 0 16px; font-size: 11px; --cut: 9px; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 12px; --cut: 14px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 16px 0 13px;
  color: var(--lime);
  background: rgba(198, 255, 61, 0.09);
  border-left: 2px solid var(--lime);
  --cut: 9px;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%
  );
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: blink 1.6s steps(2) infinite;
}

.led {
  width: 6px;
  height: 6px;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: blink 1.6s steps(2) infinite;
  flex: none;
}
@keyframes blink { 50% { opacity: 0.25; } }
/* A blinking lime dot means something is running. On a card that is not
   running it would be the loudest lie on the page, so the light goes out. */
.led-off {
  background: var(--text-faint);
  box-shadow: none;
  animation: none;
}

/* section label, in square brackets */
.eyebrow {
  display: inline-block;
  color: var(--lime);
  opacity: 0.85;
}
.eyebrow::before { content: '[ '; }
.eyebrow::after { content: ' ]'; }

/* title with two offset ghosts that flicker now and then */
.glitch .line { position: relative; display: block; }
.glitch .line::before,
.glitch .line::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.glitch .line::before {
  color: var(--lime);
  transform: translate(-3px, 0);
  clip-path: inset(0 0 58% 0);
  animation: glitchA 7s steps(1) infinite;
}
.glitch .line::after {
  color: var(--hot);
  transform: translate(3px, 0);
  clip-path: inset(46% 0 0 0);
  animation: glitchB 7s steps(1) infinite;
}
@keyframes glitchA {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.85; }
  93% { opacity: 0; }
  96% { opacity: 0.7; }
  97% { opacity: 0; }
}
@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 0.7; }
  94% { opacity: 0; }
  96.5% { opacity: 0.55; }
  98% { opacity: 0; }
}

/* la hover textul urca si copia lui vine de jos */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.roll span { display: block; transition: transform 0.42s var(--ease); }
.roll .b { position: absolute; top: 100%; left: 0; width: 100%; }
.roll:hover span,
a:hover .roll span { transform: translateY(-100%); }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.scroll-text span.w {
  color: rgba(237, 242, 234, 0.15);
  transition: color 0.25s linear;
}
.scroll-text span.w.on { color: var(--text); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
}
.hero-inner {
  flex: 1;
  display: grid;
  /* The rotating title needs width so it does not wrap differently from
     o varianta la alta; panoul de preturi e o lista de cifre si suporta sa fie
     mai ingust. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.55fr);
  align-items: center;
  gap: 48px;
  padding-top: 30px;
  padding-bottom: 60px;
}
.hero h1 {
  margin: 20px 0 26px;
  /* Smaller than --fs-display, and not out of shyness. The bottom line rotates through
     four titles (hero.titleRotate), the longest being "RUNS ALGORITHMIC
     MARKET MAKING." At full size two of four break onto five lines and
     two onto four, and the height the rotator reserves leaves a full line's
     gap under the short ones. Measured in the page: around 76px all four settle
     onto the same number of lines, so the gap disappears and the hero keeps
     the three-line shape it had before the rotation started. */
  font-size: clamp(34px, 4.6vw, 76px);
}
.hero h1 .hl {
  color: var(--lime);
  text-shadow: 0 0 60px rgba(198, 255, 61, 0.3);
}
.hero-note {
  max-width: 44ch;
  color: var(--text-dim);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
/* the app row sits tight under the buy row: same family, second rank */
.hero-apps { margin-top: 12px; }

.feed { --cut: 14px; }
.feed-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-faint);
}
.feed-head b { margin-left: auto; color: var(--lime); }
.feed-list {
  height: 232px;
  overflow: hidden;
  padding: 6px 0;
}
.feed-list li {
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.feed-list li:first-child {
  color: var(--lime);
  border-left-color: var(--lime);
  background: rgba(198, 255, 61, 0.06);
}
.feed-list li.is-new { animation: feedIn 0.5s var(--ease); }
@keyframes feedIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
  color: var(--text-faint);
}
/* the countdown to the mint: it actually runs, it is not fixed text */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-faint);
}
.countdown b {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* pretul ETH, singura cifra reala din pagina; apare doar daca a venit */
.eth {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.eth.is-on { display: inline-flex; }
.eth .dot {
  width: 6px;
  height: 6px;
  background: var(--text-faint);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.eth.is-up { color: var(--lime); }
.eth.is-up .dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.eth.is-down { color: var(--hot); }
.eth.is-down .dot { background: var(--hot); box-shadow: 0 0 8px var(--hot); }

.hero-scroll { display: flex; align-items: center; gap: 10px; }
.hero-scroll i {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime));
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.25; transform: scaleX(0.3); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* ---------- 8. Banda: ticker + contoare ---------- */
.band {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(2, 3, 2, 0.72);
}
.ticker {
  overflow: hidden;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-rev { border-bottom: 0; border-top: 1px solid var(--line-soft); }
.ticker-row { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker-rev .ticker-row { animation-direction: reverse; }
.ticker-set { display: flex; align-items: center; gap: 24px; padding-right: 24px; }
.ticker span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.ticker i { color: var(--lime); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 30px;
  padding-top: 34px;
  padding-bottom: 38px;
}
/* Each figure is ruled off at the top rather than fenced on the left, so the
   rules keep lining up into rows however many columns the width allows. */
.stat { border-top: 1px solid var(--line-soft); padding-top: 15px; }
.stat-name { color: var(--lime); margin-bottom: 16px; }
.stat-value {
  display: flex;
  align-items: baseline;
  font-family: var(--mono);
  /* Sized so the longest value (ERC-6551) sits inside its column without
     shrinking the others to match it: one scale for words and figures alike. */
  font-size: clamp(28px, 3.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-value .d { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.stat-value .strip { display: block; }
.stat-value.is-live .strip { transition: transform 0.55s var(--ease); }
.stat-value .strip i { display: block; height: 1em; line-height: 1em; font-style: normal; }
.stat-value .sep { color: var(--lime-dim); }
.stat-value .unit {
  margin-left: 0.35em;
  font-size: 0.36em;
  letter-spacing: 0.14em;
  color: var(--lime);
}
/* Dim, not faint: this row exists to be understood by someone who has never
   heard of any of this, so the sentence under the figure has to be readable
   at a glance rather than sit there as texture. */
.stat-label {
  margin-top: 14px;
  color: var(--text-dim);
  max-width: 32ch;
  line-height: 1.65;
}

/* ---------- 9. Intro ---------- */
.intro { padding: 160px 0 140px; }
.intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: start;
}
.intro h2 { font-size: var(--fs-h2); max-width: 14ch; }
.intro-body { padding-top: 8px; }
.intro-body p { color: var(--text-dim); max-width: 46ch; }
.intro-body .btn { margin-top: 28px; }

/* ---------- 10. Clasele de agenti ---------- */
.classes { padding-top: 40px; }
.classes-head { max-width: 980px; padding-bottom: 56px; }
.classes-head h2 { margin-top: 18px; font-size: var(--fs-h2); }

.rail { position: relative; }
.rail-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.rail-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 0 var(--pad-x);
  will-change: transform;
}
.rail-bar {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 50px;
  height: 2px;
  background: var(--line-soft);
}
.rail-bar i {
  display: block;
  height: 100%;
  background: var(--lime);
  transform: scaleX(0.05);
  transform-origin: left;
  box-shadow: 0 0 14px rgba(198, 255, 61, 0.7);
}

.agent {
  flex: 0 0 clamp(290px, 25vw, 380px);
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  transform-style: preserve-3d;
}
.agent-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.agent-code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lime);
}
.agent-glyph svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s var(--ease), transform 0.6s var(--ease);
}
.agent:hover .agent-glyph svg { stroke: var(--lime); transform: rotate(-10deg) scale(1.06); }

.agent h3 { font-size: clamp(21px, 1.7vw, 27px); }
.agent-role {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-dim);
}
.agent-job {
  margin: 18px 0 20px;
  font-size: 15px;
  color: var(--text-dim);
}
.agent-meta {
  margin-top: auto;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 7px 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.agent-meta dt { color: var(--text-faint); padding-top: 2px; }
.agent-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--text-faint);
}

.rail-end {
  flex: 0 0 clamp(220px, 20vw, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-left: 30px;
  border-left: 1px solid var(--line-soft);
}
.rail-end span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rail-end b {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(20px, 1.8vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--lime);
}

/* ---------- 10b. Trasaturi si raritate ---------- */
.traits { padding: 130px 0 130px; }
.traits-head { max-width: 900px; margin-bottom: 54px; }
.traits-head h2 { margin: 18px 0 20px; font-size: var(--fs-h2); }
.traits-head p { color: var(--text-dim); max-width: 60ch; }

.traits-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: start;
}

/* cardul agentului rolat */
.roll-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 24px 24px;
}
.roll-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  color: var(--text-faint);
}
.roll-top b { color: var(--lime); font-size: 13px; letter-spacing: 0.14em; }

.roll-glyph {
  margin: 24px 0 18px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  background: rgba(198, 255, 61, 0.04);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.roll-glyph svg {
  width: 68px;
  height: 68px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roll-card.is-rolling .roll-glyph svg { animation: rollSpin 0.7s linear; }
@keyframes rollSpin { to { transform: rotate(360deg); } }

.roll-card h3 { font-size: clamp(22px, 1.9vw, 30px); }

.roll-tier {
  margin-top: 10px;
  padding: 5px 14px;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: #05070a;
  background: var(--text-faint);
}
.roll-tier[data-tier-name="UNCOMMON"] { background: #7fb46a; }
.roll-tier[data-tier-name="RARE"] { background: var(--lime); }
.roll-tier[data-tier-name="EPIC"] { background: #7cf0ff; }
.roll-tier[data-tier-name="MYTHIC"] {
  background: linear-gradient(90deg, var(--lime), var(--hot));
  color: #05070a;
}
.roll-card.is-rolling .roll-tier { animation: blink 0.2s steps(2) infinite; }

.roll-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 26px;
  justify-content: center;
  margin: 22px 0 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
  color: var(--text-faint);
}
.roll-meta dd {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}
.roll-note {
  margin-top: 14px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-family: var(--mono);
}

/* valorile rolate */
.roll-side { display: grid; gap: 18px; }
.tstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.tstat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--lime-dim);
}
.tstat-head b {
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.segs {
  display: flex;
  gap: 3px;
  margin: 10px 0 8px;
}
.segs i {
  flex: 1;
  height: 12px;
  background: rgba(237, 242, 234, 0.09);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.segs i.on { background: var(--lime); }
.segs i.tip { box-shadow: 0 0 12px var(--lime); }
.tstat-desc { font-size: 13px; color: var(--text-dim); }

/* scara de raritate */
.ladder { padding: 20px 22px 22px; --cut: 12px; }
.ladder h4 { color: var(--text-faint); margin-bottom: 16px; }
.ladder-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
  color: var(--text-faint);
  transition: color 0.3s var(--ease);
}
.ladder-row i {
  display: block;
  height: 6px;
  background: rgba(237, 242, 234, 0.07);
}
.ladder-row i b {
  display: block;
  height: 100%;
  background: rgba(198, 255, 61, 0.34);
  transition: background 0.3s var(--ease);
}
.ladder-row .val { text-align: right; }
.ladder-row.is-on { color: var(--lime); }
.ladder-row.is-on i b { background: var(--lime); box-shadow: 0 0 14px rgba(198, 255, 61, 0.6); }

/* ---------- 11. Economic loop ---------- */
.loop { padding: 160px 0 150px; }
.loop-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: center;
}
.loop-copy h2 { margin: 18px 0 22px; font-size: var(--fs-h2); }
.loop-copy p { color: var(--text-dim); max-width: 44ch; }

.loop-ring {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: 1;
}

/* blocul din mijloc: fara el cercul e o gaura mare si goala */
.loop-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  text-align: center;
  z-index: 2;
}
.loop-core span { display: block; color: var(--text-faint); font-size: 10px; }
.loop-core b {
  display: block;
  margin: 8px 0 6px;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 0 40px rgba(198, 255, 61, 0.35);
}
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* cadran: gradatii pe exterior */
.ring-ticks line { stroke: rgba(237, 242, 234, 0.16); stroke-width: 0.3; }
.ring-ticks .t-long { stroke: rgba(198, 255, 61, 0.4); stroke-width: 0.5; }

/* hexagonul inscris, acelasi semn ca marca */
.ring-hex {
  fill: rgba(198, 255, 61, 0.022);
  stroke: rgba(198, 255, 61, 0.22);
  stroke-width: 0.35;
}

.ring-track { fill: none; stroke: rgba(237, 242, 234, 0.16); stroke-width: 0.4; }
.ring-dash {
  fill: none;
  stroke: var(--lime);
  stroke-width: 0.4;
  stroke-dasharray: 1.5 7;
  opacity: 0.4;
  animation: ringSpin 34s linear infinite;
  transform-origin: 50px 50px;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* the lit segment that jumps to the active node */
.ring-arc {
  stroke: var(--lime);
  stroke-width: 1.2;
  stroke-linecap: round;
  transform-origin: 50px 50px;
  transition: transform 0.55s var(--ease);
  filter: drop-shadow(0 0 3px rgba(198, 255, 61, 0.8));
}

/* marcajele de pe cerc, in dreptul fiecarui nod */
.ring-mark {
  fill: rgba(237, 242, 234, 0.4);
  transition: fill 0.4s var(--ease), filter 0.4s var(--ease);
}
.ring-mark.is-on { fill: var(--lime); filter: drop-shadow(0 0 3px var(--lime)); }

/* the orbiting dot and its tail */
.ring-dot { fill: #f4ffe4; filter: drop-shadow(0 0 4px rgba(198, 255, 61, 1)); }
.ring-ghost { fill: var(--lime); }
.ring-ghost.g1 { opacity: 0.45; }
.ring-ghost.g2 { opacity: 0.18; }

/* maturarea de radar din interiorul cercului */
.loop-sweep {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(198, 255, 61, 0.2) 0deg,
    rgba(198, 255, 61, 0.06) 34deg,
    rgba(198, 255, 61, 0) 80deg,
    rgba(198, 255, 61, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 44%, #000 100%);
  mask-image: radial-gradient(closest-side, transparent 38%, #000 44%, #000 100%);
  animation: ringSpin 9s linear infinite;
}

.loop-nodes { position: absolute; inset: 0; }
.loop-node {
  position: absolute;
  width: 196px;
  padding: 8px 0;
  transform: translate(-50%, -50%);
  text-align: center;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.94) 55%, rgba(0, 0, 0, 0) 100%);
}
.loop-node .n {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  transition: color 0.4s var(--ease);
}
.loop-node .l {
  display: block;
  margin: 5px 0 3px;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.loop-node .s {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: none;
}
.loop-node.is-on .l { color: var(--lime); text-shadow: 0 0 24px rgba(198, 255, 61, 0.6); }
.loop-node.is-on .n { color: var(--lime); }

.loop-node[data-node="0"] { left: 50%; top: 12%; }
.loop-node[data-node="1"] { left: 88%; top: 31%; }
.loop-node[data-node="2"] { left: 88%; top: 69%; }
.loop-node[data-node="3"] { left: 50%; top: 88%; }
.loop-node[data-node="4"] { left: 12%; top: 69%; }
.loop-node[data-node="5"] { left: 12%; top: 31%; }

/* ---------- 12. Cum functioneaza ---------- */
.how { padding: 40px 0 130px; }
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  position: relative;
}
.how-grid::before {
  content: '';
  position: absolute;
  top: -60px;
  bottom: -60px;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line-soft) 0 6px, transparent 6px 12px);
}
.how-left {
  position: sticky;
  top: 50%;
  align-self: start;
  transform: translateY(-50%);
  padding-right: 50px;
}
.how-left h2 { margin: 18px 0 20px; font-size: var(--fs-h2); }
.how-left p { color: var(--text-dim); max-width: 32ch; margin-bottom: 30px; }
.how-steps { padding-left: 50px; }
.step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 430px;
  opacity: 0.2;
  transition: opacity 0.5s var(--ease);
}
.step.is-active { opacity: 1; }
.step-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--lime);
  margin-bottom: 12px;
}
.step h3 { font-size: clamp(28px, 2.9vw, 44px); margin-bottom: 12px; }
.step p { color: var(--text-dim); }

/* ---------- 13. Platforma ---------- */
.platform { padding: 50px 0 140px; }
.platform-head { max-width: 900px; margin-bottom: 50px; }
.platform-head h2 { margin-top: 18px; font-size: var(--fs-h2); }
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.term-bar .dots { display: flex; gap: 5px; }
.term-bar .dots i { width: 6px; height: 6px; background: rgba(237, 242, 234, 0.18); }
.term-bar .dots i:first-child { background: var(--lime); }

.term-body {
  padding: 18px 16px 22px;
  min-height: 172px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--lime);
  line-height: 1.9;
}
.term-body .tline { display: block; white-space: pre; overflow: hidden; }
.term-body .tline.is-typing::after { content: '_'; animation: caret 0.7s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.term-foot { padding: 18px 16px 20px; border-top: 1px solid var(--line-soft); }
.term-foot h3 { font-size: 19px; margin-bottom: 7px; }
.term-foot p { font-size: 14px; color: var(--text-dim); }

/* ---------- 14. Chemare la actiune ---------- */
.cta { padding: 120px 0 140px; text-align: center; }
.cta .pill { margin-bottom: 40px; }
.cta h2 { font-size: clamp(38px, 7.4vw, 122px); }
.cta h2 .hl { color: var(--lime); text-shadow: 0 0 60px rgba(198, 255, 61, 0.32); }
.cta-sub {
  max-width: 40ch;
  margin: 28px auto 34px;
  color: var(--text-dim);
}

/* ---------- 15. Footer ---------- */
.footer {
  padding: 80px 0 26px;
  border-top: 1px solid var(--line-soft);
  background: rgba(1, 2, 1, 0.7);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}
/* The footer of the documents (/paper, /docs) has a single column, not three. Laid
   out on one row, so it does not look like an orphan column left from a grid. */
.footer-top-slim { grid-template-columns: minmax(0, 1fr); }
.footer-top-slim .footer-col > div { display: flex; flex-wrap: wrap; gap: 2px 28px; }
.footer-top-slim .footer-col a { display: inline-block; }

.footer-mail > span { display: block; color: var(--text-faint); }
.footer-mail a {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: clamp(14px, 1.25vw, 19px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.footer-mail a:hover { color: var(--lime); }
.footer-note { margin-top: 16px; max-width: 34ch; font-size: 14px; color: var(--text-faint); }
.footer-col h4 { font-weight: 500; color: var(--text-faint); margin-bottom: 14px; }
.footer-col a {
  display: block;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--lime); }

/* what does not exist yet: a SOON label, not a dead link */
.link-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: default;
}
.link-soon i {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.18em;
  padding: 2px 5px;
  color: var(--lime);
  background: rgba(198, 255, 61, 0.1);
}

/* adresa contractului */
/* Footnote size across the full width, which is what turns eight lines of body
   copy into four lines of small print. Faint on purpose: it has to be there and
   it has to be readable, but it is not competing for anyone's attention. */
.footer-legal {
  margin-top: 40px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
}

.contract {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px var(--pad-x);
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
}
.contract .c-label { letter-spacing: 0.24em; }
.contract .c-chain {
  padding: 3px 7px;
  color: var(--lime);
  background: rgba(198, 255, 61, 0.1);
}
.contract .c-soon { color: var(--lime); opacity: 0.7; }
/* The stand-in address: same slot, same rhythm, visibly not a live address and
   with no copy button beside it. */
.contract .c-addr.is-empty {
  color: var(--text-faint);
  opacity: 0.55;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* The hero's copy of the row sits inside the column, not across the page, so
   it drops the full-bleed padding and the rule above it. */
.hero-coin {
  margin-top: 18px;
  padding: 0;
  border-top: 0;
}

/* A button whose destination does not exist yet. It keeps its shape in the row
   so the hero does not reflow when the link arrives, but it does not pretend to
   be pressable: no pointer, no hover, no magnet. */
.btn.is-waiting {
  cursor: default;
  opacity: 0.45;
}
.contract .c-addr { color: var(--text); letter-spacing: 0.08em; }
.contract .c-addr:hover { color: var(--lime); }
.contract .c-copy {
  border: 1px solid var(--line);
  background: none;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.contract .c-copy:hover,
.contract .c-copy.is-done { border-color: var(--lime); color: var(--lime); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
}
.footer-bottom span { display: flex; align-items: center; gap: 8px; }

/* ---------- 16. Early-access drawer ---------- */
.drawer-bg {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.drawer-bg.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(430px, 100%);
  padding: 26px 26px 0;
  overflow-y: auto;
  background: linear-gradient(200deg, rgba(198, 255, 61, 0.08), rgba(2, 3, 2, 0.99) 42%);
  border-left: 1px solid var(--lime-line);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; }
.drawer h2 { font-size: 36px; }
.drawer-head p { margin-top: 10px; color: var(--lime); }
.drawer-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.drawer-close:hover { border-color: var(--lime); color: var(--lime); }
.drawer-mail {
  display: block;
  margin: 32px 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.drawer-mail:hover { color: var(--lime); }
.field { border-top: 1px solid var(--line-soft); padding: 12px 0 10px; }
.field label { display: block; color: var(--text-faint); margin-bottom: 3px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-body);
  padding: 4px 0;
}
.field input:focus, .field textarea:focus, .field select:focus { color: var(--lime); }
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field select option { background: #0a0c0a; color: var(--text); }
.drawer-submit {
  position: sticky;
  bottom: 0;
  width: calc(100% + 52px);
  margin: 18px 0 0 -26px;
  padding: 20px;
  border: 0;
  background: var(--lime);
  color: #05070a;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.drawer-submit:hover { background: #d9ff74; }
.drawer-submit:disabled { opacity: 0.6; cursor: wait; }
.drawer-msg { margin: 12px 0 16px; color: var(--lime); min-height: 18px; }
.drawer-msg.is-err { color: var(--hot); }

/* quantity buttons */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.chip span:hover { border-color: var(--lime-line); color: var(--text); }
.chip input:checked + span {
  border-color: var(--lime);
  background: rgba(198, 255, 61, 0.12);
  color: var(--lime);
}

/* ecranul de dupa trimitere */
.drawer-done { display: none; padding: 40px 0 0; }
.drawer-done.is-on { display: block; }
.drawer-done h3 { font-size: 30px; margin-bottom: 12px; }
.drawer-done p { color: var(--text-dim); }
.done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  border: 1px solid var(--lime);
  background: rgba(198, 255, 61, 0.08);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.done-mark svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 17. Responsive ---------- */
@media (max-width: 1200px) {
  :root { --pad-x: 44px; }
  .hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .loop-grid, .intro-inner { gap: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root {
    --pad-x: 20px;
    --hud: 8px;
    --nav-h: 64px;
    --cut: 12px;
    /* la 390px, "THAT CLOCK IN" trebuie sa incapa pe un rand */
    --fs-display: clamp(30px, 9.2vw, 46px);
  }

  /* bara de sus la 390px: logo + buton + burger, fara sa se calce */
  .nav { gap: 10px; padding: 0 calc(var(--hud) + 8px); }
  .nav-logo { font-size: 11px; letter-spacing: 0.14em; }
  .nav-logo img { width: auto; height: 17px; }
  .btn-sm { height: 32px; padding: 0 11px; font-size: 9.5px; letter-spacing: 0.1em; }

  .cursor, .hud-side { display: none; }
  .nav-links { display: none; }
  .burger { display: block; }

  .hero { padding-top: calc(var(--nav-h) + 12px); }
  /* In a single column the title has the full width, so it no longer needs the
     desktop shrink: it returns to the mobile size, already tuned
     above. What remains of the rotation is the reserved height, which is recomputed
     on every width change. */
  .hero h1 { font-size: var(--fs-display); }
  .hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    padding-bottom: 40px;
  }
  .feed-list { height: 160px; }

  /* the hero buttons at full width: they fit and are easier to tap */
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-meta { flex-direction: column; gap: 6px; padding-bottom: 22px; }

  .stats { grid-template-columns: 1fr; gap: 0; padding-bottom: 30px; }
  .stat { padding: 18px 0 20px; }
  .stat:first-child { border-top: 0; padding-top: 4px; }
  .stat-name { margin-bottom: 12px; }
  .stat-label { margin-top: 10px; max-width: none; }

  .intro { padding: 90px 0 80px; }
  .intro-inner { grid-template-columns: 1fr; gap: 24px; }
  .intro h2 { max-width: none; }

  .classes { padding-top: 20px; }
  .classes-head { padding-bottom: 30px; }
  .rail { height: auto !important; }
  .rail-pin { position: static; height: auto; overflow: visible; }
  .rail-track {
    flex-direction: column;
    gap: 12px;
    padding: 0 var(--pad-x);
    transform: none !important;
  }
  .agent { flex: none; }
  .rail-end {
    flex: none;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .rail-bar { display: none; }

  .traits { padding: 70px 0 60px; }
  .traits-head { margin-bottom: 30px; }
  .traits-grid { grid-template-columns: 1fr; gap: 16px; }
  .tstats { grid-template-columns: 1fr; gap: 18px; }
  .ladder-row { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 10px; }

  .loop { padding: 80px 0 70px; }
  .loop-grid { grid-template-columns: 1fr; gap: 36px; }
  .loop-ring { aspect-ratio: auto; max-width: none; }
  .loop-svg, .loop-sweep { display: none; }
  /* with no circle, the core becomes a normal block above the list */
  .loop-core {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--edge);
    background: var(--pane);
  }
  .loop-core b { font-size: clamp(26px, 8vw, 34px); }
  .loop-nodes {
    position: static;
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--line-soft);
  }
  .loop-node {
    position: static;
    width: auto;
    transform: none;
    background: none;
    text-align: left;
    padding: 12px 0 12px 20px;
    border-left: 2px solid transparent;
    margin-left: -1px;
  }
  .loop-node.is-on { border-left-color: var(--lime); }

  .how { padding: 20px 0 60px; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-grid::before { display: none; }
  .how-left { position: static; transform: none; padding-right: 0; }
  .how-steps { padding-left: 0; margin-top: 44px; }
  .step { min-height: auto; margin-bottom: 38px; opacity: 1; }

  .platform { padding: 24px 0 70px; }
  .platform-grid { grid-template-columns: 1fr; }

  .cta { padding: 70px 0 80px; }
  .cta .pill { margin-bottom: 26px; }

  .footer { padding: 60px 0 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sweep, .scan, .cursor { display: none; }
  .reveal { opacity: 1; transform: none; }
}