/* ============================================================
   Advify — design system
   Three colours carry the whole site:
     1. brand blue  — the single accent, used for every action
     2. cream white — the paper every light section is printed on
     3. soft black  — text on paper, and the one dark canvas
   Each product (LiveLator, TrickSave, Market, Tashhis, Premial,
   QReate) keeps one hue of its own, but only inside its own
   artwork — never in the site's chrome.
   ============================================================ */

:root {
  /* Brand — one accent, one job: anything the visitor can act on. */
  --brand: #287de4;          /* the mark: rules, dots, accents            */
  --brand-ink: #1f66c2;      /* filled surfaces under white text — AA     */
  --brand-ink-hover: #17529d;
  --brand-light: #5fa2ee;    /* brand type/marks on the night canvas — AA */
  --brand-10: rgba(40, 125, 228, .10);
  --brand-16: rgba(40, 125, 228, .16);
  --brand-28: rgba(40, 125, 228, .28);

  /* Paper — white with about a tenth of cream in it. */
  --paper: #faf8f4;
  --paper-2: #f4f1eb;
  --surface: #ffffff;

  /* Ink — black, softened. Never #000. */
  --ink: #17191c;
  --ink-2: #4e545b;
  --ink-3: #646b73;
  --line: rgba(23, 25, 28, .10);
  --line-2: rgba(23, 25, 28, .18);

  /* Night — the single dark canvas every dark section shares. */
  --night: #14161a;
  --on-night: #f4f2ed;
  --on-night-2: rgba(244, 242, 237, .64);
  --on-night-3: rgba(244, 242, 237, .42);
  --night-line: rgba(244, 242, 237, .10);
  --night-fill: rgba(244, 242, 237, .04);
  --night-fill-2: rgba(244, 242, 237, .07);

  /* Product hues — identity only, confined to each product's artwork. */
  --p-live: #4fd6b4;
  --p-trick: #9bf03a;
  --p-market: #f0c14b;
  --p-tashhis: #6de3b6;
  --p-premial: #f0c14b;
  --p-qreate: #9b8cff;

  /* Rhythm */
  --pad: clamp(22px, 4.2vw, 84px);
  /* The label column the three offset sections share. About, Raqamlar and
     Beyond all set their eyebrow in this column, so their headlines start on
     one vertical line instead of three. */
  --label-col: clamp(190px, 16vw, 260px);
  --label-gap: clamp(28px, 3vw, 48px);
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);        /* entrances — overshoot-free settle */
  --ease-inout: cubic-bezier(.65, 0, .35, 1); /* symmetric state changes */
  --ease-reveal: cubic-bezier(.16, 1, .3, 1); /* long scroll reveals */
  --dur-base: .5s;
  --dur-slow: .85s;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

section[id] { scroll-margin-top: 82px; }

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

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

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.section-pad {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform .25s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only,
.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* One label style for every section opener. */
.eyebrow {
  margin: 0 0 22px;
  font-size: .68rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-reveal), transform var(--dur-slow) var(--ease-reveal);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: 88px;
  padding: 20px clamp(18px, 3vw, 58px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  color: var(--on-night);
  transition: color .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header[data-theme="light"] {
  color: var(--ink);
  background: rgba(250, 248, 244, .8);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-header[data-theme="dark"].is-scrolled {
  background: rgba(20, 22, 26, .5);
  border-color: var(--night-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.brand-logo {
  display: block;
  width: 25px;
  height: 31px;
  flex: 0 0 auto;
  object-fit: cover;
}

.brand-word {
  font-size: 1.62rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.075em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 56px);
}

.desktop-nav a {
  position: relative;
  /* padding + matching negative margin: a 44px hit box, no layout shift */
  padding: 12px 4px;
  margin: -12px -4px;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 5px;
  height: 1px;
  background: currentColor;
  transition: right .35s var(--ease);
}

.desktop-nav a:hover::after {
  right: 0;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
}

.round-link,
.menu-toggle {
  width: 46px;
  height: 46px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: inherit;
  opacity: .6;
  transition: opacity .25s ease, background .25s ease, color .25s ease, transform .25s var(--ease);
}

/* Brand marks keep their own proportions — width leads, height follows. */
.round-link svg {
  display: block;
  width: 19px;
  height: auto;
  fill: currentColor;
}

.round-link .icon-telegram { width: 18px; margin-right: 1px; }
.round-link .icon-mail { width: 19px; }
/* Drawn as strokes, not a filled glyph, so it carries the same optical weight
   as the other two marks inside the 46px circle. */
.round-link .icon-insta { width: 20px; }

/* No lift: the header is fixed and these sit against the page edge, so a rise
   on hover reads as the whole bar shifting. The fill swap carries the state. */
.round-link:hover,
.menu-toggle:hover {
  opacity: 1;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

.menu-toggle {
  display: none;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}

.menu-toggle span:first-child { top: 19px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: none;
  padding: 130px 24px 38px;
  background: var(--night);
  color: var(--on-night);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--night-line);
  font-size: clamp(2rem, 10vw, 4rem);
  font-weight: 600;
  letter-spacing: -.055em;
  transition: color .25s ease;
}

.mobile-menu nav a:hover { color: var(--brand-light); }

.mobile-menu nav span {
  width: 24px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-light);
}

.mobile-menu > p {
  position: absolute;
  left: 24px;
  bottom: 28px;
  margin: 0;
  font-size: .84rem;
  color: var(--on-night-2);
}

/* ── Hero ───────────────────────────────────────────────── */

.featured {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  isolation: isolate;
}

.featured-slides,
.featured-slide {
  position: absolute;
  inset: 0;
}

.featured-slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .85s var(--ease), visibility .85s, transform 1.4s var(--ease);
}

.featured-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Every slide is printed on the same night canvas and the same neutral
   tonal scale. Only one thing changes between them: the product's own
   accent, and it only ever touches the small marks. */
.featured-slide {
  --h-1: rgba(244, 242, 237, .035);
  --h-2: rgba(244, 242, 237, .06);
  --h-3: rgba(244, 242, 237, .085);
  --h-line: var(--night-line);
  --h-tint: rgba(244, 242, 237, .05);
  --h-glow: rgba(244, 242, 237, .05);
  --h-glow-2: var(--brand-10);
  --hero-ink: var(--on-night);
  --hero-accent: var(--brand);
  background: var(--night);
}

.theme-live { --hero-accent: var(--p-live); --h-glow: rgba(79, 214, 180, .10); }
.theme-trick { --hero-accent: var(--p-trick); --h-glow: rgba(155, 240, 58, .09); }
.theme-market { --hero-accent: var(--p-market); --h-glow: rgba(240, 193, 75, .10); }

.mosaic {
  position: absolute;
  inset: 0;
  padding: 104px 22px 20px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, .7vw, 14px);
  transform: scale(1.03);
  transition: transform 1.8s var(--ease);
}

.is-active .mosaic { transform: scale(1); }

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: clamp(10px, 1vw, 20px);
  background: var(--h-1);
  color: var(--hero-ink);
  opacity: 0;
  transform: translateY(28px) scale(.96);
  transition: opacity .8s var(--ease), transform 1s var(--ease);
}

.is-active .tile {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.is-active .tile:nth-child(2) { transition-delay: .04s; }
.is-active .tile:nth-child(3) { transition-delay: .08s; }
.is-active .tile:nth-child(4) { transition-delay: .12s; }
.is-active .tile:nth-child(5) { transition-delay: .16s; }
.is-active .tile:nth-child(6) { transition-delay: .2s; }
.is-active .tile:nth-child(7) { transition-delay: .24s; }
.is-active .tile:nth-child(8) { transition-delay: .28s; }
.is-active .tile:nth-child(9) { transition-delay: .32s; }
.is-active .tile:nth-child(10) { transition-delay: .36s; }
.is-active .tile:nth-child(11) { transition-delay: .4s; }
.is-active .tile:nth-child(12) { transition-delay: .44s; }

.tile small {
  font-size: clamp(.68rem, .55vw, .74rem);
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--on-night-2);
}

/* LiveLator mosaic */
.tile-live-orbit { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(circle at 52% 46%, var(--h-glow), transparent 62%), var(--h-2); }
.tile-live-caption { grid-column: 3 / 5; grid-row: 1; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; background: var(--h-2); }
.tile-live-wave { grid-column: 5 / 7; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--h-1); }
.tile-live-jp { grid-column: 1; grid-row: 3; display: grid; place-items: center; align-content: center; gap: 8px; background: var(--h-3); color: var(--hero-accent); }
.tile-live-room { grid-column: 2 / 4; grid-row: 3; padding: 24px; display: flex; align-items: flex-end; gap: 9px; background: radial-gradient(circle at 72% 20%, var(--h-glow-2), transparent 58%), var(--h-2); }
.tile-live-lines { grid-column: 4; grid-row: 2 / 4; display: grid; align-content: center; gap: 10px; padding: 28px; background: var(--h-1); }
.tile-live-en { grid-column: 5 / 7; grid-row: 2; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; background: var(--h-3); }
.tile-live-core { grid-column: 1 / 3; grid-row: 4; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--h-1); }
.tile-live-fr { grid-column: 3; grid-row: 4; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--h-tint); color: var(--hero-accent); }
.tile-live-quote { grid-column: 4 / 6; grid-row: 4; padding: 20px 24px; display: flex; align-items: center; gap: 14px; background: var(--h-3); }
.tile-live-map { grid-column: 6; grid-row: 3 / 5; background: radial-gradient(circle at 42% 38%, var(--h-glow), transparent 66%), var(--h-1); }
.tile-live-subtitle { grid-column: 5 / 7; grid-row: 3; padding: 20px; display: flex; align-items: flex-end; gap: 9px; background: var(--h-1); }

.orbit-globe {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(79, 214, 180, .34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-globe::before,
.orbit-globe::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(79, 214, 180, .26);
  border-radius: 50%;
  transform: rotate(56deg) scaleX(.45);
}

.orbit-globe::after { transform: rotate(-56deg) scaleX(.45); border-color: var(--brand-28); }

.live-voice-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 45% 55% 58% 42% / 51% 39% 61% 49%;
  background: linear-gradient(145deg, var(--p-live), var(--brand));
  transform: translate(-50%, -50%);
  animation: liveCoreMorph 9s ease-in-out infinite, liveCoreFloat 6s ease-in-out infinite;
}

