/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --black: #040404;
  --dark-gray: #101010;
  --medium-gray: #222;
  --gray: #a5a5a5;
  --light-gray: #dedede;
  --white: #efefef;
  --accent: #ee421b;
  --accent-deep: #2d0800;
  --accent-soft: #ffb78a;

  --bg: var(--black);
  --surface: var(--dark-gray);
  --surface-raised: var(--medium-gray);
  --text: var(--white);
  --muted: var(--gray);

  --font-sans: "Inter Tight", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-micro: .75rem;
  --fs-small: clamp(.8125rem, .7764rem + .1541vw, .875rem);
  --fs-body: clamp(.9375rem, .9014rem + .1541vw, 1rem);
  --fs-lead: clamp(1.125rem, 1.0528rem + .3082vw, 1.25rem);
  --fs-h5: clamp(1.25rem, 1.1055rem + .6163vw, 1.5rem);
  --fs-h4: clamp(1.375rem, 1.0861rem + 1.2327vw, 1.875rem);
  --fs-h3: clamp(1.625rem, 1.1916rem + 1.849vw, 2.375rem);
  --fs-h2: clamp(1.875rem, 1.225rem + 2.7735vw, 3rem);
  --fs-h1: clamp(2.125rem, 1.1861rem + 4.0062vw, 3.75rem);
  --fs-display: clamp(2.5rem, 5.55vw, 5rem);

  --sp-3xs: .125rem; --sp-2xs: .25rem; --sp-xs: .5rem; --sp-sm: .75rem;
  --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem;
  --sp-3xl: 4rem; --sp-4xl: 6rem; --sp-5xl: 8rem; --sp-6xl: 10rem; --sp-7xl: 12rem;

  --r-sm: .625rem;
  --r-md: 1.25rem;
  --r-pill: 999px;

  --gutter: 1rem;
  --margin: .5rem;
  --max: 100rem;

  --ease: cubic-bezier(.77, 0, .175, 1);
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --dur-fast: .15s;
  --dur: .3s;
  --dur-slow: .6s;

  --nav-h: 4.5rem;
  color-scheme: dark;
}

@media (min-width: 64rem) {
  :root { --margin: .5rem; --gutter: 1rem; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
}
.skip:focus { top: 1rem; }

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

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--sp-4xl); }
@media (min-width: 64rem) { .section { padding-block: var(--sp-5xl); } }

.display { font-size: var(--fs-display); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -.028em; }
.h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.h5 { font-size: var(--fs-h5); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent); font-weight: 500;
}
.mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .02em; }

/* ==========================================================================
   Buttons: pill with rolling letters on hover
   ========================================================================== */
