/* 03-final — the opening, from the Saga: the preloader (the electricity meter) and the hero (the 2.5D title art,
   the name, the hook, Buy, Read the story, the CA pill). The Room's top bar sits above it. Everything here is
   scoped to .boot or .hero, so the Room's own components (its .plane, .chip, .bubble) stay untouched.
   Hover lifts use the individual `translate` property: the entrances animate `transform`. */

/* ---------- Behind the preloader ----------
   Only the preloader is laid out at first, so the frames it plays in stay light: main.js shows the top bar and the
   hero in tasks of their own long before the fuse blows, and the room and the sections one task each after it (a
   skipped preloader too: no single task lays out the whole page). The CSS shows them anyway if the scripts are late.
   While they wait they keep a plausible height, so a scroll that comes first still goes somewhere. */
.js:not(.no-boot):not(.boot-skip):not(.bar-on) .topbar,
.js:not(.no-boot):not(.boot-skip):not(.hero-on) .hero { content-visibility: hidden; visibility: hidden; animation: shown 0s 2.26s forwards; }
.js:not(.no-boot) :is(main > :not(.hero), .footer):not(.is-shown) { content-visibility: hidden; contain-intrinsic-block-size: auto 800px; visibility: hidden; animation: shown 0s 8s forwards; }
/* Invisible as well while they wait: Chrome counts a box shown after content-visibility: hidden as a layout shift
   from the top of the screen (CLS 1 on the Saga's footer), not a box that was never visible. */
@keyframes shown { to { content-visibility: visible; visibility: visible; } }