.live-voice-core i { width: 4px; height: 25%; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); animation: wave 1.1s ease-in-out infinite alternate; }
.live-voice-core i:nth-child(2) { height: 48%; animation-delay: -.7s; }
.live-voice-core i:nth-child(3) { height: 66%; animation-delay: -.35s; }
.live-voice-core i:nth-child(4) { height: 42%; animation-delay: -.8s; }
.live-voice-core i:nth-child(5) { height: 27%; animation-delay: -.2s; }
@keyframes liveCoreMorph { 50% { border-radius: 62% 38% 41% 59% / 38% 59% 41% 62%; } }
@keyframes liveCoreFloat { 50% { translate: 0 -10px; } }

.tile-live-wave span,
.tile-live-core span i {
  display: block;
  width: 8px;
  height: 24%;
  min-height: 18px;
  border-radius: var(--r-pill);
  background: var(--hero-accent);
  animation: wave 1.15s ease-in-out infinite alternate;
}

.tile-live-wave span:nth-child(2), .tile-live-core span i:nth-child(2) { animation-delay: -.7s; height: 55%; }
.tile-live-wave span:nth-child(3), .tile-live-core span i:nth-child(3) { animation-delay: -.3s; height: 35%; }
.tile-live-wave span:nth-child(4), .tile-live-core span i:nth-child(4) { animation-delay: -.9s; height: 70%; }
.tile-live-wave span:nth-child(5), .tile-live-core span i:nth-child(5) { animation-delay: -.5s; height: 42%; }
.tile-live-wave span:nth-child(6) { animation-delay: -.2s; height: 62%; }
.tile-live-wave span:nth-child(7) { animation-delay: -.8s; height: 29%; }
.tile-live-wave span:nth-child(even) { background: var(--brand-light); }

@keyframes wave { to { transform: scaleY(.45); opacity: .6; } }

.tile-live-jp span { font-size: clamp(2.2rem, 4.2vw, 5rem); font-weight: 400; line-height: .9; }
.tile-live-room b { font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.tile-live-room small { color: var(--on-night-3); }
.room-dot,
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hero-accent); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.tile-live-lines i { height: 8px; border-radius: 9px; background: rgba(244, 242, 237, .18); }
.tile-live-lines i:nth-child(2) { width: 72%; background: var(--hero-accent); }
.tile-live-lines i:nth-child(3) { width: 88%; }
.tile-live-lines i:nth-child(4) { width: 56%; }
.tile-live-core > span { display: flex; height: 50px; align-items: center; gap: 6px; }
.tile-live-core b { font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.tile-live-fr > span { font-size: clamp(1.7rem, 3.2vw, 3.9rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.tile-live-quote > span { font-size: 4rem; line-height: .7; color: var(--hero-accent); opacity: .45; }
.tile-live-quote p { margin: 0; max-width: 19ch; font-size: clamp(.7rem, .9vw, 1.05rem); font-weight: 600; }
.tile-live-map::before { content: ""; position: absolute; inset: 16%; border: 1px dashed rgba(79, 214, 180, .28); border-radius: 48% 52% 40% 60%; transform: rotate(24deg); }
.tile-live-subtitle .status-dot { flex: 0 0 auto; }

/* TrickSave mosaic */
.tile-trick-story { grid-column: 1 / 3; grid-row: 1 / 3; padding: 22px; background: radial-gradient(circle at 68% 28%, var(--h-glow), transparent 60%), var(--h-2); }
.tile-trick-link { grid-column: 3 / 5; grid-row: 1; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 7px; background: var(--h-3); }
.tile-trick-arrow { grid-column: 5; grid-row: 1; display: grid; place-items: center; background: var(--h-1); color: var(--hero-accent); }
.tile-trick-chat { grid-column: 6; grid-row: 1 / 3; padding: 25px 16px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: var(--h-1); }
.tile-trick-shield { grid-column: 1; grid-row: 3; display: grid; place-items: center; align-content: center; gap: 9px; background: var(--h-2); }
.tile-trick-film { grid-column: 2 / 4; grid-row: 3 / 5; background: radial-gradient(circle at 38% 60%, var(--h-glow-2), transparent 62%), var(--h-2); }
.tile-trick-stack { grid-column: 4; grid-row: 2 / 4; background: var(--h-1); }
.tile-trick-copy { grid-column: 5 / 7; grid-row: 3; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background: var(--h-2); }
.tile-trick-search { grid-column: 1 / 3; grid-row: 4; padding: 20px 25px; display: flex; align-items: center; gap: 14px; background: var(--h-1); }
.tile-trick-vanish { grid-column: 4 / 6; grid-row: 4; padding: 20px; display: grid; align-content: center; background: var(--h-3); }
.tile-trick-ring { grid-column: 5; grid-row: 2; display: grid; place-items: center; background: var(--h-1); }
.tile-trick-ready { grid-column: 6; grid-row: 4; padding: 18px; display: flex; align-items: flex-end; gap: 8px; background: var(--h-tint); color: var(--hero-accent); }

.tile-trick-story i { position: absolute; inset: 13%; border: 2px solid rgba(244, 242, 237, .5); border-left-color: rgba(244, 242, 237, .12); border-radius: 50%; }
.tile-trick-story span { position: absolute; left: 22px; bottom: 38px; font-size: clamp(1.3rem, 2.3vw, 3rem); font-weight: 700; }
.tile-trick-story b { position: absolute; left: 22px; bottom: 20px; font-size: .72rem; font-weight: 600; color: var(--on-night-3); }
.tile-trick-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.8rem, 1.1vw, 1.25rem); font-weight: 700; }
.tile-trick-link span { color: var(--hero-accent); font-size: .72rem; font-weight: 700; }
.tile-trick-arrow span { font-size: clamp(4rem, 8vw, 9rem); line-height: 1; animation: downloadBounce 1.6s var(--ease) infinite; }
@keyframes downloadBounce { 50% { transform: translateY(12px); } }
.tile-trick-chat i { height: 30px; border-radius: 13px 13px 4px 13px; background: rgba(244, 242, 237, .09); }
.tile-trick-chat i:nth-child(2) { width: 75%; align-self: flex-end; background: var(--hero-accent); }
.tile-trick-chat i:nth-child(3) { width: 85%; }
.tile-trick-chat b { font-size: .72rem; font-weight: 600; color: var(--on-night-2); text-align: center; }
.tile-trick-film > i { position: absolute; width: 70px; height: 70px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgba(244, 242, 237, .32); border-radius: 50%; font-style: normal; background: rgba(20, 22, 26, .4); }
.tile-trick-film > small { position: absolute; right: 16px; bottom: 14px; }
.tile-trick-stack i { position: absolute; width: 60%; height: 54%; left: 20%; top: 23%; border: 1px solid rgba(244, 242, 237, .12); border-radius: 13px; background: rgba(244, 242, 237, .06); }
.tile-trick-stack i:nth-child(2) { transform: rotate(10deg); background: rgba(244, 242, 237, .09); }
.tile-trick-stack i:nth-child(3) { transform: rotate(-8deg); background: rgba(155, 240, 58, .18); }
.tile-trick-vanish i { width: 70%; height: 6px; margin-bottom: 13px; border-radius: 5px; background: var(--hero-accent); }
.tile-trick-vanish strong { font-size: .9rem; font-weight: 700; }
.tile-trick-vanish span { font-size: .7rem; font-weight: 600; color: var(--hero-accent); }
.tile-trick-ring span { width: 58%; aspect-ratio: 1; border: 6px solid rgba(244, 242, 237, .12); border-right-color: var(--hero-accent); border-radius: 50%; }
.tile-trick-ready .status-dot { background: var(--hero-accent); }

/* Advify Market mosaic */
.tile-market-star { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, var(--h-glow), transparent 64%), var(--h-2); }
.tile-market-rate { grid-column: 3 / 5; grid-row: 1; padding: 24px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 16px; background: var(--h-2); }
.tile-market-gift { grid-column: 5; grid-row: 1 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 44%, var(--h-glow-2), transparent 62%), var(--h-2); }
.tile-market-ton { grid-column: 6; grid-row: 1; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--h-3); color: var(--hero-accent); }
.tile-market-chart { grid-column: 1 / 4; grid-row: 3; padding: 18px; color: var(--hero-accent); background: var(--h-1); }
.tile-market-premium { grid-column: 4 / 6; grid-row: 3 / 5; display: grid; place-items: center; align-content: center; gap: 8px; background: radial-gradient(circle at 50% 46%, var(--h-glow-2), transparent 60%), var(--h-2); }
.tile-market-buy { grid-column: 6; grid-row: 2 / 4; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: var(--h-tint); }
.tile-market-coin { grid-column: 1 / 3; grid-row: 4; background: var(--h-1); }
.tile-market-safe { grid-column: 3; grid-row: 4; display: grid; place-items: center; align-content: center; gap: 7px; background: var(--h-2); }
.tile-market-nft { grid-column: 4 / 6; grid-row: 2; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; background: var(--h-2); }
.tile-market-grid { grid-column: 5 / 7; grid-row: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 16px; background: var(--h-1); }