.btn {
  --btn-bg: var(--accent); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; padding: 0 1.4rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn:hover { background: #ff5a33; }
.btn:active { transform: scale(.97); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); padding-inline: .75rem; }
.btn--ghost:hover { background: rgba(255,255,255,.06); }
.btn--light { --btn-bg: #f1e3ff; --btn-fg: #1b0f2d; }
.btn--light:hover { background: #fff; }
.btn--pink { --btn-bg: #ffe0ec; --btn-fg: #2e0c19; }
.btn--pink:hover { background: #fff; }
.btn--lg { min-height: 3rem; padding-inline: 1.8rem; }

.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.2; }
.roll__row { display: block; white-space: pre; }
.roll__row + .roll__row { position: absolute; inset: 0; }
.roll .ch {
  display: inline-block;
  transition: transform .5s var(--ease-out);
  transition-delay: calc(var(--i) * 18ms);
}
.roll__row + .roll__row .ch { transform: translateY(110%); }
:is(a, button):hover > .roll .roll__row:first-child .ch,
:is(a, button):focus-visible > .roll .roll__row:first-child .ch { transform: translateY(-110%); }
:is(a, button):hover > .roll .roll__row + .roll__row .ch,
:is(a, button):focus-visible > .roll .roll__row + .roll__row .ch { transform: translateY(0); }

.disc {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  transition: transform var(--dur) var(--ease-out), background var(--dur);
}
.disc svg { width: 1rem; height: 1rem; }
.disc--sm { width: 1.75rem; height: 1.75rem; }
.disc--sm svg { width: .8rem; height: .8rem; }

.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--accent-deep); color: var(--accent);
  transition: background var(--dur), color var(--dur), opacity var(--dur);
}
.icon-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  padding: env(safe-area-inset-top, 0px) var(--margin) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: 1.55rem; letter-spacing: -.045em; }
.logo svg { width: 2.1rem; height: 1.5rem; }
.nav__logo, .nav__links, .nav__demo {
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.nav__links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: .25rem; }
.nav__links > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.6rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.nav__right { display: flex; align-items: center; gap: .5rem; }
.nav__menu {
  width: 2.625rem; height: 2.625rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-deep); color: var(--accent);
  transition: transform .5s var(--ease), opacity .4s var(--ease), background var(--dur);
}
.nav__menu:hover { background: var(--accent); color: #fff; }
.nav__menu svg { width: 1.05rem; height: 1.05rem; }

/* desktop at top: full nav, no menu button */
@media (min-width: 64rem) {
  .nav:not(.is-compact) .nav__menu { opacity: 0; transform: scale(.6); pointer-events: none; width: 0; margin-left: -.5rem; }
}
.nav.is-compact .nav__logo,
.nav.is-compact .nav__links,
.nav.is-compact .nav__demo { opacity: 0; transform: translateY(-5rem); pointer-events: none; }
.nav.is-compact .nav__links { transform: translate(-50%, -5rem); }
@media (max-width: 63.99rem) {
  .nav__links, .nav__demo { display: none; }
}

/* dropdown panels */
.dropdown {
  position: absolute; top: calc(100% + .25rem); left: 50%;
  translate: -50% 0;
  width: 22rem; padding: .5rem;
  background: rgba(16,16,16,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md);
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.nav__links > li:hover .dropdown,
.nav__links > li:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dropdown a {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .15rem .85rem; align-items: center;
  padding: .7rem; border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.dropdown a:hover { background: rgba(255,255,255,.06); }
.dropdown .dd-ico {
  grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: .7rem;
  background: var(--surface-raised); display: grid; place-items: center; color: var(--accent);
}
.dropdown .dd-ico svg { width: 1.1rem; height: 1.1rem; }
.dropdown strong { font-weight: 500; font-size: .95rem; }
.dropdown span.small { color: var(--muted); line-height: 1.3; }

/* full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--black);
  padding: calc(var(--nav-h) + 2rem + env(safe-area-inset-top, 0px)) var(--margin) calc(2rem + env(safe-area-inset-bottom, 0px));
  display: grid; align-content: space-between; gap: 2rem;
  overflow-y: auto;
  clip-path: circle(0 at calc(100% - 2rem) 2rem);
  transition: clip-path .7s var(--ease), visibility 0s linear .7s;
  visibility: hidden;
}
.menu.is-open {
  clip-path: circle(150% at calc(100% - 2rem) 2rem);
  transition: clip-path .7s var(--ease);
  visibility: visible;
}
.menu__logo { position: fixed; top: calc(1.2rem + env(safe-area-inset-top, 0px)); left: var(--margin); }
.menu__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); max-width: var(--max); width: 100%; margin-inline: auto; }
.menu__group h3 { margin-bottom: .75rem; }
.menu__group a {
  display: block; padding-block: .3rem;
  font-size: var(--fs-h4); font-weight: 500; letter-spacing: -.02em;
  color: var(--muted); transition: color var(--dur-fast);
}
.menu__group a:hover { color: var(--text); }
.menu__foot { display: flex; flex-wrap: wrap; gap: .75rem; max-width: var(--max); width: 100%; margin-inline: auto; }
.menu .menu__group, .menu .menu__foot { opacity: 0; transform: translateY(1.5rem); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.menu.is-open .menu__group, .menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: calc(.25s + var(--d, 0) * 70ms); }
.nav__menu .i-close { display: none; }
body.menu-open .nav__menu .i-close { display: block; }
body.menu-open .nav__menu .i-menu { display: none; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + var(--sp-3xl)) var(--margin) var(--sp-xl);
  overflow: clip;
}
.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.announce {
  display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center;
  padding: .45rem .5rem .45rem 1rem; border-radius: var(--r-pill);
  background: var(--surface-raised); font-size: var(--fs-small);
  max-width: min(100%, 34rem);
}
.announce a { color: var(--accent); padding: .1rem .5rem; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero h1 { max-width: 16ch; text-wrap: balance; }
.hero__trust {
  position: absolute; left: 0; right: 0; bottom: var(--sp-lg); z-index: 2;
  display: grid; justify-items: center; gap: 1.1rem; padding-inline: var(--margin);
}
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 2.75rem; }
.logos span { font-size: 1.05rem; color: #fff; opacity: .92; white-space: nowrap; }
.logos .w1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; letter-spacing: -.02em; }
.logos .w2 { font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; line-height: .85; font-size: .9rem; text-align: center; }
.logos .w3 { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; }
.logos .w4 { font-style: italic; font-weight: 600; font-size: 1.15rem; }
.logos .w5 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.08em; }
.logos .w6 { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* floating collage */
.collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.collage > * { position: absolute; will-change: transform; }
.float { animation: bob var(--t, 7s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
@keyframes bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
.c-circle { border-radius: 50%; overflow: hidden; }
.c-circle img { width: 100%; height: 100%; object-fit: cover; }
.c-stack { width: 9rem; aspect-ratio: 3/4; }
.c-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 3px solid var(--black);
}
.c-stack img:nth-child(1) { transform: translate(-1.6rem, 1.8rem); filter: brightness(.55); }
.c-stack img:nth-child(2) { transform: translate(-.8rem, .9rem); filter: brightness(.75); }
.c-stack .count { position: absolute; top: -1.1rem; right: 0; font-family: var(--font-mono); font-size: .6rem; color: var(--muted); }
.c-arrow {
  display: grid; place-items: center; border-radius: 50%;
  background: #9aa6c3; color: #1d2230;
}
.c-arrow svg { width: 40%; height: 40%; }
.c-arrow::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 20% 25%, #2a2f3a 2px, transparent 3px),
              radial-gradient(circle at 75% 20%, #2a2f3a 2px, transparent 3px),
              radial-gradient(circle at 85% 70%, #2a2f3a 2px, transparent 3px),
              radial-gradient(circle at 25% 85%, #2a2f3a 2px, transparent 3px);
  opacity: .7;
}
.c-arrow--dark { background: #2b2c33; color: #0b0b0e; }
.c-dotball { border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.c-dotball::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.2px, transparent 1.6px);
  background-size: 22px 22px; opacity: .45;
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.c-dotball span { position: relative; font-family: var(--font-mono); font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.c-ring { border-radius: 50%; overflow: hidden; }
.c-ring img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.c-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-ring text { font-family: var(--font-sans); font-weight: 500; font-size: 30px; letter-spacing: -1px; fill: rgba(255,255,255,.72); }
.c-card {
  width: 13rem; padding: .9rem 1rem 1rem; border-radius: 2px;
  background: #3b0a2c; color: #ff3d9a;
}
.c-card small { display: block; font-family: var(--font-mono); font-size: .55rem; color: rgba(255,61,154,.6); margin-bottom: 1.2rem; text-align: right; }
.c-card strong { font-weight: 500; font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; }
.c-chip {
  padding: .3rem .7rem; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: .52rem; text-transform: uppercase; letter-spacing: .04em;
  background: #3b0a2c; color: #ff5fae;
}
.c-chip--on { background: #ff2e93; color: #fff; }
.c-chip--red { background: #3a0c05; color: #ff6a47; }
.c-bubble {
  width: 13.5rem; padding: .7rem .85rem; border-radius: .25rem;
  background: #4561d8; color: #fff; font-size: .62rem; line-height: 1.35;
}
.c-event {
  width: 20rem; padding: .7rem 1rem; background: #0b1432;
  border-radius: 2px;
}
.c-event small { font-family: var(--font-mono); font-size: .5rem; color: #6c7ab8; text-transform: uppercase; }
.c-event strong { display: block; font-weight: 500; font-size: 1.7rem; letter-spacing: -.04em; color: #3e4c86; white-space: nowrap; }

@media (max-width: 63.99rem) {
  .collage .hide-sm { display: none; }
  .hero__trust { position: static; margin-top: var(--sp-3xl); }
  .hero { align-content: center; grid-auto-rows: auto; }
}

/* ==========================================================================
   Zoom sequence ("Fan engagement for live [image] events")
   ========================================================================== */
.zoom { position: relative; height: 420vh; }
.zoom__stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; }
.zoom__text { position: relative; z-index: 2; text-align: center; padding-inline: var(--margin); }
.zoom__line { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.zoom__line .w { color: #5a5a5a; transition: color .35s linear; }
.zoom__line .w.on { color: var(--text); }
.zoom__gap {
  display: inline-block; overflow: hidden; height: 1.35em; width: 0;
  margin-inline: 0; border-radius: .18em; flex: none;
}
.zoom__gap img { width: 100%; height: 100%; object-fit: cover; }
.zoom__grid {
  position: absolute; inset: var(--margin);
  display: grid; gap: var(--gutter);
  grid-template-columns: minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);
  opacity: 0; transform-origin: 50% 50%;
}
.zoom__grid figure { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface); }
.zoom__grid img { width: 100%; height: 100%; object-fit: cover; }
.zoom__grid .center { grid-column: 2; grid-row: 2; }
.zoom__grid .span-r { grid-row: span 2; }

/* ==========================================================================
   Results
   ========================================================================== */
.results__head {
  display: grid; gap: var(--sp-xl);
  grid-template-columns: minmax(0,1fr);
  align-items: end; margin-bottom: var(--sp-xl);
}
@media (min-width: 64rem) {
  .results__head { grid-template-columns: minmax(0,6fr) minmax(0,4fr) auto; }
}
.results__head .eyebrow { margin-bottom: 1rem; }
.results__copy { display: grid; gap: 1.25rem; justify-items: start; max-width: 22rem; font-size: var(--fs-small); }
.arrows { display: flex; gap: .5rem; }

.track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gutter) * 2) / 3);
  gap: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }
@media (max-width: 63.99rem) { .track { grid-auto-columns: 82%; } }
.rcard {
  scroll-snap-align: start;
  background: var(--surface); border-radius: var(--r-md);
  padding: .5rem; display: grid; gap: 2.75rem;
  transition: background var(--dur);
}
.rcard:hover { background: #161616; }
.rcard__who { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem 0; }
.rcard__who img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.rcard__who strong { font-weight: 500; font-size: var(--fs-h5); letter-spacing: -.02em; }
.rcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.stat { background: var(--surface-raised); border-radius: var(--r-sm); padding: .7rem .75rem .6rem; }
.stat b { display: block; font-weight: 500; font-size: 1.35rem; letter-spacing: -.03em; }
.stat span { font-family: var(--font-mono); font-size: .55rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }

/* ==========================================================================
   Industries (sticky list over full-bleed photo)
   ========================================================================== */
.ind { position: relative; height: 560vh; }
.ind__stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  clip-path: inset(var(--inset, 6%) var(--inset-x, 12%) round var(--r-md));
}
.ind__bg { position: absolute; inset: 0; }
.ind__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out);
}
.ind__bg img.on { opacity: 1; transform: scale(1); }
.ind__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,4,.55), rgba(4,4,4,.15) 60%, rgba(4,4,4,.45)); pointer-events: none; }
.ind__head { position: absolute; top: calc(var(--nav-h) + 1rem); left: var(--margin); z-index: 2; max-width: 16ch; }
.ind__foot { position: absolute; left: var(--margin); bottom: var(--sp-xl); z-index: 2; display: grid; gap: 1rem; justify-items: start; max-width: 18rem; font-size: var(--fs-small); color: var(--light-gray); }
.ind__inset {
  position: absolute; z-index: 2; width: min(28vw, 22rem); aspect-ratio: 16/10;
  left: 38%; top: 50%; translate: -50% -50%;
  border-radius: var(--r-sm); overflow: hidden; border: 3px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.ind__inset img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.ind__inset img.on { opacity: 1; }
.ind__listwrap {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 12%, #000 38%, #000 62%, transparent 88%);
  mask-image: linear-gradient(transparent 12%, #000 38%, #000 62%, transparent 88%);
}
.ind__list {
  position: absolute; right: 12%; top: 50%;
  display: grid; justify-items: center;
  transition: transform .7s var(--ease);
}
.ind__list li {
  font-size: clamp(1.8rem, 3.4vw, 3.1rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.3;
  color: rgba(255,255,255,.28); transition: color .5s, transform .5s var(--ease-out);
  transform: scale(.94);
}
.ind__list li.on { color: #fff; transform: none; }
@media (max-width: 63.99rem) {
  .ind__inset { left: 50%; top: 36%; width: 62vw; }
  .ind__listwrap {
    -webkit-mask-image: linear-gradient(transparent 52%, #000 62%, #000 76%, transparent 86%);
    mask-image: linear-gradient(transparent 52%, #000 62%, #000 76%, transparent 86%);
  }
  .ind__list { right: auto; left: 50%; top: 69%; translate: -50% 0; }
  .ind__list li { font-size: 2rem; }
}

/* ==========================================================================
   Product blocks
   ========================================================================== */
.product { text-align: center; }
.plabel { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -.03em; margin-bottom: 1.25rem; }
.plabel svg { width: 1.6rem; }
.plabel em { font-style: normal; font-weight: 400; }
.product h2 { margin-inline: auto; max-width: 16ch; }
.product .btn { margin-top: 1.75rem; }

.events-card {
  position: relative; margin-top: var(--sp-3xl);
  border-radius: var(--r-md); overflow: clip;
  background: linear-gradient(180deg, var(--black), var(--accent-deep));
  padding: var(--sp-3xl) var(--sp-lg) 0;
  min-height: 34rem;
  display: flex; justify-content: center; align-items: flex-end;
}
.phones { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.5rem, 1.5vw, 1.25rem); width: 100%; }
.phone {
  flex: 0 1 17rem; aspect-ratio: 9/17.5; min-width: 0;
  border-radius: 2.2rem 2.2rem 0 0; padding: .55rem .55rem 0;
  background: #1a1a1d; box-shadow: inset 0 0 0 2px #2c2c30;
  position: relative;
}
.phone__screen {
  position: relative; height: 100%; border-radius: 1.75rem 1.75rem 0 0; overflow: hidden;
  background: #2a0a17; text-align: left;
}
.phone__notch { position: absolute; top: .55rem; left: 50%; translate: -50% 0; width: 32%; height: 1.2rem; border-radius: 1rem; background: #000; z-index: 3; }
.phone__time { position: absolute; top: .7rem; left: 1.2rem; font-size: .6rem; font-weight: 600; z-index: 3; }
.phone__cover { height: 38%; position: relative; }
.phone__cover img { width: 100%; height: 100%; object-fit: cover; }
.phone__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, #2a0a17); }
.phone__body { padding: .7rem .75rem; display: grid; gap: .55rem; }
.phone__title { font-size: clamp(.9rem, 1.6vw, 1.35rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #ff5fae; text-transform: uppercase; }
.phone__tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.phone__tabs span { font-size: .5rem; padding: .2rem .45rem; border-radius: 999px; background: #4a1530; color: #ff9fcd; }
.phone__tabs span.on { background: #ff5fae; color: #2a0a17; }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.phone__grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: .35rem; }
.phone--mid { flex-basis: 18.5rem; }
.phone--mid .phone__screen { background: #3a0d0d; }
.phone--mid .phone__title { color: #ff8a5c; }
.phone--mid .phone__cover::after { background: linear-gradient(transparent 50%, #3a0d0d); }
.phone--mid .phone__tabs span { background: #5a1a12; color: #ffb49a; }
.phone--mid .phone__tabs span.on { background: #ff8a5c; color: #3a0d0d; }
.float-stat {
  position: absolute; z-index: 3; padding: .8rem 1rem; border-radius: var(--r-sm);
  background: rgba(34,34,34,.92); backdrop-filter: blur(8px); text-align: center;
}
.float-stat b { display: block; font-weight: 500; font-size: 1.6rem; letter-spacing: -.04em; line-height: 1.1; }
.float-stat span { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 47.99rem) {
  .phone:not(.phone--mid) { display: none; }
  .phone--mid { flex-basis: 16rem; }
  .events-card { min-height: 28rem; }
  .float-stat { padding: .55rem .7rem; }
  .float-stat b { font-size: 1.15rem; }
}

/* expanding feature cards */
.features {
  display: grid; gap: var(--gutter); margin-top: var(--gutter);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  transition: grid-template-columns .6s var(--ease);
}
.features:has(.feature:nth-child(1):is(:hover, :focus-within)) { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
.features:has(.feature:nth-child(2):is(:hover, :focus-within)) { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr); }
.features:has(.feature:nth-child(3):is(:hover, :focus-within)) { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr); }
.feature {
  position: relative; overflow: hidden; text-align: left;
  min-height: 11.5rem; border-radius: var(--r-md); background: var(--surface);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; justify-content: space-between;
}
.feature h3 { font-weight: 400; font-size: var(--fs-h5); letter-spacing: -.02em; position: relative; z-index: 2; }
.feature p { position: relative; z-index: 2; max-width: 24rem; font-size: var(--fs-small); color: var(--light-gray); margin-top: .6rem; opacity: 0; transform: translateY(.5rem); transition: opacity .4s, transform .4s var(--ease-out); }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,4,4,.8), rgba(4,4,4,.2) 60%, rgba(4,4,4,.7)); opacity: 0; transition: opacity .6s; }
.feature .disc { position: relative; z-index: 2; align-self: flex-end; }
.feature:is(:hover, :focus-within) img { opacity: 1; transform: none; }
.feature:is(:hover, :focus-within)::after { opacity: 1; }
.feature:is(:hover, :focus-within) p { opacity: 1; transform: none; }
.feature:is(:hover, :focus-within) .disc { transform: rotate(45deg); }
@media (max-width: 47.99rem) {
  .features, .features:has(.feature:hover) { grid-template-columns: minmax(0,1fr) !important; }
  .feature p { opacity: 1; transform: none; }
}

/* social */
.social__head { display: grid; gap: var(--sp-xl); text-align: left; grid-template-columns: minmax(0,1fr); }
@media (min-width: 64rem) { .social__head { grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: end; } }
.social__head h2 { margin: 0; max-width: 16ch; }
.social__copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 22rem; font-size: var(--fs-small); color: var(--light-gray); }
.social-card {
  margin-top: var(--sp-3xl); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--black), var(--dark-gray));
  padding: var(--sp-3xl) clamp(.5rem, 5vw, 5rem) 0; overflow: clip;
}
.browser {
  background: #151515; border: 1px solid #262626; border-bottom: 0;
  border-radius: .8rem .8rem 0 0; overflow: hidden; font-size: .72rem;
}
.browser__bar { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid #222; }
.browser__dots { display: flex; gap: .35rem; }
.browser__dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #ff5f57; }
.browser__dots i:nth-child(2) { background: #febc2e; }
.browser__dots i:nth-child(3) { background: #28c840; }
.browser__url { margin-inline: auto; background: #222; border-radius: .4rem; padding: .25rem 3rem; color: var(--muted); font-size: .6rem; }
.app { display: grid; grid-template-columns: 3rem minmax(0,1fr); min-height: 30rem; }
.app__side { border-right: 1px solid #222; display: grid; align-content: start; justify-items: center; gap: 1.1rem; padding-top: 1rem; color: #777; }
.app__side svg { width: 1rem; height: 1rem; }
.app__side .on { color: #fff; }
.app__main { padding: 1.1rem 1.25rem; text-align: left; min-width: 0; }
.app__title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.app__title h4 { font-size: 1rem; font-weight: 500; }
.app__title .tools { display: flex; gap: .4rem; }
.chipbtn { border: 1px solid #333; border-radius: .4rem; padding: .25rem .55rem; font-size: .6rem; color: #ccc; white-space: nowrap; }
.app__stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .5rem; margin-block: 1rem; }
.app__stats > div { border: 1px solid #262626; border-radius: .55rem; padding: .55rem .65rem; }
.app__stats span { font-size: .58rem; color: var(--muted); }
.app__stats b { display: block; font-weight: 500; font-size: 1.15rem; margin-top: .6rem; }
.table-wrap { overflow-x: auto; border: 1px solid #262626; border-radius: .6rem; }
.app table { width: 100%; border-collapse: collapse; min-width: 44rem; }
.app caption { text-align: left; padding: .75rem .8rem; font-size: .85rem; font-weight: 500; }
.app th, .app td { padding: .5rem .6rem; text-align: left; border-top: 1px solid #222; white-space: nowrap; font-size: .62rem; }
.app th { color: var(--muted); font-weight: 500; }
.app td img { width: 2rem; height: 2rem; border-radius: .3rem; object-fit: cover; }
.app td.cap { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; color: #ccc; }
.badge { border-radius: .3rem; padding: .1rem .35rem; font-size: .55rem; }
.badge--ig { background: #0f3a33; color: #4ee0b8; }
.badge--tt { background: #3a1030; color: #ff6ac8; }
.badge--type { background: #1a2a52; color: #7da3ff; }
@media (max-width: 47.99rem) { .app__stats { grid-template-columns: repeat(3, minmax(0,1fr)); } .app__title .tools { display: none; } }

/* studio */
.studio-card {
  border-radius: var(--r-md); color: var(--black);
  background: linear-gradient(180deg, var(--light-gray) 14%, var(--medium-gray) 100%);
  padding: var(--sp-4xl) var(--sp-lg) var(--sp-6xl);
}
.studio-card .plabel { color: var(--black); }
.studio-card h2 { max-width: 20ch; }

/* ==========================================================================
   Typing headline with block caret
   ========================================================================== */
[data-type] .tc { visibility: hidden; }
[data-type] .tc.v { visibility: visible; }
.caret {
  display: inline-block; width: .55em; height: 1em; margin-left: .04em;
  vertical-align: -.12em; background: var(--accent);
}
.caret.thin { width: .08em; }
.caret.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   Case studies: stacking cards
   ========================================================================== */
.cases__head { display: grid; gap: var(--sp-xl); grid-template-columns: minmax(0,1fr); margin-bottom: var(--sp-2xl); }
@media (min-width: 64rem) { .cases__head { grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: end; } }
.cases__head .eyebrow { margin-bottom: 1rem; }
.cases__head h2 { max-width: 15ch; }
.cases__copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 22rem; font-size: var(--fs-small); color: var(--light-gray); }
.stack { display: grid; gap: var(--gutter); }
.case {
  position: sticky; top: calc(var(--nav-h) + var(--i) * 1.25rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--sp-xl);
  padding: .4rem; border-radius: var(--r-md); background: var(--case-bg);
  min-height: 19rem;
  transform-origin: 50% 0;
}
.case__img { height: 100%; min-height: 18rem; border-radius: calc(var(--r-md) - .3rem); overflow: hidden; }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__body { display: grid; gap: 1.4rem; justify-items: start; padding-right: var(--sp-xl); }
.case__body h3 { font-weight: 500; font-size: var(--fs-h4); line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; }
.case__body h3 em { font-style: normal; color: var(--case-hl); }
.case--violet { --case-bg: #1b1030; --case-hl: #b99cff; }
.case--rose { --case-bg: #280d1f; --case-hl: #ff5fa0; }
.case--ember { --case-bg: #2b1206; --case-hl: #ff8a5c; }
@media (max-width: 47.99rem) {
  .case { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .case__img { min-height: 12rem; aspect-ratio: 16/10; }
  .case__body { padding: 0 .75rem 1rem; }
}
.more-bar {
  position: relative; margin-top: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem clamp(1.25rem, 4vw, 4rem); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden;
}
.more-bar::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 1.2px, transparent 1.6px);
  background-size: 1.1rem 1.1rem; opacity: .35;
  mask-image: linear-gradient(90deg, #000 4%, transparent 9%, transparent 91%, #000 96%);
}
.more-bar > span { position: relative; font-size: var(--fs-h5); letter-spacing: -.02em; }
.more-bar .btn { position: relative; }

/* ==========================================================================
   News
   ========================================================================== */
.news__head { text-align: center; display: grid; justify-items: center; gap: 1rem; margin-bottom: var(--sp-3xl); }
.news__head h2 { max-width: 12ch; }
.news__grid { columns: 3 18rem; column-gap: var(--gutter); }
.post {
  break-inside: avoid; margin-bottom: var(--gutter);
  display: grid; gap: .6rem; padding: .4rem .4rem 1rem;
  background: var(--surface); border-radius: var(--r-md);
  transition: background var(--dur);
}
.post:hover { background: #171717; }
.post figure { margin: 0; overflow: hidden; border-radius: calc(var(--r-md) - .3rem); }
.post img { width: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post:hover img { transform: scale(1.04); }
.post .eyebrow, .post h3 { padding-inline: .45rem; }
.post h3 { font-weight: 400; font-size: 1.1rem; letter-spacing: -.015em; line-height: 1.2; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-card { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-4xl) var(--sp-lg); }
.faq__head { text-align: center; display: grid; justify-items: center; gap: 1rem; margin-bottom: var(--sp-2xl); }
.faq__list { max-width: 30rem; margin-inline: auto; display: grid; gap: .6rem; }
.qa { background: var(--surface-raised); border-radius: var(--r-sm); overflow: hidden; }
.qa summary {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem;
  cursor: pointer; list-style: none; font-size: var(--fs-small);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .disc { background: var(--accent-deep); color: var(--accent); width: 1.4rem; height: 1.4rem; }
.qa summary .disc svg { width: .7rem; height: .7rem; transition: transform .4s var(--ease); }
.qa.is-open summary .disc { background: var(--accent); color: #fff; }
.qa.is-open summary .disc svg { transform: rotate(45deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 1rem 1rem 3rem; font-size: var(--fs-small); color: var(--light-gray); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface);
  min-height: 34rem; display: grid; place-items: center; text-align: center;
}
.cta__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.25rem; }
.bubbles { position: absolute; inset: 0; }
.bubbles > * { position: absolute; overflow: hidden; }
.bubbles img { width: 100%; height: 100%; object-fit: cover; }
.bubbles .round { border-radius: 50%; }
.bubbles .tile { border-radius: var(--r-md); }
@media (max-width: 47.99rem) { .bubbles .hide-sm { display: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding-top: var(--sp-4xl); }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0,1fr)); padding-inline: clamp(0rem, 4vw, 3.5rem); }
@media (min-width: 48rem) { .footer__cols { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.footer__cols h3 { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.footer__cols li a { display: inline-block; padding-block: .35rem; font-size: var(--fs-small); transition: color var(--dur-fast); }
.footer__cols li a:hover { color: var(--accent); }
.footer__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: var(--sp-4xl); padding-bottom: 1.25rem; border-bottom: 1px solid #1d1d1d; }
.socials { display: flex; gap: .5rem; }
.socials a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; transition: background var(--dur-fast); }
.socials a:hover { background: var(--surface-raised); }
.socials svg { width: 1.1rem; height: 1.1rem; }
.stores { display: flex; gap: .5rem; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .7rem;
  border-radius: .55rem; background: var(--surface-raised); border: 1px solid #333;
  transition: border-color var(--dur-fast);
}
.store:hover { border-color: #666; }
.store svg { width: 1.15rem; height: 1.15rem; }
.store small { display: block; font-size: .55rem; color: var(--muted); line-height: 1.1; }
.store b { font-weight: 500; font-size: .9rem; line-height: 1.1; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; font-size: .75rem; color: var(--muted); }
.footer__legal nav { display: flex; gap: 1.25rem; }
.footer__legal a:hover { color: var(--text); }
.footer__mark { position: relative; height: clamp(16rem, 34vw, 30rem); margin-top: var(--sp-2xl); overflow: hidden; }
.footer__mark > svg { position: absolute; left: 50%; bottom: -8%; translate: -50% 0; width: min(60vw, 34rem); color: #efefef; z-index: 2; }
.footer__mark .b { position: absolute; border-radius: 50%; overflow: hidden; }
.footer__mark .b img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Modal (book a demo)
   ========================================================================== */
.modal {
  width: min(100% - 2rem, 30rem); padding: 0; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
}
.modal::backdrop { background: rgba(4,4,4,.72); backdrop-filter: blur(6px); }
.modal[open] { animation: pop .45s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(1rem) scale(.98); } }
.modal form { display: grid; gap: .9rem; padding: 1.75rem; }
.modal__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: .25rem; }
.modal__close { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-raised); display: grid; place-items: center; flex: none; }
.modal__close svg { width: .9rem; height: .9rem; }
.field { display: grid; gap: .35rem; }
.field label { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface-raised); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .7rem .85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.form-note { font-size: var(--fs-small); color: var(--muted); min-height: 1.2em; }
.form-note.err { color: #ff7b5c; }
.form-note.ok { color: #7fe0a8; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.rv { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* "Soon" badge for services announced but not yet open (ChatBrace Mail).
   Lives here, not pages.css, because the homepage loads only this file. */
.soon {
  font-style: normal;
  font-family: var(--font-mono);
  /* Relative to its context, but never unreadably small (the footer and
     dropdown would otherwise give ~9px) nor shouting in the big mobile menu. */
  font-size: clamp(10px, .62em, 12px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-soft);
  background: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: .12em .5em;
  border-radius: 999px;
  margin-left: .5em;
  vertical-align: .15em;
  white-space: nowrap;
}