/* ---------- background ---------- */
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora span { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .55; filter: blur(30px); background: radial-gradient(closest-side, var(--c), transparent 70%); animation: drift var(--t) ease-in-out infinite alternate; }
.aurora span:nth-child(1) { --c: rgba(105,114,255,.20); --t: 19s; left: -12vmax; top: -28vmax; }
.aurora span:nth-child(2) { --c: rgba(142,140,255,.19); --t: 24s; right: -18vmax; top: -12vmax; animation-delay: -6s; }
.aurora span:nth-child(3) { --c: rgba(47,214,155,.09); --t: 27s; left: 18vmax; top: 58vh; animation-delay: -12s; }
/* Fine grain over the gradients: kills the banding a big blurred blob leaves on dark screens. */
.aurora::after { content: ''; position: absolute; inset: -50%; opacity: .035; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 3px 3px; animation: grain 6s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(2px, -3px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(3px, 1px); } 100% { transform: translate(0, 0); } }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .aurora::after { animation: none; } }
/* Between the phone layout and a roomy desktop, the nav links and both buttons compete for one
   row: the account button drops its label first. */
@media (max-width: 980px) { .nav-account { width: 42px; padding: 0; } .nav-account span { display: none; } }
/* The topbar keeps the z-index app.css gives it (40). Folding it into this group dropped it to
   1, and the orbiting logos then passed in front of the navigation instead of behind it. */
main, .footer { position: relative; z-index: 1; }
main { overflow-x: clip; }

/* ---------- the stage ----------
   Back to front: the Earth, the logos orbiting it, the mountains it rises behind, the fog,
   then the copy and the laptop. The hero is its own stacking context (isolation), so none of
   these z-indexes can leak into the rest of the page, and overflow: clip keeps the orbit from
   wandering into the section below. */
.hero { position: relative; isolation: isolate; overflow: clip; touch-action: pan-y;
  display: flex; align-items: center; min-height: min(calc(100svh - 66px), 900px); padding: 36px 32px 0; }
.hero.earth-grab { cursor: grab; }
.hero.earth-grabbing { cursor: grabbing; }
/* Where the planet sits, and how big it is. The renderer reads this box and nothing else. */
.earth-box { --d: min(80svh, 730px, 56vw); position: absolute; width: var(--d); height: var(--d);
  left: calc(66% - var(--d) / 2); top: calc(47% - var(--d) / 2); pointer-events: none; visibility: hidden; }
.earth { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 1.8s var(--ease); }
.earth-net { z-index: 3; }
.earth.ready { opacity: 1; }
/* Orbit items are placed every frame by the renderer; until then they stay invisible. */
.orb { position: absolute; left: 0; top: 0; z-index: 1; width: 58px; height: 58px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.orb-mark { display: grid; place-items: center; padding: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(160,170,255, .2), rgba(5,6,16, .94) 62%);
  border: 1px solid rgba(150,160,255, .38);
  box-shadow: 0 0 28px -6px rgba(105,114,255, .75), inset 0 1px 0 rgba(255, 255, 255, .14); }