.tile-market-star small { position: absolute; left: 20px; bottom: 18px; }
.tile-market-rate small { grid-column: 1 / 3; }
.tile-market-rate strong { font-size: clamp(1.25rem, 2.5vw, 3rem); font-weight: 700; }
.tile-market-rate b { color: var(--hero-accent); align-self: end; font-size: .78rem; font-weight: 700; }
.tile-market-gift i { position: absolute; width: 66%; aspect-ratio: 1; border: 1px solid rgba(244, 242, 237, .16); border-radius: 38% 62% 51% 49%; }
.tile-market-gift small { position: absolute; bottom: 16px; }
.tile-market-ton b { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--on-night-2); }
.tile-market-chart svg { width: 100%; height: 75%; }
.tile-market-chart small { color: var(--on-night-2); }
.tile-market-premium strong { font-size: clamp(1rem, 1.7vw, 2rem); font-weight: 700; }
.tile-market-buy strong { font-size: clamp(1rem, 2vw, 2.4rem); font-weight: 700; }
.tile-market-buy span { font-size: .7rem; font-weight: 700; color: var(--hero-accent); }
.tile-market-coin i { position: absolute; width: 72px; aspect-ratio: 1; top: 50%; left: 28%; border-radius: 50%; border: 2px solid rgba(240, 193, 75, .55); transform: translate(-50%, -50%); }
.tile-market-coin i:nth-child(2) { left: 45%; transform: translate(-50%, -50%) scale(.8); opacity: .8; }
.tile-market-coin i:nth-child(3) { left: 62%; transform: translate(-50%, -50%) scale(.62); opacity: .6; }
.tile-market-coin i:nth-child(4) { left: 77%; transform: translate(-50%, -50%) scale(.46); opacity: .4; }
.tile-market-safe span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--h-tint); color: var(--hero-accent); }
.tile-market-safe b { font-size: .7rem; font-weight: 700; text-align: center; }
.tile-market-grid i { border-radius: 7px; background: rgba(244, 242, 237, .06); }
.tile-market-grid i:nth-child(2),
.tile-market-grid i:nth-child(5) { background: rgba(240, 193, 75, .3); }

/* Geometric product marks — drawn, not typed, so they stay crisp and on-brand */
.geo { position: relative; display: block; color: var(--hero-accent); }
.geo-star {
  width: clamp(88px, 13vw, 190px);
  aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 68.9% 56%, 80.1% 90.5%, 50% 69.2%, 19.9% 90.5%, 31.1% 56%, 2% 34.5%, 38.2% 34.5%);
  opacity: .9;
}
.geo-spark {
  width: clamp(56px, 7.5vw, 108px);
  aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  opacity: .85;
}
.geo-spark.is-sm { width: clamp(30px, 3vw, 44px); }
.geo-diamond {
  width: clamp(34px, 3.4vw, 52px);
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 4px;
  rotate: 45deg;
}
.geo-tiers { display: flex; align-items: flex-end; gap: 7px; height: clamp(46px, 5.5vw, 78px); }
.geo-tiers i { width: clamp(13px, 1.5vw, 20px); border-radius: 4px; background: currentColor; opacity: .4; }
.geo-tiers i:nth-child(1) { height: 46%; }
.geo-tiers i:nth-child(2) { height: 72%; opacity: .65; }
.geo-tiers i:nth-child(3) { height: 100%; opacity: 1; }
.geo-check { width: 44px; height: 44px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .8; }
.geo-check::after {
  content: "";
  position: absolute;
  inset: 34% 32% 38% 32%;
  border: 2px solid currentColor;
  border-top: 0;
  border-right: 0;
  rotate: -45deg;
}
.geo-search { width: 30px; height: 30px; }
.geo-search::before { content: ""; position: absolute; inset: 0 27% 27% 0; border: 2px solid currentColor; border-radius: 50%; }
.geo-search::after { content: ""; position: absolute; right: 12%; bottom: 10%; width: 38%; height: 2px; background: currentColor; rotate: 45deg; transform-origin: right; }
.geo-play {
  width: 0;
  height: 0;
  border-left: 15px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
  font-style: normal;
}

/* The canvas is already dark, so the scrim only does two jobs: clear a
   quiet field under the headline, and settle the foot of the section. */
.hero-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(72% 52% at 50% 50%, rgba(20, 22, 26, .8), rgba(20, 22, 26, 0) 100%),
    linear-gradient(to bottom, rgba(20, 22, 26, .3) 0%, rgba(20, 22, 26, .1) 22%, rgba(20, 22, 26, .44) 68%, rgba(20, 22, 26, .8) 100%);
  pointer-events: none;
}

.featured-copy {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: min(94%, 1500px);
  transform: translate(-50%, -48%);
  text-align: center;
}

.featured-copy > * {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .75s var(--ease), transform .9s var(--ease);
}

.is-active .featured-copy > * { opacity: 1; transform: translateY(0); }
.is-active .featured-copy h2 { transition-delay: .14s; }
.is-active .featured-copy > p { transition-delay: .24s; }
.is-active .featured-copy .hero-cta { transition-delay: .34s; }

.featured-copy h2 {
  margin: 0;
  font-size: clamp(4.3rem, 11.6vw, 13rem);
  line-height: .87;
  letter-spacing: -.085em;
  font-weight: 600;
  white-space: nowrap;
}

.theme-market .featured-copy h2 {
  font-size: clamp(3.6rem, 9.3vw, 10.8rem);
}

.theme-market .market-name { display: inline-block; margin-left: .075em; }

.featured-copy > p {
  margin: clamp(18px, 2.5vh, 30px) auto 0;
  font-size: clamp(1rem, 1.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--on-night-2);
}

/* ── Buttons ────────────────────────────────────────────── */

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 188px;
  margin-top: clamp(22px, 3vh, 38px);
  padding: 17px 22px 17px 27px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}

/* No transition of its own: the button must inherit the entry animation from
   `.featured-copy > *` so it fades and rises in step with the headline and
   paragraph. Declaring `transition` here would override that shorthand and
   make the button snap into place on every slide change. Hover feedback lives
   on the inner arrow only — a translate here would fight the same property. */

.hero-cta span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-ink);
  color: #fff;
  transition: transform .35s var(--ease);
}

.hero-cta:hover span { transform: rotate(45deg); }

.featured-controls {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
}

.circle-control {
  width: 54px;
  height: 54px;
  border: 1px solid var(--night-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 22, 26, .35);
  color: var(--on-night);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.circle-control:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  transform: scale(1.05);
}

.hero-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-progress button.hero-dot {
  position: relative;
  width: 36px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(244, 242, 237, .24);
  cursor: pointer;
  transition: width .35s var(--ease);
}

.hero-progress button.hero-dot.is-active { width: 94px; }
.hero-progress button.hero-dot span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--paper); border-radius: inherit; }
/* This bar is the carousel's clock: its animationend advances the slide, so
   whatever pauses the bar pauses the autoplay — the two can never drift. */
.hero-progress button.hero-dot.is-active span { animation: heroTimer 7.5s linear forwards; }
.featured.is-paused .hero-progress button.hero-dot.is-active span,
html.intro-first .hero-progress button.hero-dot.is-active span { animation-play-state: paused; }
@keyframes heroTimer { to { width: 100%; } }

/* ── Projects ───────────────────────────────────────────── */

/* Vertical rhythm is bound to the shorter axis: width alone makes a wide but
   short window pad the heading with half a screen of air. */
.projects {
  position: relative;
  padding: clamp(58px, min(8.5vw, 13vh), 180px) 0 0;
  background: var(--paper);
  overflow: hidden;
}

.projects-intro {
  text-align: center;
}

.projects-intro > p:last-child {
  max-width: 64ch;
  margin: clamp(24px, 2.6vw, 34px) auto 0;
  color: var(--ink-2);
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  line-height: 1.65;
}

.projects-intro h2,
.about h2,
.beyond-intro h2,
.contact h2 {
  margin: 0;
  /* The 20vh arm only bites on a short window, where a width-only size would
     hand two lines of heading most of the screen. */
  font-size: clamp(3.6rem, min(8.2vw, 20vh), 9.5rem);
  line-height: .94;
  font-weight: 600;
  letter-spacing: -.075em;
}

/* Every section headline highlights the phrase that carries its promise, in the
   one accent the site has. On the night canvas it steps up to --brand-light,
   the tint reserved for brand type on dark — #287de4 is legible there, but the
   lighter step is what the rest of the dark chrome already uses. */
.projects-intro h2 span,
.about h2 span,
.beyond-intro h2 span,
.contact h2 span { color: var(--brand); }

.numbers-copy h2 span { color: var(--brand-light); }

/* One calm paper canvas; the only colour is a whisper of the brand. The stage
   deliberately carries no background of its own — a tonal step down drew a
   hard seam across the section, so the intro and the fan share one surface. */
.project-stage {
  position: relative;
  margin-top: clamp(38px, min(5vw, 7.5vh), 110px);
  padding: 1px 0 clamp(90px, 10vw, 150px);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}

.project-stage-blob {
  position: absolute;
  z-index: 0;
  width: min(86vw, 1180px);
  aspect-ratio: 1.35;
  left: 12%;
  top: 20%;
  border-radius: 44% 56% 38% 62% / 58% 35% 65% 42%;
  background: var(--brand);
  opacity: .1;
  filter: blur(70px);
  animation: stageBlobDrift 30s ease-in-out infinite;
}
@keyframes stageBlobDrift {
  50% { translate: -7% 5%; scale: 1.12 .92; }
}

/* Chips sit under the fan — the arc leads, the filter follows. */
.project-filter {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-top: clamp(38px, 4.4vw, 64px);
  padding-bottom: 0;
}

