:root {
  --bg: #07060c;
  --ink: #f4f2ff;
  --ink2: rgba(244, 242, 255, .68);
  --ink3: rgba(244, 242, 255, .42);
  --lav: #b28cff;
  --peach: #ff6b8b;
  --teal: #4f7cff;
  --grad: linear-gradient(120deg, #4f7cff 0%, #a855f7 52%, #ff4d6d 100%);
  --blue: #4f7cff; --purple: #a855f7; --pink: #ff4d6d;
  --grad2: linear-gradient(135deg, #ff4d6d 0%, #a855f7 50%, #4f7cff 100%);
  --glass: rgba(60, 54, 110, .3);
  --edge: rgba(255, 255, 255, .16);
  --card: rgba(255, 255, 255, .075);
  --blur: blur(30px) saturate(140%);
  --shine: inset 0 1px 0 rgba(255, 255, 255, .22);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --heavy: 'Inter Tight', system-ui, sans-serif;
  --display: 'Archivo', 'Inter Tight', system-ui, sans-serif;
  --dot: 'Doto', ui-monospace, monospace;
  --crt: 'VT323', ui-monospace, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.locked { overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--lav); color: #111; }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
.dotm { font-family: var(--dot); font-weight: 800; letter-spacing: .02em; }
.serif { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch { display: inline-block; transform-origin: 50% 100%; }
.w { display: inline-block; white-space: nowrap; }

.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--edge); box-shadow: var(--shine), 0 20px 60px rgba(0, 0, 0, .35); }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.chip .dotm { font-size: 13px; color: var(--lav); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; animation: live 1.6s infinite; display: inline-block; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 109, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 77, 109, 0); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; transition: background .25s, transform .35s var(--spring); }
.btn:active { transform: scale(.96); }
.btn-light { background: #fff; color: #0b0a10; }
.btn-glass { background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-glass:hover { background: rgba(255, 255, 255, .18); }

/* the "roll" hover: label slides up, a copy rolls in from below */
.roll > span { display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.roll > span b { grid-area: 1 / 1; font-weight: inherit; transition: transform .55s var(--ease); }
.roll > span b + b { transform: translateY(110%); }
.roll:hover > span b:first-child { transform: translateY(-110%); }
.roll:hover > span b + b { transform: translateY(0); }

/* ============ atmosphere ============ */
/* phones: the orb is its own small full-resolution layer (js/orb3d.js), moved and scaled each frame */
.orb3d { position: fixed; left: 0; top: 0; z-index: 0; display: none; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
/* sized to the tallest viewport (phone toolbars collapsed) and drawn at that size, so the orb never stretches */
#bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ============ cursor ============ */
#cursor { display: none; }
.has-cursor #cursor { display: block; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.c-dot, .c-ring { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; border-radius: 50%; }
.c-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; }
.c-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(255, 255, 255, .55); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s, border-color .3s; }
.c-label { font-size: 12px; font-weight: 600; color: #0b0a10; letter-spacing: .01em; opacity: 0; transform: scale(.6); transition: all .3s var(--ease); white-space: nowrap; }
#cursor.hover .c-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #fff; border-color: #fff; }
#cursor.hover .c-label { opacity: 1; transform: none; }
#cursor.hover .c-dot { opacity: 0; }
#cursor.down .c-ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
#cursor.hover.down .c-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
#cursor.text .c-ring { width: 4px; height: 34px; margin: -17px 0 0 -2px; border-radius: 2px; background: #fff; }
#cursor.gone { opacity: 0; }

/* ============ header + menu ============ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand img { height: 20px; width: auto; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.cta-mini { height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: #0b0a10; font-weight: 600; font-size: 14px; }
.menu-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; transition: background .3s; }
.menu-btn i { width: 5px; height: 5px; border-radius: 50%; background: #0b0a10; transition: transform .45s var(--ease), width .45s var(--ease), border-radius .45s; }
.menu-btn:hover i:first-child { transform: translateY(-4px); }
.menu-btn:hover i:last-child { transform: translateY(4px); }
body.menu-open .menu-btn i { width: 16px; height: 2px; border-radius: 2px; position: absolute; }
body.menu-open .menu-btn i:first-child { transform: rotate(45deg); }
body.menu-open .menu-btn i:last-child { transform: rotate(-45deg); }
body.menu-open .cta-mini { opacity: 0; pointer-events: none; }
body.is-booting .topbar { opacity: 0; }
.topbar { transition: opacity .4s, transform .5s var(--ease); }
body[data-view="room"] .topbar, body[data-view="join"] .topbar, body[data-view="portal"] .topbar { opacity: 0; transform: translateY(-20px); pointer-events: none; }
body[data-view="room"] .topbar > *, body[data-view="join"] .topbar > *, body[data-view="portal"] .topbar > * { pointer-events: none; }

#menu { position: fixed; inset: 0; z-index: 40; background: rgba(12, 10, 20, .82); -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%); display: flex; flex-direction: column; justify-content: center; padding: 100px clamp(24px, 6vw, 90px) 40px; }
.menu-list { list-style: none; display: flex; flex-direction: column; }
.menu-list li { overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); }
.menu-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.menu-list button { width: 100%; display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); padding: clamp(6px, 1.2vh, 14px) 0; text-align: left; }
.ml-num { font-size: 15px; color: var(--ink3); width: 2.4ch; transition: color .3s; }
.ml-word { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 100; font-size: clamp(32px, 6.4vh, 72px); line-height: 1; letter-spacing: -.035em; transition: transform .6s var(--ease), font-variation-settings .6s var(--ease), color .3s; }
.ml-word.serif { font-family: var(--display); }
.ml-line { margin-left: auto; font-size: 15px; color: var(--ink3); max-width: 32ch; text-align: right; opacity: 0; transform: translateX(-20px); transition: all .5s var(--ease); }
.menu-list button:hover .ml-word { transform: translateX(18px); font-variation-settings: 'wdth' 125; color: var(--peach); }
.menu-list button:hover .ml-num { color: var(--peach); }
.menu-list button:hover .ml-line { opacity: 1; transform: none; }
.menu-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; color: var(--ink3); font-size: 14px; flex-wrap: wrap; }
.menu-social { display: flex; gap: 18px; }
.menu-social a:hover { color: #fff; }

/* ============ page ============ */
#site { position: relative; z-index: 2; }
body.is-booting #site { visibility: hidden; }
body.no-boot #boot { display: none; }
section { position: relative; }
.sec-title { font-size: clamp(46px, 7.4vw, 120px); font-weight: 850; letter-spacing: -.045em; line-height: .84; text-transform: uppercase; }

.s-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; padding: 120px clamp(24px, 6vw, 90px) 100px; }
.hero-title { display: flex; flex-direction: column; line-height: .82; perspective: 800px; text-transform: uppercase; font-weight: 800; letter-spacing: -.05em; font-size: clamp(58px, 11.6vw, 200px); }
.ht-line { display: block; }
.ht-line .ch { transition: font-variation-settings .25s; }
.ht-grad .ch { background: var(--grad); background-size: 1100% 100%; background-position: calc(var(--i) * 10%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { max-width: 440px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink2); }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--ink2), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }

.mw { display: inline-block; }

.s-marquee { padding: 8vh 0 12vh; overflow: hidden; display: flex; flex-direction: column; gap: 1vh; }
.mq-row { white-space: nowrap; overflow: hidden; }
.mq-track { display: inline-block; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 110; font-size: clamp(54px, 9vw, 150px); letter-spacing: -.035em; line-height: 1; will-change: transform; }
.mq-serif .mq-track { font-family: var(--heavy); font-weight: 850; text-transform: uppercase; letter-spacing: -.04em; color: var(--pink); }
.mq-outline .mq-track { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 242, 255, .55); }


.odo { display: flex; align-items: flex-start; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 105; font-size: clamp(64px, 7vw, 118px); line-height: 1; letter-spacing: -.04em; height: 1em; }
.od { display: inline-block; height: 1em; overflow: hidden; }
.od-strip { display: flex; flex-direction: column; }
.od-strip i { font-style: normal; height: 1em; line-height: 1; display: block; }
.od-suf, .od-sep { line-height: 1; }
.od-suf { font-size: .5em; margin: .08em 0 0 .06em; color: var(--peach); font-weight: 600; }
.odo-sm { font-size: clamp(34px, 3.6vw, 56px); }

/* rooms: seven cards */
.s-rooms { height: 100vh; height: 100svh; }
.rooms-pin { position: relative; height: 100%; display: flex; flex-direction: column; padding: 96px clamp(20px, 3vw, 44px) 26px; gap: 22px; }
.rooms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rooms-head .dotm { font-size: 14px; color: var(--peach); letter-spacing: .14em; order: 2; }
.rooms-head .sec-title { font-size: clamp(36px, 5vw, 76px); }
.cards { position: relative; flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "problem problem why solution" "product model model solution" "product others team team"; perspective: 1400px; }
.rc-problem { grid-area: problem; } .rc-why-now { grid-area: why; } .rc-solution { grid-area: solution; } .rc-product { grid-area: product; }
.rc-model { grid-area: model; } .rc-competition { grid-area: others; } .rc-team { grid-area: team; }
.room-card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; min-height: 0; border-radius: 28px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; outline: none; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); transform-style: preserve-3d; pointer-events: none; }
.cards.landed .room-card { pointer-events: auto; }
.room-card.shown { pointer-events: auto; }   /* phones mark cards shown as they scroll in (no 'landed' step there) */
.room-card.shown > * { pointer-events: none; }
.rc-shell { position: absolute; inset: 0; border-radius: inherit; background: rgba(90, 80, 180, .16); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); box-shadow: var(--shine), 0 30px 60px rgba(0, 0, 0, .25); overflow: hidden; transition: background .4s, border-color .4s; }
.rc-glare { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .2), transparent 45%); opacity: 0; transition: opacity .4s; }
.room-card:hover .rc-shell, .room-card:focus-visible .rc-shell { background: rgba(110, 96, 210, .26); border-color: rgba(255, 255, 255, .3); }
.room-card:hover .rc-glare { opacity: 1; }
.room-card > *:not(.rc-shell) { position: relative; transform: translateZ(30px); }
.rc-num { font-size: 15px; color: var(--peach); }
.rc-word { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 112; font-size: clamp(30px, 3.4vw, 60px); line-height: .9; letter-spacing: -.035em; white-space: nowrap; align-self: flex-start; transform-origin: center; will-change: transform; }
.rc-problem .rc-word, .rc-team .rc-word, .rc-model .rc-word { font-size: clamp(38px, 4.6vw, 80px); }
.cw-in { display: inline-block; }
.room-card:hover .rc-word .ch { animation: chwave .6s var(--ease) calc(var(--i) * 32ms); }
@keyframes chwave { 40% { transform: translateY(-16%) rotate(-3deg); color: var(--peach); } }
.rc-title { font-size: 14px; color: var(--ink2); max-width: 30ch; line-height: 1.4; }
.rc-open { position: absolute !important; top: 18px; right: 18px; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.rc-open i { font-style: normal; transition: transform .45s var(--ease); }
.room-card:hover .rc-open { background: #fff; color: #111; }
.room-card:hover .rc-open i { transform: rotate(45deg); }
.rc-viz { color: var(--ink2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.viz-big { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.04em; color: #fff; line-height: 1; }
.viz-big small { font-size: .45em; color: var(--peach); margin-left: 2px; }
.viz-pulse { position: relative; width: 70px; height: 70px; margin-bottom: 6px; }
.viz-pulse i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); animation: vp 2.4s var(--ease) infinite; }
.viz-pulse i:nth-child(2) { border-color: var(--purple); } .viz-pulse i:nth-child(3) { border-color: var(--pink); }
.viz-pulse i:nth-child(2) { animation-delay: .8s; } .viz-pulse i:nth-child(3) { animation-delay: 1.6s; }
@keyframes vp { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.viz-x { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
.viz-x li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); text-decoration: line-through; }
.viz-team { display: flex; }
.viz-team b { width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-family: var(--dot); font-size: 13px; color: #fff; border: 2px solid rgba(20, 16, 28, .8); background: radial-gradient(circle at 30% 25%, hsl(var(--h) 90% 75%), hsl(calc(var(--h) + 40) 70% 45%)); transition: transform .4s var(--spring); }
.viz-team b:first-child { margin-left: 0; }
.rc-team:hover .viz-team b { transform: translateY(-6px); }
.rc-team:hover .viz-team b:nth-child(2) { transition-delay: .05s; } .rc-team:hover .viz-team b:nth-child(3) { transition-delay: .1s; } .rc-team:hover .viz-team b:nth-child(4) { transition-delay: .15s; }
.word-flyer { position: fixed !important; z-index: 120; margin: 0; pointer-events: none; transform-origin: 50% 50%; white-space: nowrap; font-family: var(--display); font-weight: 900; color: #fff; }

.s-finale { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 30px; padding: 14vh 24px; }
.finale-kicker { font-size: 15px; color: var(--peach); letter-spacing: .2em; }
.finale-title { display: flex; flex-direction: column; font-size: clamp(50px, 8.6vw, 140px); font-weight: 850; letter-spacing: -.05em; line-height: .84; perspective: 800px; text-transform: uppercase; }
.finale-stats { display: flex; gap: clamp(20px, 5vw, 70px); margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.finale-stats > div { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink2); font-size: 14px; }
.foot { position: relative; padding: 60px clamp(24px, 6vw, 90px) calc(40px + var(--safe-b)); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--ink2); font-size: 14px; }
.foot img { height: 18px; width: auto; }
.foot-small { margin-left: auto; color: var(--ink3); }

/* the hyperactive button */
.hyper { position: relative; height: 88px; padding: 0 50px; border-radius: 999px; isolation: isolate; transition: transform .3s var(--spring); animation: jitter 2.2s infinite; }
.hyper-label { position: relative; z-index: 2; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 118; font-size: clamp(22px, 2.6vw, 32px); text-transform: uppercase; color: #0b0a10; }
.hyper::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; z-index: 1; }
.hyper-ring { position: absolute; inset: -5px; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), #4f7cff, #a855f7, #ff4d6d, #f4f2ff, #4f7cff); animation: ring 1.6s linear infinite; z-index: 0; }
.hyper-ring::after { content: ''; position: absolute; inset: -14px; border-radius: inherit; background: inherit; filter: blur(22px); opacity: .7; }
.hyper:hover { transform: scale(1.08) rotate(-1.5deg); animation-duration: .4s; }
.hyper:hover .hyper-ring { animation-duration: .5s; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring { to { --a: 360deg; } }
@keyframes jitter { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-2px, 1px) rotate(-1deg); } 90% { transform: translate(3px, -2px) rotate(1.5deg); } 92% { transform: translate(-3px, 0) rotate(-1deg); } 94% { transform: translate(2px, 2px) scale(1.04); } 96% { transform: scale(.98); } }

/* ============ an opened card ============ */
#room { position: fixed; inset: 0; z-index: 30; }
.room-panel { position: fixed; overflow: hidden; border-radius: 40px; background: rgba(34, 28, 66, .66); -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--shine), 0 40px 120px rgba(0, 0, 0, .5); }
.room-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 30px 60px; scrollbar-width: none; }
.room-scroll::-webkit-scrollbar { display: none; }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.room-tabs { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .22); overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 64px); }
.room-tabs::-webkit-scrollbar { display: none; }
.room-tabs button { height: 40px; padding: 0 15px; border-radius: 999px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink2); white-space: nowrap; transition: background .25s, color .25s; }
.room-tabs button .dotm { font-size: 11px; opacity: .7; }
.room-tabs button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.room-tabs button.on { background: #fff; color: #111; }
.back { width: 50px; height: 50px; flex: none; border-radius: 50%; font-size: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid var(--edge); transition: background .25s; }
.back:hover { background: #fff; color: #111; }
.room-head { max-width: 900px; margin-bottom: 30px; }
.rh-word, .rh-scr { display: block; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 112; font-size: clamp(52px, 8.5vw, 150px); line-height: .88; letter-spacing: -.04em; white-space: nowrap; margin-bottom: 18px; width: max-content; }
.room-head h2 { font-size: clamp(26px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: .95; text-transform: uppercase; margin-bottom: 12px; }
.room-head p { color: var(--ink2); font-size: 17px; line-height: 1.5; max-width: 620px; }
.room-next { margin-top: 26px; }
.next-room { width: 100%; display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 30px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .08); text-align: left; transition: background .4s; overflow: hidden; }
.next-room .dotm { font-size: 13px; color: var(--peach); white-space: nowrap; }
.nr-word { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 100; font-size: clamp(34px, 5vw, 80px); letter-spacing: -.04em; line-height: 1; transition: font-variation-settings .6s var(--ease), transform .6s var(--ease); }
.nr-arrow { margin-left: auto; font-size: 34px; transition: transform .5s var(--ease); }
.next-room:hover { background: rgba(255, 255, 255, .1); }
.next-room:hover .nr-word { font-variation-settings: 'wdth' 125; transform: translateX(10px); }
.next-room:hover .nr-arrow { transform: translateX(10px); }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 14px; }
.card { position: relative; border-radius: 30px; padding: 22px; background: var(--card); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shine); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(26px) scale(.97); transition: background .3s, border-color .3s; }
.card:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .2); }
.bento.in .card { animation: cardIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.card.wide { grid-column: span 2; }
.card.full { grid-column: 1 / -1; }
.card.tall { grid-row: span 2; }
@keyframes spin { to { transform: rotate(360deg); } }
.tgl { width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .18); position: relative; flex: none; transition: background .25s; }
.tgl i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .35s var(--spring); }
.tgl.on { background: linear-gradient(90deg, #4f7cff, #a855f7); }
.tgl.on i { transform: translateX(18px); }

/* ============ 1 · CRT boot ============ */
#boot { position: fixed; inset: 0; z-index: 1000; background: #000; display: grid; place-items: center; }
.crt { position: relative; width: min(92vw, 860px); aspect-ratio: 4 / 3; max-height: 82vh; border-radius: 9% / 12%; background: radial-gradient(ellipse at 50% 45%, #121820 0%, #0a0e13 55%, #05070a 100%); box-shadow: inset 0 0 90px rgba(0, 0, 0, .95), inset 0 0 18px rgba(120, 255, 140, .06), 0 0 0 12px #060606, 0 0 0 13px #151515, 0 30px 90px rgba(0, 0, 0, .8); overflow: hidden; }
.crt-screen { position: absolute; inset: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--crt); color: #e9e9e9; text-shadow: 0 0 6px rgba(255, 255, 255, .45); transform: perspective(700px) rotateX(3deg); }
.crt-glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .08), transparent 40%), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .65) 100%); animation: flicker 4s infinite steps(1); }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } 73% { opacity: .96; } }
.crt-spin { width: 92px; height: 92px; margin-bottom: 26px; fill: none; stroke: #6bff73; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 64 200; filter: drop-shadow(0 0 8px rgba(107, 255, 115, .8)); animation: spin 1s linear infinite; transition: opacity .3s; }
.crt-spin.done { opacity: 0; }
.crt-log { font-size: clamp(20px, 3.2vw, 30px); letter-spacing: .08em; min-height: 2.4em; }
.crt-log .ln { white-space: pre-wrap; }
.crt-log .st { color: #cfcfcf; margin-top: 6px; }
.crt-log .warn { color: #ffd84d; text-shadow: 0 0 8px rgba(255, 216, 77, .6); font-size: 1.05em; }
.crt-note { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 4%; gap: 10px; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: .06em; }
.crt-note .red { color: #ff4d4d; font-size: 1.5em; letter-spacing: .22em; text-shadow: 0 0 10px rgba(255, 77, 77, .7); }
.crt-note .amber { color: #ffcf6b; font-size: 1.15em; letter-spacing: .12em; }
.crt-note .ln:last-child { max-width: 30ch; line-height: 1.35; }
.crt-menu { width: min(100%, 460px); display: flex; flex-direction: column; gap: 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: .08em; }
.crt-menu-title { color: #bdbdbd; margin-bottom: 10px; letter-spacing: .3em; font-size: .8em; }
.crt-menu button { font-family: var(--crt); text-align: left; padding: 4px 14px; color: #e9e9e9; letter-spacing: inherit; }
.crt-menu button::after { content: ' -'; opacity: .5; }
.crt-menu button.on { background: #ffe56a; color: #141414; text-shadow: none; transform: skewX(-6deg); box-shadow: 0 0 18px rgba(255, 229, 106, .55); }
.crt-menu-foot { color: #6bff73; font-size: .62em; margin-top: 16px; letter-spacing: .2em; text-shadow: 0 0 6px rgba(107, 255, 115, .7); }

/* ============ waitlist ============ */
#join { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 90px 24px 40px; overflow: hidden;
  background: radial-gradient(60vw 50vh at 15% 20%, rgba(168, 85, 247, .35), transparent 70%), radial-gradient(50vw 50vh at 85% 80%, rgba(255, 77, 109, .26), transparent 70%), radial-gradient(40vw 40vh at 70% 10%, rgba(79, 124, 255, .3), transparent 70%), rgba(7, 6, 12, .9);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
#join > .back { position: absolute; top: 22px; left: 22px; }
.join-progress { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 22px; color: var(--ink2); letter-spacing: .1em; }
.join-progress .jp-num { color: #fff; }
.join-form { width: min(920px, 100%); }
.q { display: flex; flex-direction: column; gap: 30px; }
.q-title { font-size: clamp(34px, 6vw, 88px); font-weight: 830; letter-spacing: -.045em; line-height: .9; text-transform: uppercase; perspective: 700px; }
.qw { display: inline-block; white-space: nowrap; }
.qc { display: inline-block; transform-origin: 50% 100%; }
.q-input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .3); color: #fff; font: 500 clamp(26px, 4vw, 46px)/1.2 var(--sans); letter-spacing: -.03em; padding: 10px 0 14px; outline: none; transition: border-color .3s; border-radius: 0; }
.q-input::placeholder { color: rgba(255, 255, 255, .28); }
.q-input:focus { border-color: #fff; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { height: 56px; padding: 0 24px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); font-size: 18px; font-weight: 500; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: all .3s var(--spring); }
.opt:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.opt.on { background: #fff; color: #111; transform: scale(1.05); }
.q-note { color: var(--ink3); font-size: 14px; margin-top: 12px; }
.q-err { color: #ff8fa3; font-size: 15px; min-height: 1.2em; margin-top: -18px; }
/* the security check is invisible unless Cloudflare asks for a tap; then it appears under the form */
#join { flex-direction: column; }
.turnstile-wrap { display: flex; justify-content: center; align-items: center; margin-top: 18px; }
.turnstile-wrap:empty { display: none; }
.q-next.is-busy { opacity: .8; cursor: progress; }
.q-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-hint { color: var(--ink3); font-size: 14px; margin-left: 6px; }
.q-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.q-sweep i { position: absolute; left: 0; width: 100%; height: 33.4%; transform: translateX(-105%); }
.q-sweep i:nth-child(1) { top: 0; } .q-sweep i:nth-child(2) { top: 33.3%; } .q-sweep i:nth-child(3) { top: 66.6%; }

/* ============ portal ============ */
#portal { position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(80vw 70vh at 50% 40%, #1a1240, #0a0820 70%); scrollbar-width: none; }
#portal::-webkit-scrollbar { display: none; }
.portal-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.portal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal-track { height: 1000vh; }
.portal-hint { position: absolute; bottom: calc(26px + var(--safe-b)); left: 50%; transform: translateX(-50%); font-size: 18px; color: var(--ink2); animation: bob 1.6s infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
.portal-final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; opacity: 0; pointer-events: none; text-align: center; }
.portal-final.on { pointer-events: auto; }
.pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: clamp(44px, 6vw, 78px); padding: 0 .7em; border-radius: 999px; font-weight: 600; font-size: clamp(22px, 3.8vw, 52px); letter-spacing: -.03em; }
.pill-o { border: 2px solid #f4f2ff; }
.pill-c { border: 2px solid #f4f2ff; width: clamp(44px, 6vw, 78px); padding: 0; }
.pill-f { background: var(--grad); }
.arrows { font-size: clamp(22px, 3.8vw, 52px); letter-spacing: -.12em; }
.portal-final .pills, .portal-final .welcome, .portal-final .member, .portal-final .btn { opacity: 0; transform: translateY(30px); transition: all .8s var(--ease); }
.portal-final.on .pills, .portal-final.on .welcome, .portal-final.on .member, .portal-final.on .btn { opacity: 1; transform: none; }
.portal-final.on .pills:nth-child(2) { transition-delay: .1s; }
.portal-final.on .pills:nth-child(3) { transition-delay: .2s; }
.portal-final.on .welcome { transition-delay: .35s; }
.portal-final.on .member { transition-delay: .5s; }
.portal-final.on .btn { transition-delay: .6s; }
.welcome { display: flex; align-items: center; gap: .3em; font-size: clamp(30px, 5vw, 66px); font-weight: 600; letter-spacing: -.04em; margin-top: 28px; }
.welcome img { height: .78em; width: auto; }
.member { color: var(--peach); font-size: 18px; margin-bottom: 10px; }

/* ============ transitions ============ */
#fx { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; }
#fx.on { pointer-events: auto; }
.fx-panel { position: absolute; inset: 0; }
.fx-fade .fx-panel { background: var(--bg); }
.fx-band { position: absolute; left: 0; width: 100%; overflow: hidden; display: flex; align-items: center; will-change: transform; }
.fx-band-text { white-space: nowrap; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 100; line-height: 1; letter-spacing: -.02em; will-change: transform; }
.fx-band-text i { font-style: normal; opacity: .55; }
.fx-outline .fx-panel { background: #15131c; }
.fx-oline { position: absolute; left: -2%; white-space: nowrap; font-family: var(--display); font-weight: 500; font-variation-settings: 'wdth' 125; -webkit-text-stroke: 1.5px #b28cff; color: transparent; line-height: 1; }
.fx-srow { position: absolute; left: 0; width: 100%; background: #0c0c10; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fx-stext { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 62; color: #4f7cff; white-space: nowrap; line-height: .9; }
.fx-strip { position: absolute; left: 0; width: 100%; overflow: hidden; background: #ecebe7; }
.fx-big { position: absolute; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 100; color: #0b0b0b; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.fx-arrows { position: absolute; top: 50%; left: 0; color: #0b0b0b; white-space: nowrap; letter-spacing: -.18em; z-index: 3; line-height: 1; }
.fx-col { position: absolute; top: 0; height: 100%; background: #141218; display: flex; flex-direction: column; align-items: center; overflow: hidden; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 62; color: #ff4d6d; line-height: .95; }
.fx-col b { display: block; font-weight: inherit; }
.fx-ticker .fx-panel { background: #f4f2ee; color: #111; }
.fx-trow { position: absolute; left: 0; width: 100%; overflow: hidden; display: flex; align-items: center; border-bottom: 1.5px solid #111; }
.fx-ttrack { display: flex; white-space: nowrap; }
.fx-ttrack span { border: 1.5px solid #111; padding: .12em .55em; margin-right: -1.5px; font-family: var(--sans); font-weight: 600; }
.fx-width .fx-panel { background: #17141f; }
.fx-wline { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-weight: 800; line-height: 1; }

/* no GSAP (offline): show everything */
.no-gsap .room-card { pointer-events: auto; }

/* ============ phones: the phone-app look ============ */
@media (max-width: 767px) {
  .topbar { padding: 14px 14px; }
  .brand img { height: 17px; }
  .cta-mini { height: 40px; padding: 0 16px; font-size: 13px; }
  .menu-btn { width: 42px; height: 42px; }
  .s-hero { padding: 100px 20px 90px; gap: 22px; }
      .hero-title { font-size: clamp(52px, 16vw, 104px); }
  .hero-cta .btn { height: 50px; padding: 0 22px; font-size: 15px; }
  .odo { font-size: clamp(48px, 15vw, 70px); }
  .s-rooms { height: auto; }
  .rooms-pin { height: auto; padding: 60px 12px 40px; }
  .rooms-head { padding: 0 8px; }
  .cards { display: flex; flex-direction: column; gap: 12px; }
  .room-card { min-height: 0; border-radius: 30px; justify-content: flex-start; gap: 10px; padding: 20px 20px 22px; }
  .rc-word { margin: 6px 0 2px; }
  .rc-shell { background: linear-gradient(180deg, rgba(79, 124, 255, .2), rgba(168, 85, 247, .16)); }
  .rc-word, .rc-problem .rc-word, .rc-team .rc-word, .rc-model .rc-word { font-size: clamp(44px, 13vw, 68px); }
  .finale-stats { gap: 26px; }
  .foot-small { margin-left: 0; }

  .room-scroll { padding: 16px 12px calc(120px + var(--safe-b)); }
  .room-head { padding: 0 8px; }
  .rh-word, .rh-scr { font-size: clamp(46px, 15vw, 80px); }
  .room-head h2 { font-size: 32px; font-weight: 500; }
  .room-head p { font-size: 15px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 168px; gap: 10px; }
  .card { border-radius: 30px; padding: 18px; }
  .next-room { padding: 20px; gap: 14px; flex-wrap: wrap; }
  #join { align-items: center; justify-content: flex-start; padding-top: 110px; }
  .opt { height: 50px; padding: 0 18px; font-size: 16px; }
  .ml-line { display: none; }
  .hyper { height: 74px; padding: 0 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ============ the member portal ============ */
body[data-view="hub"] .topbar { opacity: 0; transform: translateY(-20px); pointer-events: none; }
body[data-view="hub"] .topbar > * { pointer-events: none; }
body[data-view="hub"] #site, body[data-view="portal"] #site { visibility: hidden; }
.portal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.portal-final .portal-actions { opacity: 0; transform: translateY(30px); transition: all .8s var(--ease) .6s; }
.portal-final.on .portal-actions { opacity: 1; transform: none; }

#hub { position: fixed; inset: 0; z-index: 30; }
.hub-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(18px, 4vw, 56px) 80px; scrollbar-width: none; }
.hub-scroll::-webkit-scrollbar { display: none; }
.hub-top { display: flex; align-items: center; gap: 16px; }
.hub-logo { height: 20px; width: auto; }
.hub-status { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--edge); }
.hub-top .back { margin-left: auto; }
.hub-hello { display: flex; flex-direction: column; margin: 7vh 0 34px; font-weight: 850; text-transform: uppercase; letter-spacing: -.05em; line-height: .84; font-size: clamp(50px, 9vw, 150px); perspective: 800px; }
.hub-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; padding: 6px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(20, 16, 44, .55); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--edge); }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs button { position: relative; z-index: 1; height: 44px; padding: 0 18px; border-radius: 999px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink2); white-space: nowrap; transition: color .35s; }
.hub-tabs button .dotm { font-size: 11px; opacity: .7; }
.hub-tabs button:hover { color: #fff; }
.hub-tabs button.on { color: #0b0a10; font-weight: 800; }   /* black on the white pill */
.hub-tabs button.on[data-hubtab="backers"] { color: #fff; }   /* white on the Backers gradient */
.hub-tabs .lock { font-style: normal; font-size: 12px; }
.hub-ind { position: absolute; z-index: 0; top: 6px; left: 0; height: 44px; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 8px 30px rgba(79, 124, 255, .35); }
.hub-panel { margin-top: 34px; }
.hb-head { margin-bottom: 26px; }
.hb-kick { font-size: 13px; color: var(--peach); letter-spacing: .14em; }
.hb-title { font-size: clamp(38px, 5.6vw, 92px); font-weight: 850; text-transform: uppercase; letter-spacing: -.045em; line-height: .86; margin: 10px 0 12px; }
.hb-sub { color: var(--ink2); font-size: 17px; max-width: 560px; }
.hb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hb-card, .drop { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; border-radius: 30px; padding: 24px; background: rgba(40, 32, 90, .32); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); box-shadow: var(--shine), 0 30px 60px rgba(0, 0, 0, .25); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), border-color .3s, background .3s; overflow: hidden; }
.hb-card::after, .drop::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--gx) var(--gy), rgba(255, 255, 255, .14), transparent 45%); opacity: 0; transition: opacity .4s; }
.hb-card:hover, .drop:hover { border-color: rgba(255, 255, 255, .26); background: rgba(56, 44, 120, .4); }
.hb-card:hover::after, .drop:hover::after { opacity: 1; }
.pillbtn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); font-size: 14px; font-weight: 600; transition: background .3s, color .3s, transform .35s var(--spring); white-space: nowrap; }
.pillbtn:hover { background: #fff; color: #111; transform: translateY(-2px); }
.chip-s { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 77, 109, .16); color: #ff9db0; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* referral */
.hb-count { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; min-height: 260px; }
.hb-odo { font-size: clamp(90px, 10vw, 170px); color: #fff; text-shadow: 0 0 40px rgba(168, 85, 247, .6); }
.hb-note { color: var(--ink3); font-size: 13px; line-height: 1.4; }
.hb-link { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
.hb-linkrow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); }
.hb-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--dot); font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); color: #fff; }
.hb-copy.done { background: var(--purple); color: #fff; }
.hb-share { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-tiers { grid-column: 1 / -1; }
.tier-track { position: relative; height: 6px; margin: 34px 14px 96px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.tier-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 20px rgba(168, 85, 247, .6); transition: width 1.6s var(--ease); }
.tier { position: absolute; left: var(--at); top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 160px; }
.tier:last-child { transform: translate(-85%, -50%); }
.tier-dot { width: 22px; height: 22px; border-radius: 50%; background: #1a1530; border: 2px solid rgba(255, 255, 255, .3); margin-top: 52px; transition: all .5s var(--spring); }
.tier.hit .tier-dot { background: var(--pink); border-color: #fff; transform: scale(1.2); box-shadow: 0 0 20px var(--pink); }
.tier-n { font-size: 22px; margin-top: 8px; }
.tier-l { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: -.01em; }
.tier-p { color: var(--ink3); font-size: 12px; }

/* merch */
.hb-drops { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.drop { padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.drop-img { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #e9e6e0; }
.drop-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), opacity .6s, filter .6s; }
.drop:hover .drop-img img { transform: scale(1.06); }
.drop-img.flip img.back { opacity: 0; }
.drop:hover .drop-img.flip img.back { opacity: 1; }
.drop-glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%); transform: translateX(-120%); transition: transform 1s var(--ease); pointer-events: none; }
.drop:hover .drop-glare { transform: translateX(120%); }
.drop.locked .drop-img img { filter: blur(14px) saturate(.6) brightness(.8); }
.drop-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; }
.drop-meta { padding: 0 8px; }
.drop-meta .dotm { font-size: 13px; color: var(--peach); }
.drop-meta h3 { font-size: 26px; font-weight: 850; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; margin: 6px 0; }
.drop-meta p { color: var(--ink2); font-size: 14px; line-height: 1.45; }
.drop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
.tgl-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }

/* calls */
.calls { display: flex; flex-direction: column; gap: 12px; }
.call { display: flex; align-items: center; gap: 22px; padding: 22px 24px; }
.call-n { font-size: 30px; color: var(--ink3); min-width: 2.2ch; }
.call-main { flex: 1; min-width: 0; }
.call-main h3 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 850; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; }
.call-main p { color: var(--ink2); font-size: 14px; margin-top: 6px; }
.call-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rsvp { height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: 14px; min-width: 120px; transition: background .3s, color .3s, transform .35s var(--spring); }
.rsvp:hover { transform: scale(1.05); }
.rsvp.on { background: var(--grad); color: #fff; }

/* demo day */
.hb-demo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form .opt { height: 50px; }
.demo-q { width: 100%; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); border-radius: 18px; color: #fff; font: 500 16px/1.4 var(--sans); padding: 14px 16px; resize: vertical; outline: none; }
.demo-q:focus { border-color: #fff; }
.demo-go { align-self: flex-start; margin-top: 6px; }
.demo-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; perspective: 1000px; }
.ticket { --gx: 50%; --gy: 50%; position: relative; display: flex; width: min(680px, 100%); border-radius: 28px; overflow: hidden; background: linear-gradient(120deg, #2a2fb8, #6b2bd9 50%, #c2235a); box-shadow: 0 40px 90px rgba(80, 40, 200, .45), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .4s var(--ease); transform-style: preserve-3d; }
.tk-glare { position: absolute; inset: 0; background: radial-gradient(500px circle at var(--gx) var(--gy), rgba(255, 255, 255, .28), transparent 45%); pointer-events: none; mix-blend-mode: overlay; }
.tk-left { flex: 1; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.tk-left img { height: 18px; width: auto; align-self: flex-start; margin-bottom: 14px; }
.tk-kick { font-size: 13px; color: rgba(255, 255, 255, .8); }
.ticket h3 { font-size: clamp(30px, 4vw, 52px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; }
.tk-meta { font-weight: 600; margin-top: 8px; }
.tk-where { color: rgba(255, 255, 255, .7); font-size: 13px; }
.tk-right { width: 170px; padding: 24px 20px; border-left: 2px dashed rgba(255, 255, 255, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, .18); }
.tk-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 112px; }
.tk-dots i { aspect-ratio: 1; border-radius: 3px; background: #fff; }
.tk-right .dotm { font-size: 16px; }

/* backers */
.bk-lock { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2vh 0 6vh; }
.bk-type { width: min(420px, 70vw); height: auto; filter: drop-shadow(0 20px 60px rgba(168, 85, 247, .5)); margin-bottom: 18px; animation: bkfloat 5s ease-in-out infinite; }
@keyframes bkfloat { 50% { transform: translateY(-10px) rotate(-1deg); } }
.bk-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.bk-input { width: min(420px, 80vw); height: 64px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid var(--edge); color: #fff; text-align: center; font: 800 28px/1 var(--dot); letter-spacing: .32em; outline: none; transition: border-color .3s, box-shadow .3s; }
.bk-input:focus { border-color: var(--purple); box-shadow: 0 0 0 6px rgba(168, 85, 247, .2); }
.bk-go { height: 64px; padding: 0 32px; }
.bk-msg { margin-top: 18px; min-height: 1.2em; font-size: 15px; letter-spacing: .14em; color: #8affb2; }
.bk-msg.bad { color: var(--pink); }
.bk-welcome { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.bk-welcome .dotm { font-size: 18px; letter-spacing: .3em; color: var(--ink2); }
.bk-big { display: flex; flex-direction: column; font-size: clamp(64px, 13vw, 230px); font-weight: 900; text-transform: uppercase; letter-spacing: -.055em; line-height: .82; margin: 14px 0 20px; }
.bk-small { color: var(--ink2); font-size: 16px; }
.hb-bk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--ink2); }
.bk-hero img { width: 80%; height: auto; }
.bk-drop { grid-column: span 2; }
.bk-drop .drop-img { aspect-ratio: 16 / 10; }
.bk-calls { grid-column: 1 / -1; }
.bk-relock { justify-self: start; opacity: .7; }

@media (max-width: 767px) {
  .hub-scroll { padding: 14px 12px 60px; }
  .hub-status { font-size: 11px; padding: 6px 10px; }
  .hub-hello { font-size: clamp(44px, 14vw, 80px); margin: 5vh 0 24px; }
  .hub-tabs button { height: 40px; padding: 0 14px; font-size: 13px; }
  .hub-ind { height: 40px; }
  .hb-grid, .hb-bk { grid-template-columns: minmax(0, 1fr); }
  .hb-link, .hb-tiers, .bk-drop, .bk-calls { grid-column: auto; }
  .hb-linkrow { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 14px; }
  .tier-track { margin: 30px 10px 120px; }
  .tier { width: 96px; }
  .tier-p { display: none; }
  .call { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .call-act { width: 100%; justify-content: flex-start; }
  .ticket { flex-direction: column; }
  .tk-right { width: auto; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .35); flex-direction: row; }
  .bk-input { font-size: 22px; height: 58px; }
  .bk-go { height: 58px; }
}


/* ============ room cards (v3: one system, no toggles) ============ */
.card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; border-radius: 30px; padding: 26px; background: rgba(40, 32, 90, .3); border: 1px solid rgba(255, 255, 255, .11); box-shadow: var(--shine); overflow: hidden; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(26px) scale(.97); transition: transform .5s var(--ease), background .3s, border-color .3s; }
.bento.in .card { animation: cardIn2 .8s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 80ms); }
@keyframes cardIn2 { to { opacity: 1; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); } }
.bento.in .card { opacity: 1; }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .12), transparent 45%); opacity: 0; transition: opacity .4s; }
.card:hover { background: rgba(56, 44, 120, .38); border-color: rgba(255, 255, 255, .22); }
.card:hover::after { opacity: 1; }
.bento { grid-auto-rows: minmax(220px, auto); }
.card.wide3 { grid-column: span 3; }
.ft-kick { font-size: 12px; color: var(--peach); letter-spacing: .14em; }
.ft-n { position: absolute; top: 18px; right: 22px; font-size: 40px; color: rgba(255, 255, 255, .1); }
.ft-title { font-size: clamp(22px, 2.2vw, 32px); font-weight: 850; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; }
.ft-body { color: var(--ink2); font-size: 15px; line-height: 1.5; }
.ft-meta { margin-top: auto; align-self: flex-start; font-size: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); color: #fff; letter-spacing: .06em; }
.ft-solves { display: flex; gap: 10px; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-weight: 700; font-size: 15px; }
.ft-solves .dotm { font-size: 11px; color: var(--peach); letter-spacing: .14em; }
.c-feature .ft-meta + .ft-solves, .c-feature .ft-body + .ft-solves { margin-top: auto; }

.c-stat { justify-content: space-between; }
.st-odo { font-size: clamp(72px, 7vw, 120px); color: #fff; text-shadow: 0 0 40px rgba(168, 85, 247, .45); }
.st-odo .od-suf { color: var(--pink); }
.st-label { font-size: 16px; font-weight: 600; line-height: 1.4; max-width: 30ch; }
.st-src { color: var(--ink3); font-size: 11px; line-height: 1.4; }

.c-line { justify-content: center; background: linear-gradient(120deg, rgba(79, 124, 255, .16), rgba(168, 85, 247, .14), rgba(255, 77, 109, .14)); min-height: 0; }
.ln-text { font-size: clamp(30px, 4.4vw, 72px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; }
.ln-text.small { font-size: clamp(20px, 2.2vw, 32px); line-height: .98; }
.ln-text em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.c-step { grid-row: span 2; padding: 12px; gap: 12px; }
.sp-shot { flex: 1; min-height: 260px; border-radius: 22px; overflow: hidden; background: #0b0a14; position: relative; }
.sp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.c-step:hover .sp-shot img { transform: scale(1.05) translateY(-2%); }
.sp-meta { padding: 4px 10px 10px; }
.sp-meta .dotm { color: var(--peach); font-size: 13px; }
.sp-meta h3 { font-size: 20px; font-weight: 850; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; margin: 6px 0; }
.sp-meta p { color: var(--ink2); font-size: 14px; line-height: 1.45; }

.c-sona { flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 60px); padding: 30px clamp(24px, 4vw, 54px); background: radial-gradient(circle at 15% 50%, rgba(168, 85, 247, .25), transparent 55%), rgba(30, 24, 70, .4); }
.sn-orb { position: relative; flex: none; display: grid; place-items: center; }
.sn-orb canvas { position: relative; z-index: 1; }
.sn-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, .45), transparent 70%); filter: blur(20px); transition: transform .4s, opacity .4s; opacity: .6; }
.c-sona.talking .sn-halo { transform: scale(1.35); opacity: 1; animation: halo .5s ease-in-out infinite alternate; }
@keyframes halo { to { transform: scale(1.5); } }
.sn-copy { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sn-say { min-height: 1.3em; font-size: clamp(22px, 2.6vw, 36px); font-weight: 850; text-transform: uppercase; letter-spacing: -.035em; }
.sn-say span { display: inline-block; opacity: 0; transform: translateY(60%); animation: snw .5s var(--ease) forwards; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes snw { to { opacity: 1; transform: none; } }
.sn-play { height: 48px; }
.sn-mini { width: 64px; height: 64px; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-title { font-size: clamp(30px, 3.4vw, 54px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; }
.rv-price { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 4.6vw, 72px); letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-price small { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink2); -webkit-text-fill-color: var(--ink2); margin-left: 6px; }


/* the Pulse live demo */
.c-pulse { padding: 0; background: radial-gradient(circle at 25% 40%, rgba(79, 124, 255, .18), transparent 55%), rgba(20, 16, 48, .55); }
.pd-title { font-size: clamp(44px, 5vw, 84px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; }
.pd-cap { display: flex; gap: 14px; align-items: flex-start; min-height: 96px; }
.pd-step { font-size: 15px; color: var(--peach); padding-top: 6px; }
.pd-say { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.pd-say span { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(6px); animation: pdw .5s var(--ease) forwards; }
@keyframes pdw { to { opacity: 1; transform: none; filter: blur(0); } }
.pd-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pd-tiers > div { border-radius: 18px; padding: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 2px; transition: all .4s var(--ease); }
.pd-tiers b { font-size: 30px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.pd-tiers .dotm { font-size: 10px; color: var(--ink3); }
.pd-tiers em { font-style: normal; font-size: 13px; font-weight: 700; }
.pd-tiers [data-tier="1"] em { color: #8fa8ff; } .pd-tiers [data-tier="2"] em { color: #c79bff; } .pd-tiers [data-tier="3"] em { color: #ff8aa3; }
.pd-tiers > div.on { transform: translateY(-6px); }
.pd-tiers [data-tier="1"].on { background: rgba(79, 124, 255, .3); border-color: #4f7cff; box-shadow: 0 10px 30px rgba(79, 124, 255, .4); }
.pd-tiers [data-tier="2"].on { background: rgba(168, 85, 247, .3); border-color: #a855f7; box-shadow: 0 10px 30px rgba(168, 85, 247, .4); }
.pd-tiers [data-tier="3"].on { background: rgba(255, 77, 109, .3); border-color: #ff4d6d; box-shadow: 0 10px 30px rgba(255, 77, 109, .4); }
.pd-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-btn { height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .08); border: 1px solid var(--edge); transition: all .3s var(--spring); }
.pd-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .16); }
.pd-btn.on { background: #fff; color: #111; }

/* competition map */
.c-compete { padding: 0; background: rgba(20, 16, 48, .55); }
.cmp { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 560px; }
.cmp-map { position: relative; margin: 34px; min-height: 480px; }
.cmp-ax { position: absolute; background: rgba(255, 255, 255, .25); transition: transform 1s var(--ease); }
.cmp-ax-x { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(0); }
.cmp-ax-y { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(0); }
.cmp.in .cmp-ax { transform: none; }
.cmp-lab { position: absolute; font-size: 10px; letter-spacing: .12em; color: var(--ink3); opacity: 0; transition: opacity .8s .6s; }
.cmp.in .cmp-lab { opacity: 1; }
.cmp-top { top: -6px; left: calc(50% + 10px); } .cmp-bot { bottom: -6px; left: calc(50% + 10px); }
.cmp-left { top: calc(50% + 8px); left: 0; } .cmp-right { top: calc(50% + 8px); right: 0; }
.cmp-zone { position: absolute; left: 50%; top: 0; right: 0; bottom: 50%; border-radius: 0 24px 0 0; background: radial-gradient(circle at 75% 25%, rgba(168, 85, 247, .25), transparent 70%); opacity: 0; transition: opacity 1s .9s; }
.cmp.in .cmp-zone { opacity: 1; }
.cmp-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cmp-link { stroke: url(#none); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; stroke-dasharray: 4 6; fill: none; }
.cmp-node { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); transform: translate(-50%, -50%) scale(.4); opacity: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 16px; background: rgba(30, 26, 60, .85); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; white-space: nowrap; transition: transform .6s var(--spring), opacity .5s, background .3s, border-color .3s, translate .4s var(--ease); }
.cmp.in .cmp-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cmp.in .cmp-node:nth-of-type(1) { transition-delay: .5s; } .cmp.in .cmp-node:nth-of-type(2) { transition-delay: .6s; } .cmp.in .cmp-node:nth-of-type(3) { transition-delay: .7s; } .cmp.in .cmp-node:nth-of-type(4) { transition-delay: .8s; } .cmp.in .cmp-node:nth-of-type(5) { transition-delay: .9s; }
.cmp-node .dotm { font-size: 9px; letter-spacing: .1em; color: var(--ink3); }
.cmp-node b { font-size: 14px; font-weight: 800; }
.cmp-node[data-c]:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(60, 50, 120, .95); border-color: rgba(255, 255, 255, .4); z-index: 2; }
.cmp-node.sel { background: #fff; color: #111; border-color: #fff; z-index: 2; }
.cmp-node.sel .dotm { color: #555; }
.cmp-wavr { padding: 14px 20px; background: var(--grad); border: 0; box-shadow: 0 20px 60px rgba(168, 85, 247, .5); transition-delay: 1.2s !important; }
.cmp-wavr .dotm { color: rgba(255, 255, 255, .85); }
.cmp-wavr b { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.cmp-wavr i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .6); animation: wring 2.4s var(--ease) infinite; pointer-events: none; }
.cmp-wavr i:nth-child(2) { animation-delay: 1.2s; }
@keyframes wring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6, 2); opacity: 0; } }
.cmp-table { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 34px clamp(20px, 3vw, 44px) 34px 0; }
.cmp-head { margin-bottom: 18px; }
.cmp-head > .dotm { font-size: 12px; color: var(--peach); letter-spacing: .14em; }
.cmp-vs { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cmp-vs b { font-size: clamp(22px, 2.4vw, 36px); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; }
.cmp-vs span { color: var(--ink3); font-size: 14px; }
.cmp-us { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.cmp-k { grid-column: 1 / -1; font-size: 10px; color: var(--ink3); letter-spacing: .12em; }
.cmp-a { color: var(--ink2); font-size: 15px; text-decoration: line-through; text-decoration-color: rgba(255, 77, 109, .6); }
.cmp-b { font-size: 15px; font-weight: 800; }
.cmp-note { color: var(--ink3); font-size: 13px; min-height: 1.2em; margin-top: 8px; }
.cmp-hint { font-size: 11px; color: var(--ink3); letter-spacing: .14em; transition: opacity .4s; }

@media (max-width: 1023px) {
  .cmp { grid-template-columns: minmax(0, 1fr); min-height: 0; }   /* map on top, the comparison under it */
  .cmp-map { margin: 34px 26px 28px; min-height: 380px; }
  .cmp-table { padding: 0 24px 30px; }
  .card.wide3 { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .card { padding: 20px; border-radius: 26px; }
  .card.wide, .card.wide3 { grid-column: 1 / -1; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .c-step { grid-row: auto; }
  .sp-shot { min-height: 360px; }
  .c-sona { flex-direction: column; align-items: flex-start; }
  .cmp-map { margin: 26px 16px 16px; min-height: 360px; }
  .cmp-node { padding: 7px 10px; border-radius: 12px; }
  .cmp-node b { font-size: 11px; }
  .cmp-node .dotm { font-size: 7px; }
  .cmp-wavr b { font-size: 16px; }
  .room-top { margin-bottom: 18px; }
}


/* the Pulse demo: only the prototype's button */
.pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 580px; }
.pb-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 0; }
.pb-btnwrap { position: relative; display: grid; place-items: center; width: 220px; height: 220px; transition: width .7s var(--ease), height .7s var(--ease); }
.pb.room-open .pb-btnwrap { width: 120px; height: 120px; }
.pulse-orb { --pg: 255,255,255; --pa: 0; --p: 0; position: relative; width: 150px; height: 150px; border-radius: 50%; isolation: isolate; cursor: pointer; touch-action: manipulation; user-select: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 40px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: width .7s var(--ease), height .7s var(--ease), transform .25s var(--spring); }
.pb.room-open .pulse-orb { width: 84px; height: 84px; }
.pulse-orb i { position: absolute; inset: -6px; border-radius: 50%; z-index: -1; opacity: calc(1 - var(--pa)); transition: opacity .45s;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.72) 22%, rgba(255,255,255,.34) 44%, rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 72%); filter: blur(14px) brightness(1.15); animation: porb 3.2s ease-in-out infinite; }
.pulse-orb em { position: absolute; inset: -18px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: var(--pa); transition: opacity .45s;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(var(--pg),.95) 20%, rgba(var(--pg),.6) 38%, rgba(var(--pg),.22) 56%, rgba(var(--pg),0) 72%); filter: blur(24px) saturate(1.3) brightness(1.3); }
.pulse-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2; pointer-events: none; transition: box-shadow .5s;
  box-shadow: 0 0 calc(60px * var(--pa)) calc(10px * var(--pa)) rgba(var(--pg), calc(var(--pa) * .85)), inset 0 0 0 calc(2px * var(--pa)) rgba(var(--pg), var(--pa)); }
@keyframes porb { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1.06); } }
.pulse-orb.open i { background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 26%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 72%); }
.pulse-orb.tapped { animation: ptap .28s var(--spring); }
@keyframes ptap { 40% { transform: scale(.9); } }
.pulse-orb.nope { animation: pnope .4s; }
@keyframes pnope { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.pr-ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: conic-gradient(from 0deg, var(--pink) 0, #ff8aa0 calc(var(--p, 0) * 1turn), rgba(255,255,255,.16) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(closest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); }
.pulse-orb.holding .pr-ring { opacity: 1; }
.pb-wave { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--wc),.3), rgba(var(--wc),0) 70%); box-shadow: 0 0 0 1.5px rgba(var(--wc),.5), 0 0 26px rgba(var(--wc),.45); animation: pbw .9s var(--ease) forwards; }
@keyframes pbw { from { transform: scale(.6); opacity: .95; } to { transform: scale(4.4); opacity: 0; } }
.pb-finger { position: absolute; left: 58%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; transform: scale(1.4) translate(30px, 30px); transition: opacity .3s, transform .35s var(--ease); pointer-events: none; z-index: 3; }
.pb-finger.on { opacity: .85; transform: none; }
.pb-finger.tap { animation: pbtap .16s; }
.pb-finger.press { transform: scale(.75); }
@keyframes pbtap { 50% { transform: scale(.7); } }
.pb-count { position: absolute; left: 50%; top: 0; font-size: 26px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.pb-count.pop { animation: pbc .7s var(--ease) forwards; }
@keyframes pbc { 0% { opacity: 1; transform: translate(-50%, 14px) scale(.8); } 30% { transform: translate(-50%, -4px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.pb-room { width: min(420px, 100%); border-radius: 26px; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; background: rgba(12, 10, 28, .82); border: 1px solid rgba(255,255,255,.12);
  clip-path: circle(0px at 50% -60px); transition: max-height .7s var(--ease), opacity .35s, margin .6s var(--ease), clip-path .85s var(--ease); }
.pb.room-open .pb-room { max-height: 360px; opacity: 1; margin-top: 20px; clip-path: circle(700px at 50% -60px); }
.pb-room.swap .pb-reply, .pb-room.swap .pb-rh { opacity: 0 !important; transform: translateX(-12px) !important; transition: all .2s !important; }
.pb-rh { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; font-size: 13px; }
.pb-rh i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--tc)); box-shadow: 0 0 10px rgb(var(--tc)); }
.pb-rh span { margin-left: auto; color: var(--ink3); font-size: 12px; }
.pb-reply { display: flex; gap: 10px; align-items: flex-start; padding: 7px 18px; }
.pb-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--dot); font-size: 10px; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 85% 70%), hsl(calc(var(--h) + 40) 70% 42%)); }
.pb-reply p { font-size: 14px; color: var(--ink2); line-height: 1.35; }
.pb-reply b { color: #fff; margin-right: 6px; font-weight: 700; }
.pb-in { margin: 8px 14px 14px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--ink3); font-size: 13px; }
.pb-rh, .pb-reply, .pb-in { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .45s, transform .55s var(--ease), filter .45s; }
.pb.room-open .pb-rh, .pb.room-open .pb-reply, .pb.room-open .pb-in { opacity: 1; transform: none; filter: none; transition-delay: calc(.22s + var(--i, 0) * .08s); }
.pb-side { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: 40px clamp(24px, 4vw, 54px) 40px 10px; }
.pb-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pb-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 10px 14px; border-radius: 16px; border: 1px solid transparent; transition: all .4s var(--ease); opacity: .5; }
.pb-steps li .dotm { grid-row: span 2; font-size: 14px; color: var(--peach); padding-top: 2px; }
.pb-steps li b { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: 15px; }
.pb-steps li small { color: var(--ink3); font-size: 13px; }
.pb-steps li.on { opacity: 1; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); transform: translateX(6px); }
.c-pulse { padding: 0; background: radial-gradient(circle at 25% 45%, rgba(168, 85, 247, .16), transparent 55%), rgba(20, 16, 48, .55); }
.pd-title { font-size: clamp(44px, 5vw, 84px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; }
.pd-cap { display: flex; gap: 14px; align-items: flex-start; min-height: 64px; }
@media (max-width: 1023px) { .pb { grid-template-columns: minmax(0, 1fr); } .pb-side { padding: 0 24px 34px; } }
@media (max-width: 767px) { .pb { min-height: 0; } .pb-stage { padding: 30px 14px 10px; } .pb-btnwrap { width: 180px; height: 180px; } .pulse-orb { width: 124px; height: 124px; } }

/* minimal white lock */
.lock-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; }
.hub-tabs .lock { display: inline-flex; }
.drop-lock svg { width: 44px; height: 44px; filter: drop-shadow(0 6px 20px rgba(0,0,0,.4)); }


/* team: fixed-size cards, the bio rises over the lower half on hover / tap */
.c-person { cursor: pointer; justify-content: flex-end; height: 320px; min-height: 0; }
.pp-av { position: absolute; top: 24px; left: 24px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-family: var(--dot); font-size: 26px; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 90% 72%), hsl(calc(var(--h) + 40) 70% 42%)); box-shadow: inset 0 -8px 20px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .3); transition: transform .6s var(--ease); }
.pp-more { position: absolute; top: 28px; right: 24px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink3); letter-spacing: .12em; }
.pp-more i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--edge); transition: transform .5s var(--ease), background .3s; }
.pp-id h3 { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; }
.pp-id p { font-size: 11px; color: var(--peach); letter-spacing: .12em; margin-top: 6px; }
.pp-bio { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 18px; border-radius: 22px; background: rgba(14, 10, 34, .94); border: 1px solid rgba(255, 255, 255, .12); transform: translateY(calc(100% + 14px)); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.pp-bio .dotm { font-size: 11px; color: var(--peach); letter-spacing: .12em; margin-bottom: 8px; }
.pp-bio p:last-child { font-size: 14px; line-height: 1.5; color: var(--ink2); }
.c-person:hover .pp-bio, .c-person.open .pp-bio { transform: none; opacity: 1; }
.c-person:hover .pp-av, .c-person.open .pp-av { transform: translateY(-4px) scale(.9); }
.c-person:hover .pp-more i, .c-person.open .pp-more i { transform: rotate(45deg); background: #fff; color: #111; }

/* hiring: an arrow stretches out, then the ask */
.c-hire { padding: 0; min-height: 0; background: linear-gradient(120deg, rgba(79, 124, 255, .16), rgba(168, 85, 247, .14), rgba(255, 77, 109, .14)); }
.hr { display: flex; flex-direction: column; gap: 14px; padding: 28px clamp(22px, 3vw, 40px); color: inherit; }
.hr-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.hr-role { font-size: clamp(30px, 4vw, 64px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; white-space: nowrap; }
.hr-arrow { position: relative; flex: 1; min-width: 40px; height: 24px; display: flex; align-items: center; }
.hr-arrow i { height: 3px; border-radius: 3px; background: var(--grad); width: 0; animation: hrgrow 2.6s var(--ease) infinite; }
.hr-arrow b { width: 0; height: 0; border-left: 14px solid #ff4d6d; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: -2px; flex: none; }
@keyframes hrgrow { 0% { width: 0; } 55%, 100% { width: calc(100% - 14px); } }
.hr-cta { font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: hrcta 2.6s var(--ease) infinite; }
@keyframes hrcta { 0%, 40% { opacity: 0; transform: translateX(-12px); } 60%, 100% { opacity: 1; transform: none; } }
.hr-mail { font-size: 13px; color: var(--ink2); letter-spacing: .06em; }
.c-hire:hover .hr-arrow i { animation: none; width: calc(100% - 14px); }
.c-hire:hover .hr-cta { animation: none; opacity: 1; transform: scale(1.04); }
@media (max-width: 767px) {
  .c-person { height: 300px; }
  .hr-row { flex-wrap: wrap; row-gap: 10px; }
  .hr-role { width: 100%; font-size: 34px; }
  .hr-arrow { flex: 1 1 60px; }
}


/* finale: the waitlist count is the hero */
.signups { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px clamp(26px, 5vw, 70px) 30px; border-radius: 40px; background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, .3), transparent 70%), rgba(24, 18, 60, .5); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shine), 0 40px 100px rgba(80, 40, 200, .3); margin-bottom: 10px; }
.su-odo { font-size: clamp(110px, 17vw, 260px); line-height: 1; color: #fff; text-shadow: 0 0 80px rgba(168, 85, 247, .7); letter-spacing: -.05em; }
.su-odo .od-suf { font-size: .55em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-label { font-size: clamp(18px, 2vw, 26px); font-weight: 850; text-transform: uppercase; letter-spacing: -.02em; }
.su-bar { width: min(420px, 70vw); height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 10px; }
.su-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 16px rgba(168, 85, 247, .8); transition: width 1.8s var(--ease); }
.su-sub { font-size: 12px; color: var(--ink2); letter-spacing: .1em; }
.su-sub .su-left { color: #fff; }
.s-finale .finale-title { font-size: clamp(40px, 6.4vw, 104px); }

/* nothing may widen the page on phones (the fly-in words travel off-card) */
#site { overflow-x: clip; }
.s-rooms { overflow-x: clip; }

@media (max-width: 767px) {
  .hs-x { display: none; }
  .hub-status { white-space: nowrap; }
  .s-hero { padding-top: 110px; justify-content: flex-end; padding-bottom: 120px; }
  .signups { padding: 26px 18px 22px; border-radius: 30px; width: 100%; }
  .su-odo { font-size: clamp(96px, 34vw, 150px); }
  .finale-stats { gap: 18px; }
  .finale-stats > div { min-width: 120px; }
  .rooms-head .sec-title { font-size: 40px; }
  .room-scroll { padding: 14px 12px 60px; }
  .room-top { gap: 8px; }
  .rh-word, .rh-scr { font-size: clamp(44px, 14vw, 70px); }
  .room-head h2 { font-size: 26px; }
  .next-room .nr-word { font-size: 36px; }
}
@media (max-width: 767px) {
  .hr-role { font-size: clamp(24px, 8vw, 32px); white-space: normal; }
  .hr-cta { font-size: 14px; }
  /* compact team rows: avatar + name, the bio unfolds under them on tap */
  .c-person { height: auto; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; column-gap: 14px; row-gap: 0; padding: 18px; }
  .pp-av { position: static; width: 60px; height: 60px; font-size: 20px; grid-row: 1; }
  .pp-id { grid-column: 2; grid-row: 1; }
  .pp-id h3 { font-size: 24px; }
  .pp-more { position: static; grid-column: 3; grid-row: 1; }
  .pp-bio { position: static; grid-column: 1 / -1; transform: none; opacity: 0; max-height: 0; overflow: hidden; padding: 0; margin: 0; background: none; border: 0; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
  .pp-bio .dotm { display: none; }
  .c-person:hover .pp-bio { opacity: 0; max-height: 0; margin: 0; }
  .c-person.open .pp-bio { opacity: 1; max-height: 260px; margin-top: 14px; }
  .c-person:hover .pp-av { transform: none; }
}

/* odometer glow: per-digit text-shadow gets clipped into boxes, so glow the whole number instead */
.su-odo, .st-odo, .hb-odo { text-shadow: none; }
.su-odo { filter: drop-shadow(0 0 40px rgba(168, 85, 247, .55)); }
.st-odo, .hb-odo { filter: drop-shadow(0 0 24px rgba(168, 85, 247, .45)); }


/* gradient words: the gradient spans the whole word, even "PJ." */
.ht-grad .ch { background: var(--grad); background-size: calc(var(--n, 10) * 100%) 100%; background-position: calc(var(--i) / max(var(--n, 10) - 1, 1) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* team cards with deck photos */
.pp-photo { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transition: transform 1s var(--ease), filter .6s; filter: saturate(.9); }
.pp-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 30, 0) 30%, rgba(10, 8, 30, .55) 60%, rgba(10, 8, 30, .95)); }
.c-person:hover .pp-photo { transform: scale(1.05); filter: saturate(1.05); }
.c-person .pp-av { display: none; background-size: cover; background-position: center 20%; }
.c-person .pp-id, .c-person .pp-more, .c-person .pp-bio { z-index: 1; }
.c-person { height: 380px; }
.pp-more { color: #fff; }
@media (max-width: 767px) {
  .c-person { height: auto; }
  .c-person .pp-photo { display: none; }
  .c-person .pp-av { display: block; position: static; width: 60px; height: 60px; border-radius: 50%; }
  .pp-bio p:last-child { overflow-wrap: anywhere; }
}

/* explorers: Why now + Product */
.c-explore { padding: 0; background: radial-gradient(circle at 70% 30%, rgba(79, 124, 255, .14), transparent 55%), rgba(20, 16, 48, .55); }
.xp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; min-height: 520px; }
.xp-stage { position: relative; margin: 22px; border-radius: 24px; background: rgba(8, 6, 22, .6); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; min-height: 400px; }
.xp-vis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px; opacity: 0; transform: scale(.96); filter: blur(8px); transition: opacity .5s, transform .7s var(--ease), filter .5s; pointer-events: none; }
.xp-vis.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.xp-list { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 26px 22px 4px; }
.xp-item { position: relative; width: 100%; display: grid; grid-template-columns: 40px 1fr; gap: 10px; text-align: left; padding: 16px 18px; border-radius: 20px; border: 1px solid transparent; overflow: hidden; transition: background .35s, border-color .35s, transform .45s var(--ease); }
.xp-n { font-size: 16px; color: var(--ink3); padding-top: 3px; transition: color .3s; }
.xp-t { display: flex; flex-direction: column; gap: 4px; }
.xp-k { font-size: 10px; color: var(--peach); letter-spacing: .14em; }
.xp-t b { font-size: clamp(17px, 1.6vw, 22px); font-weight: 850; text-transform: uppercase; letter-spacing: -.025em; line-height: 1.05; color: var(--ink2); transition: color .3s; }
.xp-b, .xp-src { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; }
.xp-b { color: var(--ink2); font-size: 14px; line-height: 1.5; }
.xp-src { color: var(--ink3); font-size: 11px; }
.xp-item:hover { background: rgba(255, 255, 255, .04); }
.xp-item.on { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); transform: translateX(-4px); }
.xp-item.on .xp-n { color: #fff; }
.xp-item.on .xp-t b { color: #fff; }
.xp-item.on .xp-b, .xp-item.on .xp-src { max-height: 120px; opacity: 1; }
.xp-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); }
.xp:not(.manual) .xp-item.on .xp-prog { animation: xpp var(--dur) linear forwards; }
@keyframes xpp { to { width: 100%; } }

/* why-now visuals */
.v-feed { width: min(300px, 90%); display: flex; flex-direction: column; gap: 6px; }
.vf-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); opacity: 0; transform: translateY(14px); }
.vf-row i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.vf-row span { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.vf-row em { font-style: normal; font-size: 9px; letter-spacing: .1em; color: var(--ink3); font-family: var(--dot); }
.vf-row.friend { background: rgba(79, 124, 255, .25); box-shadow: 0 0 0 1px #4f7cff; }
.vf-row.friend em { color: #8fa8ff; }
.xp-vis.play .vf-row { animation: vfin .5s var(--ease) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes vfin { to { opacity: 1; transform: none; } }
.xp-vis.play .vf-row:not(.friend) { animation: vfin .5s var(--ease) forwards, vfdim .6s 1.2s forwards; animation-delay: calc(var(--i) * 60ms), calc(1.2s + var(--i) * 40ms); }
@keyframes vfdim { to { opacity: .35; } }
.v-bars { width: min(320px, 90%); display: flex; flex-direction: column; gap: 10px; }
.v-bars > div { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; }
.v-bars .dotm { font-size: 10px; color: var(--ink3); }
.v-bars b { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.v-bars b i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
.xp-vis.play .v-bars b i { animation: vbw 1.2s 1s var(--ease) forwards; }
@keyframes vbw { to { width: var(--w); } }
.v-bars em { font-style: normal; font-weight: 800; }
.v-bars p { color: var(--ink3); font-size: 12px; }
.v-bots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; width: min(280px, 80%); }
.v-bots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .7); transition: background .3s, transform .3s; }
.xp-vis.play .v-bots i.bot { animation: vbot .4s forwards; animation-delay: calc(var(--i) * 18ms + .3s); }
@keyframes vbot { 50% { transform: scale(1.5); } to { background: #ff4d6d; border-radius: 3px; box-shadow: 0 0 8px rgba(255, 77, 109, .7); } }
.v-big { text-align: center; }
.v-big b, .v-ring b { display: block; font-size: clamp(48px, 5vw, 80px); font-weight: 900; letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-big span, .v-ring span { color: var(--ink2); font-size: 14px; }
.v-ring { position: relative; width: min(260px, 70%); aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.v-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.v-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.vr-t { stroke: rgba(255, 255, 255, .1); }
.vr-v { stroke: url(#vg); stroke-dasharray: 314.16; stroke-dashoffset: 314.16; }
.xp-vis.play .vr-v { animation: vring 1.6s .2s var(--ease) forwards; }
@keyframes vring { to { stroke-dashoffset: 53.4; } }
.v-ring > div { max-width: 70%; }
.v-biz { display: flex; flex-direction: column; gap: 12px; width: min(340px, 90%); }
.vb { position: relative; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 10px; opacity: 0; transform: translateX(-20px); }
.vb b { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.vb span { color: var(--ink2); font-size: 13px; text-align: right; }
.vb.x::after { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; background: #ff4d6d; transform: scaleX(0); transform-origin: left; }
.vb.ok { background: var(--grad); border: 0; box-shadow: 0 20px 50px rgba(168, 85, 247, .35); }
.vb.ok span { color: #fff; }
.xp-vis.play .vb { animation: vbin .5s var(--ease) forwards; }
.xp-vis.play .vb:nth-child(2) { animation-delay: .15s; } .xp-vis.play .vb:nth-child(3) { animation-delay: 1.4s; }
.xp-vis.play .vb.x::after { animation: vbx .5s .8s var(--ease) forwards; }
.xp-vis.play .vb.x { animation: vbin .5s var(--ease) forwards, vbdim .4s 1.1s forwards; }
@keyframes vbin { to { opacity: 1; transform: none; } }
@keyframes vbx { to { transform: scaleX(1); } }
@keyframes vbdim { to { opacity: .5; } }

/* product visuals */
.v-threads { width: min(340px, 92%); display: flex; flex-direction: column; gap: 10px; }
.vt { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; transform: translateY(16px); transition: all .5s var(--ease); }
.vt b { font-size: 14px; font-weight: 800; }
.vt span { margin-left: auto; color: var(--ink3); font-size: 12px; }
.xp-vis.play .vt { animation: vfin .5s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms); }
.xp-vis.play .vt.pick { animation: vfin .5s var(--ease) forwards, vtpick .6s 1.1s var(--spring) forwards; }
@keyframes vtpick { to { background: rgba(255, 77, 109, .2); border-color: #ff4d6d; transform: scale(1.05); box-shadow: 0 16px 40px rgba(255, 77, 109, .3); } }
.v-react { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.v-orb { width: 130px; height: 130px; cursor: default; }
.v-tl { display: flex; gap: 8px; }
.v-tl span { font-family: var(--dot); font-size: 11px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink3); transition: all .3s; }
.v-tl span.on[data-t="1"] { background: #4f7cff; color: #fff; } .v-tl span.on[data-t="2"] { background: #a855f7; color: #fff; } .v-tl span.on[data-t="3"] { background: #ff4d6d; color: #fff; }
.v-split { position: relative; width: min(360px, 94%); height: 300px; }
.vs-big, .vs-sub { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; }
.vs-big { left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(168, 85, 247, .35), rgba(79, 124, 255, .15)); border: 1px solid rgba(255, 255, 255, .2); }
.vs-big b { font-size: 12px; font-weight: 800; } .vs-big span { color: var(--ink2); font-size: 12px; }
.vs-sub { width: 110px; height: 110px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .6); }
.vs-sub b { font-size: 12px; font-weight: 800; } .vs-sub span { color: var(--ink2); font-size: 11px; }
.xp-vis.play .vs-big { animation: vsbig 1s .6s var(--ease) forwards; }
@keyframes vsbig { to { transform: translate(-50%, -50%) scale(.55); opacity: .35; } }
.xp-vis.play .vs-sub { animation: vssub .8s var(--spring) forwards; animation-delay: calc(1s + var(--i) * .15s); }
.xp-vis.play .vs-sub:nth-of-type(2) { --tx: -120px; --ty: -70px; } .xp-vis.play .vs-sub:nth-of-type(3) { --tx: 120px; --ty: -60px; } .xp-vis.play .vs-sub:nth-of-type(4) { --tx: 0px; --ty: 95px; }
@keyframes vssub { to { opacity: 1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); } }
.v-ping { display: flex; align-items: center; gap: 0; width: min(380px, 96%); }
.vp-meet { display: flex; flex-direction: column; gap: 10px; }
.vp-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--dot); font-size: 12px; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 85% 70%), hsl(calc(var(--h) + 40) 70% 42%)); }
.vp-av.sm { width: 26px; height: 26px; font-size: 9px; }
.vp-meet .vp-av { opacity: 0; transform: scale(.5); }
.xp-vis.play .vp-meet .vp-av { animation: vpin .5s var(--spring) forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes vpin { to { opacity: 1; transform: none; } }
.vp-line { flex: 1; height: 2px; margin: 0 12px; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.xp-vis.play .vp-line { animation: vbx .6s .6s var(--ease) forwards; }
.vp-box { flex: 1.4; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 8px; }
.vp-box > b { font-size: 18px; font-weight: 900; text-transform: uppercase; }
.vp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0; transform: translateX(-10px); }
.vp-row em { margin-left: auto; font-style: normal; font-size: 10px; color: #8affb2; font-family: var(--dot); }
.xp-vis.play .vp-row { animation: vbin .4s var(--ease) forwards; animation-delay: calc(1.1s + var(--i) * .2s); }
.vp-box small { color: var(--ink3); font-size: 11px; }

@media (max-width: 1023px) {
  .xp { grid-template-columns: minmax(0, 1fr); }
  .xp-stage { margin: 16px 16px 0; min-height: 330px; }
  .xp-list { padding: 12px 16px 18px; }
  .xp-item.on { transform: none; }
}
@media (max-width: 767px) {
  .xp-stage { min-height: 300px; }
  .xp-item { padding: 12px 14px; grid-template-columns: 32px 1fr; }
  .v-split { height: 260px; transform: scale(.85); }
}
.v-bots { width: min(210px, 60%); gap: 5px; }
.vf-row { padding: 6px 10px; }
.xp-vis { gap: 16px; padding: 20px; }
/* an open bio must not clip its first letters */
.c-person.open .pp-bio { overflow: visible; }
.pp-bio { padding-left: 1px; }

/* hiring: the arrow only stretches while you hover the card */
.hr-arrow i { animation: none; width: 0; transition: width .9s var(--ease); }
.hr-cta { animation: none; opacity: 0; transform: translateX(-12px); transition: opacity .4s .55s, transform .5s .55s var(--ease); }
.c-hire:hover .hr-arrow i { width: calc(100% - 14px); }
.c-hire:hover .hr-cta { opacity: 1; transform: none; }
.c-hire .hr-arrow b { opacity: 0; transition: opacity .3s .5s; }
.c-hire:hover .hr-arrow b { opacity: 1; }
@media (hover: none) {
  .hr-arrow i { width: calc(100% - 14px); }
  .hr-cta, .c-hire .hr-arrow b { opacity: 1; transform: none; }
}

/* ============ portal login ============ */
body[data-view="auth"] .topbar { opacity: 0; transform: translateY(-20px); pointer-events: none; }
body[data-view="auth"] .topbar > * { pointer-events: none; }
body[data-view="auth"] #site { visibility: hidden; }
#auth { position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#auth::-webkit-scrollbar { display: none; }
.auth-close { position: fixed; top: 22px; right: 22px; z-index: 2; }
.auth-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 22vh 18px 50px; }
.auth-card { width: min(460px, 100%); padding: 30px clamp(22px, 4vw, 36px) 26px; border-radius: 36px; background: rgba(30, 22, 72, .42); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); box-shadow: var(--shine), 0 40px 120px rgba(40, 20, 120, .45); display: flex; flex-direction: column; gap: 18px; }
.auth-title { display: flex; flex-direction: column; font-size: clamp(46px, 8vw, 74px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .84; perspective: 700px; }
.auth-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); }
.auth-seg button { position: relative; z-index: 1; height: 42px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink2); transition: color .35s; }
.auth-seg button.on { color: #0b0a10; }
.auth-ind { position: absolute; top: 5px; left: 0; height: 42px; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(79, 124, 255, .35); }
.auth-views { position: relative; }
.auth-view { display: none; flex-direction: column; gap: 14px; }
.auth-view.on { display: flex; }
.claim-step { display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld .dotm { font-size: 11px; color: var(--ink3); letter-spacing: .12em; }
.fld input { width: 100%; height: 54px; padding: 0 18px; border-radius: 18px; background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); color: #fff; font: 500 16px var(--sans); outline: none; transition: border-color .3s, box-shadow .3s; }
.fld input::placeholder { color: rgba(255, 255, 255, .3); }
.fld input:focus { border-color: var(--purple); box-shadow: 0 0 0 5px rgba(168, 85, 247, .18); }
.pw { position: relative; display: block; }
.pw input { padding-right: 76px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 12px; font-family: var(--dot); font-size: 11px; color: var(--ink2); background: rgba(255, 255, 255, .06); }
.auth-go { width: 100%; height: 56px; }
.auth-go.busy { opacity: .6; pointer-events: none; }
.auth-passkey { width: 100%; height: 54px; gap: 10px; }
.auth-passkey svg { width: 20px; height: 20px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink3); }
.auth-or i { flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.auth-or .dotm { font-size: 10px; letter-spacing: .14em; }
.auth-msg { min-height: 1.2em; font-size: 14px; color: var(--ink2); text-align: center; }
.auth-msg.bad { color: #ff8fa3; }
.auth-msg.good { color: #8affb2; }
.auth-lede { color: var(--ink2); font-size: 15px; line-height: 1.5; }
.auth-lede b { color: #fff; }
.auth-preview { padding: 12px 14px; border-radius: 16px; background: rgba(255, 214, 77, .08); border: 1px dashed rgba(255, 214, 77, .5); font-size: 13px; color: var(--ink2); line-height: 1.45; }
.auth-preview .dotm { display: block; font-size: 10px; color: #ffd84d; letter-spacing: .14em; margin-bottom: 4px; }
.auth-preview b { color: #fff; font-family: var(--dot); font-size: 16px; letter-spacing: .2em; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { height: 62px; min-width: 0; text-align: center; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); color: #fff; font: 800 26px var(--dot); outline: none; transition: border-color .25s, transform .25s var(--spring), box-shadow .25s; }
.otp input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(168, 85, 247, .2); transform: translateY(-2px); }
.otp input.in { border-color: rgba(255, 255, 255, .4); }
.auth-row { display: flex; justify-content: space-between; gap: 10px; }
.linkbtn { font-size: 13px; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: #fff; }
.pw-meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: -6px; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .35s var(--ease); }
.auth-foot { text-align: center; font-size: 14px; color: var(--ink3); }
.auth-foot button { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hub-logout { margin-left: auto; height: 50px; padding: 0 22px; background: rgba(255, 255, 255, .14); }   /* same height and fill as ✕ beside it */
.hub-top .back { margin-left: 0; }
@media (max-width: 767px) {
  .auth-wrap { padding: 18vh 12px 30px; }
  .auth-card { border-radius: 28px; padding: 24px 18px 20px; gap: 16px; }
  .otp { gap: 6px; } .otp input { height: 54px; font-size: 22px; }
  .hub-logout { height: 40px; padding: 0 14px; font-size: 12px; }
  .hub-top .back { width: 40px; height: 40px; font-size: 16px; }
}


/* ============ rooms v4: titles float in as you scroll ============ */
@media (min-width: 768px) {
  .cards { display: block; position: relative; flex: 1; grid-template-areas: none; }
  .cards { margin-top: 10px; }
  .room-card { position: absolute; left: var(--x); top: calc(var(--t) * (100% - 120px)); width: auto; max-width: 46%; padding: 10px 18px 12px; gap: 2px; justify-content: flex-start; pointer-events: none; animation: rfloat 6s ease-in-out infinite; animation-delay: var(--d); }
  .room-card.shown { pointer-events: auto; }
  .room-card .rc-shell { opacity: 0 !important; transition: opacity .4s; }
  .room-card:hover .rc-shell, .room-card:focus-visible .rc-shell { opacity: 1 !important; }
  .room-card .rc-viz { display: none; }
  .room-card .rc-word, .rc-problem .rc-word, .rc-team .rc-word, .rc-model .rc-word { font-size: clamp(34px, min(4.8vw, 8.5vh), 96px) !important; }
  .room-card .rc-open { position: absolute !important; right: 14px; bottom: 10px; top: auto; margin: 0; }
  .room-card .rc-title { font-size: 14px; opacity: .75; }
  .room-card .rc-open { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s var(--ease), background .3s, color .3s; }
  .room-card:hover .rc-open { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .cards { gap: 6px; }
  .room-card { padding: 22px 4px 18px; background: none; border: 0; animation: none; pointer-events: auto; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .room-card .rc-shell { opacity: 0 !important; }
  .room-card .rc-viz { display: none; }
  .room-card .rc-word { font-size: clamp(46px, 15vw, 84px); }
  .room-card .rc-title { opacity: .75; }
  .room-card .rc-open { position: static !important; align-self: flex-start; margin-top: 10px; }
  .room-card + .room-card { border-top: 1px solid rgba(255,255,255,.08); }
}
@keyframes rfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ============ founding community: the count becomes the button ============ */
.s-finale { min-height: 0; height: 100vh; height: 100svh; padding: 0; display: block; }
.fin-pin { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 90px 20px 40px; }
.s-finale .finale-title { font-size: clamp(40px, 6.2vw, 100px); }
.fin-stage { display: grid; place-items: center; min-height: clamp(180px, 26vh, 280px); }
.fin-stage > * { grid-area: 1 / 1; }
.fin-count { display: flex; align-items: flex-start; font-weight: 900; letter-spacing: -.06em; line-height: .9; font-size: clamp(120px, 20vw, 300px); filter: drop-shadow(0 0 50px rgba(168, 85, 247, .55)); }
.fin-plus { font-size: .5em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: .05em; }
.fin-btn { opacity: 0; }
.fin-label { font-size: clamp(16px, 1.8vw, 22px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; min-height: 1.3em; }
.fin-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .fin-count { font-size: clamp(110px, 36vw, 170px); }
  .fin-pin { padding: 80px 16px 30px; gap: 14px; }
  .fin-btn .hyper-label { white-space: nowrap; font-size: clamp(17px, 5.4vw, 22px); }
}

/* ============ waitlist: city type-ahead ============ */
.city-pick { position: relative; }
.city-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; list-style: none; margin: 0; padding: 6px; max-height: min(320px, 42vh); overflow-y: auto; background: rgba(14, 12, 24, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: cityIn .22s var(--ease); }
.city-list li { padding: 12px 14px; border-radius: 10px; font-size: 17px; color: rgba(255, 255, 255, .62); cursor: pointer; transition: background .15s, color .15s; }
.city-list li b { color: #fff; font-weight: 700; }
.city-list li:hover, .city-list li.hi { background: rgba(255, 255, 255, .09); color: #fff; }
.city-list li.hi { box-shadow: inset 3px 0 0 #a855f7; }
.city-list li.use { color: #fff; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 4px; }
.city-list li.use:first-child { border-top: 0; margin-top: 0; }
.city-list li.use span { display: block; font-size: 13px; color: rgba(255, 255, 255, .45); margin-top: 2px; }
@keyframes cityIn { from { opacity: 0; transform: translateY(-6px); } }

/* ============ portal welcome: claim account + vortex ============ */
.pc { display: flex; justify-content: center; width: 100%; }
.pc-card { width: min(440px, 92vw); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; text-align: left;
  background: rgba(14, 12, 26, .62); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pc-lede { font-size: 15px; color: var(--ink2); line-height: 1.45; }
.pc-lede b { color: #fff; }
.pc-in { width: 100%; height: 56px; padding: 0 16px; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); color: #fff; font: 500 17px var(--sans); outline: none; }
.pc-in:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(168, 85, 247, .2); }
.pc-msg { color: #ff8fa3; font-size: 14px; min-height: 1.2em; }
.pc .btn.busy { opacity: .6; pointer-events: none; }
.pc-card .btn { width: 100%; justify-content: center; }
.vortex { position: fixed; inset: 0; z-index: 400; pointer-events: all; overflow: hidden; }
.vortex canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-disc, .vx-core { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.vx-disc { width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; opacity: 0;
  background: conic-gradient(from 0deg, #4f7cff, #a855f7, #ff4d6d, #ffb86b, #4f7cff, #a855f7, #ff4d6d, #4f7cff);
  -webkit-mask: radial-gradient(circle, transparent 0 8%, #000 34%); mask: radial-gradient(circle, transparent 0 8%, #000 34%); filter: blur(18px) saturate(1.3); }
.vx-core { width: 30vmax; height: 30vmax; margin: -15vmax 0 0 -15vmax; opacity: 0; background: radial-gradient(circle, #fff 0 12%, rgba(244, 242, 255, .85) 30%, rgba(168, 85, 247, .6) 55%, rgba(79, 124, 255, 0) 72%); }

/* ============ backers only: its own room, restyled by the backer ============ */
#hub .hub-scroll { z-index: 1; }
.bk-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #06050b; animation: bkIn .8s var(--ease); --b1: #4f7cff; }
@keyframes bkIn { from { opacity: 0; } }
.bk-bg i, .bk-bg b { position: absolute; display: block; pointer-events: none; }
.bk-bg[data-style="mesh"] i { width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .42; animation: bkDrift 16s ease-in-out infinite alternate; }
.bk-bg[data-style="mesh"] i:nth-child(1) { background: var(--b1); left: -20vmax; top: -25vmax; }
.bk-bg[data-style="mesh"] i:nth-child(2) { background: var(--b2); right: -25vmax; top: 10vh; animation-delay: -5s; animation-duration: 19s; }
.bk-bg[data-style="mesh"] i:nth-child(3) { background: var(--b3); left: 10vw; bottom: -35vmax; animation-delay: -9s; animation-duration: 22s; }
@keyframes bkDrift { to { transform: translate(10vmax, 6vmax) scale(1.15); } }
.bk-bg[data-style="grid"] { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--b2) 35%, transparent), transparent 60%), #06050b; }
.bk-bg[data-style="grid"] i:nth-child(1) { left: -50%; right: -50%; bottom: -10%; height: 70%; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 0;
  background-image: linear-gradient(var(--b1) 1px, transparent 1px), linear-gradient(90deg, var(--b3) 1px, transparent 1px); background-size: 70px 70px; opacity: .45;
  -webkit-mask: linear-gradient(transparent, #000 30%); mask: linear-gradient(transparent, #000 30%); animation: bkGrid 3s linear infinite; }
.bk-bg[data-style="grid"] i:nth-child(2) { left: 0; right: 0; top: 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--b2), transparent); box-shadow: 0 0 40px 10px color-mix(in srgb, var(--b2) 60%, transparent); }
@keyframes bkGrid { to { background-position: 0 70px, 0 0; } }
.bk-bg[data-style="stars"] { background: radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--b2) 30%, transparent), transparent 55%), radial-gradient(ellipse at 20% 90%, color-mix(in srgb, var(--b3) 25%, transparent), transparent 55%), #05040a; }
.bk-bg[data-style="stars"] i { inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--b1), transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, var(--b3), transparent), radial-gradient(2px 2px at 85% 15%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, var(--b2), transparent);
  background-size: 260px 260px; animation: bkTwinkle 4s ease-in-out infinite alternate; }
.bk-bg[data-style="stars"] i:nth-child(2) { background-size: 380px 380px; animation-delay: -2s; opacity: .7; }
.bk-bg[data-style="stars"] i:nth-child(3) { background-size: 520px 520px; animation-delay: -1s; opacity: .5; }
@keyframes bkTwinkle { from { opacity: .35; transform: translateY(0); } to { opacity: 1; transform: translateY(-12px); } }
.bk-bg[data-style="rays"] b { left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .26;
  background: repeating-conic-gradient(from 0deg, var(--b1) 0deg 6deg, transparent 6deg 18deg, var(--b2) 18deg 24deg, transparent 24deg 36deg, var(--b3) 36deg 42deg, transparent 42deg 54deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 45%); mask: radial-gradient(circle, #000 0, transparent 45%); animation: bkSpin 60s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
.bk-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(6, 5, 11, .45), rgba(6, 5, 11, .15) 70%); pointer-events: none; }
.bk-bg.still *, .bk-bg.still { animation-play-state: paused !important; }
.is-backers .hub-ind { background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3)); }

.bk-wrap { display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }
.bk-head { max-width: 760px; }
.bk-head .dotm { color: var(--b3); letter-spacing: .2em; font-size: 12px; }
.bk-title { font-size: clamp(54px, 9vw, 150px); font-weight: 900; text-transform: uppercase; letter-spacing: -.055em; line-height: .86; margin: 10px 0 14px; }
.bk-title span { background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bk-lede { color: var(--ink2); font-size: 17px; max-width: 520px; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.bk-card { position: relative; aspect-ratio: 1.586; border-radius: 28px; padding: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--b1), var(--b2) 55%, var(--b3)); box-shadow: 0 40px 90px -20px color-mix(in srgb, var(--b2) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.bk-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .35), transparent 40%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px); }
.bk-card-glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .35), transparent 45%); mix-blend-mode: overlay; pointer-events: none; }
.bkc-top { display: flex; justify-content: space-between; align-items: center; }
.bkc-top img { height: clamp(20px, 2.6vw, 30px); width: auto; }
.bkc-top .dotm, .bkc-bottom .dotm { font-size: 11px; letter-spacing: .2em; color: rgba(255, 255, 255, .8); }
.bkc-mark { position: absolute; right: -6%; bottom: -14%; width: 52%; opacity: .2; z-index: -1; }
.bkc-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.bkc-bottom b { display: block; font-size: clamp(22px, 3vw, 34px); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; margin-top: 6px; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.bkc-no { text-align: right; }
.bkc-no b { font-family: var(--dot); letter-spacing: .1em; }
.bk-custom { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 28px; background: rgba(10, 9, 18, .55); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bkx-k { font-size: 11px; letter-spacing: .22em; color: var(--ink3); }
.bkx-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bkx-row > span { font-weight: 700; font-size: 15px; }
.bkx-themes { display: flex; gap: 8px; }
.bkx-th { width: 38px; height: 38px; border-radius: 50%; padding: 3px; border: 2px solid transparent; transition: transform .25s var(--spring), border-color .25s; }
.bkx-th i { display: block; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--t1), var(--t2), var(--t3), var(--t1)); }
.bkx-th:hover { transform: scale(1.12); }
.bkx-th.on { border-color: #fff; }
.bkx-seg { display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.bkx-seg button { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink2); transition: background .25s, color .25s; }
.bkx-seg button.on { background: #fff; color: #07060c; }
.bkx-colors { display: flex; gap: 10px; }
.bkx-col { position: relative; width: 42px; height: 42px; border-radius: 14px; cursor: pointer; }
.bkx-col i { position: absolute; inset: 0; border-radius: 14px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); transition: transform .25s var(--spring); }
.bkx-col:hover i { transform: scale(1.08); }
.bkx-col input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bkx-reset { align-self: flex-start; }
.bk-sec { font-size: 12px; letter-spacing: .22em; color: var(--ink3); margin-top: 10px; }
.bk-drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.bk-drops .bk-drop { grid-column: auto; }
.bk-wrap .bk-relock { align-self: flex-start; }
@media (max-width: 860px) { .bk-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .bkx-row { flex-direction: column; align-items: flex-start; } .bk-custom { padding: 18px; } .bkx-seg button { padding: 8px 11px; } }

/* portal header fits a 375px phone: tighter gaps, the status pill shrinks instead of pushing ✕ off screen */
@media (max-width: 480px) {
  .hub-top { gap: 8px; }
  .hub-status { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .hub-logo { height: 16px; flex: none; }
  .hub-logout, .hub-top .back { flex: none; }
}

.bk-preview { max-width: 420px; margin-top: 14px; text-align: left; }

/* ============ backers hoodie in 3D ============ */
.bk-stage { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 10px; min-height: min(78vh, 720px);
  border-radius: 32px; overflow: hidden; background: radial-gradient(ellipse at 65% 55%, color-mix(in srgb, var(--b2) 22%, transparent), transparent 62%), rgba(8, 7, 14, .35); border: 1px solid rgba(255, 255, 255, .08); }
.bkh-copy { padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.bkh-copy .dotm { color: var(--b3); font-size: 12px; letter-spacing: .22em; }
.bkh-copy h3 { font-size: clamp(34px, 4.6vw, 70px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .9; }
.bkh-copy h3 span { background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bkh-hint { color: var(--ink2); font-size: 15px; }
.bkh-views { display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); align-self: flex-start; }
.bkh-views button { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink2); transition: background .3s, color .3s; }
.bkh-views button.on { background: #fff; color: #07060c; }
.bk-hoodie { position: relative; height: 100%; min-height: min(78vh, 720px); cursor: grab; }
.bk-hoodie:active { cursor: grabbing; }
.bk-hoodie canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.bkh-load, .bkh-fail { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; color: var(--ink2); font-size: 14px; }
.bk-hoodie.is-loading .bkh-load { display: flex; animation: bkPulse 1.2s ease-in-out infinite alternate; }
.bk-hoodie.is-failed .bkh-fail { display: flex; }
.bkh-fail img { width: min(320px, 70%); border-radius: 20px; }
@keyframes bkPulse { from { opacity: .35; } }
@media (max-width: 860px) {
  .bk-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bkh-copy { padding-bottom: 0; }
  .bk-hoodie { min-height: 480px; }
}

/* ============ hoodie card: filled with the backer's theme ============ */
.bk-stage { background:
    radial-gradient(ellipse at 72% 40%, color-mix(in srgb, #fff 18%, transparent), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--b1) 78%, #0b0a14) 0%, color-mix(in srgb, var(--b2) 72%, #0b0a14) 52%, color-mix(in srgb, var(--b3) 78%, #0b0a14) 100%);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 40px 100px -30px color-mix(in srgb, var(--b2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.bk-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 7, 14, .55), rgba(8, 7, 14, .05) 55%); }
.bk-stage::after { content: ''; position: absolute; left: 50%; right: 0; bottom: 0; height: 30%; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .28), transparent 70%); }
.bkh-copy .dotm { color: #fff; opacity: .8; }
.bkh-copy h3 { color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .25); }
.bkh-note { color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.5; max-width: 420px; }
.bkh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bkh-chips .chip-s { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.bkh-hint { color: rgba(255, 255, 255, .7); font-size: 13px; }
.bkh-notify { display: flex; align-items: center; gap: 14px; align-self: flex-start; padding: 12px 14px 12px 12px; border-radius: 20px; text-align: left;
  background: rgba(10, 9, 18, .45); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s, border-color .3s, box-shadow .3s; }
.bkh-notify:hover { border-color: rgba(255, 255, 255, .5); }
.bkh-notify.on { background: rgba(255, 255, 255, .95); color: #0b0a14; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .45); }
.bkh-bell { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--b1), var(--b3)); font-size: 18px; flex: none; }
.bkh-bell svg { width: 20px; height: 20px; }
.bkh-notify.on .bkh-bell { animation: bkRing .7s ease; }
@keyframes bkRing { 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.bkh-nl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkh-nl b { font-size: 16px; }
.bkh-nl small { font-size: 12.5px; opacity: .75; }
.bkh-notify .tgl { margin-left: 6px; }
.bkh-notify.on .tgl { background: linear-gradient(90deg, var(--b1), var(--b3)); }
.bkh-notify.on .tgl i { transform: translateX(18px); }

/* ============ personalize: more colour, more life ============ */
.bk-custom { position: relative; isolation: isolate; border: 0; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--b1) 38%, #0c0b16), color-mix(in srgb, var(--b2) 30%, #0c0b16) 50%, color-mix(in srgb, var(--b3) 36%, #0c0b16));
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--b2) 75%, transparent); }
.bk-custom::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bkx-a, 0deg), var(--b1), var(--b2), var(--b3), var(--b1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: bkxSpin 6s linear infinite; }
.bk-custom::after { content: ''; position: absolute; width: 60%; aspect-ratio: 1; right: -18%; top: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--b3) 55%, transparent), transparent 65%); filter: blur(10px); animation: bkDrift 9s ease-in-out infinite alternate; }
@property --bkx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bkxSpin { to { --bkx-a: 360deg; } }
.bkx-k { font-size: 12px !important; color: #fff !important; opacity: .85; letter-spacing: .24em !important; }
.bkx-row > span { color: #fff; }
.bkx-th { width: 44px; height: 44px; }
.bkx-th i { box-shadow: 0 0 18px -2px var(--t2); }
.bkx-th.on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.bkx-seg { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .18); }
.bkx-seg button { color: rgba(255, 255, 255, .8); }
.bkx-seg button.on { background: linear-gradient(90deg, var(--b1), var(--b3)); color: #fff; box-shadow: 0 6px 20px -6px var(--b2); text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.bkx-col { width: 48px; height: 48px; }
.bkx-col i { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 8px 24px -6px var(--c); }
.bkx-col::after { content: '✎'; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #fff; color: #0b0a14; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none; }
.bk-custom .tgl.on { background: linear-gradient(90deg, var(--b1), var(--b3)); }
.bkx-reset { color: rgba(255, 255, 255, .85) !important; }

/* ============ backers call: the backer's theme, background style and name ============ */
.bk-call { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-radius: 28px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--b1) 70%, #0b0a14), color-mix(in srgb, var(--b2) 62%, #0b0a14) 55%, color-mix(in srgb, var(--b3) 70%, #0b0a14));
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--b2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.bk-call::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 7, 14, .5), rgba(8, 7, 14, .1) 70%); }
.bk-bg.is-card { z-index: 0; background: none !important; animation: none; opacity: .5; mix-blend-mode: screen; }
.bk-bg.is-card::after { display: none; }
.bk-bg.is-card[data-style="mesh"] i { filter: blur(50px); opacity: .7; width: 40vmax; height: 40vmax; }
.bkc2-main { position: relative; z-index: 1; padding: clamp(22px, 3.4vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.bkc2-main .dotm { color: #fff; opacity: .8; font-size: 12px; letter-spacing: .22em; }
.bkc2-main h3 { font-size: clamp(28px, 3.6vw, 52px); font-weight: 900; letter-spacing: -.045em; line-height: .95; text-transform: uppercase; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .25); }
.bkc2-sub { color: rgba(255, 255, 255, .85); font-size: 15px; max-width: 520px; }
.bkc2-sub .call-when { display: block; margin-top: 4px; font-weight: 700; color: #fff; }
.bk-call .call-act { justify-content: flex-start; margin-top: 6px; }
.bk-call .pillbtn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.bk-call .rsvp.on { background: #fff; color: #0b0a14; }
.bkc2-pass { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 190px; padding: 26px 30px; text-align: center;
  background: rgba(255, 255, 255, .12); border-left: 2px dashed rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 11px, #000 12px) top left / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, transparent 11px, #000 12px) bottom left / 100% 51% no-repeat;
  mask: radial-gradient(circle 12px at 0 0, transparent 11px, #000 12px) top left / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, transparent 11px, #000 12px) bottom left / 100% 51% no-repeat; }
.bkc2-pass .dotm { font-size: 10px; letter-spacing: .24em; color: rgba(255, 255, 255, .85); }
.bkc2-pass b { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; color: #fff; line-height: 1; max-width: 220px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .bk-call { grid-template-columns: minmax(0, 1fr); }
  .bkc2-pass { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .45); flex-direction: row; justify-content: space-between; padding: 16px 22px; -webkit-mask: none; mask: none; }
}

/* ---------------- the problem: tap the noise away ---------------- */
.s-problem { padding: 14vh clamp(24px, 6vw, 90px); }
.pr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 70px); align-items: center; max-width: 1500px; margin: 0 auto; }
.pr-kick { font-size: 15px; color: var(--peach); letter-spacing: .18em; margin-bottom: 26px; }
.pr-hint { color: #fff; }
.pr-text { font-size: clamp(30px, 4.3vw, 76px); font-weight: 820; letter-spacing: -.045em; line-height: .92; text-transform: uppercase; }
.pr-line { opacity: .13; filter: blur(4px); transition: opacity .8s var(--ease), filter .8s var(--ease); }
.pr-line.on { opacity: 1; filter: none; }
.pr-text em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-meter { display: flex; align-items: center; gap: 12px; margin-top: 32px; max-width: 440px; }
.pr-meter .dotm { font-size: 12px; letter-spacing: .18em; color: var(--ink2); }
.pr-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pr-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff4d6d, #ffaa78); box-shadow: 0 0 16px rgba(255, 77, 109, .6); transition: width .6s var(--ease); }
.pr-left { font-size: 14px; min-width: 2ch; color: #ff8aa0; }
.is-done .pr-left { color: #3ddc84; }
.pr-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.pr-stage { position: relative; border-radius: 36px; padding: 58px clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: border-color .8s, box-shadow .8s; }
.pr-stage::before { content: 'FOR YOU  ▾'; white-space: pre; position: absolute; left: 24px; top: 22px; font: 400 12px/1 var(--dot, monospace); letter-spacing: .18em; color: var(--ink3); }
.pr-stage::after { content: ''; position: absolute; right: 24px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; }
.is-done .pr-stage { border-color: rgba(168, 85, 247, .5); box-shadow: 0 0 90px -20px rgba(168, 85, 247, .55); }
.is-done .pr-stage::before { content: 'LIVE ROOM  ·  EVERYONE’S HERE'; color: #fff; }
.is-done .pr-stage::after { background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.pr-people { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 12px; }
.pr-person { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: clamp(104px, 13vh, 140px); padding: 16px 6px; border-radius: 24px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); color: inherit; font: inherit; cursor: pointer; filter: grayscale(1) blur(2.5px); opacity: .5; transition: filter .9s var(--ease), opacity .9s var(--ease), background .4s, border-color .4s; }
.pr-person.clear { filter: none; opacity: 1; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.pr-person.clear:active { transform: scale(.96); }
.pr-person:focus-visible, .pr-chip:focus-visible, .mq-row:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pr-av { position: relative; width: clamp(44px, 4.6vw, 62px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: clamp(18px, 1.8vw, 24px); color: #fff; background: linear-gradient(135deg, var(--pc1), var(--pc2)); box-shadow: 0 10px 30px -10px var(--pc1); }
.pr-person.clear .pr-av { animation: pr-breathe 3.2s ease-in-out infinite; }
.pr-av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.pr-person.pinged .pr-av::after { animation: pr-pingring .9s ease-out; }
.pr-nm { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.pr-where { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; white-space: nowrap; }
.pr-where i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.pr-ping { position: absolute; left: 50%; top: 4px; translate: -50% 0; z-index: 4; padding: 6px 11px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; animation: pr-ping 1.6s var(--ease) forwards; }
.pr-noise { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pr-chip { position: absolute; translate: -50% -50%; pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.pr-chip > span { display: block; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: #fff; background: var(--k); box-shadow: 0 12px 30px -10px var(--k), inset 0 1px 0 rgba(255, 255, 255, .35); transform: rotate(var(--rot)); animation: pr-bob var(--t) ease-in-out var(--d) infinite; transition: scale .2s var(--spring); }
.pr-chip:active > span { scale: .9; }
.pr-chip.k-like { --k: #ff4d6d; }
.pr-chip.k-follow { --k: #4f7cff; }
.pr-chip.k-views { --k: #a855f7; }
.pr-chip.k-ad { --k: #f5c84c; } .pr-chip.k-ad > span { color: #1d1500; }
.pr-chip.k-algo { --k: #f4f2ff; } .pr-chip.k-algo > span { color: #121019; }
.pr-chip.k-bot { --k: #ff4d6d; } .pr-chip.k-bot > span { background: #17151f; color: #ff8aa0; border: 1px solid rgba(255, 77, 109, .7); font-family: var(--dot, monospace); font-weight: 400; letter-spacing: .06em; }
.pr-bit { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; pointer-events: none; z-index: 3; }
@keyframes pr-bob { 0%, 100% { transform: rotate(var(--rot)) translateY(0); } 50% { transform: rotate(calc(var(--rot) * -.6)) translateY(-7px); } }
@keyframes pr-breathe { 50% { transform: scale(1.06); } }
@keyframes pr-pingring { from { box-shadow: 0 0 0 0 var(--pc1); } to { box-shadow: 0 0 0 24px transparent; } }
@keyframes pr-ping { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@media (max-width: 860px) {
  .s-problem { padding: 12vh 20px; }
  .pr-wrap { grid-template-columns: minmax(0, 1fr); }
  .pr-text { font-size: clamp(30px, 8.6vw, 50px); }
  .pr-stage { border-radius: 28px; }
  .pr-people { gap: 8px; }
  .pr-person { min-height: 96px; border-radius: 18px; }
  .pr-where { font-size: 8.5px; letter-spacing: .08em; }
  .pr-chip > span { padding: 7px 10px; font-size: 11px; }
}

/* ---------------- taglines: tap a line, it whips the other way ---------------- */
.mq-row { cursor: pointer; }
.mq-row.mq-hit .mq-track { animation: mq-hit .8s var(--ease); }
.mq-outline.mq-hit .mq-track { animation: mq-fill .9s var(--ease); }
@keyframes mq-hit { 0% { filter: brightness(2.2) drop-shadow(0 0 22px rgba(255, 255, 255, .55)); } 100% { filter: none; } }
@keyframes mq-fill { 0% { color: #fff; } 100% { color: transparent; } }

/* ---------------- hero tap ripple, finale pulse ---------------- */
.hero-title { cursor: pointer; }
.tap-ring, .pulse-ring { position: fixed; z-index: 60; pointer-events: none; border-radius: 50%; }
.tap-ring { width: 260px; height: 260px; margin: -130px; border: 2px solid rgba(244, 242, 255, .7); }
.pulse-ring { width: 360px; height: 360px; margin: -180px; border: 3px solid #a855f7; }
.s-finale { cursor: pointer; }
.fin-hint { font-size: 11px; letter-spacing: .18em; color: var(--ink3); }

/* ---------------- Problem room: stats as 100 people, the glitching line, spot the bots ---------------- */
.c-waffle { justify-content: space-between; cursor: pointer; }
.wf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.c-waffle .st-odo { font-size: clamp(60px, 5.6vw, 100px); }
.wf-grid { --on: #ff4d6d; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: clamp(78px, 7vw, 104px); flex: none; margin-top: 6px; }
.wf-grid.tone-teal { --on: #3ddcc4; } .wf-grid.tone-blue { --on: #4f7cff; }
.wf-dot { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .25s var(--spring), box-shadow .25s; }
.wf-dot.hit { background: var(--on); box-shadow: 0 0 6px var(--on); }
.wf-grid.play .wf-dot.hit { animation: wf-in .5s var(--spring) both; animation-delay: calc(var(--k) * 11ms); }
.wf-dot.lit { transform: scale(1.9); box-shadow: 0 0 0 2px #fff; position: relative; z-index: 2; }
@keyframes wf-in { 0% { background: rgba(255, 255, 255, .14); box-shadow: none; transform: scale(.4); } 60% { transform: scale(1.5); } 100% { background: var(--on); transform: scale(1); } }
.wf-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; letter-spacing: .06em; color: var(--ink2); }
.wf-key span { display: inline-flex; align-items: center; gap: 6px; }
.wf-key span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.wf-key .k-hit::before { background: var(--on, #ff4d6d); }
.c-waffle:has(.tone-teal) .wf-key { --on: #3ddcc4; } .c-waffle:has(.tone-blue) .wf-key { --on: #4f7cff; }
.wf-tip { position: absolute; z-index: 5; translate: -50% calc(-100% - 10px); padding: 6px 10px; border-radius: 10px; background: rgba(14, 12, 22, .92); border: 1px solid rgba(255, 255, 255, .16); font-size: 11px; letter-spacing: .04em; color: #fff; white-space: nowrap; pointer-events: none; }
.wf-tip.hit { border-color: var(--pink); }
.c-waffle:focus-visible, .bs-p:focus-visible, .bs-shuffle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ln-text.glitch { cursor: pointer; }
.ln-text .lw { display: inline-block; transition: color .2s, text-shadow .2s; }
.ln-text .lw.on { color: #ff8aa0; text-shadow: 2px 0 #4f7cff, -2px 0 #ff4d6d; font-family: var(--dot); font-weight: 800; letter-spacing: 0; }
.ln-text em .lw.on { -webkit-text-fill-color: #ff8aa0; }
.ln-hint { margin-top: 14px; font-size: 11px; letter-spacing: .18em; color: var(--ink3); }

.c-botspot { gap: 16px; }
.bs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bs-kick { font-size: 11px; letter-spacing: .16em; color: var(--peach); }
.bs-title { margin-top: 8px; font-size: clamp(26px, 3vw, 42px); font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; line-height: .95; }
.bs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.bs-p { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 10px; row-gap: 6px; text-align: left; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: inherit; font: inherit; cursor: pointer; min-height: 132px; transition: background .3s, border-color .3s, transform .3s var(--ease); animation: bs-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.bs-p:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.bs-av { grid-row: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 90% 72%), hsl(calc(var(--h) + 40) 70% 45%)); }
.bs-av:empty { background: radial-gradient(circle at 50% 38%, #8b8798 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #8b8798 0 42%, transparent 43%), #3a3646; }
.bs-h { grid-row: 1; align-self: center; font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-post { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--ink2); }
.bs-tag { grid-column: 1 / -1; font-size: 10px; letter-spacing: .14em; min-height: 1em; }
.bs-p.is-bot { background: rgba(255, 77, 109, .14); border-color: rgba(255, 77, 109, .7); }
.bs-p.is-bot .bs-tag { color: #ff8aa0; }
.bs-p.is-bot .bs-post { text-decoration: line-through; text-decoration-color: rgba(255, 77, 109, .7); }
.bs-p.is-real { background: rgba(61, 220, 132, .1); border-color: rgba(61, 220, 132, .55); }
.bs-p.is-real .bs-tag { color: #3ddc84; }
.bs-p.called { cursor: default; }
.bs-status { font-size: 12px; letter-spacing: .1em; color: var(--ink2); min-height: 1.3em; }
.c-botspot.done .bs-status { color: #fff; }
.c-botspot.done { border-color: rgba(168, 85, 247, .5); box-shadow: 0 0 80px -24px rgba(168, 85, 247, .6); }
@keyframes bs-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (max-width: 1000px) { .bs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) {
  .bs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bs-p { min-height: 118px; padding: 12px; }
  .bs-head { flex-direction: column; align-items: flex-start; }
  .wf-grid { width: 92px; }
}
@media (prefers-reduced-motion: reduce) { .wf-grid.play .wf-dot.hit, .bs-p { animation: none; } }

/* ---------------- claim: create + confirm password ---------------- */
.pc-pw { gap: 12px; }
.pc-match { min-height: 1.2em; font-size: 11px; letter-spacing: .14em; color: var(--ink3); transition: color .3s; }
.pc-match.ok { color: #3ddc84; } .pc-match.bad { color: #ff8aa0; }
.pc .pc-set:disabled, .pc .pc-set[disabled] { opacity: .38; cursor: not-allowed; filter: saturate(.4); pointer-events: none; }

/* ---------------- portal: ••• account menu ---------------- */
.hub-more { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 58px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--edge); transition: background .3s, transform .4s var(--spring); }
.hub-more i { width: 6px; height: 6px; border-radius: 50%; background: #fff; transition: transform .45s var(--spring), background .3s; }
.hub-more:hover i:nth-child(1) { transform: translateY(-3px); } .hub-more:hover i:nth-child(3) { transform: translateY(3px); }
.hub-more.open { background: #fff; } .hub-more.open i { background: #0b0a10; }
.hub-more.open i:nth-child(1) { transform: translateX(11px) scale(.6); } .hub-more.open i:nth-child(3) { transform: translateX(-11px) scale(.6); }
.acct { position: fixed; inset: 0; z-index: 80; }
.acct-scrim { position: absolute; inset: 0; background: rgba(6, 5, 12, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; }
.acct-dot { position: fixed; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.acct-card { position: absolute; left: clamp(12px, 4vw, 48px); top: 76px; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 100px); overflow: auto; padding: 22px; border-radius: 30px; background: linear-gradient(160deg, rgba(48, 36, 110, .92), rgba(20, 16, 40, .96)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 100px -20px rgba(80, 40, 200, .55); display: flex; flex-direction: column; gap: 14px; }
.acct-head { display: flex; align-items: center; gap: 12px; }
.acct-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; background: var(--grad); flex: none; }
.acct-who { flex: 1; min-width: 0; } .acct-who b { display: block; font-size: 17px; } .acct-who small { display: block; color: var(--ink3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-x { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); flex: none; }
.acct-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 11px; letter-spacing: .14em; color: var(--ink2); padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); }
.acct-rows { display: flex; flex-direction: column; gap: 8px; }
.acct-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); text-align: left; color: inherit; transition: background .25s, transform .3s var(--ease); }
.acct-row:hover, .acct-row:focus-visible { background: rgba(255, 255, 255, .1); transform: translateX(4px); outline: none; }
.acct-ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(168, 85, 247, .18); color: #fff; flex: none; } .acct-ico svg { width: 22px; height: 22px; }
.acct-t { flex: 1; } .acct-t b { display: block; font-size: 15px; } .acct-t small { color: var(--ink3); font-size: 12px; }
.acct-row > i { font-style: normal; font-size: 22px; color: var(--ink3); }
.acct-pane { display: flex; flex-direction: column; gap: 12px; }
.acct-back { align-self: flex-start; }
.acct-msg { min-height: 1.2em; font-size: 11px; letter-spacing: .12em; color: var(--ink3); } .acct-msg.ok { color: #3ddc84; } .acct-msg.bad { color: #ff8aa0; }
.acct-pk-orb { position: relative; width: 120px; height: 120px; margin: 6px auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, .5), rgba(79, 124, 255, .15) 60%, transparent 70%); color: #fff; }
.acct-pk-orb svg { width: 56px; height: 56px; position: relative; z-index: 1; }
.acct-pk-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(168, 85, 247, .6); opacity: 0; }
.scanning .acct-pk-orb i { animation: pk-ring 1.6s ease-out infinite; } .scanning .acct-pk-orb i:nth-of-type(2) { animation-delay: .8s; }
.saved .acct-pk-orb { background: radial-gradient(circle at 35% 30%, rgba(61, 220, 132, .55), rgba(61, 220, 132, .12) 60%, transparent 70%); }
@keyframes pk-ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.acct-pk-lede { color: var(--ink2); font-size: 14px; line-height: 1.45; text-align: center; }

/* ---------------- zoom calls: Google Calendar + the Zoom link ---------------- */
.pill-ico { gap: 8px; } .pill-ico svg { width: 17px; height: 17px; flex: none; }
[data-zoom].on { background: #fff; color: #111; }
.call { flex-wrap: wrap; }
.call-link { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; background: rgba(0, 0, 0, .28); border: 1px dashed rgba(255, 255, 255, .18); }
.cl-k { font-size: 11px; letter-spacing: .16em; color: var(--peach); }
.cl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-url { flex: 1; min-width: 0; font-family: var(--dot); font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-wait .cl-url { color: var(--ink3); display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cl-wait .cl-url i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: cl-blink 1.2s ease-in-out infinite; } .cl-wait .cl-url i:nth-child(2) { animation-delay: .2s; } .cl-wait .cl-url i:nth-child(3) { animation-delay: .4s; margin-right: 6px; }
.cl-note { color: var(--ink2); font-size: 13px; }
@keyframes cl-blink { 50% { opacity: .2; } }

/* ---------------- flip cards (backer card, Demo Day ticket) + wallet ---------------- */
.flip { --rx: 0deg; --ry: 0deg; position: relative; cursor: pointer; perspective: 1200px; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); outline: none; }
.flip:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 30px; }
.flip-in { display: grid; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, 1.3, .4, 1); }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip .face { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; width: 100%; min-height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip .face.back { transform: rotateY(180deg); }
.bk-flip .bk-card { transform: none; } .bk-flip .bk-card.back { aspect-ratio: auto; }
.bk-cardwrap { display: flex; flex-direction: column; gap: 14px; }
.bk-card.back { justify-content: space-between; padding-top: 0; }
.bkb-stripe { display: block; align-self: stretch; height: clamp(40px, 8vw, 62px); margin: clamp(18px, 3vw, 30px) calc(-1 * clamp(18px, 3vw, 30px)) 0; background: rgba(8, 6, 16, .82); }
.bkb-body { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); }
.bkb-dots, .tkb-dots { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; padding: 8px; border-radius: 10px; background: #fff; flex: none; }
.bkb-dots { width: clamp(78px, 11vw, 112px); } .tkb-dots { width: 132px; }
.bkb-dots i, .tkb-dots i { aspect-ratio: 1; border-radius: 2px; background: transparent; } .bkb-dots i.on, .tkb-dots i.on { background: #0b0a10; }
.bkb-id { display: flex; flex-direction: column; gap: 4px; } .bkb-id b { font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; letter-spacing: .02em; }
.bkb-id .dotm, .bkb-perks { font-size: 10px; letter-spacing: .18em; color: rgba(255, 255, 255, .8); }
.tk-flip { width: min(680px, 100%); } .tk-flip .ticket { width: 100%; }
.tk-back { align-items: center; gap: 24px; padding: 26px; }
.tkb-code { display: flex; flex-direction: column; align-items: center; gap: 10px; } .tkb-code .dotm { font-size: 15px; }
.tkb-info h3 { margin-top: 6px; }
.wallet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wal { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 14px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .28); transition: transform .3s var(--spring), border-color .3s; }
.wal:hover { transform: translateY(-2px); border-color: #fff; } .wal:active { transform: scale(.96); }
.wal svg { width: 24px; height: 24px; flex: none; }
.wal span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; font-weight: 700; font-size: 15px; } .wal small { font-size: 10px; font-weight: 500; opacity: .8; }
.wal-note { flex-basis: 100%; font-size: 12px; color: var(--ink2); min-height: 0; }
.wal-note:empty { display: none; }
@media (max-width: 767px) { .tk-back { flex-direction: column; text-align: center; } }
@media (max-width: 560px) { .wal { flex: 1 1 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }

/* ---------------- phones: every tab on screen and tappable (no hidden sideways scroll) ---------------- */
@media (max-width: 767px) {
  .room-top { align-items: flex-start; }
  .room-tabs { flex-wrap: wrap; overflow: visible; border-radius: 24px; gap: 4px; max-width: calc(100% - 56px); }
  .room-tabs button { height: 38px; padding: 0 12px; font-size: 13px; gap: 6px; }
  .room-tabs button .dotm { font-size: 10px; }
  .hub-tabs { flex-wrap: wrap; overflow: visible; width: auto; border-radius: 26px; gap: 4px; }
  .hub-tabs button { height: 40px; padding: 0 13px; }
}
@media (max-width: 560px) {
  .cmp-map { margin: 30px 16px 24px; min-height: 330px; }
  .cmp-node { padding: 7px 10px; border-radius: 12px; }
  .cmp-node b { font-size: 12px; } .cmp-node .dotm { font-size: 8px; }
  .cmp-wavr { padding: 10px 14px; } .cmp-wavr b { font-size: 17px; }
  .cmp-table { padding: 0 18px 24px; }
  .cmp-a, .cmp-b { font-size: 14px; }
}
.pr-chip::after { content: ''; position: absolute; inset: -10px -6px; }   /* bigger tap area than the pill itself */
@media (max-width: 767px) {   /* thumb-sized controls in the portal */
  .wallet-row .linkbtn, .bkx-reset { min-height: 40px; display: inline-flex; align-items: center; }
  .bkx-seg button { min-height: 40px; }
  .tgl-row { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------------- Competition on phones: a tappable list, the comparison opens under the app ---------------- */
.cmp-picker { display: none; flex-direction: column; gap: 8px; padding: 18px 16px; }
.cmp-pk-wavr { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; background: var(--grad); box-shadow: 0 18px 50px -12px rgba(168, 85, 247, .6); }
.cmp-pk-wavr .dotm { font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .85); }
.cmp-pk-wavr b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.cmp-pk-hint { margin: 8px 2px 2px; font-size: 10px; letter-spacing: .16em; color: var(--ink3); }
.cmp-pk { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; border-radius: 18px; text-align: left; color: inherit; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .25s, border-color .25s; }
.cmp-pk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-pk-t .dotm { font-size: 10px; letter-spacing: .12em; color: var(--ink3); }
.cmp-pk-t b { font-size: 16px; font-weight: 800; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cmp-tags i { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--ink2); }
.cmp-pk-wavr .cmp-tags i { background: rgba(255, 255, 255, .22); color: #fff; }
.cmp-pk em { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: 18px; transition: transform .35s var(--spring), background .25s; flex: none; }
.cmp-pk.sel { background: #fff; color: #111; border-color: #fff; border-radius: 18px 18px 6px 6px; }
.cmp-pk.sel .cmp-pk-t .dotm { color: #666; } .cmp-pk.sel .cmp-tags i { background: rgba(0, 0, 0, .08); color: #333; }
.cmp-pk.sel em { transform: rotate(45deg); background: #111; color: #fff; }
@media (max-width: 767px) {
  .cmp-map { display: none; }
  .cmp-picker { display: flex; }
  .cmp .cmp-table { display: none; }
  .cmp.picked .cmp-table { display: flex; margin: -4px 0 4px; padding: 16px 16px 18px; border-radius: 6px 6px 18px 18px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); }
  .cmp .cmp-hint { display: none; }
}

/* ---------------- portal menu: sections, account, log out, leave ---------------- */
.hub-more-l { display: none; }
.acct-nav, .acct-sec, .acct-foot { display: none; }   /* larger screens keep the tab bar, Log out and ✕ in the header */
.acct-nav { flex-direction: column; gap: 6px; }
.acct-tab { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 18px; text-align: left; color: inherit; font-size: 16px; font-weight: 700; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .25s, transform .3s var(--ease); }
.acct-tab .dotm { font-size: 11px; color: var(--ink3); min-width: 2ch; }
.acct-tab .lock { font-style: normal; display: inline-flex; margin-left: 2px; } .acct-tab .lock svg { width: 15px; height: 15px; }
.acct-tab > i { margin-left: auto; font-style: normal; font-size: 20px; color: var(--ink3); }
.acct-tab:active { transform: scale(.98); }
.acct-tab.on { background: #fff; color: #0b0a10; border-color: #fff; } .acct-tab.on .dotm, .acct-tab.on > i { color: #555; }
.acct-tab.on[data-acct-tab="backers"] { background: linear-gradient(120deg, #4f7cff, #a855f7 55%, #ff4d6d); color: #fff; border-color: transparent; }
.acct-tab.on[data-acct-tab="backers"] .dotm, .acct-tab.on[data-acct-tab="backers"] > i { color: rgba(255, 255, 255, .85); }
.acct-sec { margin: 6px 2px 0; font-size: 10px; letter-spacing: .18em; color: var(--ink3); }
.acct-foot { gap: 10px; margin-top: auto; padding-top: 6px; }
.acct-foot .pillbtn { flex: 1; justify-content: center; height: 48px; }
.acct-leave { background: rgba(255, 255, 255, .14); }
@media (max-width: 767px) {
  .hub-top .hub-tabs, .hub-tabs, .hub-logout, .hub-top .back { display: none !important; }
  .hub-more { width: auto; height: 44px; padding: 0 16px 0 14px; gap: 5px; margin-left: auto; }
  .hub-more-l { display: inline; margin-left: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .hub-more.open .hub-more-l { color: #0b0a10; }
  .acct.drawer .acct-card { left: 0; top: 0; bottom: 0; width: min(88vw, 380px); max-height: none; height: 100%; border-radius: 0 30px 30px 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); gap: 12px; }
  .acct.drawer .acct-nav, .acct.drawer .acct-sec { display: flex; }
  .acct.drawer .acct-sec { display: block; }
  .acct.drawer .acct-foot { display: flex; }
  .acct.drawer .acct-nav[hidden], .acct.drawer .acct-sec[hidden], .acct.drawer .acct-foot[hidden] { display: none; }
  .acct-row { min-height: 60px; }
}
@media (max-width: 560px) {
  .wal { padding: 0 12px; } .wal span { white-space: nowrap; font-size: 14px; }
  .wallet-row .linkbtn { flex-basis: 100%; justify-content: center; }
}

/* ---- production portal: live data states (API-backed hub, claim security check) ---- */
#ts-host { position: fixed; left: 50%; bottom: calc(20px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 10000; }
#ts-host:empty { display: none; }
.auth-note { color: var(--ink3); font-size: 13px; line-height: 1.45; }
.hb-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hb-statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
.hb-statrow > div { display: flex; flex-direction: column; gap: 4px; }
.hb-statrow b { font: 800 clamp(28px, 4vw, 44px)/1 var(--dot); color: #fff; }
.hb-statrow .dotm { font-size: 11px; color: var(--ink3); letter-spacing: .12em; }
.hub-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ff4d6d; color: #fff; font: 800 11px/20px var(--sans); font-style: normal; text-align: center; }
.sig-list { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sig { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sig-h { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; }
.sig-body { color: var(--ink2); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.sig-media { width: 100%; max-height: 70vh; border-radius: 20px; background: #000; object-fit: contain; }
.sig-new { padding: 2px 8px; border-radius: 999px; background: #ff4d6d; color: #fff; }
.sig-lock { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 14px; }
.sig-lock .lock-ico { width: 18px; height: 18px; }
.sig-pulse.on { background: rgba(168, 85, 247, .3); border-color: rgba(168, 85, 247, .6); }
.drop-ph { object-fit: contain !important; padding: 22%; background: #15122b; }
.drop-prog { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 10px; }
.drop-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f7cff, #a855f7, #ff4d6d); }
.drop-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.drop-sizes .opt { height: 34px; padding: 0 12px; font-size: 13px; }
.drop-msg, .demo-msg, .call-msg { padding: 0 8px; color: #ff9db0; }
.drop-msg:empty, .demo-msg:empty, .call-msg:empty { display: none; }
.tk-qr { width: 132px; min-height: 132px; padding: 8px; border-radius: 10px; background: #fff; color: #0b0a10; display: grid; place-items: center; text-align: center; }
.tk-qr img, .tk-qr canvas { width: 100% !important; height: auto !important; }
.tk-qr .dotm { font-size: 10px !important; color: #0b0a10; }
.bkb-body .tk-qr { width: clamp(88px, 12vw, 120px); min-height: 0; }

/* ============ phone edition: thumbs, swipes and sheets (desktop untouched) ============ */
.m-only { display: none; }
.m-dock, .m-deckbar, .m-pager, .m-scrim { display: none; }
@media (max-width: 767px) {
  .m-only { display: inline; }
  .d-only { display: none; }
  .top-actions .cta-mini { display: none; }

  /* dock */
  .m-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 25; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 999px; background: rgba(18, 14, 34, .62); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform: translateY(calc(100% + 30px)); transition: transform .55s var(--ease); }
  .m-dock.on { transform: none; }
  body:not([data-view="walk"]) .m-dock, body.menu-open .m-dock { transform: translateY(calc(100% + 30px)); }
  .md-btn { flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); -webkit-tap-highlight-color: transparent; transition: transform .2s, background .2s; }
  .md-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
  .md-join { flex: 1; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--grad); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; transition: transform .2s; }
  .md-orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .35) 45%, transparent 70%); box-shadow: 0 0 12px #fff; animation: mdPulse 2.4s ease-in-out infinite; }
  .md-btn:active, .md-join:active { transform: scale(.94); }
  @keyframes mdPulse { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
  .foot { padding-bottom: calc(100px + var(--safe-b)); }

  /* rooms: a swipe deck */
  .rooms-pin { padding: 70px 0 90px; }
  .rooms-head { padding: 0 20px; }
  .s-rooms .cards { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 10vw; padding: 22px 10vw 14px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .s-rooms .cards::-webkit-scrollbar { display: none; }
  .s-rooms .room-card { flex: 0 0 80vw; width: 80vw; min-width: 0; max-width: 360px; height: min(56svh, 480px); min-height: 360px; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; padding: 24px 22px 22px; border-radius: 32px; justify-content: flex-start; gap: 10px; border-top: 0 !important; transform: scale(.9); opacity: .5; transition: transform .45s var(--ease), opacity .45s; }
  .s-rooms .room-card.is-active { transform: scale(1); opacity: 1; }
  .s-rooms .room-card .rc-shell { opacity: 1 !important; }
  .s-rooms .room-card.is-active .rc-shell { border-color: rgba(255, 255, 255, .28); background: linear-gradient(170deg, rgba(110, 96, 230, .3), rgba(168, 85, 247, .14) 60%, rgba(255, 77, 109, .12)); }
  .s-rooms .room-card .rc-viz { display: flex; margin-top: auto; font-size: 14px; }
  .s-rooms .room-card .rc-viz .viz-big { font-size: 64px; }
  .s-rooms .room-card .rc-title { font-size: 16px; opacity: .85; max-width: none; }
  .s-rooms .room-card .rc-open { position: static !important; align-self: stretch; justify-content: center; height: 48px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; opacity: .0; transition: opacity .35s; display: flex; align-items: center; gap: 6px; }
  .s-rooms .room-card.is-active .rc-open { opacity: 1; }
  .m-deckbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0; }
  .m-dots { display: flex; gap: 6px; }
  .m-dots button { width: 7px; height: 7px; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .28); transition: width .35s var(--ease), background .35s; position: relative; }
  .m-dots button::after { content: ''; position: absolute; inset: -12px -4px; }
  .m-dots button[aria-selected="true"] { width: 22px; background: #fff; }
  .m-count { font-size: 12px; color: var(--ink3); }
  .m-count b { color: #fff; font-weight: 400; }

  /* an opened room is a sheet */
  .room-panel::before { content: ''; position: absolute; z-index: 6; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: rgba(255, 255, 255, .38); }
  .room-panel { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: 0; }
  .room-scroll { padding-top: 22px; padding-bottom: calc(110px + var(--safe-b)); overscroll-behavior: contain; }
  .room-top { justify-content: flex-end; margin-bottom: 8px; }
  .room-top .back { width: 40px; height: 40px; }
  .room-tabs { position: absolute; z-index: 8; left: 12px; right: 12px; bottom: calc(84px + var(--safe-b)); max-width: none !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; padding: 10px !important; border-radius: 26px !important; background: rgba(20, 16, 38, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
  .room-tabs button { height: 50px !important; justify-content: flex-start; font-size: 15px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .06); }
  .picker-open .room-tabs { opacity: 1; transform: none; pointer-events: auto; }
  .m-scrim { display: block; position: absolute; inset: 0; z-index: 7; background: rgba(6, 5, 12, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .picker-open .m-scrim { opacity: 1; pointer-events: auto; }
  .m-pager { display: flex; position: absolute; z-index: 9; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); gap: 8px; padding: 6px; border-radius: 999px; background: rgba(14, 11, 28, .78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .14); }
  .m-pager button { height: 50px; border-radius: 999px; color: #fff; -webkit-tap-highlight-color: transparent; transition: transform .2s, background .2s; }
  .m-pager button:active { transform: scale(.94); }
  .mp-prev, .mp-next { flex: 0 0 50px; font-size: 26px; line-height: 1; background: rgba(255, 255, 255, .08); }
  .mp-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .12); font-weight: 700; font-size: 15px; }
  .mp-num { font-size: 11px; color: var(--ink3); font-weight: 400; }
  .mp-mid i { font-style: normal; font-size: 11px; opacity: .7; transition: transform .3s; }
  .picker-open .mp-mid i { transform: rotate(180deg); }
}