.orb-mark svg { width: 100%; height: 100%; }
.orb-coin { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(150,160,255, .55);
  box-shadow: 0 0 26px -4px rgba(105,114,255, .75); background: #070810; }
.orb-coin img { width: 100%; height: 100%; object-fit: cover; }
.terrain { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; max-width: none; z-index: 4; pointer-events: none; }
/* Two slow banks of mist, drifting against each other: the only motion in the landscape, so
   the mountains read as a place and not as a cut-out. */
.fog { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 5; pointer-events: none; overflow: hidden; }
.fog span { position: absolute; inset: 18% -35% -10% -35%; background: radial-gradient(50% 42% at 50% 62%, rgba(105,114,255, .1), transparent 72%); animation: fog-drift 46s ease-in-out infinite alternate; }
.fog span + span { inset: 30% -40% -20% -40%; opacity: .75; animation-duration: 63s; animation-direction: alternate-reverse; }
@keyframes fog-drift { from { translate: -9% 0; } to { translate: 9% 0; } }
@media (prefers-reduced-motion: reduce) { .fog span { animation: none; } }
/* The copy has to win over the scene: a scrim that darkens the left third and nothing else. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,11,31, .82) 0%, rgba(7,11,31, .5) 34%, rgba(7,11,31, 0) 58%); }
.hero-grid { position: relative; z-index: 6; width: min(1320px, 100%); margin: 0 auto; padding-bottom: 8vh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* The hook is two sentences, one line each: Archivo at its condensed width keeps the weight of
   the display face without the width that pushed each sentence onto two lines. */
/* The longest sentence measures 9.6 times the font size, so the size follows the column
   itself (container units): one line per sentence at any width, with a little room for the
   extrusion. The vw value is only the fallback for browsers without container units. */
.hero-copy { container-type: inline-size; }
.hero-copy .hero-title.t3d { font-family: 'Archivo', var(--display); font-stretch: 68%; font-weight: 900;
  font-size: clamp(32px, 4.3vw, 64px); font-size: min(10cqi, 82px); line-height: 1.02; letter-spacing: -.005em; }
.hero-copy .hero-title .sub { color: var(--accent); text-shadow: 0 0 44px rgba(105,114,255, .45); }
.hero-copy .hero-sub { max-width: 520px; }
.hero-copy .hero-search { width: min(600px, 100%); }
.hero-copy .hero-search { opacity: 1; animation: spin-border 5s linear infinite; }
.hero-copy .hero-sub { opacity: 1; animation: none; }
.hero-copy .hero-try { justify-content: flex-start; }
.hero-money { margin: 25px 0 0; color: var(--text); font: 750 clamp(17px, 1.8vw, 24px)/1.2 'Archivo', var(--display); letter-spacing: -.025em; opacity: 0; animation: rise .9s var(--ease) .95s forwards; }
.hero-money span { color: var(--accent); }

/* ---------- the MacBook ----------
   A real component in a device frame, not a picture: the chart inside it is the same
   CandleChart the dashboard uses, fed with a live memecoin. The frame follows the hardware:
   a thin black bezel with the camera notch, the aluminium lid edge, the hinge, and the base
   with its lip, seen from slightly above. */
.hero-visual { position: relative; perspective: 2000px; padding: 0 0 46px;
  /* Container units (cqw) below are this column's width: the gain card and the tile row it
     floats over are sized from the same number, so they stay in step at every width. */
  container-type: inline-size; --gc-w: clamp(236px, 40cqw, 268px); }
.macbook { position: relative; width: min(680px, 100%); margin-left: auto; transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(7deg) rotateZ(.4deg); transition: transform 1s var(--ease);
  filter: drop-shadow(0 60px 70px rgba(0, 0, 0, .7)) drop-shadow(0 0 60px rgba(105,114,255, .18));
  animation: rise-in 1.1s var(--ease) .5s both; }
@media (hover: hover) { .macbook:hover { transform: rotateY(-6deg) rotateX(3deg); } }
/* An entrance that leaves `transform` alone: one that ends on transform: none keeps overriding
   it afterwards (fill-mode both), and would flatten the tilt above, hover included, for good. */
@keyframes rise-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.mb-lid { position: relative; padding: 1.5px; border-radius: 20px 20px 8px 8px;
  /* Space-grey aluminium, lit violet along the left edge. */
  background: linear-gradient(120deg, #8F96E8 0%, #3D414A 9%, #26282D 45%, #1B1D21 80%, #565A61 100%); }
.mb-screen { position: relative; aspect-ratio: 16 / 10.3; padding: 13px 13px 12px; border-radius: 19px 19px 7px 7px;
  background: #070605; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.mb-notch { position: absolute; left: 50%; top: 0; z-index: 3; width: 13%; height: 13px; translate: -50% 0;
  border-radius: 0 0 8px 8px; background: #070605; }
.mb-notch::after { content: ''; position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2B2E55, #0B0C18 70%); }
.mb-ui { position: relative; height: 100%; border-radius: 6px; overflow: hidden; background: #07070C;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.mb-glare { position: absolute; inset: 13px 13px 12px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 34%); }
/* The macOS menu bar. */
.mb-bar { display: flex; align-items: center; gap: 12px; height: 22px; padding: 0 10px; font-size: 9.5px; color: var(--text-2);
  background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mb-bar b { color: var(--text); font-weight: 700; letter-spacing: .04em; }
.mb-logo { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: var(--grad); color: #F4F6FF; font-size: 8px; font-weight: 900; }
.mb-bar-r { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.mb-live { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.8s ease-in-out infinite; }
.mb-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px 7px; min-width: 0; }
.lp-coin { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.lp-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lp-id strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-id small { font-size: 10.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-quote { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lp-quote strong { font-size: 17px; font-family: var(--mono); font-weight: 600; }
.lp-quote .pill { font-size: 11px; padding: 2px 7px; font-weight: 700; }
.mb-tf { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, .04); font: 600 9.5px/1.7 var(--mono); color: var(--text-3); }
.mb-tf span { padding: 0 6px; border-radius: 5px; }
.mb-tf .on { color: var(--text); background: rgba(105,114,255, .18); }
.mb-main { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 8px; padding: 0 10px; min-height: 0; }
.mb-chart-wrap { position: relative; min-height: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .06); background: #0A0B11; overflow: hidden; }
.lp-chart { position: absolute; inset: 0; cursor: pointer; }
.mb-dex { position: absolute; left: 8px; top: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 6px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); color: var(--text-2);
  font-size: 9.5px; font-weight: 600; transition: color .2s, border-color .2s, background .2s; }
.mb-dex:hover { color: var(--text); border-color: rgba(105,114,255, .5); background: rgba(105,114,255, .12); }
.mb-side { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.mb-side-t { font-size: 9.5px; font-weight: 650; color: var(--text-2); letter-spacing: .02em; }
/* Sized by the screen, not by its rows (flex: 1 1 0), so landing.js can keep only the rows that
   fit whole without the list resizing under it. */
.lp-list { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; }
.lp-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px;
  background: rgba(255, 255, 255, .03); border: 1px solid transparent; font-size: 10.5px; text-align: left;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--spring); }
.lp-row:hover { background: rgba(105,114,255, .08); border-color: rgba(105,114,255, .25); transform: translateX(-2px); }
.lp-row[aria-current="true"] { background: rgba(105,114,255, .12); border-color: rgba(105,114,255, .5); }
.lp-row .avatar { width: 22px !important; height: 22px !important; }
.lp-sym { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-foot { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 7px; padding: 8px 10px 10px; }
.lp-tile { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 7px; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06); font-size: 9.5px; color: var(--text-2); text-align: left; min-width: 0; }
.lp-tile strong { font: 700 12.5px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tile em { font-style: normal; font-size: 9px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-verdict strong { font-family: var(--font); font-size: 13px; }
.lp-verdict strong.up { color: var(--up); } .lp-verdict strong.down { color: var(--down); } .lp-verdict strong.warn { color: var(--warn); }
.lp-ask { cursor: pointer; transition: border-color .2s, background .2s; }
.lp-ask:hover { border-color: rgba(105,114,255, .5); background: rgba(105,114,255, .08); }
.lp-ask strong { color: var(--accent); }
/* The base: aluminium, a shade lighter at the front edge, with the lip that lets the lid open. */
.mb-base { position: relative; height: 15px; margin: 0 -7.5%; border-radius: 2px 2px 22px 22px / 2px 2px 13px 13px;
  background: linear-gradient(180deg, #5b6764 0%, #2a3331 30%, #1a2120 70%, #110F0C 100%);
  box-shadow: inset 0 1px 0 rgba(208,211,247, .25), 0 22px 40px -12px rgba(0, 0, 0, .9); }
.mb-lip { position: absolute; left: 50%; top: 0; width: 16%; height: 5px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #111218; }
.skel { display: inline-block; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.skel-circle { width: 30px; height: 30px; border-radius: 50%; }
.skel-line { width: 110px; height: 12px; border-radius: 6px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- the gain card: what 100 $ became on the chart ---------- */
.gain-card { position: absolute; left: -5%; bottom: -1%; z-index: 2; width: var(--gc-w); padding: 14px 16px 12px; border-radius: 20px;
  background: rgba(10,14,40, .86); border: 1px solid rgba(150,160,255, .32);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), 0 0 50px -12px rgba(105,114,255, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
  animation: rise .9s var(--ease) 1s both, bob 7s ease-in-out 2s infinite; }
.gc-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--text-2); }
.gc-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(105,114,255, .14); color: var(--accent); }
.gc-coin { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.gc-coin strong { font-size: 15px; }
.gc-x { display: block; margin-top: 4px; font: 850 46px/1 var(--display); letter-spacing: -.02em; }
.gc-x.up { color: var(--accent); text-shadow: 0 0 34px rgba(105,114,255, .55); }
.gc-x.down { color: var(--down); }
.gc-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 7px; font: 700 15px var(--mono); }
.gc-line > span:first-child { color: var(--text-2); }
.gc-line i { font-style: normal; color: var(--text-3); }
.gc-line b.up { color: var(--up); } .gc-line b.down { color: var(--down); }
.gc-in { font: 600 11.5px var(--font); color: var(--text-2); }
.gc-go { margin-top: 12px; width: 100%; height: 38px; font-size: 13px; gap: 6px; }
.gc-note { margin: 8px 0 0; font-size: 10.5px; color: var(--text-3); text-align: center; }
@keyframes bob { 50% { translate: 0 -8px; } }
/* While the card floats over the laptop, the tile row at the foot of the screen starts where the
   card ends, so no tile is ever cut in half behind it. The card's right edge, seen from the
   laptop's left edge: its width, minus the 5 % it hangs out to the left, minus the room left of
   the laptop when the column is wider than 680 px. Times 1.09 for the tilt (the left side is the
   far side, so it looks narrower than it is), minus the bezel. */
@media (min-width: 1181px) {
  .hero-visual:has(> .gain-card:not([hidden])) .mb-foot {
    padding-left: max(10px, calc((var(--gc-w) - 105cqw + min(680px, 100cqw)) * 1.09 - 6px)); }
}
@keyframes pulse { 50% { opacity: .35; } }
/* Narrower, the laptop cannot carry the card on its corner without squeezing the tiles: the
   card moves under it, overlapping only the base, and the tiles keep the whole width. */
@media (max-width: 1180px) {
  .gain-card { position: relative; left: auto; bottom: auto; margin: -26px auto 0; width: min(320px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .gain-card, .macbook { animation: none; } }

.hero-chip { animation: rise .8s var(--ease) both; }
.hero-title { margin: 28px 0 0; font-size: clamp(44px, 7.2vw, 104px); line-height: .98; font-weight: 750; letter-spacing: -.05em; max-width: 1120px; }
.hero-title .line { display: block; }
.hero-title .sub { color: #8A96A8; }
.hero-title .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(-40deg); filter: blur(8px); animation: word 1s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes word { to { opacity: 1; transform: none; filter: blur(0); } }
.word-run { color: var(--up); text-shadow: 0 0 40px rgba(43,217,159,.55); }
.word-rug { color: var(--down); text-shadow: 0 0 40px rgba(255,84,104,.5); }
.hero-sub { margin: 12px 0 0; max-width: 640px; font-size: clamp(16px, 1.5vw, 19px); color: var(--text-2); opacity: 0; animation: rise .9s var(--ease) 1.1s forwards; }

.hero-search { margin-top: 28px; width: min(780px, 100%); border: none; padding: 1.5px; border-radius: 22px; background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-2), var(--accent-3), var(--accent-deep), var(--accent)); animation: spin-border 5s linear infinite, rise .9s var(--ease) 1.25s both; box-shadow: 0 30px 90px -30px rgba(105,114,255,.6); transition: transform .35s var(--ease), box-shadow .35s; }
.hero-search:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 40px 110px -30px rgba(142,140,255,.8); }
.hero-search:active { transform: translateY(-1px) scale(.995); transition-duration: .09s; }
.hero-search-go { transition: transform .26s var(--spring), box-shadow .3s; }
.hero-search:hover .hero-search-go { transform: scale(1.03); }
.hero-search-inner { display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 9px 0 24px; border-radius: 21px; background: #0A0E15; color: var(--text-2); text-align: left; }
.typed { flex: 1; min-width: 0; font-size: 18px; color: #C9D0DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-search-go { display: inline-flex; align-items: center; gap: 8px; height: 60px; padding: 0 26px; border-radius: 15px; background: var(--grad); color: #F4F6FF; font-size: 17px; font-weight: 700; flex-shrink: 0; }
.stats-band { padding: 8px 24px 8px; display: flex; justify-content: center; }
.stats { margin-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 10px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat-n { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.03em; }
.stat-l { font-size: 14px; color: var(--text-2); }

/* ---------- trending marquee ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 0 48px; margin-bottom: 26px; }
.section-head h2, .how h2, .final h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.trending { padding: 24px 0 56px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: scroll var(--dur, 60s) linear infinite; padding: 6px 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.tcard { position: relative; width: 250px; flex-shrink: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); transition: transform .35s var(--ease), border-color .3s; }
.tcard { transition: transform .35s var(--spring), border-color .3s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.tcard:hover { transform: translateY(-6px); border-color: rgba(105,114,255,.45); box-shadow: 0 24px 50px -30px rgba(105,114,255,.6); }
.tcard:active { transform: translateY(-2px) scale(.99); transition-duration: .09s; }
.tcard-top { display: flex; align-items: center; gap: 10px; }
.tcard-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tcard-name strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-name span { font-size: 12px; color: var(--text-2); }
.tcard-row { display: flex; justify-content: space-between; align-items: baseline; }
.tcard svg.spark { width: 100%; height: 46px; }
.tcard-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }

/* ---------- final ---------- */
.final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 88px 24px 80px; }
.final h2 { font-size: clamp(40px, 6vw, 84px); }
.final p { font-size: 19px; margin: 0; }
.btn-xl { height: 64px; padding: 0 32px; font-size: 18px; border-radius: 18px; margin-top: 12px; }

.footer { position: relative; z-index: 1; display: flex; gap: 40px; align-items: flex-start; justify-content: space-between; padding: 36px 48px 48px; border-top: 1px solid var(--line); }
.footer p { margin: 0; max-width: 880px; font-size: 13px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 760px) {
  .hero { padding: 40px 16px 24px; }
  .hero-chip { white-space: normal; height: auto; padding: 7px 14px; text-align: center; line-height: 1.4; }
  .hero-title { font-size: 44px; }
  .hero-search-inner { height: 64px; padding-left: 16px; gap: 10px; }
  .typed { font-size: 15px; }
  .hero-search-go { height: 48px; padding: 0 16px; font-size: 15px; }
  .hero-search-go svg { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .stat:nth-child(3) { border-left: none; }
  .section-head { padding: 0 16px; flex-direction: column; gap: 6px; }
  .mine-row { padding: 0 16px; }
  .final { padding: 90px 16px; }
  .footer { flex-direction: column; gap: 14px; padding: 28px 16px 40px; }
}

/* ---------- hero 3D title ---------- */
.hero-3d { perspective: 1000px; width: 100%; display: flex; justify-content: center; }
.hero-title { transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; }
.hero-title.t3d { font-size: clamp(32px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -.02em; max-width: 1180px; }
.hero-title.t3d .sub { color: inherit; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-title { animation: float3d 7s ease-in-out infinite; }
  @keyframes float3d { 50% { translate: 0 -10px; } }
}

/* ---------- slide deck ---------- */
.deck { position: relative; padding: 24px 48px 56px; max-width: 1280px; margin: 0 auto; outline: none; }
.deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 12px; border-radius: 28px; }
.deck-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-bottom: 22px; }
.deck-head h2 { grid-row: 1; margin: 0; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.04; }
.deck-head p { grid-row: 2; grid-column: 1; margin: 0; font-size: 16px; }
.deck-ctl { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 10px; }
/* The stage leans toward the pointer, and a soft light follows it across the surface. */
.deck-stage { --mx: 50%; --my: 50%; position: relative; border-radius: 28px; border: 1px solid var(--line-2); overflow: hidden; background: radial-gradient(120% 100% at 80% 0%, rgba(105,114,255,.12), transparent 55%), linear-gradient(180deg, rgba(18,24,34,.95), rgba(7,10,15,.98)); box-shadow: 0 60px 120px -50px rgba(0,0,0,.95); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.deck-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 60%); }
.deck-stage:hover::after { opacity: 1; }
.slides { position: relative; height: 420px; touch-action: pan-y; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 30px; padding: 40px 44px; opacity: 0; visibility: hidden; transform: translateX(6%) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--ease), visibility .7s; }
.slide.on { opacity: 1; visibility: visible; transform: none; }
.slide.out-left { opacity: 0; visibility: visible; transform: translateX(-6%) scale(.97); }
.slide.out-right { opacity: 0; visibility: visible; transform: translateX(6%) scale(.97); }
/* Reduced motion: the deck still moves on, by crossfading in place, with no slide and no zoom. */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.out-left, .slide.out-right { transform: none; transition: opacity .5s linear, visibility .5s; }
  .slide.on .slide-art > * { animation: none; }
}
.slide-txt { display: flex; flex-direction: column; gap: 12px; }
.slide h3 { margin: 0; font-size: clamp(24px, 2.8vw, 38px); font-weight: 750; letter-spacing: -.03em; line-height: 1.08; }
.slide p { margin: 0; font-size: 17px; color: var(--text-2); max-width: 44ch; }
.slide-art { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.slide.on .slide-art > * { animation: rise .7s var(--ease) both; }
.slide.on .slide-art > *:nth-child(2) { animation-delay: .1s; }
.slide.on .slide-art > *:nth-child(3) { animation-delay: .2s; }

.deck-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.07); }
.deck-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--grad); box-shadow: 0 0 18px rgba(105,114,255,.7); }
.deck-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.deck-dots button { position: relative; width: 34px; height: 6px; border: none; border-radius: 99px; background: rgba(255,255,255,.14); transition: background .3s, width .45s var(--spring); }
.deck-dots button::before { content: ''; position: absolute; inset: -14px -4px; }
.deck-dots button:hover { background: rgba(255,255,255,.3); }
.deck-dots button[aria-selected="true"] { width: 56px; background: var(--grad); }

/* slide artwork */
.mock-field { display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 18px; border-radius: 15px; background: #0A0E15; border: 1px solid rgba(105,114,255,.5); font-family: var(--mono); font-size: 14px; color: #C9D0DA; overflow: hidden; }
.mock-type { white-space: nowrap; overflow: hidden; width: 0; animation: typing 3.4s steps(28) infinite; }
.mock-caret { width: 2px; height: 20px; background: var(--accent); animation: blink 1s steps(2) infinite; flex-shrink: 0; }
.mock-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-go { height: 52px; border-radius: 14px; background: var(--grad); color: #F4F6FF; font-weight: 750; display: grid; place-items: center; box-shadow: 0 16px 40px -14px rgba(105,114,255,.8); }
.mock-radar { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto; }
.mock-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(105,114,255,.22); }
.mock-ring.r2 { inset: 28%; }
.mock-sweep { position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 280deg, rgba(105,114,255,.45)); animation: spin 2.6s linear infinite; }
.mock-node { position: absolute; padding: 5px 10px; border-radius: 999px; background: rgba(10,14,21,.92); border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 650; white-space: nowrap; animation: nodeglow 3s ease-in-out infinite; }
.mock-node.n1 { top: -2%; left: 50%; translate: -50% 0; animation-delay: 0s; }
.mock-node.n2 { top: 22%; right: -6%; animation-delay: .4s; }
.mock-node.n3 { bottom: 22%; right: -4%; animation-delay: .8s; }
.mock-node.n4 { bottom: -2%; left: 50%; translate: -50% 0; animation-delay: 1.2s; }
.mock-node.n5 { bottom: 22%; left: -4%; animation-delay: 1.6s; }
.mock-node.n6 { top: 22%; left: -2%; animation-delay: 2s; }
@keyframes nodeglow { 0%, 100% { border-color: var(--line-2); color: var(--text-2); } 20% { border-color: rgba(105,114,255,.8); color: #fff; box-shadow: 0 0 22px -6px rgba(105,114,255,.9); } }
.mock-verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 8px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mv b { font-size: clamp(26px, 3.4vw, 40px); line-height: 1; }
.mv span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--text-2); }
.mv.up b { color: #B7BFFF; --ext-1: #111865; --ext-2: #080B30; }
.mv.down b { color: #FFA3AE; --ext-1: #8E2233; --ext-2: #44101A; }
.mv.x b { color: #CFC6FF; --ext-1: #4A3FA0; --ext-2: #221B4D; }
.mv.buy { grid-column: 1 / -1; background: rgba(43,217,159,.08); border-color: rgba(43,217,159,.3); }
.mv.buy b { font-size: 22px; font-weight: 800; color: var(--up); letter-spacing: .04em; }
.mv .tri { display: flex; gap: 3px; width: 70%; height: 7px; margin-top: 6px; }
.mv .tri i { border-radius: 4px; }
.mock-candles { display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; height: 150px; padding: 12px; border-radius: 18px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.mock-candles i { flex: 1; border-radius: 3px; background: var(--up); animation: candle 2.6s ease-in-out infinite; transform-origin: bottom; }
.mock-candles i:nth-child(3n) { background: var(--down); }
.mock-candles i:nth-child(1) { height: 40%; animation-delay: 0s; } .mock-candles i:nth-child(2) { height: 62%; animation-delay: .1s; }
.mock-candles i:nth-child(3) { height: 48%; animation-delay: .2s; } .mock-candles i:nth-child(4) { height: 70%; animation-delay: .3s; }
.mock-candles i:nth-child(5) { height: 55%; animation-delay: .4s; } .mock-candles i:nth-child(6) { height: 80%; animation-delay: .5s; }
.mock-candles i:nth-child(7) { height: 66%; animation-delay: .6s; } .mock-candles i:nth-child(8) { height: 92%; animation-delay: .7s; }
.mock-candles i:nth-child(9) { height: 74%; animation-delay: .8s; } .mock-candles i:nth-child(10) { height: 100%; animation-delay: .9s; }
.mock-candles i:nth-child(11) { height: 84%; animation-delay: 1s; } .mock-candles i:nth-child(12) { height: 96%; animation-delay: 1.1s; }
@keyframes candle { 50% { transform: scaleY(.82); } }
.mock-trades { display: flex; flex-direction: column; gap: 6px; }
.mt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mt em { margin-left: auto; font-style: normal; color: var(--text-3); font-size: 12px; }
.mt.buy b { color: var(--up); } .mt.sell b { color: var(--down); }
.mock-phone { position: relative; width: 210px; height: 380px; margin: 0 auto; border-radius: 30px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, #121A27, #0B1030); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), 0 0 80px -30px rgba(142,140,255,.6); }
.mp-logo { font-size: 12px; font-weight: 750; letter-spacing: .16em; color: var(--text-2); }
.mp-coin { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 32% 26%, rgba(160,170,255,.25), #070812 65%); box-shadow: 0 0 30px -6px rgba(105,114,255,.7); animation: bob 3s ease-in-out infinite; }
.mp-sym { font-size: 22px; }
.mp-run, .mp-rug { font-size: 20px; font-weight: 800; }
.mp-x { font-size: 34px; font-weight: 800; color: #CFC6FF; }

/* ---------- "tes coins" ---------- */
.mine { padding: 20px 0 10px; }
.mine-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 48px; }
.mine-card { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); transition: transform .3s var(--ease), border-color .3s; }
.mine-card:hover { transform: translateY(-3px); border-color: rgba(105,114,255,.5); }
.mine-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.mine-id strong { font-size: 15px; }
.mine-id span { font-size: 12px; }

/* ---------- trending: two rows of coin photos ---------- */
.marquee + .marquee { margin-top: 16px; }
.marquee-rev .marquee-track { animation-direction: reverse; }
.tcard-shot { position: relative; }
.tcard .avatar { box-shadow: 0 8px 20px -8px rgba(0,0,0,.9); }
.tcard-rank { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #0A0E15; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; display: grid; place-items: center; color: var(--text-2); }

@media (max-width: 1100px) {
  .deck { padding: 30px 24px 70px; }
  .slides { height: 560px; }
  .slide { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px; align-content: center; }
}
@media (max-width: 760px) {
  .deck { padding: 20px 14px 60px; }
  .deck-head { grid-template-columns: minmax(0, 1fr); }
  .deck-ctl { grid-row: auto; grid-column: 1; }
  .slides { height: 520px; }
  .slide { padding: 22px 18px; gap: 14px; }
  .slide p { font-size: 15px; }
  .mock-radar { width: 240px; }
  .mock-phone { width: 170px; height: 310px; }
  .hero-title { animation: none; }
}

/* The animated border of the hero field (the custom property makes the angle animatable). */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --angle: 360deg; } }

/* Try a demo coin straight from the hero. */
.hero-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; font-size: 13.5px; color: var(--text-3); opacity: 0; animation: rise .9s var(--ease) 1.5s forwards; }
.hero-try button { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; transition: border-color .2s, color .2s, transform .25s var(--ease); }
.hero-try button:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-2px); }

/* ---------- what you get: three cards, no scrolling saga ---------- */
.value { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1240px; margin: 0 auto; padding: 28px 48px 8px; }
.vcard { position: relative; padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: var(--shadow-1), var(--inner-hi); transition: transform .4s var(--ease), border-color .3s; animation: rise .8s var(--ease) both; animation-delay: var(--d, 0s); }
.vcard:hover { transform: translateY(-4px); border-color: var(--line-2); }
.vcard h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.vcard p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.vic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); transition: transform .4s var(--ease); }
.vcard:hover .vic { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
@media (max-width: 1000px) { .value { grid-template-columns: minmax(0, 1fr); padding: 30px 24px 10px; } }
@media (max-width: 760px) { .value { padding: 20px 16px 0; } .vcard { padding: 20px; } }

/* ---------- the stage on tablets and phones ----------
   One column: the copy first, so the headline and the search bar are on screen without
   scrolling, then the laptop. The planet rises behind the headline instead of beside it. */
@media (max-width: 980px) {
  .hero { display: block; min-height: 0; padding: 22px 16px 0; }
  .earth-box { --d: min(112vw, 620px); left: calc(50% - var(--d) / 2); top: calc(-6% - var(--d) * .08); }
  .hero::before { background: linear-gradient(180deg, rgba(7,11,31, .15) 0%, rgba(7,11,31, .62) 26%, rgba(7,11,31, .62) 44%, rgba(7,11,31, .2) 62%, rgba(7,11,31, 0) 80%); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-bottom: 40px; }
  .hero-copy { align-items: center; text-align: center; padding-top: clamp(36px, 10vh, 95px); }
  .hero-copy .hero-try { justify-content: center; }
  .terrain { height: 30%; }
  .fog { height: 26%; }
  .hero-visual { padding-bottom: 12px; }
  /* Flat on small screens: at this size a tilt resamples the screen's small print into mush. */
  .macbook { margin: 0 auto; width: min(620px, 100%); transform: none; }
  .orb { width: 42px; height: 42px; }
  .orb-mark { padding: 9px; }
  .orb-coin { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
  .hero-title { margin-top: 21px; }
  .hero-money { margin-top: 20px; max-width: 32ch; font-size: 18px; }
  .hero-sub { max-width: 36ch; font-size: 15px; line-height: 1.45; }
  .hero-search { margin-top: 23px; }
  /* On a phone the header has room for the coin, its price and its move, not a labelled
     button as well: the arrow alone opens the analysis, and so does a tap on the chart. */
  .mb-bar span:not(.mb-logo):not(.mb-bar-r) { display: none; }
  .mb-tf { display: none; }
  .mb-main { grid-template-columns: minmax(0, 1fr); }
  .mb-side { display: none; }
  .mb-head { padding: 8px 10px 6px; gap: 8px; }
  .lp-id small { display: none; }
  .lp-quote strong { font-size: 13px; }
  .mb-foot { gap: 5px; padding: 6px 8px 8px; }
  .lp-tile { padding: 5px 6px; }
  .lp-tile strong { font-size: 11px; }
}
.mp-coin img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---------- primary discovery button: a physical key, extruded 9px ---------- */
.hero-copy .hero-search { --h: 84px; --lift: 9px; position: relative; display: block; width: min(560px, 100%); height: calc(var(--h) + var(--lift)); margin-top: 30px; padding: 0; border: 0; border-radius: 26px; background: none; box-shadow: none; animation: rise .9s var(--ease) 1.25s both; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: none; }
.hero-copy .hero-search:hover { transform: none; box-shadow: none; }
.hero-copy .hero-search:active { transform: none; }
.hs-shadow { position: absolute; left: 6%; right: 6%; bottom: -14px; height: 26px; border-radius: 50%; background: rgba(105,114,255,.55); filter: blur(22px); opacity: .55; transition: opacity .3s, transform .3s var(--ease); }
.hs-edge, .hs-face { position: absolute; left: 0; right: 0; border-radius: 26px; }
.hs-edge { bottom: 0; height: var(--h); background: linear-gradient(180deg, #121A72, #0C114A); box-shadow: 0 18px 30px -14px rgba(0,0,0,.85), inset 0 -2px 0 rgba(0,0,0,.25); }
.hs-face { top: 0; height: var(--h); display: flex; align-items: center; gap: 14px; padding: 0 14px 0 28px; overflow: hidden; text-align: left; color: #F4F6FF;
  background: linear-gradient(180deg, #B7BFFF 0%, #8B94FF 38%, #6972FF 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -6px 12px -4px rgba(20,29,124,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .3s var(--spring), filter .3s; }
.hs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-text strong { font: 800 clamp(18px, 5vw, 23px)/1.1 'Archivo', var(--display); letter-spacing: -.01em; }
.hs-text small { font-size: 13px; font-weight: 550; color: rgba(244,246,255,.9); }
.hs-orb { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #B7BFFF; background: radial-gradient(circle at 35% 25%, #1B1D2F, #050610 75%); box-shadow: 0 6px 12px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s var(--spring); }
.hs-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-130%); }
@media (hover: hover) {
  .hero-search:hover .hs-face { transform: translateY(-3px); filter: brightness(1.06); }
  .hero-search:hover .hs-shadow { opacity: .85; transform: scaleX(1.06); }
  .hero-search:hover .hs-orb { transform: translateX(4px); }
  .hero-search:hover .hs-shine { animation: sheen .9s var(--ease) 1; }
}
.hero-search:active .hs-face { transform: translateY(calc(var(--lift) - 2px)); transition-duration: .07s; }
.hero-search:active .hs-shadow { opacity: .3; }
.hero-search:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 6px; }
@media (max-width: 760px) { .hero-copy .hero-search { --h: 76px; } .hs-face { padding-left: 20px; gap: 10px; } .hs-orb { width: 48px; height: 48px; } }

/* ---------- header: no collisions ---------- */
.hero-copy .hero-search { animation: none; }
.hero-onboarding-note { margin: 18px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.5; max-width: 44ch; }
.topbar .short { display: none; }
.topbar > .btn, .topbar .account { flex-shrink: 0; }
.topbar .logo { flex-shrink: 0; }
.topbar .btn-light { padding: 0 16px; }
@media (max-width: 860px) {
  .topbar { gap: 8px; padding: 0 max(14px, env(safe-area-inset-left)); }
  .topbar .long { display: none; }
  .topbar .short { display: inline; }
  .account-role { padding: 3px 5px; font-size: 8.5px; }
}
@media (max-width: 440px) {
  .topbar { padding: 0 12px; }
  .topbar .logo { font-size: 0; gap: 0; }
  .topbar .btn-light { padding: 0 13px; }
  .account-chip { gap: 6px; padding-right: 8px; height: 40px; }
  .account-chip img, .account-initial { width: 30px; height: 30px; }
  .account-menu { right: -64px; max-width: calc(100vw - 24px); }
}