.project-filter button {
  padding: 12px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.project-filter button:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.project-filter button.is-active { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

/* The chips are thrown into place rather than faded in: each one is launched
   from below the row, sails past its seat, then falls back through its own
   spin and settles. Two tracks run side by side on the *individual*
   `translate` and `rotate` properties — that leaves `transform` free for the
   hover lift above, and lets each track keep its own length and easing.

   Rise  0.66s up to -100px · 0.5s back down to 20px · 0.167s home   = 1.327s
   Spin  0.83s to the mid angle · 0.33s to rest                      = 1.16s
   Both start together, so the pill is still turning while it overshoots.

   Armed by the script (data-chip-toss) and disarmed once the last chip
   lands, so a browser without JS — and anyone who asked for less motion —
   simply gets the chips sitting where they belong. */
.project-filter[data-chip-toss] {
  /* The flight leaves the row on both edges; the narrow-screen `overflow-x:
     auto` further down would otherwise clip it and grow a scrollbar. */
  overflow: visible;
}

.project-filter[data-chip-toss] button {
  visibility: hidden;
  translate: 0 var(--toss-rise, 210px);
  rotate: var(--toss-r0, 0deg);
}

.project-filter[data-chip-toss].is-visible button {
  animation:
    chipTossRise 1.327s var(--toss-delay, 0ms) forwards,
    chipTossSpin 1.16s var(--toss-delay, 0ms) forwards;
  will-change: translate, rotate;
}

/* Each chip carries its own spin — a shared angle would read as one rigid
   block tipping over. The 30ms steps are small on purpose: they arrive as a
   handful, and the variety comes from the angles, not from the queue. */
.project-filter[data-chip-toss] button:nth-child(1) { --toss-r0: 250deg;  --toss-r1: 50deg;  --toss-r2: 0deg;   --toss-delay: 0ms; }
.project-filter[data-chip-toss] button:nth-child(2) { --toss-r0: -162deg; --toss-r1: -45deg; --toss-r2: 0deg;   --toss-delay: 30ms; }
.project-filter[data-chip-toss] button:nth-child(3) { --toss-r0: -15deg;  --toss-r1: 15deg;  --toss-r2: 0deg;   --toss-delay: 60ms; }
.project-filter[data-chip-toss] button:nth-child(4) { --toss-r0: 0deg;    --toss-r1: -60deg; --toss-r2: 0deg;   --toss-delay: 100ms; }
.project-filter[data-chip-toss] button:nth-child(5) { --toss-r0: 50deg;   --toss-r1: 375deg; --toss-r2: 360deg; --toss-delay: 130ms; }

/* `visibility` is declared on both ends on purpose: the armed rule above hides
   the chip through its delay, and only a value on the *last* keyframe survives
   `forwards` — with it on 0% alone the chip blinks out again as it lands. */
@keyframes chipTossRise {
  0%      { visibility: visible; translate: 0 var(--toss-rise, 210px); animation-timing-function: cubic-bezier(.17, .17, 0, 1); }
  49.74%  { translate: 0 -100px; animation-timing-function: cubic-bezier(1, 0, .5, 1); }
  87.42%  { translate: 0 20px;   animation-timing-function: cubic-bezier(.17, 0, .5, 1); }
  100%    { visibility: visible; translate: 0 0; }
}

@keyframes chipTossSpin {
  0%      { rotate: var(--toss-r0, 0deg); animation-timing-function: cubic-bezier(.17, .17, 0, 1); }
  71.55%  { rotate: var(--toss-r1, 0deg); animation-timing-function: cubic-bezier(1, 0, .5, 1); }
  100%    { rotate: var(--toss-r2, 0deg); }
}

/* Arc carousel — the cards ride a very large circle, so stepping through them
   is one continuous swing rather than a slide. Every card sits at the rotor's
   pivot and is rotated by its own index; rotating the rotor by -active brings
   the chosen card to the top of the arc. */
.project-arc {
  --card-w: clamp(276px, 25.7vw, 380px);
  --card-h: calc(var(--card-w) * 1.514);
  /* Ring radius as a multiple of the card width, kept unitless so the script
     can read it too. --arc-r is measured from the card's top edge, so half a
     card is added back to put the card *centres* on the ring. Tilted cards
     reach toward each other at the corners, so the ring is opened past the
     reference's own spacing until the real corner-to-corner gap is ~90px. */
  --arc-rr: 12.6;
  --arc-r: calc(var(--card-w) * var(--arc-rr) + var(--card-h) / 2);
  --arc-step: 6deg;
  --arc-ease: cubic-bezier(.2, 0, 0, 1);
  --arc-dur: .68s;
  position: relative;
  z-index: 2;
  height: calc(var(--card-h) + 56px);
  margin-top: clamp(34px, min(4.6vw, 6.8vh), 96px);
  /* Clipped sideways at the viewport only. Outer cards keep swinging down past
     the box exactly as they do on the reference — they are off-screen there, so
     the drop never shows; a vertical clip would flatten the fan instead. */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  cursor: grab;
}

.project-arc.is-dragging { cursor: grabbing; }

/* The swap between two filters is done while the cards are off screen, so the
   ring must jump to its new index instead of sweeping there. */
.project-arc.is-swapping .project-arc-rotor,
.project-arc.is-swapping .project-card { transition: none !important; }

.project-arc-rotor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 var(--arc-r);
  transform: rotate(calc(var(--active, 0) * var(--arc-step) * -1));
  transition: transform var(--arc-dur) var(--arc-ease);
}

.project-arc.is-dragging .project-arc-rotor { transition: none; }

.project-card {
  position: absolute;
  left: calc(var(--card-w) / -2);
  top: 0;
  display: flex;
  flex-direction: column;
  width: var(--card-w);
  height: var(--card-h);
  padding: calc(var(--card-w) * .0649);
  border: 1px solid var(--line);
  border-radius: calc(var(--card-w) * .0703);
  background: var(--surface);
  transform-origin: 50% var(--arc-r);
  /* Two rotations about the same origin, doing two unrelated jobs. `rotate`
     places the card on the ring — that one needs the far pivot, which is why
     the origin sits a dozen card-widths below. `rotateY` turns the card about
     the vertical line through that origin, and since the origin's x is the
     card's own centre, the flip happens where the card stands. No perspective:
     flat, the turn is a clean horizontal narrowing to nothing at 90°, which is
     what the reference does too — a vanishing point here would shear the fan,
     because the origin it would use is a long way off the card. */
  transform:
    rotate(calc(var(--i, 0) * var(--arc-step)))
    rotateY(var(--flip, 0deg));
  transition: transform var(--arc-dur) var(--arc-ease), box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
  cursor: pointer;
}

/* Registered so it can be interpolated — an unregistered custom property is a
   token stream and would jump from 0 to 90 with nothing in between. */
@property --flip {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.project-card.is-centered { box-shadow: 0 18px 44px -32px rgba(23, 25, 28, .5); }
.project-card:hover { border-color: var(--line-2); box-shadow: 0 22px 48px -30px rgba(23, 25, 28, .45); }

.project-card-button {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: inherit;
}

.project-card-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.project-card.is-filtered { display: none; }

.project-art {
  position: relative;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--card-w) * .0443);
  isolation: isolate;
}

.art-label {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--on-night-2);
}

.project-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(var(--card-w) * .0649) 1px 0;
  color: var(--ink);
}

.project-card h3 {
  margin: 0 0 calc(var(--card-w) * .0216);
  font-size: calc(var(--card-w) * .0703);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.022em;
}

.project-card-copy > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(.9rem, .28vw + .84rem, 1.02rem);
  line-height: 1.5;
}

.text-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: .76rem;
  font-weight: 700;
}

.text-link b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--brand-ink);
  color: #fff;
  transition: transform .3s var(--ease);
}

.project-card:hover .text-link b { transform: rotate(45deg); }

.project-arc-controls {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(30px, 3.4vw, 48px);
}

.arc-control {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, transform .25s var(--ease);
}

.arc-control svg { width: 22px; height: 22px; display: block; }
.arc-control:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: scale(1.05); }
.arc-control:disabled { opacity: .25; cursor: not-allowed; }

/* ── Project artwork — one night canvas, one product hue each ── */

.art-live,
.art-trick,
.art-market,
.art-tashhis,
.art-premial,
.art-qreate {
  background: var(--night);
  color: var(--art);
}

.art-live { --art: var(--p-live); }
.art-trick { --art: var(--p-trick); }
.art-market { --art: var(--p-market); }
.art-tashhis { --art: var(--p-tashhis); }
.art-premial { --art: var(--p-premial); }
.art-qreate { --art: var(--p-qreate); }

/* LiveLator */
.live-sphere { position: absolute; width: 190px; aspect-ratio: 1; left: 50%; top: 49%; border: 1px solid rgba(79, 214, 180, .42); border-radius: 50%; transform: translate(-50%, -50%); }
.live-sphere::before, .live-sphere::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(79, 214, 180, .3); border-radius: 50%; transform: scaleX(.42) rotate(45deg); }
.live-sphere::after { transform: scaleX(.42) rotate(-45deg); border-color: var(--brand-28); }
.live-sphere i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--p-live); }
.live-sphere i:nth-child(1) { left: 13%; top: 38%; }
.live-sphere i:nth-child(2) { right: 11%; top: 28%; background: var(--brand-light); }
.live-sphere i:nth-child(3) { left: 48%; bottom: 8%; }
.live-caption { position: absolute; padding: 11px 13px; border: 1px solid var(--night-line); border-radius: var(--r-sm); background: var(--night-fill); font-size: .68rem; font-weight: 600; color: var(--on-night-2); }
.live-caption b { display: block; margin-top: 3px; font-size: .78rem; font-weight: 700; color: var(--on-night); }
.live-caption.one { left: 18px; bottom: 28px; }
.live-caption.two { right: 18px; top: 46px; }

/* TrickSave */
.trick-phone { position: absolute; width: 54%; height: 70%; left: 50%; top: 55%; padding: 25px 18px; border: 1px solid var(--night-line); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; gap: 25px; background: var(--night-fill); color: var(--on-night); transform: translate(-50%, -50%) rotate(-5deg); }
.trick-phone span { font-size: .7rem; font-weight: 600; color: var(--on-night-2); }
.trick-phone i { font-size: 4rem; font-style: normal; color: var(--art); animation: downloadBounce 1.6s var(--ease) infinite; }
.trick-phone b { padding: 8px 12px; border: 1px solid rgba(155, 240, 58, .3); border-radius: var(--r-pill); background: rgba(155, 240, 58, .1); font-size: .7rem; font-weight: 700; color: var(--art); }
.trick-ring { position: absolute; border: 1px solid rgba(244, 242, 237, .08); border-radius: 50%; }
.trick-ring.one { width: 160px; height: 160px; right: -80px; bottom: -50px; }
.trick-ring.two { width: 90px; height: 90px; left: -32px; top: 85px; }

