/* ============ Variant C · The Lab Board ============ */
:root {
  --bg: #f6f3fb;
  --surface: #ffffff;
  --surface-2: #f6f1fc;
  --text: #150c22;
  --muted: #685b7e;
  --line: rgba(21,12,34,.12);
  --violet: #5000ff;
  --magenta: #ff00c8;
  --grad: linear-gradient(90deg, #5000ff, #a000f0 50%, #ff00c8);
  --paper: #fffdf7;
  --ink: #140d20;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sans: "Poppins", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ Viewport & world ============ */
.viewport {
  position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(21,12,34,.13) 1.2px, transparent 1.4px);
  background-size: 32px 32px;
  outline: none;
}
.viewport.is-panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.wires { position: absolute; left: -4000px; top: -4000px; width: 8000px; height: 8000px; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: url(#wg); stroke-width: 2.5; stroke-dasharray: 8 10; opacity: .55; animation: march 1.6s linear infinite; }
.wires circle { fill: var(--bg); stroke: var(--magenta); stroke-width: 2.5; }
.wires text { fill: var(--muted); font: 500 13px var(--mono); letter-spacing: .08em; }
@keyframes march { to { stroke-dashoffset: -36; } }

.zone {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  padding: 34px 36px 40px; border-radius: 28px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .5s, box-shadow .5s;
}
.zone.is-current { border-color: rgba(255,0,200,.55); box-shadow: 0 0 0 6px rgba(160,0,240,.12), 0 40px 120px -40px rgba(160,0,240,.6); }
.tag { color: var(--magenta); margin: 0 0 14px; }
.zone__h { font-size: 2.6rem; line-height: 1.06; font-weight: 800; letter-spacing: -.035em; margin: 0 0 26px; max-width: 22ch; }
.zone__p { color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
.zone__p b { color: var(--text); }

/* grabbable things */
.grab { cursor: grab; rotate: var(--r, 0deg); transition: rotate .4s var(--ease), box-shadow .4s, scale .3s var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
.grab:hover { scale: 1.03; }
.grab.is-held { cursor: grabbing; rotate: 0deg; scale: 1.07; z-index: 50; box-shadow: 0 50px 80px -20px rgba(40,10,80,.28); }
.grab img { pointer-events: none; -webkit-user-drag: none; }
.grab::before { /* tape */
  content: ""; position: absolute; left: 50%; top: -12px; width: 76px; height: 24px; translate: -50% 0; rotate: -3deg;
  background: rgba(255, 236, 170, .75); backdrop-filter: blur(2px); border-left: 1px dashed rgba(150,110,20,.35); border-right: 1px dashed rgba(150,110,20,.35); z-index: 2;
}
.scribble { font-family: var(--hand); font-size: 2.1rem; color: #c0008f; margin: 0; line-height: 1.1; }

/* ============ Hero ============ */
.z-hero { text-align: center; padding: 48px 56px 54px; background: rgba(255,255,255,.94); }
.hero__logo { width: 120px; margin: 4px auto 18px; }
.hero__h { font-size: 4.2rem; line-height: 1; letter-spacing: -.045em; font-weight: 900; margin: 0 auto 18px; max-width: 14ch; }
.hero__p { color: var(--muted); font-size: 1.15rem; max-width: 48ch; margin: 0 auto 28px; }
.hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn { padding: 14px 24px; border-radius: 999px; font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.btn--grad { color: #fff; background: var(--grad); box-shadow: 0 12px 40px -10px rgba(255,0,200,.7); }
.btn--grad:hover { transform: translateY(-2px); }
.btn--ghost { border: 1px solid rgba(21,12,34,.3); }
.btn--ghost:hover { background: rgba(21,12,34,.08); }
.scribble--hero { position: absolute; left: -210px; top: 46%; rotate: -8deg; }

/* ============ Problem ============ */
.note { border-radius: 4px; padding: 22px 24px; position: relative; }
.note--big { background: var(--paper); color: var(--ink); display: flex; align-items: center; gap: 22px; rotate: -1.5deg; box-shadow: 0 30px 60px -25px rgba(40,10,80,.25); margin-bottom: 20px; }
.note--big p { font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.note--big b { color: var(--magenta); }
.big70 { font-size: 7.5rem; font-weight: 900; letter-spacing: -.06em; line-height: .85; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.clip { margin: 0; background: #fff; padding: 6px; border-radius: 4px; box-shadow: 0 20px 40px -20px rgba(40,10,80,.28); }

/* ============ Talent ============ */
.polaroids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.polaroid { margin: 0; background: var(--paper); color: var(--ink); padding: 12px 12px 16px; border-radius: 4px; box-shadow: 0 30px 50px -25px rgba(40,10,80,.3); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { font-family: var(--hand); font-size: 1.5rem; line-height: 1.05; padding-top: 10px; display: grid; }
.polaroid figcaption b { font-weight: 700; font-size: 1.7rem; }
.polaroid figcaption span { font-size: 1.15rem; color: #5a4e6e; }
.scribble--talent { margin-top: 26px; font-size: 2.4rem; text-align: right; }

/* ============ Story ============ */
.story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.note--grad { color: #fff; background: var(--grad); font-size: 1.35rem; line-height: 1.3; font-weight: 300; border-radius: 18px; }
.note--grad b { font-weight: 800; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.phone { margin: 0; }
.phone img { aspect-ratio: 9 / 19.5; object-fit: cover; border-radius: 22px; border: 5px solid #150c22; }
.phone figcaption { text-align: center; margin-top: 8px; color: var(--muted); }
.phone::before { display: none; }

/* ============ Results ============ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; }
.stat--hot { background: var(--grad); border-color: transparent; color: #fff; }
.stat__brand { color: var(--muted); }
.stat--hot .stat__brand { color: rgba(255,255,255,.8); }
.stat__n { font-size: 2.6rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__l { color: var(--muted); font-size: .95rem; }
.stat--hot .stat__l { color: #fff; }
.receipts { display: flex; gap: 20px; align-items: flex-start; margin-top: 30px; }
.receipt { margin: 0; width: 150px; background: #fff; padding: 6px; border-radius: 6px; box-shadow: 0 24px 40px -20px rgba(40,10,80,.28); }
.receipt img { border-radius: 3px; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.receipt--wide { width: 320px; }
.receipt--wide img { aspect-ratio: 16 / 9; }

/* ============ Ventures ============ */
.vents { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.vent { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px 22px; }
.vent h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 8px; line-height: 1.1; }
.vent p { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }
.vent__tag { color: var(--magenta); }
.vent__media { position: relative; border-radius: 14px; margin-bottom: 16px; aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 60%, #eef7f5, #bfe0d8); }
.vent__product { width: 80%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.vent__clip { position: absolute; right: -12px; bottom: -16px; width: 46%; }
.vent__media--aph { background: #000; overflow: hidden; }
.vent__media--aph img { width: 100%; height: 100%; object-fit: cover; }
.vent__stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.vent__stats b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.vent__stats span { color: var(--muted); font-size: .9rem; }
.vent__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; color: var(--muted); }
.vent__list li { padding: 10px 12px; border-radius: 12px; background: rgba(21,12,34,.04); }
.vent__list b { display: block; color: var(--text); }
.vent--next { grid-column: 1 / -1; background: transparent; border-style: dashed; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 26px; }
.vent--next > .vent__tag, .vent--next > h3 { grid-column: 1 / -1; }
.nextcard .pipe__visual { margin: 0; border-radius: 2px; }
.nextcard .pouch { max-width: 62%; }
.sticky--next { min-height: 0; }

/* ============ Mindset ============ */
.swap { display: inline-grid; vertical-align: bottom; }
.swap > span { grid-area: 1 / 1; transition: opacity .5s, transform .7s var(--ease); }
.swap__a { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--magenta); }
.swap__b { opacity: 0; transform: translateY(60%); }
.z-mindset.is-creator .swap__a { opacity: 0; transform: translateY(-60%); }
.z-mindset.is-creator .swap__b { opacity: 1; transform: none; }
.toggle { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; margin-bottom: 28px; color: var(--muted); }
.toggle__track { width: 96px; height: 50px; border-radius: 999px; background: rgba(21,12,34,.08); border: 1px solid var(--line); position: relative; transition: background .5s; }
.toggle__knob { position: absolute; left: 4px; top: 4px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; transition: transform .6s var(--ease); }
.toggle[aria-checked="true"] .toggle__track { background: var(--grad); }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(46px) rotate(360deg); }
.note--paper { background: var(--paper); color: var(--ink); margin: 0; rotate: 1deg; box-shadow: 0 30px 60px -25px rgba(40,10,80,.25); }
.note--paper p { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; }
.note--paper .note__tr { font-family: var(--hand); font-size: 1.6rem; font-weight: 500; color: #5a3e8a; line-height: 1.1; }
.note--paper footer { color: var(--magenta); }

/* ============ Services ============ */
.stickies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sticky { padding: 18px 18px 22px; border-radius: 4px; color: #fff; background: linear-gradient(150deg, #5000ff, #a000f0); box-shadow: 0 24px 40px -20px rgba(40,10,80,.28); min-height: 190px; }
.sticky:nth-child(even) { background: linear-gradient(150deg, #a000f0, #ff00c8); }
.sticky:nth-child(3n) { background: linear-gradient(150deg, #ff00c8, #ff5ad9); }
.sticky--wide { grid-column: span 3; min-height: 0; background: var(--paper) !important; color: var(--ink); }
.sticky .mono { opacity: .8; }
.sticky h3 { hyphens: auto; overflow-wrap: break-word; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; margin: 8px 0 8px; }
.sticky p { margin: 0; font-size: .92rem; opacity: .92; }
.sticky::before { display: none; }

/* ============ Events ============ */
.evs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; }
.polaroid--wide img { aspect-ratio: 3 / 2; }
.evs .polaroid:nth-child(2) img { aspect-ratio: 3 / 4; }

/* ============ Vision / mission ============ */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.index-card { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 26px; background-image: repeating-linear-gradient(transparent 0 31px, rgba(80,0,255,.13) 31px 32px); background-position: 0 58px; box-shadow: 0 30px 60px -25px rgba(40,10,80,.25); }
.index-card:nth-child(1) { rotate: -1.5deg; }
.index-card:nth-child(2) { rotate: 1.5deg; }
.index-card h3 { color: var(--magenta); margin: 0 0 12px; font-size: .8rem; }
.index-card p { margin: 0; font-family: var(--hand); font-size: 1.7rem; line-height: 32px; font-weight: 500; }

/* ============ Team ============ */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.badge { background: var(--paper); color: var(--ink); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .5s var(--ease); }
.badge::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 8px; translate: -50% 0; border-radius: 6px; background: rgba(20,13,32,.85); z-index: 2; }
.badge:hover { transform: translateY(-6px) rotate(-1deg); }
.badge img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; background: #222; }
.badge__b { padding: 16px 18px 20px; border-top: 6px solid; border-image: var(--grad) 1; }
.badge__b .mono { color: var(--violet); font-size: .62rem; }
.badge h3 { font-size: 1.35rem; font-weight: 900; text-transform: uppercase; font-style: italic; letter-spacing: -.03em; margin: 4px 0 8px; line-height: 1.05; }
.badge p { margin: 0; font-size: .84rem; color: #4a405c; line-height: 1.5; }

/* ============ Contact ============ */
.contact { color: #fff; background: var(--grad); border-radius: 22px; padding: 30px 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; overflow: hidden; }
.contact__h { grid-column: 1 / -1; font-size: 3.2rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; margin: 0 0 10px; }
.contact__list { list-style: none; margin: 0; padding: 0 0 26px; display: grid; gap: 4px; align-self: center; }
.contact__list li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.4); }
.contact__list .mono { opacity: .75; }
.contact__list a { text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.contact__list a:hover { text-decoration: underline; }
.contact__team { align-self: end; }
.contact__foot { color: var(--muted); margin: 16px 0 0; }

/* ============ Chrome ============ */
.chrome { position: fixed; z-index: 30; pointer-events: none; }
.chrome > * { pointer-events: auto; }
.chrome--top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.brand img { width: 26px; }
.brand i { font-style: normal; color: var(--muted); letter-spacing: .04em; }
.chrome__right { display: flex; gap: 8px; align-items: center; }
.pill { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.pill[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; }
.variants { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.variants a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); text-decoration: none; }
.variants a[aria-current] { background: var(--grad); color: #fff; }

.tour { position: fixed; z-index: 30; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(40,10,80,.28); }
.tour__btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(21,12,34,.07); font-size: 1.1rem; transition: background .3s; }
.tour__btn:hover { background: var(--grad); color: #fff; }
.tour__label { min-width: 170px; display: grid; text-align: center; padding: 0 8px; line-height: 1.2; }
.tour__n { color: var(--magenta); font-size: .64rem; }
.tour__t { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.tour__all { padding: 0 14px; height: 44px; border-radius: 999px; border-left: 1px solid var(--line); color: var(--muted); }
.tour__all:hover { color: var(--text); }

.map { position: fixed; z-index: 30; right: 18px; bottom: 18px; display: grid; gap: 6px; justify-items: end; }
.map__box { width: 180px; height: 120px; border-radius: 14px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); position: relative; overflow: hidden; cursor: pointer; }
.map__z { position: absolute; border-radius: 2px; background: rgba(160,0,240,.45); }
.map__z.is-current { background: var(--magenta); }
.map__view { position: absolute; border: 1.5px solid var(--text); border-radius: 3px; box-shadow: 0 0 0 999px rgba(21,12,34,.08); pointer-events: none; z-index: 2; }
.map__zoom { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.88); border: 1px solid var(--line); }
.map__zoom button { width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; }
.map__zoom button:hover { background: rgba(21,12,34,.1); }
.map__pct { width: 46px; text-align: center; color: var(--muted); }

.hint { position: fixed; z-index: 31; left: 50%; top: 74px; translate: -50% 0; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.88); border: 1px solid rgba(255,0,200,.4); color: #b0007f; box-shadow: 0 10px 30px -12px rgba(80,0,255,.3); white-space: nowrap; transition: opacity .6s, translate .6s var(--ease); }
.hint.is-gone { opacity: 0; translate: -50% -20px; pointer-events: none; }
.hint--touch { display: none; }
@media (hover: none) { .hint--fine { display: none; } .hint--touch { display: inline; } }

@media (max-width: 760px) {
  .brand span { display: none; }
  .brand { padding: 8px 10px; }
  .stat__n { font-size: 2rem; }
  .map { display: none; }
  .tour { bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 28px); justify-content: space-between; }
  .tour__label { min-width: 0; flex: 1; }
  .tour__all { display: none; }
  .hint { white-space: normal; text-align: center; width: calc(100% - 32px); border-radius: 16px; }
}

/* ============ List view (also the no-JS / reduced-motion fallback) ============ */
body.is-list { overflow: auto; }
body.is-list .viewport { position: static; overflow: visible; touch-action: auto; cursor: auto; background-size: 32px 32px !important; background-position: 0 0 !important; min-height: 100vh; padding: 90px 16px 110px; }
body.is-list .world { position: static; transform: none !important; width: auto; height: auto; display: grid; gap: 28px; max-width: 1000px; margin: 0 auto; }
body.is-list .zone { position: relative; left: auto; top: auto; width: auto; }
body.is-list .wires, body.is-list .map, body.is-list .hint, body.is-list .scribble--hero { display: none; }
body.is-list .grab { transform: none !important; }
body.is-list .hero__cta .btn--ghost { display: none; }
@media (max-width: 760px) {
  body.is-list .zone { padding: 24px 18px 28px; }
  body.is-list .hero__h { font-size: 2.6rem; }
  body.is-list .zone__h { font-size: 1.9rem; }
  body.is-list .polaroids, body.is-list .stats, body.is-list .stickies, body.is-list .badges, body.is-list .cards2, body.is-list .story, body.is-list .evs, body.is-list .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-list .sticky--wide, body.is-list .contact__h { grid-column: 1 / -1; }
  body.is-list .story > div:first-child, body.is-list .cards2 > *, body.is-list .contact__list { grid-column: 1 / -1; }
  body.is-list .stickies, body.is-list .vents, body.is-list .vent--next { grid-template-columns: 1fr; }
  body.is-list .sticky { min-height: 0; }
  body.is-list .receipts { flex-wrap: wrap; }
  body.is-list .receipt--wide { width: 100%; }
  body.is-list .note--big { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Light theme: logo files are white PNGs */
.brand img, .hero__logo { filter: brightness(0); }
.zone { box-shadow: 0 30px 80px -40px rgba(80,0,255,.25); }
.nextcard .pouch__logo { width: 62%; aspect-ratio: auto; object-fit: contain; }
.nextcard .pipe__visual--cream img { aspect-ratio: auto; height: 100%; }