/* ---------- Preloader: a dark room, a swinging bare bulb, the meter counting the bill ----------
   The whole sequence is CSS, timed from the first paint and on transform / opacity only, so it keeps playing on the
   compositor while the page boots behind it: the meter swings in (0 s), its digits roll 0000 → 1280 (.15–1.2 s), the
   reading flickers out and NOT PROFITABLE slams in (1.22–1.72 s), the meter shakes, the cable sparks, the fuse blows
   (one white frame at 2.02 s, black at 2.1 s) and the room fades on the hero (2.26–2.48 s). hero.js only skips it and
   clears it; html.boot-skip (any input, even before the scripts) removes it at once. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #1d1416, #060507 72%);
  cursor: pointer;
}
.js:not(.no-boot) .boot { display: grid; animation: boot-out 0.22s 2.26s ease-in forwards; }
.boot.is-gone, .boot-skip .boot { display: none !important; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
/* The fuse: one white frame, then black until the room fades out. */
.boot::before, .boot::after { content: ""; position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none; }
.boot::before { background: #fffdf3; animation: boot-flash 0.08s 2.02s steps(1); }
.boot::after { background: #000; animation: boot-dark 0.01s 2.1s steps(1, start) forwards; }
@keyframes boot-flash { 0%, 100% { opacity: 1; } }
@keyframes boot-dark { to { opacity: 1; } }
.boot__lamp {
  position: absolute;
  left: 50%;
  top: 0;
  width: 60px;
  height: min(26vh, 220px);
  margin-left: -30px;
  transform-origin: 50% 0;
  animation: boot-swing 2.6s ease-in-out infinite alternate;
}
@keyframes boot-swing { from { rotate: -9deg; } to { rotate: 9deg; } }
.boot__bulb { position: absolute; left: 0; bottom: 0; width: 60px; height: 150px; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 214, 120, 0.9)); animation: bulb-flicker 0.32s 1.22s steps(2) 2; }
@keyframes bulb-flicker { 50% { opacity: 0.25; } }
.boot__light {
  position: absolute;
  left: 50%;
  bottom: -46vh;
  width: 110vh;
  height: 60vh;
  margin-left: -55vh;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255, 214, 140, 0.2), rgba(253, 143, 82, 0.05) 55%, transparent 72%);
  pointer-events: none;
}
.boot__meter {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.6vh;
  width: min(74vh, 86vw);
  margin-top: 12vh;
  padding: 4vh 3.2vh 3vh;
  border: 6px solid #000;
  border-radius: 24px;
  background: linear-gradient(160deg, #d7dbe0, #9aa0a8 60%, #7d838c);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.35), 14px 14px 0 #000;
  animation: meter-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) backwards, meter-shake 0.32s 1.6s linear;
}
@keyframes meter-in { from { opacity: 0; transform: translateY(40px) scale(0.9); } }
@keyframes meter-shake {
  0%, 25%, 50%, 75%, 100% { transform: translateX(0); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: translateX(5px); }
}
.boot__screw { position: absolute; width: 16px; height: 16px; border: 2.5px solid #000; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8c9097); }
.boot__screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #000; transform: rotate(-30deg); }
.boot__screw--tl { left: 14px; top: 14px; }
.boot__screw--tr { right: 14px; top: 14px; }
.boot__screw--bl { left: 14px; bottom: 14px; }
.boot__screw--br { right: 14px; bottom: 14px; }
.boot__lcd {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(21vh, 23vw);
  overflow: hidden;
  padding: 2vh;
  border: 6px solid #000;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #2a0909, #120303);
  box-shadow: inset 0 0 30px rgba(255, 30, 30, 0.25);
}
.boot__read, .boot__verdict { grid-area: 1 / 1; }
.boot__read { display: flex; align-items: center; gap: 1.4vh; animation: read-out 0.34s 1.2s linear forwards; }
@keyframes read-out {
  0%, 24%, 48%, 72%, 88% { opacity: 1; }
  12%, 36%, 60% { opacity: 0.3; }
  100% { opacity: 0; }
}
/* The digits: one strip of seven-segment glyphs per digit (0–9, then 0 again), rolled with steps() so the reading
   counts up linearly in 1.05 s and lands on the bill. --i1…--i4 are the turns of each strip (1280 → .128, 1.28,
   12.8, 128), with a hair more so steps() never rounds down; hero.js rewrites them if the story bill changes. */
.boot__digits { --i1: 0.12801; --i2: 1.2801; --i3: 12.801; --i4: 128; display: flex; align-items: center; height: min(15vh, 16vw); filter: drop-shadow(0 0 9px rgba(255, 59, 59, 0.85)); }
.boot__digit { display: block; height: 100%; aspect-ratio: 80 / 110; overflow: hidden; }
.boot__strip { display: block; width: 100%; height: auto; overflow: visible; animation: roll 1s 0.15s steps(10, end) both; }
.boot__digit--1 .boot__strip { animation-duration: calc(1.05s / var(--i1)); animation-iteration-count: var(--i1); }
.boot__digit--2 .boot__strip { animation-duration: calc(1.05s / var(--i2)); animation-iteration-count: var(--i2); }
.boot__digit--3 .boot__strip { animation-duration: calc(1.05s / var(--i3)); animation-iteration-count: var(--i3); }
.boot__digit--4 .boot__strip { animation-duration: calc(1.05s / var(--i4)); animation-iteration-count: var(--i4); }
@keyframes roll { to { transform: translateY(-90.9091%); } }
.seg__s { fill: rgba(255, 59, 59, 0.1); }
.seg__s.on { fill: #ff3b3b; }
.boot__unit { font: 400 min(10vh, 11vw)/1 var(--ff-display); color: var(--red); text-shadow: 0 0 10px rgba(255, 59, 59, 0.8); }
.boot__verdict {
  margin: 0;
  color: var(--red);
  font: 400 min(9vh, 10vw)/0.95 var(--ff-pixel);
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 59, 59, 0.9);
  text-transform: uppercase;
  opacity: 0;
  animation: verdict-in 0.2s 1.52s cubic-bezier(0.3, 2.2, 0.5, 1) forwards;
}
@keyframes verdict-in { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
.boot__label { margin: 0; font: 900 min(3vh, 4.4vw)/1 var(--ff-body); letter-spacing: 0.24em; text-transform: uppercase; color: #15161a; }
.boot__cable { position: absolute; left: 50%; top: 100%; width: 18px; height: 50vh; margin-left: -9px; border: 4px solid #000; border-top: 0; background: #1d1d22; }
.boot__spark { position: absolute; left: 50%; top: 6px; width: 90px; height: 90px; margin-left: -45px; color: #ffd84d; opacity: 0; animation: spark 0.28s 1.74s ease-out; }
@keyframes spark {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  50% { opacity: 1; transform: scale(1.25) rotate(0deg); }
}
.boot__skip { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; text-align: center; color: #a29dac; font: 600 13px/1.2 var(--ff-body); }

/* ---------- The hero ---------- */
.hero {
  /* the first screen fits: hero.js steps the name, the hook and the payoff down until the column fits the screen */
  --fit: 1;
  position: relative;
  min-height: max(660px, 100vh);
  min-height: max(660px, 100svh);
  overflow: hidden;
  border-bottom: 4px solid #000;
  background: var(--night);
}
.hero__art { position: absolute; left: 0; right: 0; top: var(--topbar-h); bottom: 0; overflow: hidden; container-type: size; }
.hero__shade {
  position: absolute;
  inset: var(--topbar-h) 0 0 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.8) 30%, rgba(8, 8, 12, 0.2) 52%, rgba(8, 8, 12, 0) 64%),
    linear-gradient(0deg, rgba(8, 8, 12, 0.8), rgba(8, 8, 12, 0) 26%);
}
.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 1.7vh, 20px);
  width: min(660px, 50vw);
  min-height: max(660px, 100svh);
  padding: calc(var(--topbar-h) + 28px) 0 64px clamp(20px, 5vw, 84px);
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px 5px 8px;
  border: 2.5px solid #000;
  border-radius: 999px;
  background: #0d0d12;
  color: var(--wojak);
  font: 700 13px/1.2 var(--ff-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
}
.hero__chip-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  border-radius: 50%;
  background: linear-gradient(135deg, #14f195, #9945ff);
}
.neon {
  position: relative;
  display: grid;
  justify-items: start;
  margin: 0;
  font: 400 calc(clamp(58px, min(6.8vw, 12vh), 112px) * var(--fit))/0.84 var(--ff-brand);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.neon__a {
  color: #fffaf0;
  text-shadow: 0 0 2px #fff, 0 0 8px #ffe2b8, 0 0 20px var(--btc), 0 0 44px var(--beanie), 0 0 90px rgba(252, 92, 4, 0.6);
}
.neon__b {
  margin-left: 0.32em;
  color: #ffe8a0;
  text-shadow: 0 0 2px #fff6cf, 0 0 10px var(--amber), 0 0 26px var(--btc), 0 0 56px var(--beanie), 0 0 100px rgba(252, 92, 4, 0.55);
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
.neon__crown {
  position: absolute;
  right: -0.62em;
  top: 0.62em;
  width: 0.62em;
  color: #ffd56b;
  filter: drop-shadow(0 0 6px var(--btc)) drop-shadow(0 0 16px var(--beanie));
  transform: rotate(14deg);
}
.neon__crown svg { width: 100%; height: auto; }
.hero__ticker { margin: -4px 0 0; font-size: clamp(30px, 3vw, 46px); }
.sticker {
  display: inline-block;
  padding: 0.12em 0.55em;
  border: 3px solid #000;
  border-radius: 10px;
  background: var(--btc);
  color: #000;
  font: 400 1em/1.1 var(--ff-brand);
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px #fff, 6px 6px 0 4px #000;
  transform: rotate(-3deg);
}
/* The hero lights up as the preloader's fuse blows: CSS too, so it never waits for the page's scripts. Its
   animations start when the hero is revealed, so --fuse (set on the hero by hero.js then) is the time left until
   the fuse; 0 when the CSS reveals the hero at the fuse itself. Without the preloader (skipped, ?skipintro, a link
   into the page, reduced motion) everything is simply on. */
.neon__a { animation: neon-buzz 9s 3s infinite; }
.neon__b { animation: neon-buzz 11s 5s infinite; }
.js:not(.no-boot):not(.boot-skip) .hero { --f: var(--fuse, 0s); }
.js:not(.no-boot):not(.boot-skip) .neon__a { animation: neon-on 1.2s calc(var(--f) + 0.04s) steps(1) both, neon-buzz 9s calc(var(--f) + 3.24s) infinite; }
.js:not(.no-boot):not(.boot-skip) .neon__b { animation: neon-on 1.2s calc(var(--f) + 0.22s) steps(1) both, neon-buzz 11s calc(var(--f) + 5.24s) infinite; }
.js:not(.no-boot):not(.boot-skip) .neon__crown { animation: neon-on 1s calc(var(--f) + 0.44s) steps(1) both; }
.js:not(.no-boot):not(.boot-skip) .hero__ctas > * { animation: hero-in 0.38s calc(var(--f) - 0.06s) cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.js:not(.no-boot):not(.boot-skip) .hero__ctas > :nth-child(2) { animation-delay: calc(var(--f) + 0.02s); }
.js:not(.no-boot):not(.boot-skip) :is(.hero .ca, .hero .socials li) { --hy: 16px; animation: hero-in 0.34s calc(var(--f) + 0.08s) ease-out backwards; }
.js:not(.no-boot):not(.boot-skip) .hero .socials li:nth-child(2) { animation-delay: calc(var(--f) + 0.13s); }
.js:not(.no-boot):not(.boot-skip) .hero .socials li:nth-child(3) { animation-delay: calc(var(--f) + 0.18s); }
.js:not(.no-boot):not(.boot-skip) .hero__ticker .sticker { animation: sticker-in 0.4s calc(var(--f) + 0.04s) cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.js:not(.no-boot):not(.boot-skip) .hero__bubble { animation: bubble-in 0.45s calc(var(--f) + 1.34s) cubic-bezier(0.2, 1.7, 0.4, 1) backwards; }
/* the payoff lands as the hook finishes typing in: the punchline after the joke */
.js:not(.no-boot):not(.boot-skip) .payoff--hero { --hy: 18px; animation: hero-in 0.4s calc(var(--f) + 1.7s) cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
/* once it is over (hero.js), the bubble the claim solver hides and shows again on a resize just appears */
.js.hero-settled:not(.no-boot) .hero__bubble { animation: none; }
@keyframes hero-in { from { opacity: 0; transform: translateY(var(--hy, 26px)); } }
@keyframes sticker-in { from { opacity: 0; transform: scale(2.2) rotate(-30deg); } }
@keyframes bubble-in { from { opacity: 0; transform: scale(0.4) rotate(-16deg); } }
@keyframes neon-on {
  0% { opacity: 0.1; }
  8% { opacity: 1; }
  13% { opacity: 0.2; }
  24% { opacity: 1; }
  33% { opacity: 0.35; }
  40%, 100% { opacity: 1; }
}
@keyframes neon-buzz {
  0%, 95%, 100% { opacity: 1; }
  96.5% { opacity: 0.55; }
}
.hook { display: grid; gap: 2px; max-width: 30em; }
.hook__l {
  margin: 0;
  font: 900 calc(clamp(20px, min(2.05vw, 3.6vh), 33px) * var(--fit))/1.14 var(--ff-body);
  color: #fff;
  -webkit-text-stroke: 0.17em #000;
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 #000;
  text-wrap: balance;
}
.hook .red { color: var(--red); }
.hook .green { color: var(--green); }
.hook .btc { color: var(--btc); }
.hook .w { display: inline-block; }
.hook .ph { white-space: nowrap; }
/* The payoff of his story (the client's emphasis): what holding $RTC got him, then how the rewards are paid, never one
   without the other. In the hero it is the hook's last beat, at every size, in the hook's own type a size down, with
   the note on a dark strip that reads over the art. Right under the hero the same story sits on a receipt, with what
   mining got him above it (.payoff-band), the preview of the two papers of "Mining vs holding $RTC". */
.payoff { display: grid; justify-items: start; }
.payoff__row { display: flex; align-items: flex-start; gap: 0.45em; }
.payoff__row p { margin: 0; }
.payoff__mark { flex: none; width: 1.2em; height: 1.2em; padding: 0.17em; border: 2px solid #000; border-radius: 50%; background: var(--red); color: #000; stroke-width: 3.6; }
.payoff__row--win .payoff__mark { background: var(--green); }
.payoff__note { margin: 0; font: 600 14px/1.35 var(--ff-body); }
.payoff--hero { gap: 7px; margin-top: -4px; }
.payoff--hero .payoff__row {
  color: #fff;
  font: 900 calc(clamp(16px, 1.5vw, 24px) * var(--fit))/1.2 var(--ff-body);
  -webkit-text-stroke: 0.17em #000;
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 #000;
  text-wrap: balance;
}
.payoff--hero .red { color: var(--red); }
.payoff--hero :is(.green, .btc) { white-space: nowrap; }
.payoff--hero .green { color: var(--green); }
.payoff--hero .btc { color: var(--btc); }
.payoff--hero .payoff__note { padding: 4px 10px 5px; border: 2px solid #000; border-radius: 8px; background: rgba(11, 11, 16, 0.9); color: #e6e0d6; font-size: 13.5px; }
/* under the hero: the room's wall (its top colour and its dots, so the hero's black border is the only edge between
   them) and the receipt's paper, in line with the room's head below it (room.css: its --col, and in the side layout
   its --S and --gut) */
.payoff-band {
  padding: 26px 16px 6px;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 1.6px) 0 0 / 7px 7px, #19181e;
}
.payoff--paper {
  gap: 7px;
  width: min(100%, 640px);
  margin-inline: auto;
  padding: 14px 18px 26px;
  border: 2px solid #000;
  background: #fbf8f0;
  color: #1d1a16;
  filter: drop-shadow(5px 5px 0 #000);
  /* the till receipt's torn edge (sections.css .vs__paper) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 95% 100%, 90% calc(100% - 9px), 85% 100%, 80% calc(100% - 9px), 75% 100%, 70% calc(100% - 9px), 65% 100%, 60% calc(100% - 9px), 55% 100%, 50% calc(100% - 9px), 45% 100%, 40% calc(100% - 9px), 35% 100%, 30% calc(100% - 9px), 25% 100%, 20% calc(100% - 9px), 15% 100%, 10% calc(100% - 9px), 5% 100%, 0 calc(100% - 9px));
}
.payoff--paper .payoff__row { font: 700 17px/1.35 var(--ff-body); }
.payoff--paper .red { color: #b3261e; }
.payoff--paper .green { color: #0b7a34; }
.payoff--paper .btc { color: #b04103; }
.payoff--paper .payoff__note { margin-top: 3px; padding-top: 8px; border-top: 2px dashed #8a8170; color: #4a3d2c; }
@media (min-aspect-ratio: 5/4) and (min-width: 760px) and (min-height: 600px) {
  .payoff-band {
    --S: min(calc(100svh - var(--topbar-h)), calc(100vw - clamp(440px, 38vw, 580px)));
    padding-left: max(clamp(18px, 2.6vw, 52px), calc((100% - var(--S) - 600px) / 2));
  }
  .payoff-band .payoff { width: min(100%, 600px); margin-inline: 0; }
}
.hero__bottom { display: grid; justify-items: start; gap: clamp(12px, 1.8vh, 18px); }
/* the payoff belongs to the hook; the buttons start a group of their own */
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.hero__ctas .btn { min-height: 60px; padding: 8px 26px 6px; font-size: 27px; transition: translate 0.18s var(--ease-pop), box-shadow 0.18s, background-color 0.2s; }
.hero__ctas .btn:hover { transform: none; translate: -2px -2px; }
.hero__ctas .btn:active { transform: none; translate: 2px 2px; }
.hero__ctas .btn .ico { width: 26px; height: 26px; }
/* Read the story: the album, from Act I, with how long it reads */
.btn--story { background: #101016; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22), 4px 4px 0 #000; }
.btn--story:hover { background: #1d1c23; }
.btn--story .ico { color: var(--green); }
.btn__stack { display: grid; gap: 3px; text-align: left; }
.btn__stack small { font: 600 12px/1.1 var(--ff-body); letter-spacing: 0; opacity: 0.8; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 16px 4px 12px;
  border: 3px solid #000;
  border-radius: 999px;
  background: #14131a;
  color: var(--wojak);
  font: 700 14px/1 var(--ff-body);
  text-decoration: none;
  box-shadow: 3px 3px 0 #000;
  transition: translate 0.14s var(--ease-pop);
}
.social .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.social--x { justify-content: center; width: 44px; padding: 0; }
.social:hover { translate: -1px -2px; background: #24222c; }
/* RTC's own warning, glued over a reward claim of the art when one shows (hero.js) */
.hero__bubble {
  position: absolute;
  z-index: 2;
  max-width: 15em;
  margin: 0;
  padding: 0.55em 0.85em 0.6em;
  border: 3px solid #000;
  border-radius: 20px;
  background: #fff;
  color: #141414;
  font: 700 clamp(14px, 1.15vw, 17px)/1.25 var(--ff-body);
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-3deg);
}
.hero__bubble::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -16px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  transform: skewX(-24deg) rotate(30deg);
}
.hero__bubble.is-tail-l::after {
  right: auto;
  left: 18px;
  border-right: 0;
  border-left: 3px solid #000;
  transform: skewX(24deg) rotate(-30deg);
}
.hero__ways {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px 22px;
  translate: -50% 0;
}
.hero__scroll, .hero__skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  color: var(--wojak);
  font: 400 18px/1 var(--ff-display);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.hero__skip { color: var(--muted); font: 600 14px/1.2 var(--ff-body); letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }
.hero__skip:hover { color: #fff; }
.hero__scroll .ico { width: 20px; height: 20px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* The title art makes two reward claims: each gets its honest qualifier glued on. hero.js (glueMaybes) moves the
   stickers and the bubble per layout; these rules are the starting point and the no-JS layout. */
.hero .maybe {
  height: auto;
  margin: 0;
  padding: 0.32em 0.55em 0.36em;
  border: 2.5px solid #000;
  border-radius: 7px;
  background: #fff;
  color: #000;
  font: 800 clamp(12px, 1.25cqw, 16px)/1.18 var(--ff-body);
  box-shadow: 0 0 0 3px #fff, 4px 4px 0 3px #000;
  rotate: -3deg;
  text-wrap: balance;
}
/* hero.js moves the stickers and the bubble and measures them in the same task: no transition, not even the
   0.01 ms one base.css gives every property under reduced motion (it would measure the old width) */
.hero .maybe, .hero__bubble { transition-property: none; }
.hero .maybe--sign { display: none; }
.hero .maybe.is-on { display: block; }
.hero .maybe.is-off, .hero__bubble.is-off { display: none; }
.hero__dim { display: none; border-radius: 30%; background: rgba(8, 8, 12, 0.96); filter: blur(5px); pointer-events: none; }
.hero__dim.is-on { display: block; }

@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .hero__bubble { left: 47%; top: calc(var(--topbar-h) + 9%); }
}
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  .hero__plane { --fx: 0.71; --fy: 0.44; --zoom: 1.04; }
  .hero .maybe--sign { display: block; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(8, 8, 12, 0.9) 0%, rgba(8, 8, 12, 0.55) 24%, rgba(8, 8, 12, 0) 38%, rgba(8, 8, 12, 0) 48%, rgba(8, 8, 12, 0.82) 62%, rgba(8, 8, 12, 0.97) 80%);
  }
  .hero__content {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    padding: calc(var(--topbar-h) + 14px) 16px 10px;
  }
  .hero__top { display: grid; justify-items: start; gap: 10px; }
  .hero__bottom { gap: 10px; }
  .hook__l { font-size: calc(clamp(18px, 5.3vw, 26px) * var(--fit)); }
  .neon { font-size: calc(clamp(50px, 14.5vw, 84px) * var(--fit)); }
  .payoff--hero .payoff__row { font-size: calc(clamp(16px, 2.6vw, 21px) * var(--fit)); }
  .hero__ctas { width: 100%; flex-wrap: nowrap; gap: 10px; }
  /* a size and a few pixels tighter than the desktop buttons, so "Buy $RTC" stays on one line at 390 px in the ten
     languages ("Comprar $RTC", "Купить $RTC") */
  .hero__ctas .btn { flex: 1 1 0; gap: 8px; min-width: 0; min-height: 54px; padding: 6px 10px 4px; font-size: 20px; }
  .hero__ctas .btn small { display: none; }
  .hero .ca { width: 100%; }
  .hero__bubble { right: 3vw; top: calc(var(--topbar-h) + 23%); max-width: 11em; font-size: 12.5px; }
  .hero__scroll { display: none; }
  /* the socials are their marks (each link keeps its name for screen readers), so "Skip the story" shares their row */
  .hero .social { justify-content: center; width: 44px; padding: 0; }
  .hero .social span { display: none; }
  .hero__ways { left: auto; right: 12px; bottom: 10px; max-width: calc(100% - 196px); translate: none; }
  .hero__skip { padding-inline: 4px; white-space: normal; text-align: right; }
}
/* Wide screens: the column gives up some padding, so the socials sit at the bottom and the ways down start right
   after them (the socials are brand names, the same width in every language), whatever the height. */
@media (min-width: 1240px) and (min-aspect-ratio: 11/10) {
  .hero__content { gap: 12px; padding-top: calc(var(--topbar-h) + 16px); padding-bottom: 16px; }
  .hero__bottom { gap: 12px; }
  .hero__ways { left: calc(clamp(20px, 5vw, 84px) + 372px); translate: none; }
}
/* Wide but short screens (laptops): the Solana chip sits beside the $RTC sticker, under the name. */
@media (min-width: 1240px) and (min-aspect-ratio: 11/10) and (max-height: 819px) {
  .hero__top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "ticker chip"; align-items: center; justify-items: start; column-gap: 20px; }
  .neon { grid-area: name; }
  .hero__ticker { grid-area: ticker; }
  .hero__chip { grid-area: chip; }
  .hero__ctas .btn { min-height: 54px; }
}

/* Art plane (the hero's 2.5D title art): an element with the image aspect ratio that covers its box around a focal
   point. Overlays inside it use percent of the image, so they stay glued to the art at any size. */
.hero__plane {
  --mx: 0;
  --my: 0;
  --ar: 1;
  --zoom: 1.06;
  --fx: 0.62;
  --fy: 0.55;
  --pw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom));
  --ph: calc(var(--pw) / var(--ar));
  --m: calc(var(--pw) * 0.01);
  --pl: clamp(calc(100cqw - var(--pw) + var(--m)), calc(50cqw - var(--pw) * var(--fx)), calc(-1 * var(--m)));
  --pt: clamp(calc(100cqh - var(--ph) + var(--m)), calc(50cqh - var(--ph) * var(--fy)), calc(-1 * var(--m)));
  position: absolute;
  width: var(--pw);
  height: var(--ph);
  left: var(--pl);
  top: var(--pt);
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}
.hero .lyr { position: absolute; inset: 0; }
.hero .lyr > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 2.5D: mouse / gyro (--mx, --my on the plane) through CSS variables, so GSAP never takes ownership of these two
   layers. fg/bg offset stays under ~1.5% of the image width. */
.hero .lyr--bg { translate: calc(var(--mx) * -0.3%) calc(var(--my) * -0.25%); }
.hero .lyr--fg { translate: calc(var(--mx) * 0.6%) calc(var(--my) * 0.4%); }
.hero .ov {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w, 10) * 1%);
  height: calc(var(--h, 10) * 1%);
}
.hero .ov.maybe { height: auto; }

/* ---------- Idle micro-life ---------- */
.fx-glow {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--r) * 2%);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 222, 160, 0.62), rgba(253, 130, 62, 0.2) 42%, rgba(252, 117, 43, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: glow-breathe 4.6s ease-in-out infinite;
}
.fx-glow--moon { background: radial-gradient(circle, rgba(255, 210, 120, 0.7), rgba(252, 92, 4, 0.22) 45%, transparent 70%); animation-duration: 6s; }
.fx-glow--lamp { animation-duration: 5.2s; }
@keyframes glow-breathe { 0%, 100% { opacity: 0.75; scale: 1; } 50% { opacity: 1; scale: 1.12; } }
.fx-screen {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(140, 210, 255, 0.12), rgba(140, 210, 255, 0) 40%, rgba(140, 210, 255, 0.08));
  box-shadow: 0 0 30px rgba(120, 190, 255, 0.25);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: screen-flicker 6s steps(1) infinite;
}
.fx-screen--b { animation-delay: -2s; }
.fx-screen--c { animation-delay: -3.5s; }
.fx-screen--d { animation-delay: -1s; }
@keyframes screen-flicker { 0%, 100% { opacity: 0.9; } 47% { opacity: 0.55; } 48% { opacity: 0.9; } }
.fx-led {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 0.9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fd813c;
  box-shadow: 0 0 6px 2px rgba(252, 117, 43, 0.8);
  animation: led-blink 1.4s steps(1) infinite;
}
.fx-led--b { background: #5dff8f; box-shadow: 0 0 6px 2px rgba(60, 255, 130, 0.7); animation-duration: 0.9s; animation-delay: -0.3s; }
@keyframes led-blink { 50% { opacity: 0.2; } }
.fx-smoke {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 4%;
  height: 14%;
  translate: -50% -100%;
  pointer-events: none;
}
.fx-smoke i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70%;
  aspect-ratio: 1;
  margin-left: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 232, 238, 0.6), rgba(232, 232, 238, 0) 70%);
  opacity: 0;
  animation: cigar-smoke 4.4s linear infinite;
}
.fx-smoke i:nth-child(2) { animation-delay: -1.5s; }
.fx-smoke i:nth-child(3) { animation-delay: -3s; }
@keyframes cigar-smoke {
  0% { transform: translate(0, 0) scale(0.35); opacity: 0; }
  14% { opacity: 0.9; }
  100% { transform: translate(45%, -250%) scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-screen, .fx-led, .fx-smoke i, .hero__scroll .ico, .neon > *, .boot__lamp { animation: none !important; }
  .fx-smoke i { opacity: 0.5; }
}

/* RTC's speech bubble is off (the client, 2026-10-27: its line did not sound like him); js/hero.js (BUBBLE)
   gives the art's claims their stickers instead. */
.hero__bubble { display: none !important; }