/* Advify Market */
.market-star {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 112px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: currentColor;
  clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 68.9% 56%, 80.1% 90.5%, 50% 69.2%, 19.9% 90.5%, 31.1% 56%, 2% 34.5%, 38.2% 34.5%);
  opacity: .7;
}
.market-ticket { position: absolute; right: 18px; bottom: 22px; padding: 12px 14px; border: 1px solid var(--night-line); border-radius: var(--r-sm); background: var(--night-fill); color: var(--on-night); }
.market-ticket span { display: block; font-weight: 700; font-size: .8rem; }
.market-ticket b { font-size: .7rem; font-weight: 700; color: var(--art); }
.market-coin { position: absolute; left: 24px; bottom: 28px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(240, 193, 75, .35); border-radius: 50%; font-size: 1.5rem; color: var(--art); }

/* Tashhis AI */
.health-pulse { position: absolute; inset: 30% 8% auto; height: 120px; }
.health-pulse svg { width: 100%; height: 100%; }
.health-score { position: absolute; left: 22px; right: 22px; bottom: 24px; padding: 14px 16px; border: 1px solid var(--night-line); border-radius: var(--r-sm); display: flex; justify-content: space-between; background: var(--night-fill); color: var(--on-night); }
.health-score b { font-size: .78rem; font-weight: 700; }
.health-score span { font-size: .72rem; font-weight: 600; color: var(--on-night-2); }

/* Premial */
.premial-sun { position: absolute; width: 116px; height: 116px; right: 38px; top: 48px; border: 1px solid rgba(240, 193, 75, .38); border-radius: 50%; }
.premial-route { position: absolute; left: 12%; right: 12%; top: 49%; height: 40px; border-top: 1px dashed rgba(240, 193, 75, .42); transform: rotate(-9deg); }
.premial-route i { position: absolute; width: 7px; height: 7px; top: -4px; border-radius: 50%; background: var(--art); }
.premial-route i:nth-child(2) { left: 50%; }
.premial-route i:nth-child(3) { right: 0; }
.premial-board { position: absolute; left: 20px; right: 20px; bottom: 24px; padding: 15px 17px; border: 1px solid var(--night-line); border-radius: var(--r-sm); display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; background: var(--night-fill); color: var(--on-night); }
.premial-board small { grid-column: 1/3; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--on-night-2); }
.premial-board strong { font-size: .82rem; font-weight: 700; }
.premial-board span { font-size: .72rem; font-weight: 600; color: var(--art); }

/* QReate */
.qr-grid { position: absolute; width: 176px; height: 176px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: var(--r-xs); background: repeating-conic-gradient(rgba(155, 140, 255, .8) 0 25%, transparent 0 50%) 0 0 / 16px 16px; opacity: .3; }
.qr-grid::before, .qr-grid::after { content: ""; position: absolute; width: 48px; height: 48px; border: 8px solid var(--art); border-radius: 3px; background: var(--night); }
.qr-grid::before { left: 4px; top: 4px; }
.qr-grid::after { right: 4px; bottom: 4px; }
.qr-chip { position: absolute; right: 18px; bottom: 22px; padding: 8px 11px; border: 1px solid rgba(155, 140, 255, .3); border-radius: var(--r-pill); color: var(--art); font-size: .68rem; font-weight: 700; letter-spacing: .06em; }

/* ── About ──────────────────────────────────────────────── */

.about {
  padding: clamp(100px, 12vw, 220px) 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.about-inner {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  /* Row gap unchanged; only the column gap is shared. */
  gap: clamp(30px, 6vw, 100px) var(--label-gap);
}

.about-inner .eyebrow { padding-top: 13px; }
.about h2 { font-size: clamp(3rem, 6.2vw, 7.3rem); }

.about-note {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 6vw, 90px);
  margin-top: clamp(50px, 8vw, 120px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.about-note > p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  line-height: 1.65;
}

.about-note > p + p {
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  color: var(--ink-3);
}

/* Services live inside "what we do" rather than in a section of their own:
   the same hairline-and-numeral language as the approach index. */
.services {
  margin-top: clamp(64px, 8vw, 130px);
}

.services .eyebrow { margin-bottom: clamp(20px, 2.2vw, 30px); }

.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(26px, 4vw, 70px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding: clamp(22px, 2.2vw, 30px) 0;
  border-top: 1px solid var(--line);
}

.service-list span {
  grid-row: 1 / 3;
  padding-top: .3em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.service-list h3 {
  margin: 0 0 9px;
  font-size: clamp(1.02rem, 1.2vw, 1.24rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
}

.service-list p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.55;
}

/* ── Manifesto ──────────────────────────────────────────── */

/* Exact overlap: the duplicated text is clipped by an organic brand-blue
   field that keeps drifting, so the inverted words never sit still. */
.manifesto {
  /* How far the blue field is allowed to run past the section on each side.
     The section is not clipped, so the ellipse closes out here in the
     neighbours' padding instead of being sliced flat at the seams. */
  --manifesto-bleed: clamp(96px, 14vh, 180px);
  position: relative;
  /* Above both neighbours, or the bleed would be painted over by the section
     that follows in the document. */
  z-index: 1;
  height: 100svh;
  min-height: 720px;
  isolation: isolate;
}
.manifesto-layer { position: absolute; inset: 0; }
.manifesto-base { background: var(--night); color: var(--on-night); }
.manifesto-base .eyebrow { color: var(--on-night-2); }
.manifesto-accent {
  z-index: 2;
  inset: calc(var(--manifesto-bleed) * -1) 0;
  background: var(--brand-ink);
  color: var(--paper);
  clip-path: ellipse(0% 45% at 100% 50%);
  transition: clip-path 1.45s var(--ease-inout);
}
/* The layer is taller than the section, so the copy is pinned back to the
   section's own box — otherwise the duplicate would sit off the original and
   the overlap would stop lining up. */
.manifesto-accent .manifesto-inner {
  position: absolute;
  inset: var(--manifesto-bleed) 0;
  height: auto;
}
/* The whole point of the duplicate layer: the words the field crosses must
   change colour, not just the ground behind them. Paper-on-blue reads as the
   same near-white as the base text, so the headline flips to the night ink —
   at display size the 3:1 large-text floor is met with room to spare. The
   eyebrow and the index stay paper: they are small type, where dark-on-blue
   would drop below the 4.5:1 body-text floor. */
.manifesto-accent h2 { color: var(--night); }
.manifesto-accent .eyebrow { color: var(--paper); }
/* Every keyframe keeps the ellipse taller than the section but shorter than
   the bled layer: it always overruns both seams, and always closes before the
   layer's own edge, so no straight cut is ever exposed. */
.manifesto.is-visible .manifesto-accent {
  clip-path: ellipse(72% 45% at 100% 50%);
  animation: manifestoDrift 19s ease-in-out 1.5s infinite;
}
@keyframes manifestoDrift {
  0%,
  100% { clip-path: ellipse(72% 45% at 100% 50%); }
  28%  { clip-path: ellipse(64% 45.5% at 103% 47.5%); }
  55%  { clip-path: ellipse(80% 45.5% at 96% 52.5%); }
  80%  { clip-path: ellipse(69% 45% at 101% 49%); }
}
.manifesto-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr);
  align-content: center;
  gap: 26px clamp(40px, 6vw, 110px);
}
.manifesto-inner .eyebrow { grid-column: 1 / -1; }
.manifesto-inner h2 {
  grid-column: 1;
  width: min(13ch, 92vw);
  margin: 0;
  font-size: clamp(3.5rem, 7.25vw, 8.8rem);
  line-height: .93;
  font-weight: 600;
  letter-spacing: -.072em;
}
.manifesto-index {
  grid-column: 2;
  align-self: end;
  margin: 0 0 clamp(6px, 2vh, 26px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.manifesto-index li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid currentColor;
  font-size: clamp(.78rem, .95vw, .98rem);
  font-weight: 600;
  line-height: 1.35;
  opacity: .9;
}
.manifesto-index li:last-child { border-bottom: 1px solid currentColor; }
.manifesto-index span {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .72;
}

/* ── Lab in numbers ─────────────────────────────────────── */

.numbers {
  position: relative;
  padding: clamp(110px, 12vw, 180px) 0 clamp(64px, 7vw, 110px);
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--on-night);
}
.numbers::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(var(--night-fill) 1px, transparent 1px), linear-gradient(90deg, var(--night-fill) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at 54% 42%, #000, transparent 86%);
  -webkit-mask-image: radial-gradient(circle at 54% 42%, #000, transparent 86%);
}
.numbers .eyebrow { color: var(--on-night-2); }
.numbers-copy {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1.8fr) minmax(240px, .8fr);
  align-items: start;
  gap: 32px var(--label-gap);
}
.numbers-copy h2 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(4rem, 7.8vw, 9rem);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.08em;
}
.numbers-copy > p:last-child {
  grid-column: 3;
  margin: 12px 0 0;
  max-width: 37ch;
  font-size: clamp(.86rem, 1.05vw, 1.05rem);
  line-height: 1.62;
  color: var(--on-night-2);
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(13px, 1.5vw, 22px);
  margin-top: clamp(64px, 8vw, 120px);
}
.stat-tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.7vw, 42px);
  padding-bottom: clamp(46px, 4.6vw, 72px);
  overflow: hidden;
  border: 1px solid var(--night-line);
  border-radius: clamp(24px, 2.6vw, 36px);
  background: var(--night-fill);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-reveal), transform var(--dur-slow) var(--ease-reveal), border-color var(--dur-base) ease, background-color var(--dur-base) ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stat-tile:nth-child(4),
.stat-tile:nth-child(5) { grid-column: span 3; }
.stat-tile.is-in { opacity: 1; transform: none; }
.stat-tile.is-in:hover {
  transform: translateY(-6px);
  border-color: var(--brand-28);
  background: var(--night-fill-2);
  transition-delay: 0s;
}
.stat-tile::after {
  content: "";
  position: absolute;
  left: clamp(26px, 2.7vw, 42px);
  right: clamp(26px, 2.7vw, 42px);
  bottom: clamp(20px, 2vw, 30px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-light), rgba(95, 162, 238, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 260ms);
}
.stat-tile.is-in::after { transform: scaleX(1); }
.stat-value {
  display: block;
  font-size: clamp(4.2rem, 8.4vw, 10rem);
  line-height: .84;
  font-weight: 600;
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin: 20px 0 0;
  font-size: clamp(.95rem, 1.3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.025em;
}
.stat-tile small {
  margin-top: 10px;
  max-width: 30ch;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--on-night-2);
}
.stat-tile.is-live .stat-value::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 14px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--brand-light);
  animation: blink 1.7s ease-in-out infinite;
}

