/* nawaf.eu v2, built on the ai-studio flow: one star motif, one scroll clock, cards that become each other.
   Rule: never put a CSS transform on an element GSAP animates (it gets parsed as px and stacks). */
:root {
  --black: #000;
  --white: #fff;
  --ink: #120924;
  --lilac: #e2dcf0;
  --muted: #a59db8;
  --violet: #7c3aed;
  --violet-2: #8b5cf6;
  --violet-deep: #2d1660;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--black); color: #fff; font-family: var(--sans); overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; }
.dim { color: rgba(255,255,255,.35); }
svg use { fill: currentColor; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
#stage.is-chrome { background: radial-gradient(circle at 45% 85%, #5e2dd1 0%, #2d1660 40%, #0d061d 75%, #000 100%); }
main { position: relative; z-index: 2; }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; overflow: hidden; }
.intro__glow { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 50%; margin: -70vmax 0 0 -70vmax; border-radius: 50%; background: radial-gradient(circle, #8d67bd 0%, #2d1660 28%, #000 62%); }
.intro__star { position: relative; width: 64px; height: 64px; color: #000; }

/* ---------- nav (template: white pill) ---------- */
.nav {
  position: fixed; top: 20px; left: 50%; z-index: 60; display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1f2937; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.4);
  translate: -50% 0;
}
.nav a { padding: 7px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: #000; background: rgba(0,0,0,.04); }
.nav__brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #000; }
.nav__brand svg { width: 16px; height: 16px; color: #000; }
.nav .nav__cta { background: #000; color: #fff; font-weight: 600; padding: 8px 16px; }
.nav .nav__cta:hover { background: #222; color: #fff; }

/* ---------- atoms ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: box-shadow .2s, background .2s; }
.btn--light { background: var(--lilac); color: var(--ink); }
.btn--light:hover { box-shadow: 0 10px 30px rgba(142,103,189,.35); }
.btn--ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }

/* ---------- scene 1: hero -> carousel -> portal ---------- */
.s1 { position: relative; height: 620vh; }
.s1__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1200px; }
.s1__bg { position: absolute; inset: 0; background: #000; }
.marquee { position: absolute; left: 0; top: 50%; margin-top: -.6em; white-space: nowrap; font-size: clamp(64px, 8vw, 110px); font-weight: 700; letter-spacing: -.03em; color: #000; opacity: 0; line-height: 1.2; }
.marquee span { display: inline-block; }

.carousel { position: absolute; left: 50%; top: 50%; width: 320px; height: 540px; margin: -270px 0 0 -160px; transform-style: preserve-3d; }
.pc {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  color: #fff; background: radial-gradient(circle at 50% 30%, #8d67bd 0%, #4c1d95 45%, #1f113b 100%);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); opacity: 0;
}
.pc__tag { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2); }
.pc__stat { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pc__stat b { font-size: 64px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.pc__stat span { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.8); max-width: 220px; }
.pc__shot { flex: 1; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: #0d0a14; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.pc__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pc__foot { margin-top: auto; display: grid; gap: 6px; }
.pc h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.pc__foot p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82); }
.pc__foot a { color: #fde68a; font-weight: 600; }
.pc--hero { padding: 0; }
.pc--hero .pc__full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.pc--hero .pc__foot { position: relative; padding: 18px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.pc--hero .pc__tag { margin-bottom: 6px; }
.pc--star { background: #7c3aed; align-items: center; text-align: center; }
.pc--star .pc__tag { align-self: center; }
.pc__staricon { width: 64px; height: 64px; margin: auto; color: #fff; }

.hero {
  position: absolute; left: 50%; top: 50%; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 60% 60%, #4c1d95 0%, #1e113b 50%, #06040a 100%); will-change: transform;
}
.hero__img { position: absolute; left: 0; top: 0; object-fit: cover; object-position: 66% 50%; border-radius: 22px; box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.hero__copy { position: absolute; left: clamp(24px, 4vw, 56px); top: clamp(84px, 13vh, 120px); bottom: clamp(24px, 6vh, 56px); width: min(38vw, 520px); display: flex; flex-direction: column; }
.hero__copy h1 { display: flex; flex-direction: column; font-size: clamp(36px, 4.4vw, 70px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.hero__copy h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__copy h1 .line > span { display: inline-block; }
.hero__lede { margin-top: auto; font-size: 15px; line-height: 1.5; color: #a59db8; max-width: 420px; }
.trust { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 13px; color: var(--lilac); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.trust__dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 12px #f59e0b; }
.hero__side { position: absolute; right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 6vh, 56px); max-width: 300px; font-size: 13px; line-height: 1.5; color: #9b92b0; text-align: right; }

.portal { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: #fff; opacity: 0; z-index: 5; pointer-events: none; }

/* ---------- scene 2: particles ---------- */
.s2 { position: relative; height: 280vh; }
.s2__pin { position: sticky; top: 0; height: 100vh; }
.s2__star { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; color: #fff; filter: drop-shadow(0 0 18px rgba(255,255,255,.8)); }
.big { position: absolute; font-size: clamp(72px, 10vw, 130px); font-weight: 700; line-height: .9; letter-spacing: -.04em; will-change: transform, filter; }
.big--tl { top: 14vh; left: var(--gutter); }
.big--br { bottom: 10vh; right: var(--gutter); text-align: right; }
.s2__copy { position: absolute; left: var(--gutter); bottom: 12vh; max-width: 440px; display: grid; gap: 12px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); }

/* ---------- scene 3: rail ---------- */
.s3 { position: relative; height: 340vh; background: #000; }
.s3__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.aurora { position: absolute; inset: auto -20% -35% -20%; height: 80vh; background: radial-gradient(ellipse at 50% 100%, #7c3aed 0%, #3b0d6e 30%, #081647 60%, transparent 76%); filter: blur(40px); opacity: .9; pointer-events: none; }
.rail { position: relative; display: flex; gap: 36px; padding: 0 10vw; width: max-content; will-change: transform; }
.slab {
  position: relative; width: min(75vw, 680px); aspect-ratio: 16 / 11; border-radius: 20px; overflow: hidden; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 28%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%), var(--img) var(--px, 50%) 50% / cover;
}
.slab__meta { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.85); }
.slab h3 { font-size: clamp(44px, 5vw, 72px); font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: auto; }
.slab p:last-child { margin-top: 12px; max-width: 460px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.slab a { color: #fde68a; font-weight: 600; }

/* ---------- scene 4: flying field ---------- */
.s4 { position: relative; height: 360vh; background: #000; }
.s4__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1500px; }
.s4__title { position: absolute; top: 13vh; width: 100%; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field { position: absolute; inset: 0; transform-style: preserve-3d; }
.fc {
  position: absolute; left: 50%; top: 50%; width: 320px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85)), var(--img) center / cover;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px rgba(0,0,0,.5); will-change: transform, opacity, filter;
}
.fc--shot { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85)), var(--img) top left / cover; }
.fc h4 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #fde68a; }
.fc p { font-size: 15px; line-height: 1.45; font-weight: 500; }

/* ---------- scene 5: finale card ---------- */
.s5 { position: relative; height: 100vh; padding: 16px; }
.s5__card { position: relative; height: 100%; border-radius: 28px; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; padding: clamp(24px, 6vw, 96px); }
.s5__copy { position: relative; z-index: 3; max-width: 520px; }
.s5 h2 { display: flex; flex-direction: column; font-size: clamp(44px, 5.5vw, 68px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.s5 .dim { color: rgba(255,255,255,.4); }
.s5__copy > p { margin: 24px 0 0; font-size: 15px; line-height: 1.55; color: #9b92b0; max-width: 420px; }
.s5__foot { position: absolute; left: clamp(24px, 6vw, 96px); bottom: 24px; font-size: 12px; color: rgba(255,255,255,.45); }
.s5__foot a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nav a:not(.nav__brand):not(.nav__cta):not(.nav__lc) { display: none; }
  .nav .nav__lc { padding: 7px 8px; font-size: 12px; }
  .hero__img { display: none; }
  .hero__copy { width: auto; right: 24px; }
  .hero__side { display: none; }
  .carousel { width: 270px; height: 460px; margin: -230px 0 0 -135px; }
  .pc__stat b { font-size: 52px; }
  .s2__copy { bottom: 22vh; font-size: 14px; }
  .fc { width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- one image grade for the whole site ----------
   Every image (product screenshots, renders, concept shots) is graded into the same violet duotone,
   so a white SaaS screenshot sits next to a dark render without clashing. Hover shows true colour. */
.pc__shot, .slab, .fc { isolation: isolate; }
.pc__shot img { filter: grayscale(1) contrast(1.08) brightness(.92); transition: filter .5s ease; }
.pc__shot::after, .slab::before, .fc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(160deg, #a78bfa 0%, #6d28d9 45%, #1e0b3d 100%); mix-blend-mode: color; transition: opacity .5s ease;
}
.pc__shot { position: relative; }
.slab::before, .fc::before { border-radius: inherit; }
.slab > *, .fc > * { position: relative; z-index: 2; }
.slab, .fc { filter: saturate(.9); }
.pc__shot:hover img { filter: none; }
.pc__shot:hover::after, .slab:hover::before, .fc:hover::before { opacity: 0; }
/* the card in focus lights up on scroll too, not only on hover */
.pc.is-lit .pc__shot img { filter: none; }
.pc.is-lit .pc__shot::after, .slab.is-lit::before, .fc.is-lit::before { opacity: 0; }
.pc.is-lit, .slab.is-lit, .fc.is-lit { box-shadow: 0 0 0 1px rgba(196,181,253,.55), 0 30px 70px -10px rgba(124,58,237,.55); }
.pc, .slab, .fc { transition: box-shadow .5s ease; }

/* ---------- card videos ---------- */
.player { margin: auto; padding: 0; border: 0; background: transparent; width: min(1200px, 94vw); overflow: visible; }
.player::backdrop { background: rgba(5, 2, 12, .86); backdrop-filter: blur(6px); }
.player video { display: block; width: 100%; max-height: 86vh; border-radius: 16px; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.player__close { position: absolute; top: -48px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

.vid { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.vid video { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.vid__play { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: scale .25s ease; }
.vid__play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.vid:hover .vid__play { scale: 1.1; }
.vid:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.slab--video { isolation: isolate; background: linear-gradient(180deg, #0d0820, #05030c); }
.slab--video > .vid { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 0; }
.slab--video > :not(.vid) { position: relative; z-index: 2; }
.slab--video > .vid video { object-position: center; }
.slab--video::before { content: none; }
.slab--video .slab__meta { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.slab--video > .vid .vid__play { z-index: 3; }
.slab--video > .vid .vid__play { top: 24px; right: 24px; bottom: auto; width: 44px; height: 44px; }
.slab--video > .vid .vid__play::after { left: 17px; top: 13px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
.slab--video h3, .slab--video p { pointer-events: none; }
.slab--video a { pointer-events: auto; }
.swipe { display: none; }



.m-portal { display: none; }

/* hero: the image drifts and a live feed of shipped work cycles over it */
.hero__live { position: absolute; right: clamp(24px, 4vw, 56px); top: clamp(96px, 16vh, 150px); width: 300px; height: 64px; z-index: 3; pointer-events: none; }
.hero__live li { list-style: none; position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(16,10,32,.62); border: 1px solid rgba(196,181,253,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.35); opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.8,.2,1); }
.hero__live li.on { opacity: 1; translate: 0 0; }
.hero__live li.off { opacity: 0; translate: 0 -14px; }
.hero__live i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: livePulse 1.6s ease-in-out infinite; }
.hero__live b { display: block; font-size: 13px; font-weight: 600; }
.hero__live span { display: block; font-size: 12px; color: #b9b0d0; }
@keyframes livePulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hero__live i, .rig { animation: none !important; } }

/* hero: a real 3D stack of shipped products instead of a drifting picture */
.hero__img { overflow: hidden; background: radial-gradient(circle at 50% 40%, #3b1d78 0%, #160b2e 60%, #07040f 100%); }
.stage3d { position: absolute; inset: 0; perspective: 1100px; display: grid; place-items: center; }
.rig { position: relative; width: 90%; aspect-ratio: 1 / 1; transform-style: preserve-3d; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); animation: sway 9s ease-in-out infinite alternate; }
@keyframes sway { from { translate: 0 -6px; rotate: y -4deg; } to { translate: 0 6px; rotate: y 6deg; } }
.c3 { position: absolute; inset: 0; margin: 0; border-radius: 16px; overflow: hidden; background: #0d0820; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(196,181,253,.12) inset;
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s ease, filter 1s ease; backface-visibility: hidden; }
.c3 img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.c3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08) 100%); pointer-events: none; }
.c3 figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(10,6,20,.72); border: 1px solid rgba(196,181,253,.3); }
.c3[data-pos="0"] { transform: translate3d(0, 0, 60px); opacity: 1; filter: none; z-index: 4; }
.c3[data-pos="1"] { transform: translate3d(8%, -9%, -40px) rotateZ(3deg); opacity: .78; filter: brightness(.7); z-index: 3; }
.c3[data-pos="2"] { transform: translate3d(15%, -17%, -140px) rotateZ(6deg); opacity: .5; filter: brightness(.5); z-index: 2; }
.c3[data-pos="3"] { transform: translate3d(-12%, 14%, -260px) rotateZ(-5deg); opacity: 0; filter: brightness(.4); z-index: 1; }
.c3[data-pos="0"] figcaption { opacity: 1; } .c3:not([data-pos="0"]) figcaption { opacity: 0; }

.nav a { white-space: nowrap; }
.nav__lc .sm { display: none; }
@media (max-width: 860px) { .nav__lc .lg { display: none; } .nav__lc .sm { display: inline; } }

.pc--hero { background: radial-gradient(circle at 50% 40%, #3b1d78 0%, #160b2e 60%, #07040f 100%); }
.pc--hero .stage3d { z-index: 0; }
.pc--hero .pc__foot { z-index: 1; }

/* stack: real logos on glass cards */
.fc--logos { width: 360px; aspect-ratio: auto; min-height: 380px; justify-content: flex-start; gap: 10px; padding: 22px 22px 20px; background: linear-gradient(160deg, rgba(58,28,120,.92) 0%, rgba(22,11,46,.96) 55%, rgba(8,4,18,.98) 100%); border-color: rgba(196,181,253,.22); }
.fc--logos::before { content: none; }
.fc--logos h4 { font-size: 11px; }
.fc__sub { font-size: 20px !important; font-weight: 650 !important; letter-spacing: -.01em; margin-bottom: 6px; }
.logos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.logos li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.logos img { width: 28px; height: 28px; object-fit: contain; }
.logos img.mono { filter: invert(1); opacity: .92; }
.logos span { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.82); text-align: center; line-height: 1.2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chips em { font-style: normal; font-size: 11px; padding: 4px 9px; border-radius: 999px; color: #e2dcf0; background: rgba(139,92,246,.18); border: 1px solid rgba(196,181,253,.25); }
.fc--logos.is-lit { box-shadow: 0 0 0 1px rgba(196,181,253,.6), 0 30px 80px -10px rgba(124,58,237,.7); }

/* ---------- phones: the same cinematic scroll scenes, fitted to portrait ---------- */
.m-portal { display: none !important; }
.is-touch .hero__copy { left: 22px; right: 22px; width: auto; top: 150px; bottom: 26px; }
.is-touch .hero__copy h1 { font-size: clamp(32px, 9.4vw, 44px); }
.is-touch .hero__side { display: none; }
.is-touch .hero__live { left: 22px; right: 22px; width: auto; top: 76px; }
.is-touch .hero__img { display: block; }
@media (max-height: 640px) { .is-touch .hero__img { display: none; } }
.is-touch .rig { width: 74%; aspect-ratio: 4 / 3; }
.is-touch .carousel { width: 74vw; height: min(64vh, 520px); margin: calc(min(64vh, 520px) / -2) 0 0 -37vw; }
.is-touch .pc { padding: 14px; gap: 10px; }
.is-touch .pc h3 { font-size: 20px; }
.is-touch .pc__stat b { font-size: 48px; }
.is-touch .pc__foot p { font-size: 12px; }
.is-touch .marquee { font-size: 56px; }
.is-touch .big { font-size: 15vw; }
.is-touch .s2__copy { right: var(--gutter); font-size: 15px; }
.is-touch .rail { gap: 18px; }
.is-touch .slab { width: 80vw; aspect-ratio: 3 / 4; padding: 18px; }
.is-touch .slab h3 { font-size: 32px; }
.is-touch .slab p:last-child { font-size: 13px; }
.is-touch .slab--video > .vid { height: 46%; }
.is-touch .fc { width: 62vw; padding: 16px; }
.is-touch .fc--logos { width: 76vw; min-height: 0; padding: 16px; gap: 8px; }
.is-touch .fc__sub { font-size: 17px !important; }
.is-touch .logos { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.is-touch .logos li { padding: 7px 2px 6px; }
.is-touch .logos img { width: 22px; height: 22px; }
.is-touch .logos span { font-size: 9.5px; }
.is-touch .chips em { font-size: 10px; padding: 3px 7px; }

/* hero: the reel is the front card of the 3D stack; one tap brings the music in */
.hero__img, .hero__copy, .hero__side, .hero__live { z-index: 2; }
.hero__sound { position: absolute; z-index: 4; right: clamp(24px, 4vw, 56px); top: calc(clamp(96px, 16vh, 150px) + 78px); display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(16,10,32,.6); color: #fff; font: 600 13px var(--sans); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s ease; }
.hero__sound:hover { background: rgba(124,58,237,.55); }
.hero__sound-ic { width: 16px; height: 12px; background: currentColor; clip-path: polygon(0 30%, 30% 30%, 62% 0, 62% 100%, 30% 70%, 0 70%); position: relative; }
.hero__sound[aria-pressed="true"] { background: rgba(124,58,237,.7); border-color: rgba(196,181,253,.6); }
.hero__sound[aria-pressed="true"] .hero__sound-ic { clip-path: polygon(0 30%, 30% 30%, 62% 0, 62% 100%, 30% 70%, 0 70%, 0 30%, 75% 20%, 100% 50%, 75% 80%, 75% 20%); }
.is-touch .hero__live { right: 76px; }
.is-touch .hero__sound { top: 76px; right: 22px; width: 46px; height: 46px; padding: 0; justify-content: center; }
.is-touch .hero__sound-txt { display: none; }

/* rail video cards: titles never slide under the video */
.slab--video h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; }
.slab--video > :not(.vid):first-of-type { margin-bottom: auto; }
/* reel full screen */
.hero__full { position: absolute; z-index: 4; right: calc(clamp(24px, 4vw, 56px) + 128px); top: calc(clamp(96px, 16vh, 150px) + 78px); width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(16,10,32,.6); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__full span { position: absolute; inset: 11px; border: 2px solid #fff; clip-path: polygon(0 0, 40% 0, 40% 2px, 2px 2px, 2px 40%, 0 40%, 0 0, 60% 0, 100% 0, 100% 40%, calc(100% - 2px) 40%, calc(100% - 2px) 2px, 60% 2px, 60% 0, 100% 60%, 100% 100%, 60% 100%, 60% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 60%, 100% 60%, 0 60%, 2px 60%, 2px calc(100% - 2px), 40% calc(100% - 2px), 40% 100%, 0 100%); }
.hero__full:hover { background: rgba(124,58,237,.55); }
.is-touch .hero__full { top: 76px; right: 76px; width: 46px; height: 46px; }
.is-touch .hero__full span { inset: 14px; }
.is-touch .hero__live { right: 130px; }

/* reel card in the hero stack */
.c3--reel video, .c3--reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rig { width: 92%; aspect-ratio: 16 / 9; }
.c3[data-pos="4"] { transform: translate3d(-12%, 14%, -260px) rotateZ(-5deg); opacity: 0; z-index: 0; }
.is-touch .rig { width: 92%; aspect-ratio: 16 / 9; }
/* speed: no backdrop blur behind moving video on phones (same look, far cheaper) */
.is-touch .hero__live li, .is-touch .hero__sound, .is-touch .hero__full, .is-touch .c3 figcaption { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(16,10,32,.82); }

/* rail video cards: video on top, text below, never overlapping */
.slab.slab--video { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; gap: 0; }
.slab--video > .vid { position: relative; inset: auto; height: auto; flex: 1 1 auto; min-height: 0; border-radius: 0; }
.slab--video > :not(.vid) { flex: 0 0 auto; padding-left: 24px; padding-right: 24px; margin: 0; }
.slab--video > .slab__meta { order: 2; align-self: flex-start; margin: 16px 24px 0; padding: 5px 12px; }
.slab--video > h3 { order: 3; margin-top: 10px !important; }
.slab--video > p:last-child { order: 4; margin-top: 8px; padding-bottom: 22px; }
.is-touch .slab.slab--video { padding: 0; }
.is-touch .slab--video > :not(.vid) { padding-left: 18px; padding-right: 18px; }
.is-touch .slab--video > .slab__meta { margin: 12px 18px 0; }
.is-touch .slab--video > .vid { height: auto; }