/* ── Beyond the lab ─────────────────────────────────────── */

.beyond {
  padding: clamp(110px, 13vw, 210px) 0 clamp(90px, 10vw, 150px);
  background: var(--paper);
  overflow: hidden;
}

.beyond-intro {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 35px var(--label-gap);
}

.beyond-intro h2 {
  grid-column: 2;
  font-size: clamp(3.4rem, 6.2vw, 7.6rem);
}

.beyond-intro > p:last-child {
  grid-column: 2;
  max-width: 63ch;
  /* The 35px grid row-gap already sets the distance from the headline. */
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(.95rem, 1.3vw, 1.3rem);
  line-height: 1.65;
}

.impact-rail {
  display: flex;
  gap: 22px;
  margin-top: clamp(60px, 8vw, 120px);
  padding: 0 var(--pad) 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.impact-rail::-webkit-scrollbar { display: none; }

/* The rail is deliberately tabbable (role="group"), so it takes the same brand
   ring as every other focusable thing. The offset is negative because the rail
   is full-bleed: a positive one draws the side edges off screen. No radius —
   the rail is overflow-x:auto and a rounded box would clip the panels. */
.impact-rail:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }

.impact-panel {
  position: relative;
  flex: 0 0 min(82vw, 1180px);
  height: min(72vh, 680px);
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--night);
  color: var(--on-night);
  scroll-snap-align: center;
  isolation: isolate;
}

.impact-top {
  position: absolute;
  z-index: 3;
  inset: 24px 28px auto;
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-night-2);
}

.impact-copy {
  position: absolute;
  z-index: 3;
  left: clamp(26px, 4vw, 65px);
  bottom: clamp(28px, 4vw, 62px);
}

.impact-copy h3 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 6.3rem);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.07em;
}

.impact-copy p {
  max-width: 48ch;
  margin: 23px 0 0;
  font-size: clamp(.82rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: var(--on-night-2);
}

.impact-visual { position: absolute; inset: 0; }
.impact-live { --art: var(--p-live); }
.impact-trick { --art: var(--p-trick); }
.impact-market { --art: var(--p-market); }

.impact-orbit { position: absolute; width: min(42vw, 480px); aspect-ratio: 1; right: 8%; top: 50%; border: 1px solid rgba(79, 214, 180, .26); border-radius: 50%; transform: translateY(-58%); }
.impact-orbit::before, .impact-orbit::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(79, 214, 180, .18); border-radius: 50%; transform: scaleX(.42) rotate(45deg); }
.impact-orbit::after { transform: scaleX(.42) rotate(-45deg); border-color: var(--brand-16); }
.impact-live .impact-visual i { position: absolute; right: calc(8% + min(18vw, 200px)); top: 30%; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(79, 214, 180, .32); border-radius: 50%; background: rgba(79, 214, 180, .1); color: var(--art); font-style: normal; font-size: .74rem; font-weight: 700; }
.impact-live .impact-visual i:nth-of-type(2) { right: 8%; top: 47%; background: var(--night-fill); border-color: var(--night-line); color: var(--on-night); }
.impact-live .impact-visual i:nth-of-type(3) { right: 26%; top: 69%; background: var(--night-fill); border-color: var(--night-line); color: var(--on-night); }
.impact-live .impact-visual b { position: absolute; right: 22%; top: 43%; font-size: clamp(5rem, 9vw, 10rem); font-weight: 600; letter-spacing: -.08em; color: var(--art); opacity: .9; }

.impact-download { position: absolute; right: 20%; top: 20%; font-size: clamp(10rem, 19vw, 23rem); line-height: 1; color: var(--art); opacity: .42; animation: downloadBounce 1.8s var(--ease) infinite; }
.impact-trick .impact-visual i { position: absolute; width: 130px; height: 170px; right: 9%; top: 22%; border: 1px solid var(--night-line); border-radius: 22px; background: var(--night-fill); transform: rotate(13deg); }
.impact-trick .impact-visual i:nth-of-type(2) { right: 15%; top: 18%; transform: rotate(3deg); background: rgba(155, 240, 58, .09); }
.impact-trick .impact-visual i:nth-of-type(3) { right: 22%; top: 21%; transform: rotate(-8deg); }

.impact-star {
  position: absolute;
  right: 12%;
  top: 16%;
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 1;
  font-size: 0;
  background: var(--art);
  clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 68.9% 56%, 80.1% 90.5%, 50% 69.2%, 19.9% 90.5%, 31.1% 56%, 2% 34.5%, 38.2% 34.5%);
  opacity: .42;
}
.impact-market .impact-visual i { position: absolute; right: 38%; top: 30%; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--night-line); border-radius: 50%; background: var(--night-fill); color: var(--on-night); font-style: normal; font-size: .74rem; font-weight: 700; }
.impact-market .impact-visual i:nth-of-type(2) { right: 8%; top: 58%; background: rgba(240, 193, 75, .12); color: var(--art); }
.impact-market .impact-visual i:nth-of-type(3) { right: 22%; top: 74%; }

.impact-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.impact-controls button {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.impact-controls button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: scale(1.05);
}

/* ── Contact ────────────────────────────────────────────── */

.contact {
  padding: clamp(110px, 14vw, 240px) 0 clamp(90px, 12vw, 180px);
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.contact-inner {
  text-align: center;
}

.contact h2 {
  max-width: 1300px;
  margin-inline: auto;
  font-size: clamp(3.5rem, 7.2vw, 8.6rem);
}

.contact-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(42px, 6vw, 80px);
}

.contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 15px 17px 15px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: .84rem;
  font-weight: 700;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.contact-actions a span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-ink);
  color: #fff;
  transition: background .25s ease, color .25s ease, transform .35s var(--ease);
}

/* Brand blue, not ink: these are the page's primary actions, and blue is the
   one colour the site reserves for something you can act on. The badge swings
   45deg so the north-east arrow lands pointing due right, the same move the
   hero CTA and the product card links already make. */
.contact-actions a:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--paper); transform: translateY(-2px); }
.contact-actions a:hover span { background: var(--paper); color: var(--brand-ink); transform: rotate(45deg); }

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
  padding: 54px 0 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.footer-top > div {
  display: grid;
  align-content: start;
  gap: 7px;
}

.footer-top p {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer-top a,
.footer-top span {
  width: max-content;
  padding: 5px 0;
  font-size: .8rem;
  font-weight: 600;
}

.footer-top a { transition: color .2s ease; }
.footer-top a:hover { color: var(--brand); }

/* The wordmark is a watermark, not a headline: it holds the foot of the page
   without shouting over the links above it. Overflow stays visible so the
   descender of "y" survives. */
.footer-word {
  margin-top: clamp(90px, 14vw, 230px);
  overflow: visible;
  padding-bottom: .16em;
  font-size: clamp(9rem, 25.8vw, 33rem);
  line-height: .82;
  font-weight: 800;
  letter-spacing: -.1em;
  white-space: nowrap;
  /* Opaque, not a 10% ink: the tracking overlaps glyphs, and translucent text
     double-composites at every overlap into visible darker patches. */
  color: #e4e2dd;
  user-select: none;
}

.footer-tagline {
  margin: 4px 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}

.footer-bottom {
  margin-top: 45px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.footer-bottom a { transition: color .2s ease; }
.footer-bottom a:hover { color: var(--brand); }

/* ── Project dialog ─────────────────────────────────────── */

/* One surface for every project. The product's own hue appears once, as a
   rule and a label — enough to identify it, not enough to repaint the page. */
.project-dialog {
  --accent: var(--brand-light);
  width: min(960px, calc(100vw - 32px));
  min-height: min(690px, calc(100svh - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--night);
  color: var(--on-night);
}

.project-dialog[open] { animation: dialogIn .45s var(--ease); }
.project-dialog::backdrop { background: rgba(20, 22, 26, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fadeIn .35s ease; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes fadeIn { from { opacity: 0; } }

.dialog-close {
  position: absolute;
  z-index: 3;
  right: 22px;
  top: 22px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--night-line);
  border-radius: 50%;
  background: var(--night-fill);
  color: var(--on-night);
  font-size: 1.6rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.dialog-close:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.dialog-number {
  position: absolute;
  right: 0;
  bottom: -17%;
  color: var(--accent);
  opacity: .07;
  font-size: clamp(18rem, 48vw, 39rem);
  line-height: .8;
  font-weight: 800;
  letter-spacing: -.1em;
  pointer-events: none;
}

.dialog-content {
  position: relative;
  z-index: 2;
  min-height: min(690px, calc(100svh - 32px));
  padding: clamp(90px, 11vw, 150px) clamp(30px, 7vw, 90px) 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dialog-content .eyebrow {
  position: relative;
  padding-top: 20px;
  color: var(--accent);
}

.dialog-content .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.dialog-content h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: .88;
  font-weight: 600;
  letter-spacing: -.08em;
}

.dialog-lead {
  max-width: 58ch;
  margin: 26px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--on-night-2);
}

.dialog-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.dialog-content li {
  padding: 9px 14px;
  border: 1px solid var(--night-line);
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 600;
  color: var(--on-night-2);
}

.dialog-content > a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding: 15px 18px 15px 24px;
  border-radius: var(--r-pill);
  background: var(--brand-ink);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  transition: background .25s ease, transform .25s var(--ease);
}

.dialog-content > a:hover { background: var(--brand-ink-hover); transform: translateY(-2px); }
.dialog-content > a span { font-size: 1.1rem; }

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1060px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .mobile-menu { display: block; }
  .round-link { display: none; }
  .mosaic { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tile-live-wave { grid-column: 5; }
  .tile-live-en { grid-column: 5 / 6; }
  .tile-live-map { display: none; }
  .tile-live-subtitle { grid-column: 5; }
  .tile-trick-chat { grid-column: 5; }
  .tile-trick-copy { grid-column: 4 / 6; }
  .tile-trick-ready { display: none; }
  .tile-market-ton { grid-column: 5; }
  .tile-market-buy { grid-column: 5; }
  .tile-market-grid { grid-column: 5; }
  .tile-market-gift { grid-column: 4 / 5; }
  .tile-market-nft { grid-column: 4 / 5; }
  .tile-market-premium { grid-column: 3 / 5; }
  .project-stage-blob { width: 105vw; left: 14%; }
  .about-note { grid-template-columns: 1.4fr .8fr; }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers-copy { grid-template-columns: var(--label-col) minmax(0, 1fr); }
  .numbers-copy h2 { grid-column: 2; }
  .numbers-copy > p:last-child { grid-column: 2; margin-top: 8px; }
  .numbers-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-tile:nth-child(4) { grid-column: span 2; }
  .stat-tile:nth-child(5) { grid-column: span 4; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  .site-header { min-height: 72px; padding: 13px 16px; }
  .brand-logo { width: 22px; height: 28px; }
  .brand-word { font-size: 1.4rem; }
  .menu-toggle { width: 44px; height: 44px; }
  .featured { min-height: 660px; }
  .mosaic {
    padding: 76px 8px 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .tile { border-radius: 9px; }
  /* The mosaic is aria-hidden decoration; at phone size its labels are texture,
     not copy, so they shrink back rather than overflow their tiles. */
  .tile small { font-size: .56rem; letter-spacing: .1em; }
  .tile-live-room b,
  .tile-live-core b,
  .tile-trick-story b,
  .tile-trick-chat b,
  .tile-market-safe b,
  .tile-market-ton b { font-size: .6rem; }
  .tile-live-caption strong { font-size: .88rem; }
  .tile-live-quote p { font-size: .68rem; }
  .tile-trick-vanish strong { font-size: .78rem; }
  .tile-live-orbit { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-live-caption { grid-column: 3; grid-row: 1 / 3; padding: 10px; }
  .tile-live-wave { grid-column: 1; grid-row: 3; }
  .tile-live-jp { grid-column: 2; grid-row: 3; }
  .tile-live-room { grid-column: 3; grid-row: 3; padding: 10px; }
  .tile-live-lines { grid-column: 1; grid-row: 4 / 6; padding: 12px; }
  .tile-live-en { grid-column: 2 / 4; grid-row: 4; padding: 10px; }
  .tile-live-core { grid-column: 2 / 4; grid-row: 5; }
  .tile-live-fr { grid-column: 1; grid-row: 6; }
  .tile-live-quote { grid-column: 2 / 4; grid-row: 6; padding: 12px; }
  .tile-live-subtitle, .tile-live-map { display: none; }
  .tile-trick-story { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-trick-link { grid-column: 3; grid-row: 1 / 3; padding: 10px; }
  .tile-trick-arrow { grid-column: 1; grid-row: 3; }
  .tile-trick-chat { grid-column: 2 / 4; grid-row: 3; padding: 10px; }
  .tile-trick-shield { grid-column: 1; grid-row: 4; }
  .tile-trick-film { grid-column: 2 / 4; grid-row: 4 / 6; }
  .tile-trick-stack { grid-column: 1; grid-row: 5 / 7; }
  .tile-trick-copy { grid-column: 2 / 4; grid-row: 6; padding: 10px; }
  .tile-trick-search, .tile-trick-vanish, .tile-trick-ring, .tile-trick-ready { display: none; }
  .tile-market-star { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-market-rate { grid-column: 3; grid-row: 1 / 3; padding: 10px; grid-template-columns: 1fr; }
  .tile-market-rate small { grid-column: 1; }
  .tile-market-gift { grid-column: 1; grid-row: 3 / 5; }
  .tile-market-ton { grid-column: 2; grid-row: 3; }
  .tile-market-chart { grid-column: 2 / 4; grid-row: 4; padding: 8px; }
  .tile-market-premium { grid-column: 1 / 3; grid-row: 5 / 7; }
  .tile-market-buy { grid-column: 3; grid-row: 3 / 6; padding: 10px; }
  .tile-market-coin { grid-column: 3; grid-row: 6; }
  .tile-market-safe, .tile-market-nft, .tile-market-grid { display: none; }
  .featured-copy { width: 96%; transform: translate(-50%, -47%); }
  .featured-copy h2 { font-size: clamp(3.9rem, 19vw, 6.7rem); white-space: normal; }
  .theme-market .featured-copy h2 { max-width: 8ch; margin-inline: auto; font-size: clamp(3.5rem, 17vw, 6rem); }
  .theme-market .market-name { margin-left: 0; }
  .featured-copy > p { max-width: 28ch; font-size: .97rem; }
  .hero-cta { min-width: 170px; margin-top: 20px; padding: 13px 14px 13px 20px; }
  .featured-controls { bottom: 20px; gap: 8px; }
  .circle-control { width: 45px; height: 45px; }
  .hero-progress { padding: 11px 12px; gap: 8px; }
  .hero-progress button.hero-dot { width: 22px; height: 12px; }
  .hero-progress button.hero-dot.is-active { width: 64px; }
  .projects-intro h2, .about h2, .beyond-intro h2, .contact h2 { font-size: clamp(3.15rem, 15vw, 5.6rem); }
  .projects-intro { text-align: left; }
  .projects-intro > p:last-child { margin-inline: 0; max-width: 46ch; }
  .project-stage { margin-top: 75px; }
  .project-stage-blob { width: 150vw; left: -18%; top: 18%; filter: blur(56px); }
  .project-filter { justify-content: flex-start; margin: 0; padding-top: 32px; padding-bottom: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .project-filter button { flex: 0 0 auto; padding: 11px 20px; }
  /* Narrow screens get the reference's tighter ring: neighbours tilt away
     harder so the centred card still owns the viewport. */
  .project-arc {
    --card-w: min(78vw, 330px);
    --arc-rr: 7.4;
    --arc-step: 10deg;
    margin-top: clamp(52px, 12vw, 72px);
    height: calc(var(--card-h) + 40px);
  }
  .arc-control { width: 52px; height: 52px; }
  .arc-control svg { width: 19px; height: 19px; }
  .impact-controls button { width: 52px; height: 52px; }
  .about-inner { grid-template-columns: 1fr; gap: 20px; }
  .about h2, .about-note { grid-column: 1; }
  .about-note { grid-template-columns: 1fr; gap: 18px; margin-top: 50px; }
  .service-list { grid-template-columns: minmax(0, 1fr); }
  .service-list p { max-width: 46ch; }
  .manifesto { min-height: 700px; }
  .manifesto-inner { grid-template-columns: 1fr; align-content: start; padding-top: 128px; gap: 18px; }
  .manifesto-inner h2 { grid-column: 1; width: 94vw; font-size: clamp(3.15rem, 13.5vw, 5.4rem); }
  .manifesto-index { grid-column: 1; align-self: start; margin: 14px 0 0; }
  .manifesto-index li { padding: 12px 0; font-size: .78rem; }
  .manifesto-accent { clip-path: ellipse(0% 44.5% at 100% 50%); }
  .manifesto.is-visible .manifesto-accent { clip-path: ellipse(88% 44.5% at 100% 50%); animation-name: manifestoDriftSmall; }
  @keyframes manifestoDriftSmall {
    0%, 100% { clip-path: ellipse(88% 44.5% at 100% 50%); }
    30% { clip-path: ellipse(80% 45% at 104% 48.5%); }
    60% { clip-path: ellipse(96% 45% at 96% 51.5%); }
  }
  .numbers { padding-top: 105px; }
  .numbers-copy { display: block; }
  .numbers-copy h2 { font-size: clamp(3.8rem, 17vw, 6.2rem); }
  .numbers-copy > p:last-child { max-width: 34ch; margin-top: 22px; font-size: .84rem; }
  .numbers-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 58px; }
  .stat-tile,
  .stat-tile:nth-child(4),
  .stat-tile:nth-child(5) { grid-column: span 1; }
  .stat-value { font-size: clamp(4.4rem, 22vw, 7rem); }
  .stat-tile small { max-width: 36ch; }
  .beyond-intro { grid-template-columns: 1fr; }
  .beyond-intro h2, .beyond-intro > p:last-child { grid-column: 1; }
  .impact-panel { flex-basis: calc(100vw - 40px); height: 620px; min-height: 0; }
  .impact-copy h3 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .impact-copy p { max-width: 31ch; }
  .impact-orbit { width: 310px; right: -20%; top: 36%; }
  .impact-live .impact-visual b { right: 17%; top: 30%; }
  .impact-download { right: 1%; top: 17%; }
  .impact-star { right: -17%; top: 18%; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions a { justify-content: space-between; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-word { margin-top: 110px; padding-bottom: .2em; font-size: 30vw; line-height: .84; }
  .footer-bottom { flex-direction: column; }
  .project-dialog { width: calc(100vw - 16px); min-height: calc(100svh - 16px); max-height: calc(100svh - 16px); border-radius: var(--r-md); }
  .dialog-content { min-height: calc(100svh - 16px); padding: 100px 25px 28px; }
  .dialog-content h2 { font-size: clamp(3.5rem, 18vw, 6rem); }
  .dialog-number { font-size: 65vw; bottom: -5%; }
}

@media (max-width: 430px) {
  .featured-copy h2 { font-size: 18vw; }
  .theme-market .featured-copy h2 { font-size: 16vw; }
  .featured-copy > p { font-size: .84rem; }
  .hero-progress button.hero-dot { width: 18px; }
  .hero-progress button.hero-dot.is-active { width: 52px; }
  .circle-control { width: 42px; height: 42px; }
  .live-sphere { width: 165px; }
  .footer-word { font-size: 31vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .live-voice-core,
  .live-voice-core i,
  .project-stage-blob,
  .stat-tile.is-live .stat-value::after { animation: none !important; }
  .manifesto-accent { clip-path: ellipse(72% 45% at 100% 50%); }
  .manifesto.is-visible .manifesto-accent { animation: none !important; }
}

/* ============================================================
   Intro — unchanged
   ============================================================ */

.site-intro {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background: var(--paper);
  color: var(--ink);
  opacity: 1;
  cursor: progress;
}

html.intro-first,
html.intro-first body { overflow: hidden; }
html.intro-first .site-intro { display: block; }
html.intro-complete .site-intro { display: none; }

/* Four identical 1350×1080 panels — the only elements besides the logo.
   Three layers per panel: slot = entrance + exit, float = idle Y/rotation
   drift, shape = idle X drift + the fill. Each axis runs on its own
   period with a negative delay so the four never move in lockstep. */
.intro-slot {
  position: absolute;
  z-index: 1;
  will-change: translate, scale, opacity;
}

.intro-float {
  display: block;
  will-change: translate, rotate;
  animation:
    introFloatY calc(var(--fd) * 1.83) ease-in-out var(--fdy) infinite,
    introFloatR calc(var(--fd) * 1.45) ease-in-out var(--fdr) infinite;
}

.intro-shape {
  width: var(--intro-shape-w, clamp(300px, 37vw, 660px));
  aspect-ratio: 1350 / 1080;
  border-radius: 3%;
  background: var(--shape-fill);
  rotate: var(--tilt);
  backface-visibility: hidden;
  will-change: translate;
  animation: introFloatX var(--fd) ease-in-out var(--fdx) infinite;
}

.intro-slot-gold {
  top: -14vh;
  left: -9vw;
  --tilt: -7deg;
  --shape-fill: linear-gradient(142deg, #f3c556 0%, #dd9f24 100%);
  --fd: 8s;
  --fx: 3.6rem;
  --fy: -4.4rem;
  --fr: 5deg;
  --fdx: -1.3s;
  --fdy: -4.7s;
  --fdr: -2.9s;
  animation: introSlotGold 1.28s cubic-bezier(.18,.92,.28,1) both .02s;
}

.intro-slot-red {
  top: -9vh;
  right: -8vw;
  --tilt: 6deg;
  --shape-fill: linear-gradient(142deg, #ef7d64 0%, #d94e39 100%);
  --fd: 9.5s;
  --fx: -4.2rem;
  --fy: 3.8rem;
  --fr: -6deg;
  --fdx: -3.8s;
  --fdy: -8.1s;
  --fdr: -6.3s;
  animation: introSlotRed 1.1s cubic-bezier(.16,1,.3,1) both .19s;
}

.intro-slot-green {
  bottom: -15vh;
  left: -6vw;
  --tilt: 9deg;
  --shape-fill: linear-gradient(142deg, #57c165 0%, #2c9541 100%);
  --fd: 10.5s;
  --fx: 4.4rem;
  --fy: 4.8rem;
  --fr: 6.5deg;
  --fdx: -5.2s;
  --fdy: -2.4s;
  --fdr: -9.6s;
  animation: introSlotGreen 1.42s cubic-bezier(.2,.9,.26,1) both .09s;
}

.intro-slot-blue {
  bottom: -11vh;
  right: -7vw;
  --tilt: -5deg;
  --shape-fill: linear-gradient(142deg, #5dc2f8 0%, #467ee4 100%);
  --fd: 8.5s;
  --fx: -3.4rem;
  --fy: -5.2rem;
  --fr: -4.5deg;
  --fdx: -7.1s;
  --fdy: -1.6s;
  --fdr: -4.4s;
  animation: introSlotBlue 1.2s cubic-bezier(.16,1,.3,1) both .31s;
}

.intro-center {
  --intro-word-size: clamp(2.7rem, 5vw, 5rem);
  --lockup-gap: 14px;
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  min-width: max-content;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: introCenter .9s var(--ease-reveal) both .48s;
}

.intro-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--lockup-gap);
}

.intro-brand-logo {
  width: 48px;
  height: 60px;
  box-shadow: 0 18px 38px rgba(70,126,228,.24);
  clip-path: inset(100% 0 0);
  animation: introMarkReveal .8s var(--ease-reveal) both .62s;
}

/* The mask is sized from the word's own font size — em here would resolve
   against the lockup's 1rem and cut the descender of "y". It reaches left
   into the lockup gap so the word can slide out under the mark on exit. */
.intro-word-shell {
  display: inline-block;
  overflow: hidden;
  padding:
    calc(var(--intro-word-size) * .3)
    calc(var(--intro-word-size) * .18)
    calc(var(--intro-word-size) * .4)
    var(--lockup-gap);
  margin:
    calc(var(--intro-word-size) * -.3)
    calc(var(--intro-word-size) * -.18)
    calc(var(--intro-word-size) * -.4)
    calc(var(--lockup-gap) * -1);
}

.intro-word-shell strong {
  display: block;
  font-size: var(--intro-word-size);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.075em;
  transform: translateY(178%);
  animation: introWordReveal .82s var(--ease-reveal) both .75s;
}

.site-intro.is-leaving {
  pointer-events: none;
  animation: introCurtain 1.42s linear forwards;
}

/* Outro handoff — no swap, no second mark: the word slides left and is
   eaten by the lockup mask right at the mark's edge, while that same mark
   travels to the middle of the screen and only then opens into the portal.
   Travel, zoom and the mask each own a different property, so they can run
   as three concurrent animations with their own curves. */
/* The mask edge rides along with the mark, so the word is swallowed exactly
   at the mark's trailing edge however far it has travelled. */
.site-intro.is-leaving .intro-word-shell {
  animation: introWordMask .56s cubic-bezier(.66,0,.22,1) forwards;
}

.site-intro.is-leaving .intro-word-shell strong {
  animation: introWordExit .46s cubic-bezier(.62,0,.2,1) forwards;
}

.site-intro.is-leaving .intro-brand-logo {
  position: relative;
  z-index: 2;
  box-shadow: none;
  filter: drop-shadow(0 0 28px rgba(83, 166, 239, .3));
  animation:
    introMarkTravel .56s cubic-bezier(.66,0,.22,1) forwards,
    introMarkZoom .92s cubic-bezier(.7,0,.24,1) forwards .46s,
    introMarkHold 1.5s linear forwards;
}

.site-intro.is-leaving .intro-slot-gold { animation: introGatherGold .74s var(--ease-inout) forwards; }
.site-intro.is-leaving .intro-slot-red { animation: introGatherRed .74s var(--ease-inout) forwards .03s; }
.site-intro.is-leaving .intro-slot-green { animation: introGatherGreen .74s var(--ease-inout) forwards .06s; }
.site-intro.is-leaving .intro-slot-blue { animation: introGatherBlue .74s var(--ease-inout) forwards .09s; }

/* Entrances: four different distances, angles and arrival speeds so the
   panels never look like one symmetric set. */
@keyframes introSlotGold {
  from { opacity: 0; translate: -44% -34%; scale: .78; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes introSlotRed {
  from { opacity: 0; translate: 27% -58%; scale: .88; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes introSlotGreen {
  from { opacity: 0; translate: -21% 63%; scale: .84; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes introSlotBlue {
  from { opacity: 0; translate: 52% 29%; scale: .81; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Idle drift — one animation per axis, each on its own period. */
@keyframes introFloatX {
  0%, 100% { translate: 0; }
  25% { translate: var(--fx); }
  75% { translate: calc(var(--fx) * -1); }
}
@keyframes introFloatY {
  0%, 100% { translate: 0 0; }
  25% { translate: 0 var(--fy); }
  75% { translate: 0 calc(var(--fy) * -1); }
}
@keyframes introFloatR {
  0%, 100% { rotate: 0deg; }
  25% { rotate: var(--fr); }
  75% { rotate: calc(var(--fr) * -1); }
}

@keyframes introCenter { from { opacity: 0; transform: translate(-50%, -45%) scale(.94); filter: blur(8px); } }
@keyframes introMarkReveal { to { clip-path: inset(0); } }
@keyframes introWordReveal { to { transform: translateY(0); } }
@keyframes introWordExit {
  from { transform: translateY(0); translate: 0 0; }
  to { transform: translateY(0); translate: -128% 0; }
}
@keyframes introWordMask {
  from { clip-path: inset(-50% -50% -50% 0); }
  to { clip-path: inset(-50% -50% -50% var(--mark-dx, 0)); }
}
@keyframes introMarkTravel { to { translate: var(--mark-dx, 0) var(--mark-dy, 0); } }
@keyframes introMarkZoom { to { scale: var(--mark-zoom, 60); } }
@keyframes introMarkHold { from, to { clip-path: inset(0); } }
@keyframes introGatherGold {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  45% { opacity: .5; }
  100% { opacity: 0; translate: 40vw 42vh; scale: .015; }
}
@keyframes introGatherRed {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  45% { opacity: .5; }
  100% { opacity: 0; translate: -40vw 42vh; scale: .015; }
}
@keyframes introGatherGreen {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  45% { opacity: .5; }
  100% { opacity: 0; translate: 40vw -42vh; scale: .015; }
}
@keyframes introGatherBlue {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  45% { opacity: .5; }
  100% { opacity: 0; translate: -40vw -42vh; scale: .015; }
}
@keyframes introCurtain {
  0%, 79% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

body.intro-running .featured-slide.is-active .tile,
body.intro-running .featured-slide.is-active .featured-copy > * { opacity: 0; transform: translateY(32px) scale(.96); }

@media (max-width: 760px) {
  .intro-shape { --intro-shape-w: 80vw; }
  .intro-slot { --fx: 1.6rem; --fy: 2rem; }
  .intro-slot-gold { top: -7vh; left: -34vw; --fy: -2.2rem; }
  .intro-slot-red { top: -4vh; right: -32vw; --fx: -1.8rem; }
  .intro-slot-green { bottom: -9vh; left: -30vw; }
  .intro-slot-blue { bottom: -5vh; right: -34vw; --fx: -1.4rem; --fy: -2.4rem; }
  .intro-center { --intro-word-size: 2.8rem; --lockup-gap: 9px; }
  .intro-brand-logo { width: 34px; height: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro { display: none !important; }
  html.intro-first,
  html.intro-first body { overflow: auto; }
}