[hidden] { display: none !important; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Medium.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Semibold.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 400 600; font-display: swap; }

:root {
  --ink: #0f1011;
  --ink-2: #2a2a33;
  --muted: #5a5a68;
  --purple: #6536ff;
  --purple-2: #8054ff;
  --deep: #4927b8;
  --deeper: #1d0f57;
  --night: #0d0a24;
  --lilac: #dddafa;
  --lilac-2: #baa5ff;
  --cyan: #47c8f5;
  --green: #0b6646;
  --green-bg: #e3f6ee;
  --green-glow: #2fd393;
  --amber: #8a4f00;
  --amber-bg: #fff2d9;
  --red: #a32f29;
  --wrap: 1240px;
  --gut: clamp(18px, 4vw, 48px);
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 1.55; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--deep); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- shared ---------- */
.label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); margin-bottom: 18px; }
.label.light { color: var(--lilac-2); }
h2 { font-weight: 600; font-size: clamp(38px, 4.4vw + 12px, 76px); line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.lead { font-size: clamp(18px, 0.5vw + 16px, 21px); color: var(--muted); line-height: 1.5; max-width: 44ch; margin-top: 22px; }
.muted { color: #9b98ad; }
.muted-light { color: #a89fe0; }
.grad { background: linear-gradient(95deg, var(--purple-2), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.take .grad { background: linear-gradient(95deg, var(--purple), #2a9fd0); -webkit-background-clip: text; background-clip: text; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16.5px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform 220ms var(--spring), box-shadow 220ms, background 200ms; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--purple); color: #fff; box-shadow: 0 10px 30px -10px rgba(101,54,255,0.8); }
.btn-white { background: #fff; color: var(--deep); box-shadow: 0 14px 40px -12px rgba(0,0,0,0.45); }
.btn-glass { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,0.2); }
.btn-glass small { font-family: var(--mono); font-size: 12px; opacity: 0.75; font-weight: 500; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.play { width: 26px; height: 26px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.play::after { content: ''; position: absolute; left: 10px; top: 7px; border-left: 9px solid var(--purple); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

.tf-av { width: 26px; height: 26px; border-radius: 8px; background: var(--deep) url('../icons/twin--purple.svg') center/125%; flex: none; }
.tf-av.big { width: 42px; height: 42px; border-radius: 12px; }
.ok, .wait { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; position: relative; }
.ok { background: var(--green-bg); }
.ok::after { content: ''; width: 8px; height: 4px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg) translate(1px, -1px); }
.wait { background: var(--amber-bg); }
.wait::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e09a1a; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; transition: background 300ms, box-shadow 300ms, color 300ms; color: #fff; }
.nav.solid { background: rgba(255,255,255,0.88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 rgba(20,10,60,0.08); color: var(--ink); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: inline-flex; min-height: 44px; align-items: center; }
.brand img { height: 28px; width: auto; filter: brightness(0) invert(1); transition: filter 300ms; }
.nav.solid .brand img { filter: none; }
.nav.solid.on-dark { background: rgba(13,10,36,0.72); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.nav.solid.on-dark .brand img { filter: brightness(0) invert(1); }
.nav.solid.on-dark .nav-links a:hover, .nav.solid.on-dark .signin:hover { background: rgba(255,255,255,0.12); }
.nav-links { display: flex; gap: 6px; margin-right: auto; }
.nav-links a, .signin { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 10px; }
.nav-links a:hover, .signin:hover { background: rgba(255,255,255,0.12); }
.nav.solid .nav-links a:hover, .nav.solid .signin:hover { background: #f1eeff; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid currentColor; background: transparent; cursor: pointer; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.menu-btn span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.mobile-menu { display: none; }
@media (max-width: 960px) {
  .nav-links, .signin, .nav-cta .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-in { justify-content: space-between; }
  .mobile-menu[data-open='true'] { display: grid; gap: 4px; position: fixed; inset: 72px 0 auto; background: #fff; color: var(--ink); padding: 16px var(--gut) 28px; box-shadow: 0 30px 60px -20px rgba(20,10,60,0.3); }
  .mobile-menu a:not(.btn) { font-size: 22px; font-weight: 600; text-decoration: none; padding: 12px 0; border-bottom: 1px solid #eee; }
  .mobile-menu .btn { margin-top: 16px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; text-align: center; overflow: hidden;
  padding-top: clamp(120px, 13vw, 160px);
  background: linear-gradient(180deg, var(--night) 0%, var(--deeper) 18%, var(--deep) 42%, #8a6bf8 62%, #b6a3fd 76%, #e9e3ff 90%, #fff 100%);
}
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 18%, rgba(71,200,245,0.25), transparent 70%),
    radial-gradient(35% 28% at 82% 26%, rgba(128,84,255,0.45), transparent 70%);
  animation: glow 12s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translateY(30px) scale(1.06); opacity: 0.85; } }
.hero-copy { position: relative; z-index: 2; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green-glow); box-shadow: 0 0 0 0 rgba(47,211,147,0.7); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(47,211,147,0); } 100% { box-shadow: 0 0 0 0 rgba(47,211,147,0); } }
.hero h1 { margin-top: 26px; font-weight: 600; font-size: clamp(48px, 8vw + 8px, 128px); line-height: 0.92; letter-spacing: -0.055em; }
.hero h1 em { font-style: normal; background: linear-gradient(95deg, #c9b8ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 28px auto 0; max-width: 620px; font-size: clamp(18px, 0.6vw + 15px, 22px); line-height: 1.5; color: #ddd6ff; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

.hero-stage { position: relative; z-index: 1; width: min(1180px, 100%); margin: clamp(20px, 3vw, 40px) auto 0; }
.hero-team { width: 100%; height: auto; aspect-ratio: 1.9 / 1; object-fit: cover; object-position: 50% 58%;
  -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 46%, #000 58%, transparent 98%); mask-image: radial-gradient(ellipse 50% 58% at 50% 46%, #000 58%, transparent 98%); }
.twin-float { position: absolute; width: 270px; text-align: left; color: var(--ink); background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.9); border-radius: 18px; padding: 14px 16px; box-shadow: 0 30px 60px -24px rgba(29,15,87,0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: bob 6s ease-in-out infinite; }
.twin-float.f1 { left: 1%; top: 34%; }
.twin-float.f2 { left: 50%; top: 4%; transform: translateX(-50%); animation-name: bob-c; animation-delay: -2s; }
.twin-float.f3 { right: 1%; top: 42%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes bob-c { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }
.tf-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tf-head b { font-weight: 700; }
.tf-live { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: var(--green-bg); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.tf-live.amber { color: var(--amber); background: var(--amber-bg); }
.tf-msg { margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; min-height: 2.8em; transition: opacity 300ms, transform 300ms; }
.tf-msg.out { opacity: 0; transform: translateY(6px); }
.hero-strip { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 8px var(--gut) clamp(56px, 7vw, 96px); color: var(--ink-2); font-weight: 600; font-size: 16px; }
.hero-strip span { display: inline-flex; align-items: center; gap: 10px; }
.hero-strip b { color: var(--purple); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.slack-dot { width: 18px; height: 18px; border-radius: 5px; background: conic-gradient(#36c5f0 0 25%, #2eb67d 0 50%, #ecb22e 0 75%, #e01e5a 0); flex: none; }
.check { width: 18px; height: 18px; border-radius: 50%; background: var(--purple); position: relative; flex: none; }
.check::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* ---------- chaos / calm ---------- */
.chaos { padding-block: clamp(80px, 10vw, 150px); }
.chaos-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 34px; padding: 5px; border-radius: 999px; background: #f1eeff; }
.switch button { position: relative; z-index: 1; border: 0; background: none; padding: 12px 22px; font-weight: 700; font-size: 15.5px; border-radius: 999px; cursor: pointer; color: var(--muted); min-height: 46px; transition: color 300ms; }
.switch button[aria-pressed='true'] { color: #fff; }
.switch-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #b3302b; transition: transform 500ms var(--spring), background 400ms; }
.switch[data-mode='with'] .switch-thumb { transform: translateX(100%); background: var(--purple); }
.chaos-stage { position: relative; height: 520px; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #fff1f0, #fdf8ff 60%); border: 1px solid #f0e3ea; transition: background 600ms; }
.chaos-stage[data-mode='with'] { background: radial-gradient(120% 90% at 50% 0%, #ece6ff, #f8f6ff 60%); border-color: #e6e0ff; }
.stage-tag { position: absolute; right: 16px; bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6c80; }
.note { position: absolute; width: 270px; background: #fff; border-radius: 16px; padding: 13px 15px; box-shadow: 0 16px 36px -18px rgba(80,20,40,0.35); border: 1px solid #f3e6e6; display: grid; gap: 3px; transition: transform 700ms var(--ease), opacity 500ms; font-size: 14.5px; }
.note b { font-weight: 700; line-height: 1.3; }
.note .age { font-size: 12.5px; color: var(--red); font-weight: 600; }
.src { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: #fff; padding: 2px 8px; border-radius: 6px; justify-self: start; }
.src.q { background: #c2332d; } .src.j { background: #1f5fd1; } .src.s { background: #4a154b; } .src.v { background: #5b2ee0; } .src.m { background: #4b5160; } .src.c { background: #c11d23; }
.n1 { left: 6%; top: 6%; --r: -5deg; --tx: 180px; --ty: 180px; }
.n2 { right: 6%; top: 10%; --r: 4deg; --tx: -180px; --ty: 170px; }
.n3 { left: 18%; top: 30%; --r: 2deg; --tx: 80px; --ty: 70px; }
.n4 { right: 3%; top: 38%; --r: -3deg; --tx: -170px; --ty: 20px; }
.n5 { left: 4%; top: 56%; --r: 5deg; --tx: 190px; --ty: -60px; }
.n6 { right: 9%; top: 64%; --r: -4deg; --tx: -150px; --ty: -90px; }
.n7 { left: 28%; top: 78%; --r: -2deg; --tx: 40px; --ty: -150px; }
.chaos-stage[data-mode='without'] .note { transform: rotate(var(--r)); animation: shake 3.4s ease-in-out infinite; }
.chaos-stage[data-mode='without'] .n2 { animation-delay: -0.6s; } .chaos-stage[data-mode='without'] .n4 { animation-delay: -1.2s; } .chaos-stage[data-mode='without'] .n6 { animation-delay: -1.9s; }
@keyframes shake { 0%, 86%, 100% { transform: rotate(var(--r)); } 89% { transform: rotate(calc(var(--r) + 2deg)) translateX(3px); } 92% { transform: rotate(calc(var(--r) - 2deg)) translateX(-3px); } 95% { transform: rotate(var(--r)) translateX(2px); } }
.chaos-stage[data-mode='with'] .note { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); pointer-events: none; }
.chaos-stage[data-mode='with'] .n2 { transition-delay: 60ms; } .chaos-stage[data-mode='with'] .n3 { transition-delay: 120ms; } .chaos-stage[data-mode='with'] .n4 { transition-delay: 160ms; } .chaos-stage[data-mode='with'] .n5 { transition-delay: 200ms; } .chaos-stage[data-mode='with'] .n6 { transition-delay: 240ms; } .chaos-stage[data-mode='with'] .n7 { transition-delay: 280ms; }
.calm { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; transform: scale(0.85); transition: opacity 500ms 350ms, transform 700ms 350ms var(--spring); pointer-events: none; }
.chaos-stage[data-mode='with'] .calm { opacity: 1; transform: none; }
.calm-card { width: min(420px, 100%); background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(73,39,184,0.55); border: 1px solid #ece7ff; }
.calm-head { display: flex; gap: 12px; align-items: center; }
.calm-head b { display: block; font-size: 16px; }
.calm-head span { font-size: 13px; color: var(--muted); }
.calm-big { margin: 16px 0 12px; font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.calm-big span { color: var(--purple); }
.calm-card ul { display: grid; gap: 9px; }
.calm-card li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.calm-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-mini { font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 99px; border: 1px solid #ddd8f0; background: #fff; }
.btn-mini.go { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ---------- OS story ---------- */
.os { position: relative; color: #fff; padding-block: clamp(90px, 11vw, 160px) clamp(60px, 8vw, 120px);
  background: radial-gradient(60% 40% at 80% 10%, rgba(101,54,255,0.35), transparent 70%), radial-gradient(50% 40% at 0% 60%, rgba(71,200,245,0.12), transparent 70%), var(--night); }
.os-intro { max-width: 900px; }
.os-rail { position: sticky; top: 84px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 40px; padding: 6px; border-radius: 999px; background: rgba(20,14,50,0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); width: max-content; max-width: 100%; }
.os-rail span { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #a8a2cc; cursor: pointer; transition: background 300ms, color 300ms; }
.os-rail span.on { background: #fff; color: var(--deep); }
.os-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); margin-top: 20px; }
.os-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 500ms; }
.os-step.active { opacity: 1; }
.os-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac-2); }
.os-step h3 { margin-top: 14px; font-weight: 600; font-size: clamp(30px, 2.4vw + 14px, 50px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.os-step p { margin-top: 18px; font-size: 18.5px; color: #c6c0ec; line-height: 1.55; max-width: 40ch; }
.os-mobile-scene { display: none; }
.os-stage-wrap { position: relative; }
.os-stage { position: sticky; top: 150px; height: min(600px, calc(100vh - 190px)); }
.scene { position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(160deg, #1b1546, #120d33); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 50px 100px -40px rgba(101,54,255,0.55), inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 500ms, transform 600ms var(--ease); padding: 26px; }
.scene.active { opacity: 1; transform: none; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.sc-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #b4aedb; display: flex; align-items: center; gap: 8px; }
.sc-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9790c2; border: 1px dashed rgba(255,255,255,0.22); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }

/* scene: twin */
.tw-pair { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; margin-top: 16px; }
.tw-card { border-radius: 22px; padding: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); text-align: center; }
.tw-card.twin { background: linear-gradient(160deg, rgba(128,84,255,0.4), rgba(71,200,245,0.14)); border-color: rgba(186,165,255,0.55); box-shadow: 0 0 60px -10px rgba(128,84,255,0.65); }
.tw-card img { width: 86px; height: 86px; margin: 0 auto 12px; border-radius: 22px; }
.tw-card b { font-size: 18px; display: block; }
.tw-card span { font-size: 13px; color: #c6c0ec; }
.tw-link { height: 2px; background: linear-gradient(90deg, transparent, var(--lilac-2), transparent); position: relative; }
.tw-link::after { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: travel 1.8s linear infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 10px); } }
.learn-list { margin-top: 26px; display: grid; gap: 14px; }
.learn-row { display: grid; grid-template-columns: 104px 1fr minmax(0, 1.2fr); gap: 14px; align-items: center; font-size: 14px; }
.learn-row .k { color: #b4aedb; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.learn-row .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.learn-row .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--purple-2), var(--cyan)); transition: width 1400ms var(--ease); }
.scene.active .learn-row .bar i, .os-mobile-scene .learn-row .bar i { width: var(--w); }
.learn-row .v { font-weight: 700; font-size: 13.5px; color: #fff; }

/* scene: zeus */
.zeus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: calc(100% - 54px); }
.z-pane { border-radius: 18px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.z-pane h4 { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #b4aedb; font-weight: 500; }
.z-line { font-family: var(--mono); font-size: 12px; color: #e0dbf8; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); opacity: 0; transform: translateX(-12px); transition: all 400ms var(--ease); }
.z-line b { color: var(--cyan); font-weight: 600; }
.z-line.in, .z-step.in { opacity: 1; transform: none; }
.z-pb { background: linear-gradient(160deg, rgba(128,84,255,0.28), rgba(128,84,255,0.06)); border-color: rgba(186,165,255,0.35); }
.pb-title { font-weight: 700; font-size: 16px; }
.z-step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 13.5px; align-items: start; opacity: 0; transform: translateY(8px); transition: all 400ms var(--ease); }
.z-step .n { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,0.12); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; }
.cite { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--cyan); background: rgba(71,200,245,0.12); padding: 1px 7px; border-radius: 6px; }
.z-foot { margin-top: auto; font-size: 12px; color: #b4aedb; display: flex; align-items: center; gap: 8px; }

/* scene: kanban */
.kb { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; height: calc(100% - 110px); }
.kb-col { border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.kb-col h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: #d5cff3; display: flex; align-items: center; gap: 7px; }
.kb-col h4 i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.kb-ghost { border-radius: 12px; background: rgba(255,255,255,0.05); padding: 10px; font-size: 12px; color: #a49dce; line-height: 1.35; margin-top: auto; }
.kb-ghost b { display: block; color: #e0dbf8; font-size: 12.5px; }
.kb-mover { position: absolute; top: 46px; width: calc(25% - 18px); left: 5px; border-radius: 14px; background: #fff; color: var(--ink); padding: 12px; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.6), 0 0 0 3px rgba(128,84,255,0.55); transition: left 900ms var(--ease), box-shadow 400ms; z-index: 2; }
.kb-mover .id { font-family: var(--mono); font-size: 10.5px; color: #6f6c80; }
.kb-mover b { display: block; font-size: 13.5px; line-height: 1.3; margin: 3px 0 8px; }
.kb-mover .st { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #efeaff; color: var(--deep); display: inline-block; }
.kb-mover .st.amber { background: var(--amber-bg); color: var(--amber); }
.kb-mover .st.green { background: var(--green-bg); color: var(--green); }
.kb-mover .gate { display: none; margin-top: 10px; gap: 6px; }
.kb-mover.ask .gate { display: flex; }
.kb-mover .gate span { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--purple); color: #fff; }
.kb-mover .gate span.ghost { background: #f1eeff; color: var(--deep); }
.kb-mover.click .gate span:first-child { animation: press 600ms; }
@keyframes press { 40% { transform: scale(0.88); box-shadow: 0 0 0 6px rgba(101,54,255,0.35); } }
.kb-mover .ev { display: none; margin-top: 8px; font-size: 11.5px; color: var(--green); font-weight: 700; }
.kb-mover.done .ev { display: block; }
.kb-mover.done { box-shadow: 0 20px 40px -14px rgba(0,0,0,0.6), 0 0 0 3px rgba(47,211,147,0.85); }
.kb-log { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #e0dbf8; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,0.3); min-height: 48px; }
.kb-log b { color: #fff; }

/* scene: cyberstack */
.cs { position: relative; height: calc(100% - 50px); display: grid; place-items: center; }
.cs-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(186,165,255,0.25); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cs-ring.r1 { width: 230px; height: 230px; } .cs-ring.r2 { width: 380px; height: 380px; } .cs-ring.r3 { width: 520px; height: 520px; }
.cs-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: spin 60s linear infinite; }
.cs-orbit.o2 { animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.cs-chip { position: absolute; transform: translate(-50%, -50%); }
.cs-chip span { display: block; padding: 7px 12px; border-radius: 99px; background: rgba(30,22,72,0.92); border: 1px solid rgba(255,255,255,0.18); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #f0edff; animation: spin 60s linear infinite reverse; }
.cs-orbit.o2 .cs-chip span { animation-duration: 90s; animation-direction: normal; }
.cs-core { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 40px; background: linear-gradient(140deg, var(--purple-2), var(--deep)); display: grid; place-items: center; text-align: center; box-shadow: 0 0 0 14px rgba(101,54,255,0.15), 0 0 90px rgba(128,84,255,0.75); }
.cs-core b { display: block; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
.cs-core span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #ece8ff; }
.cs-ping { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ping 2.4s var(--ease) infinite; opacity: 0; }
@keyframes ping { 0% { transform: rotate(var(--a)) translateX(84px); opacity: 0; } 15% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(250px); opacity: 0; } }
.cs-cats { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; z-index: 3; }
.cs-cats span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #c6c0ec; padding: 4px 9px; border-radius: 99px; background: rgba(13,10,36,0.85); border: 1px solid rgba(255,255,255,0.12); }

/* scene: slack */
.sl { height: calc(100% - 50px); display: grid; grid-template-rows: auto 1fr; border-radius: 18px; background: #fff; color: var(--ink); overflow: hidden; }
.sl-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 15px; }
.sl-head .ws { font-size: 12px; color: #6f6c80; font-weight: 600; margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.sl-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; overflow: hidden; }
.sl-msg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(10px); transition: all 400ms var(--ease); }
.sl-msg.in { opacity: 1; transform: none; }
.sl-msg .who { font-weight: 700; font-size: 13.5px; display: flex; gap: 6px; align-items: baseline; }
.sl-msg .who em { font-style: normal; font-size: 10px; font-weight: 700; background: #eee; color: #444; padding: 1px 5px; border-radius: 4px; }
.sl-msg .who time { font-size: 11px; color: #6f6c80; font-weight: 500; }
.sl-av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; }
.sl-av.twin { background: var(--deep) url('../icons/twin--purple.svg') center/125%; }
.sl-av.you { background: #1f5fd1; }
.sl-card { margin-top: 8px; border: 1px solid #f0d9a8; background: #fffaf0; border-radius: 12px; padding: 12px; }
.sl-card b { display: block; font-size: 14px; }
.sl-card .row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.sl-card .done-note { color: var(--green); font-weight: 700; font-size: 13px; display: none; }
.sl-card.approved .btn-mini { display: none; }
.sl-card.approved .done-note { display: inline; }
.sl-card.approved { border-color: #b9e6d3; background: #f2fbf7; }

/* ---------- proof ---------- */
.proof { padding-block: clamp(90px, 11vw, 150px); background: linear-gradient(180deg, #fff, #f4f0ff); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat { padding: 30px 28px; border-radius: 28px; background: #fff; border: 1px solid #ece7ff; box-shadow: 0 30px 60px -40px rgba(73,39,184,0.5); }
.stat-num { font-size: clamp(54px, 5vw + 12px, 92px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--deep); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stat-num small { font-size: 0.42em; letter-spacing: -0.02em; color: var(--purple); }
.stat-num .strike { color: #b5aed6; text-decoration: line-through; text-decoration-thickness: 4px; }
.stat-num .arrow { font-size: 0.5em; color: var(--purple); }
.stat-label { margin-top: 14px; font-weight: 600; font-size: 17px; color: var(--ink-2); }
.fine { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c80; margin-top: 6px; font-weight: 500; }

/* ---------- take on ---------- */
.take { margin-top: clamp(70px, 8vw, 110px); overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 14px; }
.track { display: flex; gap: 14px; width: max-content; animation: marquee 50s linear infinite; }
.marquee.reverse .track, .marquee.reverse .lq-track { animation-direction: reverse; animation-duration: 60s; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.track span { padding: 18px 28px; border-radius: 999px; font-size: clamp(18px, 1vw + 14px, 26px); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; background: #f4f0ff; color: var(--deep); border: 1px solid #e6dfff; }
.marquee.reverse .track span { background: #fff; color: var(--ink-2); border-color: #e7e5ef; }
.track span:nth-child(3n) { background: var(--purple); color: #fff; border-color: var(--purple); }
.marquee.reverse .track span:nth-child(4n) { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- trust ---------- */
.trust { padding-block: clamp(90px, 10vw, 140px); color: #fff; background: radial-gradient(50% 60% at 100% 0%, rgba(71,200,245,0.18), transparent 70%), linear-gradient(160deg, var(--deeper), var(--deep)); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.trust-list img { width: 56px; height: 56px; }
.trust-list b { display: block; font-size: 17px; }
.trust-list span { font-size: 14.5px; color: #d6cefc; line-height: 1.45; }

/* ---------- final ---------- */
.final { padding-block: clamp(56px, 7vw, 100px); }
.final-card { position: relative; border-radius: 40px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 40px; color: #fff; padding: clamp(36px, 5vw, 72px);
  background: radial-gradient(60% 80% at 100% 100%, rgba(71,200,245,0.35), transparent 70%), linear-gradient(140deg, var(--night), var(--deep) 60%, var(--purple)); }
.final-copy h2 { font-size: clamp(40px, 4vw + 14px, 80px); }
.final-copy p { margin-top: 20px; font-size: 20px; color: #ded7ff; max-width: 32ch; }
.final-copy .hero-cta { justify-content: flex-start; }
.final-visual { position: relative; }
.final-visual img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 40% 30%; border-radius: 32px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); }
.final-toast { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); font-weight: 700; font-size: 14.5px; padding: 12px 16px; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55); animation: bob 6s ease-in-out infinite; white-space: nowrap; }
.final-toast.t1 { left: -28px; top: 10%; }
.final-toast.t2 { right: -16px; top: 62%; animation-delay: -2s; }
.final-toast.t3 { left: -12px; bottom: 6%; animation-delay: -4s; }

/* ---------- footer ---------- */
.footer { padding-block: 40px 48px; border-top: 1px solid #eee; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14.5px; padding: 6px 0; }
.foot nav a:hover { color: var(--purple); }
.foot .copy { margin: 0; }

/* ---------- video ---------- */
dialog.video { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); overflow: visible; }
dialog.video::backdrop { background: rgba(8,5,30,0.86); backdrop-filter: blur(6px); }
dialog.video video { width: 100%; border-radius: 18px; background: #000; aspect-ratio: 16 / 9; }
dialog.video .close { position: absolute; top: -54px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; font-size: 24px; line-height: 1; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .static .reveal { opacity: 1; transform: none; transition: none; }
.static .nav, .static .brand img, .static .scene, .static .os-step, .static .z-line, .static .z-step, .static .sl-msg, .static .learn-row .bar i, .static .kb-mover { transition: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .twin-float { width: 230px; padding: 12px 14px; }
  .tf-msg { font-size: 13.5px; }
  .cs-ring.r3 { display: none; }
}
@media (max-width: 900px) {
  .chaos-grid, .trust-grid, .final-card { grid-template-columns: 1fr; }
  .os-grid { grid-template-columns: 1fr; }
  .os-stage-wrap { display: none; }
  .os-step { min-height: 0; opacity: 1; padding-block: 36px; }
  .os-mobile-scene { display: block; position: relative; height: 520px; margin-top: 26px; }
  .os-mobile-scene .scene { opacity: 1; transform: none; }
  .os-rail { display: none; }
  .stats { grid-template-columns: 1fr; }
  .trust-list { grid-template-columns: 1fr; }
  .final-visual { max-width: 460px; }
}
@media (max-width: 720px) {
  .hero-team { aspect-ratio: 1.15 / 1; object-position: 50% 52%; }
  .hero-stage { display: flex; flex-direction: column; }
  .twin-float { position: relative; inset: auto; transform: none; animation: none; margin: 0 auto 12px; width: min(340px, calc(100% - 32px)); z-index: 2; }
  .twin-float.f2 { transform: none; animation: none; left: auto; order: -1; }
  .twin-float.f1, .twin-float.f3 { display: none; }
  .chaos-stage { height: 560px; }
  .note { width: 220px; font-size: 13.5px; }
  .n3 { left: 6%; } .n7 { left: 8%; }
  .tw-pair { grid-template-columns: 1fr 30px 1fr; }
  .tw-card { padding: 14px; }
  .tw-card img { width: 60px; height: 60px; }
  .learn-row { grid-template-columns: 90px 1fr; }
  .learn-row .v { grid-column: 1 / -1; }
  .zeus-grid { grid-template-columns: 1fr; }
  .z-pane.zl { display: none; }
  .kb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; height: calc(100% - 132px); }
  .kb-mover .gate span.ghost { display: none; }
  .kb-mover .gate { margin-top: 6px; }
  .kb-mover .st { font-size: 10.5px; }
  .hero h1 br { display: none; }
  .hero h1 { font-size: clamp(40px, 11vw, 56px); }
  .cs-core { width: 120px; height: 120px; border-radius: 32px; }
  .cs-core b { font-size: 34px; }
  .cs-orbit.o1 .cs-chip:nth-child(even), .cs-orbit.o2 .cs-chip:nth-child(even) { display: none; }
  .cs-cats span:nth-child(n+6) { display: none; }
  .kb-mover { margin-top: -8px; }
  .kb-ghost { display: none; }
  .kb-mover { padding: 10px; }
  .kb-mover b { font-size: 12.5px; margin-bottom: 6px; }
  .cs-ring.r2 { width: 300px; height: 300px; }
  .final-toast { font-size: 13px; }
  .final-toast.t1 { left: 8px; } .final-toast.t2 { right: 8px; } .final-toast.t3 { left: 8px; }
  .scene { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
  .track { animation: none; flex-wrap: wrap; width: auto; }
}

/* =================== v3: validation, solutions, company =================== */
.hero-quote { margin: 30px auto 0; max-width: 560px; }
.hero-quote blockquote { font-size: clamp(17px, 0.4vw + 15px, 20px); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.hero-quote figcaption { margin-top: 6px; font-size: 14px; color: #cfc6ff; }
.hero-quote figcaption b { color: #fff; }

/* logos */
.logos { padding-block: clamp(36px, 4vw, 56px) 0; }
.logos-title { text-align: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c80; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px clamp(30px, 5vw, 70px); margin-top: 22px; }
.wm { color: #77738c; font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.wm-boyd { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; font-size: 23px; }
.wm-hl { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; font-size: 24px; }
.wm-yext { font-weight: 800; letter-spacing: -0.06em; font-size: 31px; }
.wm-hydro { font-weight: 600; letter-spacing: 0.01em; }
.wm-ripple { font-weight: 600; letter-spacing: -0.01em; font-size: 28px; }
.wm-arcutis { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: 0.02em; }

/* section quote */
.sq { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 34px; padding: 20px 22px; border-radius: 22px; background: #f6f3ff; border: 1px solid #ebe5ff; max-width: 560px; }
.sq:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }
.sq blockquote { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink-2); letter-spacing: -0.01em; }
.sq figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.sq figcaption b { color: var(--ink); }
.av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.av.sm { width: 34px; height: 34px; }
.av.initials { display: grid; place-items: center; background: linear-gradient(140deg, var(--purple), var(--deep)); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; }
.av.sm.initials { font-size: 12px; }
.sq.dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.13); }
.sq.dark blockquote { color: #f1edff; }
.sq.dark figcaption { color: #b9b1e6; }
.sq.dark figcaption b { color: #fff; }
.sq.mini { margin-top: 24px; padding: 16px 18px; }
.sq.mini blockquote { font-size: 15.5px; }
.sq.wide { max-width: none; margin-top: 20px; }

/* ticks */
.ticks { display: grid; gap: 10px; margin-top: 22px; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 600; color: #ddd7fb; line-height: 1.45; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(71,200,245,0.18); }
.ticks li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 8px; height: 4px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); }
.ticks.dark li { color: var(--ink-2); }
.ticks.dark li::before { background: #ebe5ff; }
.ticks.dark li::after { border-color: var(--purple); }

/* OS intro quotes */
.os-quotes { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.os-quotes .sq { margin-top: 0; max-width: none; align-content: center; }
.spotlight { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, rgba(128,84,255,0.4), rgba(71,200,245,0.12)); border: 1px solid rgba(186,165,255,0.45); }
.spotlight img { width: 120px; height: 150px; object-fit: cover; object-position: 50% 20%; border-radius: 16px; }
.spot-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.spotlight blockquote { margin-top: 8px; font-size: 18.5px; font-weight: 600; line-height: 1.4; color: #fff; letter-spacing: -0.015em; }
.spotlight figcaption { margin-top: 10px; font-size: 13.5px; color: #c6c0ec; }
.spotlight figcaption b { color: #fff; }

/* shared section heads */
.sec-head { max-width: 780px; }
.sec-head.center { text-align: center; margin-inline: auto; }
.sec-head.row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 700; text-decoration: none; font-size: 15.5px; }
.more::after { content: '→'; transition: transform 200ms; }
.more:hover::after { transform: translateX(4px); }

/* what changes */
.changes .sec-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 60px; }
.changes .sec-head > .sq { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; }
.changes { padding-block: clamp(90px, 10vw, 150px); }
.chg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(44px, 5vw, 64px); }
.chg { display: flex; flex-direction: column; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid #ece7ff; box-shadow: 0 30px 60px -44px rgba(73,39,184,0.45); transition: transform 300ms var(--ease), border-color 300ms, box-shadow 300ms; }
.chg:hover { transform: translateY(-6px); border-color: #c9b8ff; box-shadow: 0 40px 70px -40px rgba(73,39,184,0.55); }
.chg-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); }
.chg-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; }
.chg-num s { color: #a9a2c9; font-size: 21px; font-weight: 700; text-decoration-thickness: 3px; }
.chg-num span { color: var(--deep); font-size: clamp(36px, 2vw + 20px, 48px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.chg-ba { display: grid; gap: 6px; margin-top: 16px; font-size: 14.5px; }
.chg-ba span { position: relative; padding-left: 24px; }
.chg-ba .b { color: #6f6c80; }
.chg-ba .b::before { content: '×'; position: absolute; left: 3px; top: -3px; font-size: 19px; color: var(--red); font-weight: 700; }
.chg-ba .a { color: var(--ink); font-weight: 700; }
.chg-ba .a::before { content: ''; position: absolute; left: 4px; top: 5px; width: 9px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.chg blockquote { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0edf8; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); font-weight: 600; flex: 1; }
.chg .who { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.chg .who b { color: var(--ink); }

/* engine */
.engine { padding-block: clamp(90px, 10vw, 150px) clamp(40px, 5vw, 70px); background: linear-gradient(180deg, #f6f3ff, #fff 80%); overflow: hidden; }
.engine-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.engine h2 { font-size: clamp(34px, 3vw + 14px, 60px); line-height: 1.04; }
.engine .lead { max-width: 52ch; }
.engine-line { margin-top: 26px; padding-left: 16px; border-left: 3px solid var(--purple); font-size: 19px; font-weight: 700; color: var(--deep); }
.loop { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-inline: auto; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loop-arc { transform-origin: 200px 200px; animation: spin 6s linear infinite; animation-delay: -4.97s; }
.loop-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px -30px rgba(73,39,184,0.55), 0 0 0 10px rgba(101,54,255,0.06); display: grid; place-content: center; justify-items: center; text-align: center; padding: 14px; }
.loop-core img { width: 54px; height: 54px; border-radius: 14px; }
.loop-core b { margin-top: 8px; font-size: 16px; line-height: 1.2; color: var(--deep); }
.loop-core span { margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #6f6c80; }
.lp { position: absolute; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 9px 14px 9px 9px; border-radius: 16px; background: #fff; border: 1px solid #ebe5ff; box-shadow: 0 16px 30px -18px rgba(73,39,184,0.5); font-weight: 700; font-size: 15px; white-space: nowrap; animation: lp-on 6s infinite; }
.lp i { grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; background: #efeaff; color: var(--deep); display: grid; place-items: center; font-style: normal; font-size: 13px; }
.lp small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c80; font-weight: 600; line-height: 1.1; }
.lp.p1 { left: 50%; top: 12.5%; }
.lp.p2 { left: 85.7%; top: 38.4%; animation-delay: 1.2s; }
.lp.p3 { left: 72%; top: 80.3%; animation-delay: 2.4s; }
.lp.p4 { left: 28%; top: 80.3%; animation-delay: 3.6s; }
.lp.p5 { left: 14.3%; top: 38.4%; animation-delay: 4.8s; }
@keyframes lp-on { 0%, 22% { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(101,54,255,0.15), 0 16px 30px -18px rgba(73,39,184,0.5); } 30%, 100% { border-color: #ebe5ff; } }
.cmp { margin-top: clamp(56px, 6vw, 84px); border-radius: 24px; border: 1px solid #e9e4fb; overflow: hidden; background: #fff; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.cmp-row > span { padding: 16px 20px; border-top: 1px solid #f0edf8; font-size: 15px; color: var(--muted); }
.cmp-row > span[role='rowheader'] { color: var(--ink); font-weight: 700; }
.cmp-row > .ax { background: #f4f0ff; color: var(--deep); font-weight: 700; }
.cmp-head > span { border-top: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6c80; background: #fbfaff; }
.cmp-head > .ax { background: var(--purple); color: #fff; }

/* customers */
.proof .sec-head { margin-bottom: clamp(40px, 5vw, 60px); }
.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.story { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid #ece7ff; box-shadow: 0 30px 60px -44px rgba(73,39,184,0.45); }
.story .wm { color: var(--ink); font-size: 24px; }
.story-k { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); }
.story h3 { margin-top: 10px; font-size: clamp(22px, 1vw + 16px, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.story > p:not(.story-k), .story-body > p:not(.story-k) { margin-top: 12px; color: var(--muted); font-size: 16px; }
.story > blockquote { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--purple); font-size: 17px; font-weight: 600; color: var(--ink-2); }
.story .who { margin-top: 8px; padding-left: 17px; font-size: 13.5px; color: var(--muted); }
.story .who b { color: var(--ink); }
.story .more { margin-top: auto; padding-top: 20px; }
.story.feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); padding: 0; overflow: hidden; }
.story-media { position: relative; min-height: 100%; background: var(--deeper); }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.story-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,10,36,0.75)); }
.wm.on-photo { position: absolute; left: 24px; bottom: 22px; z-index: 1; color: #fff; font-size: 34px; }
.story-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; }
.story-body .story-k { margin-top: 0; }
.story.feature h3 { font-size: clamp(26px, 1.6vw + 16px, 38px); }
.story-body .sq { margin-top: 22px; }
.story-body .more { margin-top: 22px; padding-top: 0; }

/* solutions */
.solutions { padding-block: clamp(90px, 10vw, 150px) clamp(70px, 8vw, 110px); overflow: hidden; }
.seg { display: inline-flex; gap: 4px; margin-top: 34px; padding: 5px; border-radius: 999px; background: #f1eeff; }
.seg button { border: 0; background: none; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: var(--deep); cursor: pointer; min-height: 44px; transition: background 250ms, color 250ms; }
.seg button[aria-selected='true'] { background: var(--purple); color: #fff; box-shadow: 0 8px 20px -10px rgba(101,54,255,0.9); }
.sol-panel { margin-top: 34px; animation: fade-up 500ms var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }
.size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.size { display: flex; flex-direction: column; padding: 30px; border-radius: 28px; background: #faf9ff; border: 1px solid #ece7ff; }
.size.hot { color: #fff; border: 0; background: radial-gradient(80% 60% at 100% 0%, rgba(71,200,245,0.35), transparent 70%), linear-gradient(150deg, var(--deeper), var(--deep) 55%, var(--purple)); box-shadow: 0 40px 70px -40px rgba(73,39,184,0.9); }
.size-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); }
.size.hot .size-k { color: var(--lilac-2); }
.size h3 { margin-top: 12px; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.size-twins { margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--muted); }
.size-twins b { font-size: 44px; letter-spacing: -0.05em; color: var(--deep); margin-right: 6px; }
.size.hot .size-twins { color: #d6cefc; }
.size.hot .size-twins b { color: #fff; }
.size .ticks { margin: 18px 0 28px; flex: 1; align-content: start; }
.size .btn { align-self: flex-start; min-height: 48px; }
.role-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; }
.role-list { display: flex; flex-direction: column; gap: 8px; }
.role-list button { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px solid #ece7ff; background: #fff; text-align: left; font-weight: 700; font-size: 16px; cursor: pointer; transition: background 200ms, border-color 200ms; }
.role-list button img { width: 38px; height: 38px; border-radius: 11px; }
.role-list button:hover { border-color: #c9b8ff; }
.role-list button[aria-selected='true'] { background: #f3efff; border-color: var(--purple); color: var(--deep); }
.role-panels { border-radius: 28px; padding: clamp(26px, 4vw, 44px); background: linear-gradient(160deg, #f6f3ff, #fff); border: 1px solid #ece7ff; }
.role { animation: fade-up 450ms var(--ease); }
.role h3 { font-size: clamp(26px, 1.6vw + 16px, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; max-width: 20ch; }
.role .ticks li { font-size: 17px; }
.dod { margin-top: 24px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid #d9efe5; font-weight: 700; max-width: 520px; }
.dod span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; font-weight: 600; }
.role-proof { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.role-proof b { color: var(--deep); }
.take-title { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c80; margin-bottom: 20px; }

/* trust additions */
.trust .sq { max-width: 480px; }
.attest { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 14px; margin-top: clamp(44px, 5vw, 64px); }
.badge-soc { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); }
.badge-soc .ring { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, var(--deep) 58%, transparent 60%), conic-gradient(var(--cyan), var(--purple-2), var(--cyan)); }
.badge-soc .ring b { font-size: 17px; line-height: 1; }
.badge-soc .ring small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #d6cefc; }
.badge-soc > div b { display: block; font-size: 17px; }
.badge-soc > div span { font-size: 14px; color: #d6cefc; }
.attest-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.attest-list li { padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.attest-list b { display: block; font-size: 16px; }
.attest-list span { display: block; margin-top: 4px; font-size: 14px; color: #d6cefc; line-height: 1.4; }

/* team */
.team { padding-block: clamp(90px, 10vw, 150px) clamp(70px, 8vw, 110px); }
.team-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.team-head h2 { max-width: 17ch; }
.exits { display: flex; gap: 10px; flex: none; }
.exits li { padding: 14px 18px; border-radius: 18px; border: 1px solid #ece7ff; background: #faf9ff; }
.exits b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.exits span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.founder { border-radius: 28px; overflow: hidden; background: #f6f3ff; border: 1px solid #ece7ff; }
.founder img { width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 22%; transition: transform 700ms var(--ease); }
.founder:hover img { transform: scale(1.03); }
.founder > div { position: relative; padding: 22px 24px 28px; background: #f6f3ff; }
.founder h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.role-t { margin-top: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.founder p:not(.role-t) { margin-top: 12px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.team-foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 16px; }

/* backers */
.backers { padding-block: clamp(90px, 10vw, 150px); color: #fff; background: radial-gradient(55% 45% at 15% 0%, rgba(101,54,255,0.42), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(71,200,245,0.18), transparent 70%), var(--night); }
.backers-head { max-width: 900px; }
.backers h2 { font-size: clamp(34px, 3.2vw + 14px, 64px); line-height: 1.04; }
.big-num { background: linear-gradient(95deg, #c9b8ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead.light { color: #c6c0ec; max-width: 56ch; }
.from-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.from-row li { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); color: #e6e0ff; }
.people { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; margin-top: clamp(44px, 5vw, 64px); }
.person { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
.people.in .person { opacity: 1; transform: none; }
.no-js .person, .static .person { opacity: 1; transform: none; transition: none; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 22px; filter: grayscale(0.35) contrast(1.02); transition: filter 300ms, transform 300ms var(--ease); }
.person:hover img { filter: none; transform: translateY(-4px); }
.person b { display: block; margin-top: 12px; font-size: 15.5px; }
.person span { display: block; margin-top: 2px; font-size: 13px; color: #b9b1e6; line-height: 1.35; }
.person em { display: inline-block; margin-top: 8px; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(71,200,245,0.4); padding: 2px 8px; border-radius: 99px; }
.names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
.names li { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: 13.5px; color: #b9b1e6; }
.names b { display: block; color: #fff; font-size: 15px; }
.vcs { margin-top: 28px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: #c6c0ec; }
.vcs span { text-transform: uppercase; letter-spacing: 0.12em; color: var(--lilac-2); margin-right: 8px; }

/* field */
.field { padding-block: clamp(80px, 9vw, 130px) clamp(20px, 3vw, 40px); }
.field h2 { font-size: clamp(32px, 2.4vw + 16px, 52px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.post { display: flex; flex-direction: column; min-height: 230px; padding: 26px; border-radius: 24px; border: 1px solid #ece7ff; background: #fff; text-decoration: none; transition: transform 300ms var(--ease), border-color 300ms; }
.post:hover { transform: translateY(-5px); border-color: #c9b8ff; }
.post-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); }
.post h3 { margin-top: 12px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.post-by { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }

/* final quote */
.final-quote { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.2); max-width: 520px; }
.final-quote blockquote { font-size: 19px; font-weight: 600; line-height: 1.4; }
.final-quote figcaption { margin-top: 8px; font-size: 14px; color: #d6cfff; }

@media (max-width: 1080px) {
  .chg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .attest { grid-template-columns: 1fr; }
  .names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .os-quotes, .engine-grid, .size-grid, .role-wrap, .stories, .story.feature, .posts { grid-template-columns: 1fr; }
  .story-media { min-height: 360px; }
  .role-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .role-list button { flex: none; }
  .team-head { flex-direction: column; align-items: flex-start; }
  .changes .sec-head { grid-template-columns: 1fr; }
  .changes .sec-head > .sq { grid-column: 1; grid-row: auto; margin-top: 30px; }
  .founders { grid-template-columns: 1fr; }
  .founder { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
  .founder img { height: 100%; aspect-ratio: auto; }
  .loop { width: min(400px, 100%); }
}
@media (max-width: 720px) {
  .chg-grid { grid-template-columns: 1fr; }
  .exits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .exits li { padding: 10px 12px; border-radius: 14px; }
  .exits b { font-size: 15px; }
  .exits span { font-size: 12px; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .person img { border-radius: 16px; }
  .person b { font-size: 14px; }
  .person span { font-size: 12px; }
  .names { grid-template-columns: 1fr; }
  .attest-list { grid-template-columns: 1fr; }
  .logo-row { gap: 14px 28px; }
  .wm { font-size: 21px; } .wm-yext { font-size: 25px; } .wm-boyd { font-size: 18px; } .wm-hl { font-size: 19px; }
  .cmp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-row > span { padding: 12px; font-size: 13px; }
  .cmp-row > span[role='rowheader'] { grid-column: 1 / -1; background: #fbfaff; font-size: 14px; }
  .cmp-head > span:first-child { display: none; }
  .cmp-head > span { font-size: 10.5px; }
  .spotlight { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 18px; align-items: start; }
  .spotlight img { width: 76px; height: 96px; }
  .spotlight blockquote { font-size: 16px; }
  .founder { grid-template-columns: 112px minmax(0, 1fr); }
  .founder > div { padding: 18px; }
  .founder h3 { font-size: 20px; }
  .founder p:not(.role-t) { font-size: 14px; }
  .lp { font-size: 13px; padding: 6px 10px 6px 6px; }
  .lp i { width: 22px; height: 22px; font-size: 11px; }
  .loop-core b { font-size: 13px; } .loop-core img { width: 40px; height: 40px; }
  .loop-core span { display: none; }
  .seg { display: flex; } .seg button { flex: 1; padding: 12px 10px; }
  .story-media { min-height: 300px; }
  .story { padding: 24px; }
  .sq { padding: 16px; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .sq .av { width: 44px; height: 44px; }
  .sq blockquote { font-size: 15.5px; }
  .sec-head.row { align-items: baseline; }
}

/* =================== v4: hero icons, voices, engine flow, trenches =================== */
.watch { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px; background: transparent; color: #e6e0ff; font-weight: 700; font-size: 15px; cursor: pointer; min-height: 44px; }
.watch:hover { background: rgba(255,255,255,0.1); }
.watch .play { width: 28px; height: 28px; }
.watch small { font-family: var(--mono); font-size: 12px; opacity: 0.75; }
.btn span[aria-hidden] { transition: transform 200ms; }
.btn:hover span[aria-hidden] { transform: translateX(3px); }

.hero-icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; --mx: 0; --my: 0; }
.hi { position: absolute; display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; transform: translate(calc(var(--mx) * var(--d, 14px)), calc(var(--my) * var(--d, 14px))); transition: transform 600ms var(--ease); }
.hi img { width: 58px; height: 58px; border-radius: 18px; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.18); animation: bob 6s ease-in-out infinite; }
.hi em { font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; opacity: 0.9; }
.hi:hover img { transform: scale(1.08) rotate(-4deg); }
.hi1 { left: 6%; top: 210px; --d: 18px; }
.hi2 { left: 11%; top: 360px; --d: 10px; } .hi2 img { animation-delay: -2s; width: 48px; height: 48px; }
.hi3 { left: 4%; top: 500px; --d: 22px; } .hi3 img { animation-delay: -4s; }
.hi4 { right: 6%; top: 200px; --d: 16px; flex-direction: row-reverse; } .hi4 img { animation-delay: -1s; }
.hi5 { right: 10%; top: 350px; --d: 24px; flex-direction: row-reverse; } .hi5 img { animation-delay: -3s; width: 48px; height: 48px; }
.hi6 { right: 4%; top: 490px; --d: 12px; flex-direction: row-reverse; } .hi6 img { animation-delay: -5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* voices marquee */
.voices { padding-block: clamp(56px, 6vw, 90px) 0; overflow: hidden; }
.voices-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.voices h2 { font-size: clamp(30px, 2.4vw + 14px, 50px); max-width: 22ch; line-height: 1.05; }
.voice-rail { display: flex; width: max-content; margin-top: 36px; padding-block: 8px 20px; animation: marquee 90s linear infinite; }
.voice-rail:hover { animation-play-state: paused; }
.voice-track { display: flex; gap: 18px; padding-right: 18px; }
.voice { flex: none; width: 380px; display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #ece7ff; box-shadow: 0 24px 50px -40px rgba(73,39,184,0.55); transition: transform 300ms var(--ease), border-color 300ms; }
.voice:hover { transform: translateY(-4px); border-color: #c9b8ff; }
.stars { color: #f5a524; letter-spacing: 3px; font-size: 16px; }
.voice blockquote { margin-top: 12px; font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); flex: 1; }
.voice figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.voice .av { width: 44px; height: 44px; }
.voice .av.initials { font-size: 14px; }
.voice figcaption b { display: block; font-size: 15px; }
.voice figcaption small { font-size: 13px; color: var(--muted); }

@media (max-width: 1180px) { .hi em { display: none; } .hi1, .hi3 { left: 2%; } .hi4, .hi6 { right: 2%; } .hi2 { left: 6%; } .hi5 { right: 6%; } }
@media (max-width: 900px) { .hero-icons { display: none; } }
@media (max-width: 720px) { .voice { width: 300px; padding: 20px; } .voice blockquote { font-size: 15px; } .voices-head { flex-direction: column; align-items: flex-start; } }

/* engine flow */
.engine .sec-head { max-width: 980px; }
.engine .sec-head h2 { font-size: clamp(32px, 2.8vw + 14px, 58px); line-height: 1.05; }
.flow { position: relative; margin-top: clamp(40px, 5vw, 70px); aspect-ratio: 1200 / 560; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-lines path { fill: none; stroke-linecap: round; }
.rails path { stroke: #e4ddff; stroke-width: 14; }
.pulses path { stroke: url(#fl); stroke-width: 3; stroke-dasharray: 10 14; animation: flow-dash 1.4s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
.flow > * { position: absolute; }
.fg { left: 0; width: 28.3%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #ebe5ff; box-shadow: 0 24px 50px -36px rgba(73,39,184,0.55); }
.fg-zeus { top: 3%; } .fg-sig { top: 44%; }
.fg-k { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.fg-k img { width: 34px; height: 34px; border-radius: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #faf9ff; border: 1px solid #ece7ff; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; animation: chip-in 6s ease-in-out infinite; }
.fg .chip:nth-child(3) { animation-delay: 1s; } .fg .chip:nth-child(4) { animation-delay: 2s; } .fg .chip:nth-child(5) { animation-delay: 3s; } .fg .chip:nth-child(6) { animation-delay: 4s; }
@keyframes chip-in { 0%, 80%, 100% { box-shadow: none; } 88% { box-shadow: 0 0 0 3px rgba(101,54,255,0.16); border-color: #c9b8ff; } }
.d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.d-p { background: var(--purple); } .d-r { background: #d93a33; } .d-a { background: #e09a1a; } .d-b { background: #2a9fd0; }
.fx-core { left: 39.2%; top: 41%; width: 21.6%; height: 18%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--deep), var(--purple)); box-shadow: 0 30px 60px -20px rgba(101,54,255,0.75), 0 0 0 8px rgba(101,54,255,0.1); animation: core-glow 3s ease-in-out infinite; }
.fx-core img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.fx-core b { display: block; font-size: 17px; line-height: 1.15; }
.fx-core span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #ddd6ff; }
@keyframes core-glow { 50% { box-shadow: 0 30px 70px -18px rgba(101,54,255,0.95), 0 0 0 14px rgba(101,54,255,0.08); } }
.spark { position: absolute; font-style: normal; color: #f5a524; font-size: 20px; animation: twinkle 2.4s ease-in-out infinite; }
.spark.s1 { top: -26px; left: 12%; } .spark.s2 { bottom: -24px; right: 10%; color: var(--cyan); animation-delay: -1.2s; }
@keyframes twinkle { 50% { opacity: 0.3; transform: scale(0.7) rotate(20deg); } }
.rail-l { left: 61.5%; transform: translate(0, -50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; background: #fff; border: 1px solid #e4ddff; color: var(--deep); font-weight: 600; z-index: 1; }
.rail-l.r1 { top: 22%; left: 63%; } .rail-l.r2 { top: 50%; } .rail-l.r3 { top: 78%; left: 63%; }
.fo { left: 71.7%; width: 28.3%; padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid #ebe5ff; box-shadow: 0 24px 50px -36px rgba(73,39,184,0.55); }
.fo1 { top: 7%; } .fo2 { top: 38.5%; } .fo3 { top: 73%; }
.fo-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6c80; }
.fo b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15.5px; }
.fo > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.fo2 { border-color: #f0d9a8; background: #fffaf0; }
.fo3 { border-color: #b9e6d3; background: #f2fbf7; }
.fo-btns { display: flex !important; gap: 6px; margin-top: 10px !important; }
.fo-btns i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 1px solid #ddd8f0; background: #fff; color: var(--ink); }
.fo-btns i.go { background: var(--purple); border-color: var(--purple); color: #fff; }
.flow-tag { right: 0; bottom: -30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a86a0; }
.moat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(60px, 6vw, 90px); }
.moat article { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid #ece7ff; }
.moat b { display: block; font-size: 18px; }
.moat span { display: block; margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.moat em { font-style: normal; color: var(--deep); font-weight: 700; }
.models { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
.models-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c80; margin-right: 6px; }
.mdl { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #e4ddff; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.crumbs { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; border-radius: 22px; background: linear-gradient(120deg, #f3efff, #eef9fe); }
.crumbs p { font-weight: 600; color: var(--ink-2); max-width: 52ch; }
.crumb-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb-links a:not(.more) { padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid #ddd5ff; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--deep); }
.crumb-links a:not(.more):hover { border-color: var(--purple); }
.crumb-links .more { margin-left: 6px; }

@media (max-width: 1080px) { .chip { font-size: 12px; } .fg { padding: 12px; } .fo { padding: 12px 14px; } .fo b { font-size: 14px; } .fx-core b { font-size: 15px; } .fx-core img { width: 34px; height: 34px; } }
@media (max-width: 900px) {
  .flow { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .flow > * { position: relative; inset: auto; width: auto; left: auto; top: auto; }
  .flow-lines, .rail-l { display: none; }
  .fx-core { height: auto; padding: 16px; margin-block: 8px; }
  .fx-core::before, .fx-core::after { content: '↓'; position: absolute; left: 50%; transform: translateX(-50%); color: var(--purple); font-weight: 700; }
  .fx-core::before { top: -24px; } .fx-core::after { bottom: -24px; }
  .fg { flex-direction: row; flex-wrap: wrap; }
  .fg-k { width: 100%; }
  .flow-tag { position: static; text-align: right; }
  .moat { grid-template-columns: 1fr; }
  .chip { white-space: normal; }
}

/* trenches */
.trench { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); border-radius: 36px; overflow: hidden; color: #fff; background: radial-gradient(60% 70% at 100% 0%, rgba(71,200,245,0.22), transparent 70%), linear-gradient(150deg, var(--night), var(--deeper) 50%, var(--deep)); }
.trench-photo { position: relative; min-height: 420px; }
.trench-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.trench-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(13,10,36,0.6)); }
.trench-copy { padding: clamp(30px, 4vw, 56px); }
.trench h2 { font-size: clamp(30px, 2.2vw + 14px, 48px); line-height: 1.06; }
.trench-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.trench-stats li { padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.trench-stats b { display: block; font-size: clamp(34px, 2vw + 18px, 48px); line-height: 1; letter-spacing: -0.05em; background: linear-gradient(95deg, #d4c6ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trench-stats span { display: block; margin-top: 8px; font-size: 14px; color: #d6cefc; line-height: 1.4; }
@media (max-width: 900px) { .trench { grid-template-columns: 1fr; } .trench-photo { min-height: 260px; } .trench-photo::after { background: linear-gradient(180deg, transparent 60%, rgba(13,10,36,0.6)); } }
@media (max-width: 420px) { .trench-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .trench-stats li { padding: 14px; } }

/* use case cards on home */
.uc-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: clamp(56px, 6vw, 80px); }
.uc-head h3 { font-size: clamp(24px, 1.2vw + 16px, 32px); font-weight: 600; letter-spacing: -0.03em; }
.ucards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.ucard { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; border: 1px solid #ece7ff; background: #fff; text-decoration: none; transition: transform 300ms var(--ease), border-color 300ms, box-shadow 300ms; }
.ucard:hover { transform: translateY(-4px); border-color: #c9b8ff; box-shadow: 0 30px 50px -36px rgba(73,39,184,0.6); }
.ucard img { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; }
.ucard b { font-size: 17px; letter-spacing: -0.01em; }
.ucard span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.role .more { margin-top: 18px; }
@media (max-width: 1080px) { .ucards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ucards { grid-template-columns: 1fr; } }

/* =================== v5: customers rail, use-case voices, work bento, architecture, stack, lanes =================== */
.hero-strip a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.hero-strip a:hover b { text-decoration: underline; }

/* customers rail */
.logos { overflow: hidden; }
.logo-rail { display: flex; width: max-content; margin-top: 24px; animation: marquee 60s linear infinite; }
.logo-rail:hover { animation-play-state: paused; }
.logo-track { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); list-style: none; }
.logos .logo-rail { -webkit-mask-image: none; }
.logos { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wm-supa { font-weight: 700; letter-spacing: -0.04em; font-size: 29px; }
.wm-gambit { font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
.wm-eudia { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: 0.01em; font-size: 29px; }
.wm-sidewalk { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.wm-sommis { font-weight: 800; letter-spacing: 0.22em; font-size: 22px; }
.wm-kyberis { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; font-size: 24px; }
.wm-delta { font-weight: 500; letter-spacing: 0.04em; font-size: 26px; }
.wm-trucordia { font-weight: 700; letter-spacing: -0.035em; }

/* voices with use cases */
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v-uc { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 99px; background: #f3efff; color: var(--deep); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.v-uc img { width: 22px; height: 22px; border-radius: 7px; }
.v-uc:hover { background: #e9e2ff; }
.voice .stars { font-size: 13px; }
.v-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: #faf8ff; border: 1px dashed #ddd3ff; list-style: none; font-family: var(--mono); font-size: 11.5px; color: var(--deep); }
.v-loop li { display: inline-flex; align-items: center; }
.v-loop li + li::before { content: '→'; margin: 0 7px; color: #a594e6; }
.v-loop li:last-child { font-weight: 600; color: var(--purple); }

/* work bento (dark) */
.work { padding-block: clamp(90px, 10vw, 140px); color: #fff; background: radial-gradient(50% 40% at 85% 0%, rgba(101,54,255,0.32), transparent 70%), radial-gradient(40% 35% at 0% 100%, rgba(71,200,245,0.10), transparent 70%), var(--night); }
.work-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.work-head h2 { font-size: clamp(34px, 3vw + 14px, 60px); line-height: 1.04; max-width: 17ch; }
.work-head .lead { max-width: 56ch; margin-top: 18px; }
.lead.light, .label.light { color: rgba(255,255,255,0.72); }
.label.light { color: var(--lilac-2); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.wk { display: flex; flex-direction: column; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; }
.wk-vm, .wk-prog { grid-column: span 2; }
.wk-prog { grid-column: 1 / -1; }
.wk-art { flex: 1; padding: 22px 22px 0; }
.term { height: 100%; border-radius: 16px 16px 0 0; border: 1px solid rgba(255,255,255,0.10); border-bottom: 0; background: #0a0820; padding: 0 0 18px; font-size: 13.5px; }
.term-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.7); }
.term-h > span:nth-child(2) { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.sev, .count { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.sev.crit { background: rgba(255,90,80,0.16); color: #ff8a80; }
.count { background: rgba(71,200,245,0.14); color: var(--cyan); }
.lg { width: 18px; height: 18px; flex: none; }
.lg.mono { display: inline-grid; place-items: center; border-radius: 5px; background: hsl(var(--h) 55% 46%); color: #fff; font: 700 9px/1 var(--font); letter-spacing: 0; }
.find { padding: 16px 16px 6px; }
.find b { display: block; font-family: var(--mono); font-size: 20px; color: #fff; letter-spacing: -0.01em; }
.find span { display: block; margin-top: 4px; color: rgba(255,255,255,0.6); }
.seq { list-style: none; padding: 8px 16px 0; display: grid; gap: 8px; }
.seq li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; opacity: 0.22; transform: translateY(4px); transition: opacity 400ms, transform 400ms var(--ease); }
.seq li > span { font-weight: 700; color: #fff; }
.seq li > em { grid-column: 2; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,0.55); }
.st { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); position: relative; }
[data-s].is-on { opacity: 1; transform: none; }
.is-on > .st { border-color: var(--cyan); border-right-color: transparent; animation: spin 800ms linear infinite; }
.is-ok > .st { animation: none; border: 0; background: var(--green-glow); }
.is-ok > .st::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #062b1d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.seq li.win.is-ok > span { color: var(--green-glow); }
@keyframes spin { to { transform: rotate(360deg); } }
.alerts { list-style: none; padding: 10px 12px 0; display: grid; gap: 6px; }
.alerts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); opacity: 0.22; transition: opacity 400ms; }
.a-src { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.6); }
.a-src .lg { width: 15px; height: 15px; }
.a-what { grid-column: 1; font-weight: 600; font-size: 13px; color: #fff; }
.alerts .vd { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.vd { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; transition: opacity 300ms; }
.vd.v-ok { background: rgba(47,211,147,0.14); color: var(--green-glow); }
.vd.v-warn { background: rgba(255,190,80,0.15); color: #ffc46b; }
.vd.v-hot { background: rgba(255,90,80,0.16); color: #ff8a80; }
.alerts li:not(.is-ok) .vd { opacity: 0; }
.alerts li.is-on { opacity: 1; }
.tri-sum { margin: 12px 14px 0; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.7); opacity: 0.22; transition: opacity 400ms; }
.tri-sum b { color: #fff; font-size: 16px; }
.tri-sum b.hot { color: #ff8a80; }
.qa { list-style: none; padding: 10px 12px 0; display: grid; gap: 6px; }
.qa li { padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); opacity: 0.22; transition: opacity 400ms; }
.qa .q { display: block; font-weight: 600; color: #fff; font-size: 13px; }
.qa .a { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--green-glow); }
.qa li.hot .a { color: #ff8a80; }
.wk .sk-msg { display: flex; gap: 10px; padding: 12px 14px 0; opacity: 0.22; transition: opacity 400ms; }
.wk .sk-msg b { font-size: 13px; }
.wk .sk-msg b small { font-size: 9.5px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); vertical-align: 1px; }
.wk .sk-msg p { margin-top: 2px; color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.5; }
.sk-a { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sk-a.me { background: linear-gradient(140deg, #f0a35e, #c4572b); color: #fff; }
.sk-a.tw { background: var(--deep) url('../icons/twin--purple.svg') center/125%; }
.sk-btns { display: flex; gap: 8px; margin-top: 10px; }
.sk-btns i { font-style: normal; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); }
.sk-btns i.go { background: var(--green-glow); border-color: var(--green-glow); color: #062b1d; }
.pg { list-style: none; padding: 12px 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg li { padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); opacity: 0.22; transition: opacity 400ms; }
.pg-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pg-top b { font-size: 14px; }
.bar { display: block; height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple-2), var(--cyan)); transition: width 1200ms var(--ease); }
.pg li.is-on .bar i { width: var(--w); }
.pg em { display: block; margin-top: 10px; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,0.6); }
.wk-foot { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 18px 22px 22px; border-top: 1px solid rgba(255,255,255,0.08); }
.wk-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lilac-2); }
.wk-foot h3 { margin-top: 6px; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; }
.wk-foot a { flex: none; color: var(--cyan); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.wk-foot a:hover { text-decoration: underline; }
.work-note, .stack-note, .lane-note { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,0.5); }
.stack-note, .lane-note { color: var(--muted); }
.static [data-s], .reduced [data-s] { opacity: 1; transform: none; }

/* architecture */
.arch { padding-block: clamp(90px, 10vw, 140px); color: #fff; background: radial-gradient(60% 40% at 50% 0%, rgba(101,54,255,0.30), transparent 70%), #0b0920; }
.sec-head.center { text-align: center; max-width: 860px; margin-inline: auto; }
.arch h2 { font-size: clamp(34px, 3vw + 14px, 60px); line-height: 1.04; }
.arch .lead { margin: 18px auto 0; max-width: 62ch; }
.ar { margin-top: 52px; }
.ar-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ar-p { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); font-size: 16px; }
.ar-p > i { font-style: normal; color: rgba(255,255,255,0.5); font-size: 20px; }
.ar-role { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ar-role img { width: 40px; height: 40px; }
.ar-twin { width: 34px; height: 34px; border-radius: 9px; background: var(--deep) url('../icons/twin--purple.svg') center/125%; box-shadow: 0 0 0 1px rgba(186,165,255,0.5); }
.ar-wires { display: block; width: 100%; height: 40px; }
.ar-wires path { fill: none; stroke: #2fe0d0; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.8; }
.ar-os { border-radius: 24px; border: 1.5px solid rgba(186,165,255,0.55); background: linear-gradient(180deg, rgba(101,54,255,0.20), rgba(101,54,255,0.06)); padding: 18px; box-shadow: 0 0 80px -30px rgba(128,84,255,0.8); }
.ar-os-h { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; font-size: clamp(20px, 1.4vw + 10px, 28px); }
.ar-logo { width: 30px; height: 24px; background: linear-gradient(135deg, var(--lilac-2), var(--purple-2)); clip-path: polygon(0 100%, 42% 0, 58% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%); }
.ar-tag { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac-2); padding: 5px 10px; border: 1px solid rgba(186,165,255,0.5); border-radius: 8px; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.ar-panel { border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,8,32,0.6); padding: 16px; min-width: 0; }
.ar-k { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ar-k > span { color: rgba(255,255,255,0.4); }
.ar-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.ar-msg p { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.07); font-size: 14px; line-height: 1.45; }
.ar-msg.tw p { background: rgba(101,54,255,0.25); border: 1px solid rgba(186,165,255,0.3); }
.ar-msg .m2 { display: none; }
.ar[data-state='done'] .ar-msg .m1 { display: none; }
.ar[data-state='done'] .ar-msg .m2 { display: block; animation: pop 500ms var(--spring); }
.kb-ic { width: 20px; height: 18px; border: 2px solid rgba(255,255,255,0.7); border-radius: 3px; background: linear-gradient(90deg, transparent 32%, rgba(255,255,255,0.7) 32% 38%, transparent 38% 62%, rgba(255,255,255,0.7) 62% 68%, transparent 68%); }
.kb3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kc-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.kc-h i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
.kc-h.prog { background: rgba(101,54,255,0.25); }
.kc-h.prog i { border-right-color: transparent; animation: spin 1.6s linear infinite; }
.kc-h.need { background: rgba(255,190,80,0.15); color: #ffc46b; }
.kc-h.done { background: rgba(47,211,147,0.14); color: var(--green-glow); }
.kc-h.done i { background: currentColor; }
.kcard { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.kcard b { font-size: 14.5px; line-height: 1.3; }
.pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.pill i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.pill.prog { background: rgba(101,54,255,0.3); color: #d8ccff; }
.pill.need { background: rgba(255,190,80,0.16); color: #ffc46b; }
.pill.done { background: rgba(47,211,147,0.16); color: var(--green-glow); }
.pill.done i { background: currentColor; }
.pill .t2 { display: none; }
.who { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.who em { font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.7); display: inline-flex; align-items: center; gap: 5px; }
.who em::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.who em.tw::before { border-radius: 4px; background: var(--deep) url('../icons/twin--purple.svg') center/125%; }
.kcard.mover { border-color: #ffbe50; box-shadow: 0 0 0 3px rgba(255,190,80,0.15); transition: transform 700ms var(--ease), opacity 400ms; }
.kcard.mover.fade { opacity: 0; transform: translateY(8px) scale(0.97); }
.ar[data-state='done'] .kcard.mover { border-color: rgba(47,211,147,0.6); box-shadow: 0 0 0 3px rgba(47,211,147,0.15); }
.ar[data-state='done'] .kcard.mover .pill { background: rgba(47,211,147,0.16); color: var(--green-glow); }
.ar[data-state='done'] .kcard.mover .pill i { background: currentColor; }
.ar[data-state='done'] .kcard.mover .t1 { display: none; }
.ar[data-state='done'] .kcard.mover .t2 { display: inline; }
.ar-det .det-t { display: block; font-size: 20px; letter-spacing: -0.01em; }
.det-s { display: block; color: rgba(255,255,255,0.6); font-size: 14px; }
.ar-det dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0; font-size: 14px; }
.ar-det dt { color: rgba(255,255,255,0.6); }
.decide { padding: 12px; border-radius: 12px; border: 1.5px solid #ffbe50; background: rgba(255,190,80,0.08); transition: border-color 400ms, background 400ms; }
.decide p { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #ffc46b; font-size: 14px; }
.clk { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.clk::after { content: ''; position: absolute; left: 5px; top: 2px; width: 3px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; }
.decide .d2 { display: none; }
.approve { width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; border: 0; background: #ffbe50; color: #2b1a00; font: 800 15px var(--font); cursor: pointer; animation: nudge 2.4s ease-in-out infinite; }
.approve:hover { background: #ffcc73; }
.approve:focus-visible, .replay:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,190,80,0.5); } 50% { box-shadow: 0 0 0 8px rgba(255,190,80,0); } }
.ar:not([data-state='wait']) .decide { border-color: rgba(47,211,147,0.6); background: rgba(47,211,147,0.08); }
.ar:not([data-state='wait']) .decide p { color: var(--green-glow); }
.ar:not([data-state='wait']) .decide .d1 { display: none; }
.ar:not([data-state='wait']) .decide .d2 { display: inline; }
.ar:not([data-state='wait']) .approve { display: none; }
.crit-k { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); font-size: 13px; }
.crit { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.5); position: relative; flex: none; }
.crit .c2 { display: none; color: var(--cyan); }
.ar[data-state='moving'] .crit .c1 { display: none; }
.ar[data-state='moving'] .crit .c2 { display: inline; }
.ar[data-state='moving'] .box { border-color: var(--cyan); border-right-color: transparent; border-radius: 50%; animation: spin 800ms linear infinite; }
.ar[data-state='done'] .box { border: 0; background: var(--green-glow); }
.ar[data-state='done'] .box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid #062b1d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ar[data-state='done'] .crit { color: var(--green-glow); }
.replay { display: none; margin-top: 14px; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff; font: 700 13px var(--font); cursor: pointer; }
.ar[data-state='done'] .replay { display: inline-block; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.ar-base { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,8,32,0.5); }
.ar-base li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; font-size: 15px; }
.ar-base li + li { border-left: 1px solid rgba(255,255,255,0.1); }
.ar-base img { width: 30px; height: 30px; border-radius: 8px; }
.ar-base small { display: block; font-weight: 500; color: rgba(255,255,255,0.6); font-size: 12.5px; }
.ar-flow { position: relative; display: flex; justify-content: space-around; padding: 26px 8% 22px; }
.ar-flow::before { content: ''; position: absolute; left: 20%; right: 20%; top: 50%; border-top: 2px solid #2fe0d0; opacity: 0.7; }
.ar-flow::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid #2fe0d0; opacity: 0.7; }
.ar-flow span { position: relative; z-index: 1; padding: 6px 16px; border-radius: 99px; border: 1.5px solid #2fe0d0; background: #0b0920; font-weight: 700; font-size: 14px; }
.ar-cs { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
.ar-cs-k { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px 0 8px; border-right: 1px solid rgba(255,255,255,0.12); }
.ar-cs-k b { font-size: 20px; }
.ar-cs-k > span:last-child { color: rgba(255,255,255,0.6); font-size: 13px; font-family: var(--mono); }
.cs-ic { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 7px; background: linear-gradient(140deg, var(--lilac-2), var(--purple-2)); box-shadow: 4px 4px 0 -1px rgba(186,165,255,0.35); }
.ar-grp { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.ar-grp p { width: 100%; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.tl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,0.06); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tl-chip img { width: 18px; height: 18px; border-radius: 4px; }

/* integrations wall */
.stack { padding-block: clamp(80px, 9vw, 130px) clamp(40px, 5vw, 70px); overflow: hidden; }
.stack-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.stack h2 { font-size: clamp(32px, 2.6vw + 14px, 54px); line-height: 1.05; }
.stack .big-num { color: var(--purple); }
.stack-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stack-stats li { padding: 16px; border-radius: 16px; background: #f6f3ff; }
.stack-stats b { display: block; font-size: 28px; letter-spacing: -0.02em; color: var(--deep); }
.stack-stats span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.stack-rows { margin-top: 44px; }
.logos-mq .lq-track { gap: 12px; animation-duration: 70s; }
.logos-mq.reverse .track { animation-duration: 80s; }
.logos-mq .tl-chip { padding: 12px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe6f7; color: var(--ink-2); font-size: 15.5px; box-shadow: 0 10px 24px -20px rgba(73,39,184,0.5); }
.logos-mq .lg { width: 22px; height: 22px; }
.logos-mq .lg.mono { font-size: 10px; border-radius: 6px; }

/* lanes: where each category stops */
.lanes { margin-top: clamp(60px, 7vw, 100px); padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid #ebe5ff; box-shadow: 0 40px 80px -60px rgba(73,39,184,0.5); }
.lanes-head { max-width: 760px; }
.lanes-head h3 { font-size: clamp(26px, 1.8vw + 14px, 40px); line-height: 1.08; letter-spacing: -0.03em; }
.lanes-head > p:last-child { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.lane-grid { margin-top: 30px; display: grid; gap: 8px; }
.ln { display: grid; grid-template-columns: minmax(150px, 1.25fr) repeat(5, minmax(0, 1fr)); gap: 0 6px; align-items: center; }
.ln > [role=rowheader] { grid-column: 1; font-weight: 700; font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding-right: 12px; }
.ln > a[role=rowheader]:hover { color: var(--purple); }
.ln-h span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 6px; border-bottom: 1px dashed #ddd6f3; }
.ln-h span:first-child { border: 0; }
.ln-bar { grid-column: var(--c); grid-row: 1; padding: 10px 14px; border-radius: 10px; background: #f1eef9; color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-align: center; }
.ln:not(.ln-h) { min-height: 46px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% - 1px), transparent calc(100% - 1px)); }
.ln.ax { margin-top: 6px; }
.ln.ax > span[role=rowheader] { color: var(--purple); font-size: 17px; }
.ln-bar.ax { display: flex; align-items: center; gap: 12px; text-align: left; padding: 0; overflow: hidden; color: #fff; background: linear-gradient(95deg, var(--purple), var(--deep) 60%, #2a9fd0); box-shadow: 0 16px 34px -18px rgba(101,54,255,0.9); }
.ln-bar.ax em { flex: 0 0 calc(20% - 4px); align-self: stretch; display: grid; place-items: center; padding: 8px 10px; font-style: normal; font-size: 12px; text-align: center; line-height: 1.25; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px); border-right: 1px dashed rgba(255,255,255,0.35); }
.ln-bar.ax b { padding: 14px 12px; font-size: 15px; }

@media (max-width: 1080px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ar-kb { grid-column: 1 / -1; grid-row: 1; }
  .ar-cs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-cs-k { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; border: 0; padding: 0 4px; }
  .ar-cs-k .cs-ic { margin: 0; }
}
@media (max-width: 900px) {
  .work-head, .stack-head { display: block; }
  .work-head .btn { margin-top: 22px; }
  .stack-stats { margin-top: 26px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .wk-vm, .wk-prog { grid-column: auto; }
  .pg { grid-template-columns: minmax(0, 1fr); }
  .ar-people { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ar-wires { display: none; }
  .ar-people { margin-bottom: 14px; }
  .ar-p { justify-content: flex-start; }
  .ar-base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-base li:nth-child(3) { border-left: 0; }
  .ar-base li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .ln { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ln > [role=rowheader] { grid-column: 1 / -1; grid-row: 1; padding: 8px 0 2px; }
  .ln-bar { grid-column: var(--cm); grid-row: 2; }
  .ln-h > span:first-child { display: none; }
  .ln-h span { grid-row: 1; font-size: 9.5px; letter-spacing: 0.02em; }
}
@media (max-width: 640px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr); }
  .kb3 { grid-template-columns: minmax(0, 1fr); }
  .ar-cs { grid-template-columns: minmax(0, 1fr); }
  .ar-flow span { padding: 5px 10px; font-size: 12.5px; }
  .ar-os-h { flex-wrap: wrap; }
  .ar-tag { margin-left: 0; }
  .wk-foot { flex-direction: column; align-items: flex-start; }
  .wk-art { padding: 14px 14px 0; }
  .ln-bar { padding: 8px 6px; font-size: 11.5px; }
  .ln-bar.ax { flex-direction: column; align-items: stretch; gap: 0; }
  .ln-bar.ax em { flex: none; border-right: 0; border-bottom: 1px dashed rgba(255,255,255,0.35); }
  .ln-bar.ax b { font-size: 13px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-rail, .voice-rail { animation-duration: 400s; }
  .approve { animation: none; }
}

.lq-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.logos-mq:hover .lq-track { animation-play-state: paused; }
.logos-mq.reverse .lq-track { animation-direction: reverse; }
.kc-empty { display: none; padding: 14px 10px; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.18); color: rgba(255,255,255,0.5); font-size: 13px; text-align: center; }
.ar[data-state='done'] .kc-empty { display: block; }

/* =================== v6: dark theme (Linear / openhack inspired) =================== */
:root {
  --bg: #08090a; --bg-2: #0e0f11; --card: #111215; --card-2: #16171b; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14);
  --tx: #f7f8f8; --tx-2: #c3c6cd; --tx-3: #8a8f98;
  --ink: #f7f8f8; --ink-2: #d0d3d9; --muted: #8a8f98;
}
html { background: var(--bg); color-scheme: dark; }
body { background: var(--bg); color: var(--tx); }
h1, h2, h3 { color: var(--tx); }
h2 { font-weight: 600; letter-spacing: -0.04em; }
.muted, .muted-light { color: var(--tx-3) !important; }
.lead, .lead.light { color: var(--tx-3); }
.label, .label.light { color: #a594f9; }
.grad { background: linear-gradient(95deg, #b9a6ff, #6fd3f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.more { color: #b9a6ff; }
.skip { background: var(--card); color: var(--tx); }
main > section + section, main > section + .take { border-top: 1px solid var(--line); }
main > section.hero + section { border-top: 0; }

/* nav */
.nav.solid, .nav.solid.on-dark { background: rgba(8,9,10,0.78); color: var(--tx); box-shadow: 0 1px 0 var(--line); }
.nav.solid .brand img, .brand img { filter: none; }
.nav-links a, .signin { color: var(--tx-2); font-weight: 500; }
.nav-links a:hover, .signin:hover, .nav.solid .nav-links a:hover, .nav.solid .signin:hover { background: rgba(255,255,255,0.06); color: var(--tx); }
.nav-cta .btn-primary { background: var(--tx); color: #08090a; box-shadow: none; }
@media (max-width: 1080px) { .mobile-menu[data-open='true'] { background: var(--bg-2); color: var(--tx); border-bottom: 1px solid var(--line); } }

/* buttons */
.btn-white { background: var(--tx); color: #08090a; }
.btn-glass { background: rgba(255,255,255,0.04); border-color: var(--line-2); color: var(--tx); backdrop-filter: none; }
.btn-glass:hover { background: rgba(255,255,255,0.08); }
.btn-primary { box-shadow: 0 10px 30px -14px rgba(101,54,255,0.9); }

/* hero */
.hero { background: radial-gradient(70% 55% at 50% -10%, rgba(101,54,255,0.38), transparent 70%), var(--bg); padding-bottom: 0; }
.hero-glow { background: radial-gradient(30% 25% at 25% 20%, rgba(71,200,245,0.12), transparent 70%), radial-gradient(30% 25% at 78% 22%, rgba(128,84,255,0.22), transparent 70%); }
.kicker { background: rgba(255,255,255,0.04); border-color: var(--line-2); color: var(--tx-2); }
.hero h1 { color: var(--tx); font-size: clamp(46px, 6.4vw + 8px, 104px); }
.hero-sub { color: var(--tx-3); }
.hero-video { position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 72px); }
.vid { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 0 0 6px rgba(255,255,255,0.025), 0 50px 120px -40px rgba(101,54,255,0.65); }
.vid img { display: block; width: 100%; height: auto; transition: transform 900ms var(--ease), filter 600ms; }
.vid:hover img { transform: scale(1.015); filter: brightness(1.08); }
.vid-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.75)); }
.vid-play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 300ms var(--spring), background 300ms; }
.vid-play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vid-play i { margin-left: 6px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.vid:hover .vid-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(101,54,255,0.55); }
.vid:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.vid-cap { position: absolute; left: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); bottom: clamp(14px, 2.4vw, 28px); display: flex; align-items: end; justify-content: space-between; gap: 16px; text-align: left; color: #fff; }
.vid-cap b { font-size: clamp(15px, 0.6vw + 12px, 20px); font-weight: 600; letter-spacing: -0.01em; max-width: 34ch; }
.vid-cap small { flex: none; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.75); padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,0.45); }
.hero-quote { margin-top: 34px; }
.hero-quote blockquote { color: var(--tx); }
.hero-quote figcaption, .hero-quote figcaption b { color: var(--tx-3); }
.hero-quote figcaption b { color: var(--tx-2); }
.hero-strip { color: var(--tx-3); padding-top: 28px; }
.hero-strip b { color: var(--tx); }
.strip-ic { width: 20px; height: 20px; border-radius: 5px; margin-right: -4px; }
.strip-ic + .strip-ic { margin-right: 4px; }
.check { background: #2fd393; }

/* customer logos */
.logos { padding-block: clamp(48px, 5vw, 72px); }
.logos-title { color: var(--tx-3); }
.logo-rail { margin-top: 28px; animation-duration: 50s; }
.logo-track { gap: clamp(48px, 6vw, 84px); padding-right: clamp(48px, 6vw, 84px); }
.cl { display: flex; align-items: center; gap: 8px; height: 40px; }
.cl img { width: auto; filter: brightness(0) invert(1); opacity: 0.62; transition: opacity 300ms; }
.cl:hover img { opacity: 1; }
.cl-word { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #fff; opacity: 0.62; }
.cl-text { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; opacity: 0.45; white-space: nowrap; }

/* voices */
.voices { padding-block: clamp(80px, 9vw, 120px) clamp(40px, 5vw, 70px); }
.voice { width: 440px; background: var(--card); border-color: var(--line); box-shadow: none; padding: 26px; }
.voice:hover { border-color: rgba(185,166,255,0.35); }
.voice blockquote { color: var(--tx-3); font-weight: 500; font-size: 15.5px; line-height: 1.6; }
.voice blockquote strong { color: var(--tx); font-weight: 600; }
.v-uc { background: rgba(128,84,255,0.14); color: #cdbfff; }
.v-uc:hover { background: rgba(128,84,255,0.24); }
.voice figcaption { padding-top: 18px; border-top: 1px solid var(--line); }
.voice figcaption b { color: var(--tx); }
.voice figcaption small { color: var(--tx-3); }
@media (max-width: 720px) { .voice { width: 320px; padding: 20px; } }

/* advisor spotlight */
.advisor { padding-block: clamp(40px, 5vw, 70px) clamp(80px, 9vw, 120px); border-top: 0 !important; }
.adv { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(60% 80% at 100% 0%, rgba(101,54,255,0.22), transparent 70%), var(--card); }
.adv-photo { position: relative; min-height: 380px; }
.adv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.adv-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 64px); }
.adv blockquote { margin-top: 6px; font-size: clamp(24px, 1.6vw + 14px, 40px); line-height: 1.22; font-weight: 600; letter-spacing: -0.03em; color: var(--tx); }
.adv figcaption { display: grid; gap: 2px; margin-top: 28px; }
.adv figcaption b { font-size: 18px; }
.adv figcaption span { color: #cdbfff; font-weight: 600; }
.adv figcaption small { color: var(--tx-3); font-size: 14.5px; }
.adv .more { margin-top: 24px; }
@media (max-width: 820px) { .adv { grid-template-columns: 1fr; } .adv-photo { min-height: 0; aspect-ratio: 4 / 3; } }

/* dark sections that had their own backgrounds */
.work, .arch, .os, .trust, .backers { background: radial-gradient(55% 40% at 85% 0%, rgba(101,54,255,0.16), transparent 70%), var(--bg); }
.wk, .ar-os, .ar-panel, .ar-cs, .ar-base, .ar-p { border-color: var(--line); }
.wk { background: var(--card); }
.term { background: #0a0b0d; border-color: var(--line); }

/* problem */
.chaos-stage, .chaos-stage[data-mode='with'] { background: radial-gradient(120% 90% at 50% 0%, rgba(101,54,255,0.18), transparent 70%), var(--card); border: 1px solid var(--line); }
.note { background: var(--card-2); border: 1px solid var(--line-2); color: var(--tx); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.8); }
.note b { color: var(--tx); }
.note .age { color: var(--tx-3); }
.calm-card { background: var(--card-2); border: 1px solid var(--line-2); color: var(--tx); }
.calm-card li { color: var(--tx-2); }
.calm-head span { color: var(--tx-3); }
.btn-mini { background: transparent; border-color: var(--line-2); color: var(--tx); }
.switch { background: var(--card-2); border-color: var(--line); }
.switch button { color: var(--tx-2); }
.switch[data-mode='with'] button[data-mode='with'], .switch:not([data-mode='with']) button[data-mode='without'] { color: #fff; }
.sq { background: var(--card); border-color: var(--line); }
.sq blockquote, .sq figcaption b { color: var(--tx); }
.sq figcaption { color: var(--tx-3); }

/* changes + generic cards */
.chg, .story, .stat, .size, .post, .ucard, .moat article, .founder, .role-panels, .dod, .exits li { background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: none !important; color: var(--tx); }
.size.hot { background: radial-gradient(80% 60% at 100% 0%, rgba(71,200,245,0.2), transparent 70%), linear-gradient(150deg, #1a1240, #2a1a6e) !important; }
.chg blockquote, .story > blockquote { color: var(--tx-2); border-color: var(--line); }
.chg-ba .a, .chg .who b, .story .who b, .story .wm, .stat-label { color: var(--tx); }
.chg-ba .b, .chg p, .story p, .size p, .post p, .ucard p, .founder p, .role p, .moat span { color: var(--tx-3); }
.founder > div { background: var(--card); }
.founder h3, .size h3, .post h3, .ucard b, .moat b, .role h3 { color: var(--tx); }
.ticks.dark li { color: var(--tx-2); }
.ticks.dark li::before { background: rgba(128,84,255,0.2); }
.ticks.dark li::after { border-color: #b9a6ff; }
.proof, .engine, .solutions, .team, .field, .stack, .changes, .chaos, .final, .voices, .logos { background: var(--bg) !important; }
.seg { background: var(--card-2); }
.seg button { color: var(--tx-2); }
.role-list button { background: var(--card); border-color: var(--line); color: var(--tx-2); }
.role-list button[aria-selected='true'] { background: rgba(128,84,255,0.14); border-color: rgba(185,166,255,0.5); color: var(--tx); }
.track span { background: var(--card); color: var(--tx-2); border-color: var(--line); }
.track span:nth-child(3n) { background: rgba(101,54,255,0.18); color: #e2dbff; border-color: rgba(185,166,255,0.3); }
.marquee.reverse .track span { background: var(--card); color: var(--tx-3); border-color: var(--line); }
.marquee.reverse .track span:nth-child(4n) { background: var(--tx); color: #08090a; }

/* engine */
.engine h2 { font-size: clamp(30px, 2.4vw + 14px, 50px); }
.moat article b { color: var(--tx); }
.mdl { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border-color: var(--line); color: var(--tx); }
.mdl .lg { width: 18px; height: 18px; border-radius: 4px; }
.lg-key { font-size: 16px; color: #ffcf6b; }
.models-k { color: var(--tx-3); }
.lanes { background: var(--card); border-color: var(--line); box-shadow: none; }
.lanes-head > p:last-child { color: var(--tx-3); }
.ln > [role=rowheader] { color: var(--tx-2); }
.ln-h span { color: var(--tx-3); border-color: var(--line-2); }
.ln-bar { background: var(--card-2); color: var(--tx-2); border: 1px solid var(--line); }
.ln.ax > span[role=rowheader] { color: #b9a6ff; }
.lane-note, .stack-note { color: var(--tx-3); }
.crumbs { background: var(--card) !important; border: 1px solid var(--line); }
.crumbs p { color: var(--tx-2); }
.crumb-links a:not(.more) { background: transparent; border-color: var(--line-2); color: var(--tx); }

/* graph */
.graph { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.graph-canvas { border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(50% 50% at 50% 50%, rgba(101,54,255,0.10), transparent 70%), #0b0c0e; overflow: hidden; }
.graph svg { display: block; width: 100%; height: auto; }
.gs { stroke: rgba(185,166,255,0.10); stroke-width: 1; }
.ge { stroke: rgba(255,255,255,0.16); stroke-width: 1.2; transition: stroke 250ms, opacity 250ms; }
.ge.hot { stroke: #b9a6ff; stroke-width: 2; }
.core circle { fill: #120d2b; stroke: rgba(185,166,255,0.55); stroke-width: 1.5; }
.core text { fill: #e2dbff; font: 600 12px var(--font); }
.gn { cursor: pointer; outline: none; }
.gn rect { fill: #15161a; stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1.2; transition: fill 250ms, stroke 250ms; }
.gn text { fill: #d0d3d9; font: 500 13px var(--font); }
.gn image { clip-path: inset(0 round 5px); }
.focus .gn:not(.near) { opacity: 0.28; }
.focus .ge:not(.hot) { opacity: 0.15; }
.gn.near rect, .gn:focus-visible rect { fill: #1d1e24; stroke: var(--c); }
.gn.lit rect { stroke: var(--c); fill: color-mix(in srgb, var(--c) 14%, #15161a); }
.gn.now rect { stroke-width: 2.2; filter: drop-shadow(0 0 10px var(--c)); }
.gn.lit text { fill: #fff; }
.trace-path { fill: none; stroke: #47c8f5; stroke-width: 2.4; stroke-dasharray: 6 6; animation: flow-dash 1.2s linear infinite; filter: drop-shadow(0 0 6px rgba(71,200,245,0.7)); }
.graph.verified .trace-path { stroke: #2fd393; filter: drop-shadow(0 0 6px rgba(47,211,147,0.7)); }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
.graph-side { display: flex; flex-direction: column; padding: 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); }
.trace-steps { list-style: none; counter-reset: t; display: grid; gap: 4px; margin-top: 6px; }
.trace-steps li { counter-increment: t; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--tx-3); cursor: pointer; transition: background 250ms, color 250ms; }
.trace-steps li::before { content: counter(t); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 11px var(--mono); }
.trace-steps li.done { color: var(--tx-2); }
.trace-steps li.done::before { content: '✓'; background: rgba(47,211,147,0.16); border-color: transparent; color: #2fd393; }
.trace-steps li.now { background: rgba(71,200,245,0.10); color: var(--tx); }
.trace-steps li.now::before { border-color: #47c8f5; color: #47c8f5; }
.graph-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--tx-3); }
.graph-legend li { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend i { width: 8px; height: 8px; border-radius: 50%; }
.graph-note { margin-top: 12px; font-size: 12px; color: var(--tx-3); }
@media (max-width: 1080px) { .graph { grid-template-columns: 1fr; } .graph-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .graph-side .label { grid-column: 1 / -1; } .graph-legend { margin-top: 0; border: 0; padding-top: 6px; align-content: start; } .graph-note { grid-column: 1 / -1; } }
@media (max-width: 720px) { .graph-canvas { overflow-x: auto; } .graph svg { width: 820px; max-width: none; } .graph-side { display: flex; } .graph-legend { padding-top: 14px; border-top: 1px solid var(--line); } }

/* architecture: fits one screen */
.arch { padding-block: clamp(70px, 7vw, 100px); }
.arch .sec-head h2 { font-size: clamp(30px, 2.4vw + 14px, 50px); }
.arch .lead { font-size: 17px; margin-top: 12px; }
.ar { margin-top: 30px; }
.ar-people { gap: 14px; }
.ar-p { padding: 7px 12px; font-size: 14.5px; gap: 8px; border-radius: 12px; background: var(--card); }
.ar-role { width: 30px; height: 30px; }
.ar-role img { width: 30px; height: 30px; }
.ar-twin { width: 26px; height: 26px; border-radius: 7px; }
.ar-wires { height: 22px; }
.ar-os { padding: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(101,54,255,0.14), rgba(101,54,255,0.03)); }
.ar-os-h { padding: 2px 4px 10px; font-size: 18px; gap: 10px; }
.ar-logo-img { height: 22px; width: auto; }
.ar-os-h b { font-weight: 600; color: var(--tx-2); }
.ar-grid { gap: 10px; }
.ar-panel { padding: 12px; background: #0b0c0e; }
.ar-k { font-size: 14px; padding-bottom: 8px; margin-bottom: 10px; }
.ar-k .lg { width: 16px; height: 16px; }
.ar-msg { margin-bottom: 10px; gap: 8px; }
.ar-msg p { font-size: 13px; padding: 8px 10px; }
.ar-msg .sk-a { width: 26px; height: 26px; font-size: 12px; }
.kc { gap: 8px; }
.kc-h { padding: 6px 10px; font-size: 12.5px; }
.kc-h i { width: 11px; height: 11px; }
.kcard { padding: 9px; gap: 7px; }
.kcard b { font-size: 13px; }
.pill { font-size: 11px; padding: 4px 8px; }
.who { padding-top: 6px; }
.ar-det .det-t { font-size: 17px; }
.ar-det dl { margin: 10px 0; font-size: 13px; }
.decide { padding: 10px; }
.approve { padding: 9px; font-size: 14px; margin-top: 8px; }
.crit-k { margin-top: 10px; padding-top: 8px; }
.crit { font-size: 13px; }
.ar-base { margin-top: 10px; background: #0b0c0e; }
.ar-base li { padding: 9px 10px; font-size: 13.5px; gap: 8px; }
.ar-base img { width: 22px; height: 22px; border-radius: 6px; }
.ar-base small { font-size: 11.5px; }
.ar-flow { padding: 12px 8% 10px; }
.ar-flow span { padding: 3px 12px; font-size: 12.5px; background: var(--bg); }
.ar-cs { grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: 16px; background: var(--card); align-items: center; }
.ar-cs-k { padding: 0 12px 0 6px; }
.ar-cs-k b { font-size: 16px; }
.ar-grp { flex-wrap: nowrap; align-items: center; padding: 8px 10px; gap: 6px; overflow: hidden; }
.ar-grp p { width: auto; flex: none; margin: 0 4px 0 0; font-size: 11.5px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx-3); font-weight: 500; }
.tl-chip { padding: 5px 8px; font-size: 12.5px; gap: 6px; background: rgba(255,255,255,0.05); }
.tl-chip .lg, .tl-chip img { width: 16px; height: 16px; border-radius: 4px; }
@media (max-width: 1080px) { .ar-grp { flex-wrap: wrap; } .ar-grp p { width: 100%; } }

/* integrations wall */
.stack-stats li { background: var(--card); border: 1px solid var(--line); }
.stack-stats b { color: var(--tx); }
.stack-stats span { color: var(--tx-3); }
.stack h2 .big-num { color: #b9a6ff; }
.logos-mq .tl-chip { background: var(--card); border-color: var(--line); color: var(--tx-2); box-shadow: none; font-size: 15px; padding: 11px 16px; }
.logos-mq .tl-chip .lg, .logos-mq .tl-chip img { width: 22px; height: 22px; border-radius: 5px; }

/* team */
.trench { grid-template-columns: 1fr; border: 1px solid var(--line); background: radial-gradient(60% 90% at 100% 0%, rgba(101,54,255,0.22), transparent 70%), var(--card); }
.trench-copy { padding: clamp(28px, 4vw, 56px); }
.trench-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .trench-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-foot { color: var(--tx-3); }
.role-t { color: #b9a6ff; }

/* footer */
.footer { border-top: 1px solid var(--line); background: var(--bg); }
.foot nav a { color: var(--tx-2); }
.foot nav a:hover { color: var(--tx); }
.ar-grp { flex-wrap: wrap; align-content: center; }
.ar-grp p { width: 100%; margin: 0 0 2px; }
.graph { grid-template-columns: 1fr; }
.graph-side { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; }
.graph-side .label, .graph-legend, .graph-note { grid-column: 1 / -1; }
.trace-steps { display: contents; }
.graph-legend { margin-top: 8px; }
.gn text { font-size: 14px; }
.chg-ba .a, .stat-num { color: #b9a6ff !important; }
.chg-ba .b { color: var(--tx-3) !important; }
@media (max-width: 1080px) { .graph-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .graph-side { display: grid; grid-template-columns: 1fr; } }
.chg-num span { color: #b9a6ff; }
.chg-num s { color: var(--tx-3); }
.chg-k, .size-k, .story-k, .post-k { color: #a594f9; }
.src { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.07) !important; color: var(--tx-2); padding: 3px 8px 3px 4px; }
.src img { width: 14px; height: 14px; border-radius: 3px; }
.changes .sec-head { align-items: center; }
.vid-sm { max-width: 540px; border-radius: 18px; box-shadow: 0 30px 80px -40px rgba(101,54,255,0.7); }
.vid-sm .vid-play { width: 64px; }
.vid-sm .vid-play i { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
.vid-sm .vid-cap b { font-size: 14.5px; }
.vid-sm .vid-cap small { font-size: 11px; }
.lgs { display: inline-flex; margin-right: 8px; vertical-align: -4px; }
.lgs .lg { width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 2px var(--card, #111215); }
.lgs .lg + .lg { margin-left: -4px; }
@media (max-width: 720px) { .vid-sm .vid-cap b { display: none; } }
.changes .sec-head > .vid-sm { grid-column: 2; grid-row: 1 / 3; align-self: center; }
@media (max-width: 900px) { .changes .sec-head > .vid-sm { grid-column: 1; grid-row: auto; margin-top: 28px; } }
.moat em { color: #cdbfff; font-style: normal; }
.engine .sec-head .lead { margin: 18px auto 0; max-width: 64ch; }
.size-twins b { color: #b9a6ff !important; }
.size.hot .size-twins b { color: #fff !important; }
.size-twins { color: var(--tx-3); }
.marquee.reverse .track span:nth-child(4n) { background: rgba(71,200,245,0.12); color: #bfeafc; border-color: rgba(71,200,245,0.3); }
.final-toast, .kb-mover, .sl, .twin-float { --ink: #0f1011; --ink-2: #2a2a33; --muted: #5a5a68; color: #0f1011; }
.story-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
.story-logo.on-photo { position: absolute; left: 24px; bottom: 22px; z-index: 1; height: 40px; opacity: 1; }
@media (max-width: 720px) {
  .vid-cap b { display: none; }
  .vid-cap { justify-content: flex-end; }
  .graph-canvas { position: relative; }
  .graph-canvas::after { content: 'Swipe to explore →'; position: sticky; left: 0; display: block; padding: 8px 14px; font: 500 11px var(--mono); color: var(--tx-3); }
}
@media (max-width: 1080px) { .ar-cs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ar-cs-k { grid-column: 1 / -1; flex-direction: row; gap: 10px; border: 0; } }
@media (max-width: 640px) { .ar-cs { grid-template-columns: minmax(0, 1fr); } .ar-grp { overflow: visible; } }

/* ===== v7: semantic color — pain (red/amber), Axari (violet→cyan), done (green) ===== */
:root { --c-pain: #ff6b5e; --c-warn: #ffb547; --c-done: #34e0a1; --c-brand-a: #b9a6ff; --c-brand-b: #6fd3f7; }
.pain { background: linear-gradient(95deg, #ff9a6b, #ff4d6d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.done-grad { background: linear-gradient(95deg, #5ef0b4, #6fd3f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad { background: linear-gradient(95deg, #c4b2ff 0%, #8f7dff 45%, #5fd0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 em { background: linear-gradient(95deg, #c4b2ff, #8f7dff 45%, #5fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-done { color: var(--c-done); font-weight: 600; }
.label.lb-pain { color: var(--c-pain) !important; }
.label.lb-done { color: var(--c-done) !important; }

/* problem: the unfinished state reads as risk */
.note .age { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #ff8a80; background: rgba(255,107,94,0.12); }
.note.n5 .age, .note.n4 .age { color: #ffc46b; background: rgba(255,181,71,0.12); }
.chaos-stage[data-mode='without'] { box-shadow: inset 0 0 120px rgba(255,77,109,0.06); }
.calm-big span { color: var(--c-done); }
.calm li .ok { background: rgba(52,224,161,0.16); }

/* before → after: crossed-out cost in red, the new number in green */
.chg-num s { color: rgba(255,138,128,0.8) !important; text-decoration-color: rgba(255,107,94,0.85); }
.chg-num span { background: linear-gradient(95deg, #5ef0b4, #6fd3f7); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.chg-ba .b { color: var(--tx-3) !important; }
.chg-ba .b::before { color: var(--c-pain); }
.chg-ba .a { color: var(--tx) !important; }
.chg-ba .a::before { border-color: var(--c-done); }
.chg { transition: border-color 250ms, transform 250ms; }
.chg:hover { border-color: rgba(52,224,161,0.35); transform: translateY(-2px); }

/* proof numbers and "done" states */
.role-proof b, .story .stat-num, .stat-num { color: var(--c-done) !important; }
.dod span { color: var(--c-done); }
.ticks li::before { background: rgba(52,224,161,0.14) !important; }
.ticks li::after { border-color: var(--c-done) !important; }
.trace-steps li.done::before { color: var(--c-done); }
.ln-bar.ax b { color: #fff; }

/* personas under the hero CTAs */
.personas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.personas-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); margin-right: 4px; }
.personas a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--tx-2); font-size: 13.5px; text-decoration: none; transition: border-color 200ms, color 200ms; }
.personas a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.personas a:hover { color: var(--tx); border-color: var(--pc); }

/* personalized demo section */
.demo { padding: 120px 0 40px; }
.demo .sec-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.demo .lead { margin: 18px auto 0; color: var(--tx-2); }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--tx); text-decoration: none; overflow: hidden; transition: border-color 250ms, transform 250ms; }
.pcard::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--pc), transparent); opacity: 0.7; }
.pcard::after { content: ''; position: absolute; width: 220px; height: 220px; right: -80px; top: -110px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%); pointer-events: none; }
.pcard:hover { border-color: color-mix(in srgb, var(--pc) 55%, transparent); transform: translateY(-3px); }
.pc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); }
.pc-ic img { width: 30px; height: 30px; }
.pcard b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 6px; }
.pc-d { color: var(--tx-3); font-size: 15px; line-height: 1.5; flex: 1; }
.pc-proof { font-size: 13.5px; color: var(--tx-3); padding-top: 12px; border-top: 1px solid var(--line); }
.pc-proof strong { color: var(--c-done); font-weight: 600; }
.pc-go { font-size: 14px; font-weight: 600; color: var(--pc); }
.pc-go i { font-style: normal; display: inline-block; transition: transform 200ms; }
.pcard:hover .pc-go i { transform: translateX(4px); }
@media (max-width: 980px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pcards { grid-template-columns: 1fr; } .demo { padding: 80px 0 20px; } .personas a { font-size: 12.5px; padding: 5px 10px; } }
.hero-video .vid .vid-play { top: 54.7%; background: rgba(124,92,255,0.45); }
.hero-video .vid-shade { background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.7)); }
.note .age { width: fit-content; align-self: flex-start; justify-self: start; }

/* ===== v11 hero: headline + benefits + Linear-grade Axari app window ===== */
.film { background: var(--bg); padding: 40px 0 10px; }
.film .hero-video { margin-top: 0; }

.hx { padding-bottom: 20px; }
.hx-copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; text-align: left; }
.hx h1 { margin-top: 22px; font-size: clamp(40px, 4.4vw + 8px, 76px); line-height: 1.0; letter-spacing: -0.045em; }
.hx .hero-sub { margin: 22px 0 0; max-width: 600px; font-size: clamp(17px, 0.4vw + 15px, 20px); color: var(--tx-2); }
.hx .hero-cta { justify-content: flex-start; margin-top: 30px; }
.hx-ben { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 12px; }
.hx-ben li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: var(--tx-2); }
.hx-ben li::before { content: ''; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: rgba(52,224,161,0.14); }
.hx-ben li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 7px; height: 3.5px; border-left: 2px solid var(--c-done); border-bottom: 2px solid var(--c-done); transform: rotate(-45deg); }
.hx-built { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.hx-built > span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); margin-right: 4px; }
.hx-built a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--tx-2); font-size: 13.5px; text-decoration: none; }
.hx-built a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.hx-built a:hover { color: var(--tx); border-color: var(--pc); }

.lx-stage { position: relative; z-index: 2; margin-top: clamp(44px, 5vw, 72px); }
.lx-stage::before { content: ''; position: absolute; left: 50%; top: -40px; width: min(1200px, 90%); height: 300px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 40%, rgba(101,54,255,0.35), transparent 70%); filter: blur(30px); pointer-events: none; }
.wrap-wide { position: relative; width: min(1360px, 100% - 2 * var(--gut)); margin: 0 auto; }

/* window */
.lx { --b0: #08090b; --b1: #0d0e11; --b2: #131418; --b3: #191a1f; --ln: rgba(255,255,255,0.07); --ln2: rgba(255,255,255,0.11); --t1: #eef0f3; --t2: #b5b9c3; --t3: #7c818c;
  position: relative; border-radius: 14px; background: var(--b1); border: 1px solid var(--ln2); color: var(--t1); font-size: 12.5px; line-height: 1.4; text-align: left; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 60px 160px rgba(40,20,120,0.45), 0 30px 60px rgba(0,0,0,0.5); }
.lx::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 20; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%); mix-blend-mode: screen; }
.lx button { font: inherit; color: inherit; cursor: pointer; }
.lx-chrome { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; background: var(--b0); border-bottom: 1px solid var(--ln); }
.lx-dots { display: flex; gap: 7px; } .lx-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .lx-dots i:nth-child(2) { background: #febc2e; } .lx-dots i:nth-child(3) { background: #28c840; }
.lx-url { position: absolute; left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 7px; border: 1px solid var(--ln); background: rgba(255,255,255,0.025); font: 500 11.5px var(--mono); color: var(--t3); white-space: nowrap; }
.lx-url i { font-style: normal; opacity: 0.5; margin: 0 4px; } .lx-url b { color: var(--t2); font-weight: 500; }
.lx-ex { margin-left: auto; font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); border: 1px solid var(--ln); padding: 3px 8px; border-radius: 99px; }
.lx-body { position: relative; display: grid; grid-template-columns: 216px minmax(0, 1fr) 316px; height: 700px; }

/* sidebar */
.lx-side { display: flex; flex-direction: column; padding: 10px 8px; background: var(--b0); border-right: 1px solid var(--ln); min-width: 0; }
.lx-ws { display: flex; align-items: center; gap: 8px; padding: 6px 6px 12px; }
.lx-ws-l { width: 22px; height: 22px; border-radius: 6px; background: #1c1d24; display: grid; place-items: center; } .lx-ws-l img { width: 14px; }
.lx-ws b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-caret { color: var(--t3); font-size: 11px; }
.lx-ws-a { margin-left: auto; display: flex; gap: 8px; color: var(--t3); }
.lx-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lx-navs { display: grid; gap: 1px; }
.lx-nav { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--t2) !important; font-size: 13px !important; text-align: left; white-space: nowrap; }
.lx-nav span { overflow: hidden; text-overflow: ellipsis; }
.lx-nav em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--t3); }
button.lx-nav:hover { background: rgba(255,255,255,0.045); color: var(--t1) !important; }
.lx-nav[aria-current] { background: rgba(255,255,255,0.075); color: #fff !important; }
.lx-nav .st { width: 13px; height: 13px; flex: none; }
.lx-sec { margin: 14px 8px 4px; font-size: 11.5px; font-weight: 500; color: var(--t3); }
.lx-me { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 8px 4px; border-top: 1px solid var(--ln); }
.lx-me b { display: block; font-size: 12px; } .lx-me small { font-size: 11px; color: var(--t3); }
.lx-orb { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #e1d8ff, #8f7dff 40%, #3b25b8 78%); box-shadow: 0 0 14px rgba(143,125,255,0.6); animation: lxorb 5s ease-in-out infinite; }
.lx-orb.sm { width: 18px; height: 18px; }
@keyframes lxorb { 50% { box-shadow: 0 0 20px rgba(111,211,247,0.6); } }

/* main */
.lx-main { position: relative; min-width: 0; overflow: hidden; background: var(--b1); }
.lx-v { display: none; height: 100%; overflow: auto; scrollbar-width: none; }
.lx-v::-webkit-scrollbar { display: none; }
.lx[data-v='home'] [data-v='home'], .lx[data-v='board'] [data-v='board'], .lx[data-v='issue'] [data-v='issue'], .lx[data-v='playbook'] [data-v='playbook'],
.lx[data-v='graph'] [data-v='graph'], .lx[data-v='program'] [data-v='program'], .lx[data-v='stack'] [data-v='stack'] { display: block; animation: lxin 420ms var(--ease); }
@keyframes lxin { from { opacity: 0; transform: translateY(5px); } }
.lx-main::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; background: linear-gradient(transparent, var(--b1)); }
.lx-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: rgba(13,14,17,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ln); }
.lx-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lx-crumb i { font-style: normal; color: var(--t3); font-weight: 400; } .lx-crumb .st { width: 14px; height: 14px; } .star { color: #ffc46b; }
.lx-tbs { display: flex; gap: 2px; }
.lx-tb { padding: 4px 9px; border-radius: 6px; font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.lx-tb.on { color: var(--t1); background: rgba(255,255,255,0.06); }
.lx-seg { display: flex; padding: 2px; border-radius: 7px; border: 1px solid var(--ln); background: var(--b0); }
.lx-seg span { padding: 3px 9px; border-radius: 5px; font-size: 11.5px; color: var(--t3); } .lx-seg .on { background: rgba(255,255,255,0.08); color: var(--t1); }
.lx-scope { display: flex; padding: 2px; border-radius: 7px; border: 1px solid var(--ln); background: var(--b0); margin-left: auto; }
.lx-scope button { padding: 3px 10px; border: 0; border-radius: 5px; background: none; font-size: 11.5px !important; color: var(--t3) !important; }
.lx-scope button[aria-pressed='true'] { background: rgba(143,125,255,0.22); color: #fff !important; }
.lx-scope + .lx-seg { margin-left: 0; }
.lx-nav-r { margin-left: auto; font: 500 11.5px var(--mono); color: var(--t3); }
.lx-pad { padding: 18px 20px 90px; }
.lx-h { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.lx-sub { font-size: 12.5px; color: var(--t3); max-width: 640px; }
.lx-k { font-size: 11.5px; font-weight: 600; color: var(--t3); margin-bottom: 8px; } .lx-k.mt { margin-top: 18px; } .lx-k span { float: right; font-weight: 500; }
.lx-k .a { float: none; color: #ffb547; font-weight: 600; }
.a { color: #ffb547; } .r { color: #ff7a6e; } .c { color: #6fd3f7; } .v { color: #a594f9; } .g { color: #34e0a1; }
.lx-btn { padding: 4px 10px; border-radius: 7px; border: 1px solid var(--ln2); background: var(--b3); font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; transition: background 150ms; }
.lx-btn:hover { background: #24252c; }
.lx-btn.w { background: #eef0f3; color: #0b0b0e !important; border-color: #eef0f3; }
.lx-btn.p { background: #6536ff; border-color: #6536ff; color: #fff !important; }
.lx-btn.ok { background: rgba(52,224,161,0.16) !important; border-color: transparent !important; color: #34e0a1 !important; cursor: default; }
.lx-i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.lx-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--ln2); font-size: 11px; color: var(--t2); white-space: nowrap; }
.lx-pill i { width: 6px; height: 6px; border-radius: 50%; } .lx-pill .lx-i { width: 12px; height: 12px; }
.lx-pill.prog { color: #8fdcf8; border-color: rgba(111,211,247,0.3); }
.lx-av { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 8px var(--font); color: #e8e4ff; }
.lx-av.tw { background: linear-gradient(135deg, #8f7dff, #4fc3f7); color: #fff; font-size: 9px; }

/* board */
.lx-filter { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--ln); }
.lx-filter span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ln); font-size: 11.5px; color: var(--t3); }
.lx-filter span.on { color: var(--t1); background: rgba(255,255,255,0.06); }
.lx-filter i { width: 6px; height: 6px; border-radius: 50%; } .lx-filter i.r { background: #ff6b5e; } .lx-filter i.a { background: #ffb547; } .lx-filter i.c { background: #6fd3f7; }
.lx-filter em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--t3); }
.lx[data-scope='mine'] .team-only, .lx[data-scope='team'] .mine-only { display: none !important; }
.lx-board { display: grid; grid-template-columns: repeat(5, 194px); gap: 10px; padding: 12px 14px 90px; overflow-x: auto; scrollbar-width: none; }
.lx-col { min-width: 0; }
.lx-col-h { display: flex; align-items: center; gap: 7px; padding: 4px 4px 9px; font-size: 12.5px; }
.lx-col-h b { font-weight: 600; } .lx-col-h span { color: var(--t3); font-size: 12px; } .lx-col-h .st { width: 14px; height: 14px; }
.lx-col-b { display: grid; gap: 7px; }
.lc { display: grid; gap: 6px; padding: 10px 11px; border-radius: 9px; background: var(--b2); border: 1px solid var(--ln); transition: border-color 200ms, transform 200ms, box-shadow 200ms; }
.lc-top { display: flex; align-items: center; justify-content: space-between; }
.lc-id { font: 500 11px var(--mono); color: var(--t3); }
.pr { width: 13px; height: 13px; }
.lc-t { display: grid; grid-template-columns: 14px 1fr; gap: 7px; align-items: start; }
.lc-t .st { width: 14px; height: 14px; margin-top: 1px; }
.lc-t b { font-size: 12.5px; font-weight: 550; line-height: 1.35; }
.lc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-f { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--t3); }
.lc.sel { border-color: rgba(143,125,255,0.65); box-shadow: 0 0 0 1px rgba(143,125,255,0.35), 0 8px 30px rgba(101,54,255,0.18); cursor: pointer; }
.lc.sel:hover { transform: translateY(-2px); }
.lc.hot { border-color: rgba(255,181,71,0.45); }
.lc-lock { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 6px, transparent 6px 12px); border-style: dashed; }
.lc-lock b { color: var(--t3); } .lk { font-size: 10px; }

/* home */
.lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lx-chips span { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ln); font-size: 11.5px; color: var(--t2); }
.lx-chips span::before { content: '● '; color: var(--t3); font-size: 9px; }
.lx-chips .a { color: #ffc46b; border-color: rgba(255,181,71,0.35); } .lx-chips .a::before { color: #ffb547; } .lx-chips .c::before { color: #6fd3f7; } .lx-chips .r::before { color: #ff6b5e; }
.lx-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.lx-stat3 p { padding: 12px 14px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); font-size: 11.5px; color: var(--t3); }
.lx-stat3 b { display: block; font-size: 24px; font-weight: 650; letter-spacing: -0.03em; color: var(--t1); }
.lx-stat3 b.c { color: #6fd3f7; } .lx-stat3 b.v { color: #a594f9; }
.lx-home { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.lx-needs, .lx-owed, .lx-sched { list-style: none; padding: 0; margin: 0; }
.lx-need { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 6px; border-radius: 9px; background: var(--b2); border: 1px solid var(--ln); border-left: 2px solid #ffb547; }
.lx-need.u { border-left-color: #ff8a4c; }
.lx-need > span { flex: 1; min-width: 0; } .lx-need b { display: block; font-size: 12.5px; font-weight: 600; } .lx-need small { font-size: 11px; color: var(--t3); }
.lx-need.is-done { border-left-color: #34e0a1; } .lx-need.is-done b { color: var(--t3); text-decoration: line-through; }
.lx-owed li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--ln); } .lx-owed b { font-weight: 550; } .lx-owed span { color: var(--t3); font-size: 11.5px; }
.lx-sched li { display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--ln); }
.lx-sched span { grid-row: span 2; font: 500 11px var(--mono); color: var(--t3); } .lx-sched b { font-weight: 600; } .lx-sched small { font-size: 11px; color: var(--t3); }

/* issue */
.lx-issue { display: grid; grid-template-columns: minmax(0, 1fr) 200px; min-height: calc(100% - 44px); }
.lx-desc { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--t2); max-width: 620px; }
.lx-chip-z { display: inline-flex; padding: 1px 8px; border-radius: 6px; background: rgba(245,154,216,0.12); color: #f7b1e0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lx-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.lx-steps li { display: grid; grid-template-columns: 14px 1fr 14px; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 9px; background: var(--b2); border: 1px solid var(--ln); }
.lx-steps .st { width: 14px; height: 14px; }
.lx-steps b { display: block; font-size: 12.5px; font-weight: 600; } .lx-steps small { font-size: 11px; color: var(--t3); }
.lx-steps .s-done b { color: var(--t2); }
.lx-steps .s-need { border-color: rgba(255,181,71,0.45); background: rgba(255,181,71,0.05); }
.lx-act { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 12px; color: var(--t3); }
.lx-act li { display: flex; align-items: center; gap: 7px; } .lx-act b { color: var(--t1); font-weight: 600; } .lx-act li b + b, .lx-act li > b:not(:first-of-type) { color: var(--t2); } .lx-act em { font-style: normal; }
.lx-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a8f98; flex: none; } .lx-dot.tw { background: #8f7dff; box-shadow: 0 0 6px #8f7dff; }
.lx-props { margin: 0; padding: 18px 14px; border-left: 1px solid var(--ln); display: grid; grid-template-columns: 1fr; align-content: start; gap: 3px; font-size: 12px; }
.lx-props dt { color: var(--t3); margin-top: 9px; font-size: 11px; }
.lx-props dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lx-props .st, .lx-props .pr { width: 13px; height: 13px; }

/* playbooks */
.lx-pb { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100% - 44px); }
.lx-pbl { list-style: none; padding: 10px 8px; margin: 0; border-right: 1px solid var(--ln); display: grid; gap: 2px; align-content: start; }
.lx-pbl li { display: flex; gap: 9px; padding: 8px; border-radius: 8px; } .lx-pbl li.on { background: rgba(245,154,216,0.09); box-shadow: inset 2px 0 0 #f59ad8; }
.lx-pbl b { display: block; font-size: 12px; font-weight: 600; } .lx-pbl small { font-size: 11px; color: var(--t3); }
.lx-pbh { display: flex; gap: 10px; align-items: center; } .lx-pbh .lx-i { width: 28px; height: 28px; border-radius: 7px; } .lx-pbh b { display: block; font-size: 16px; } .lx-pbh small { font-size: 11.5px; color: var(--t3); }
.lx-pbs { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 5px; }
.lx-pbs li { display: grid; grid-template-columns: 20px 1fr 14px; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 9px; background: var(--b2); border: 1px solid var(--ln); }
.lx-pbs .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln2); font: 600 10px var(--mono); color: var(--t3); }
.lx-pbs b { display: block; font-size: 12.5px; font-weight: 550; } .lx-pbs small { font-size: 11px; color: #f7b1e0; }
.lx-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lx-rules li { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--ln2); background: rgba(255,255,255,0.025); font-size: 12px; color: var(--t2); }
.lx-rules li.r { border-color: rgba(255,107,94,0.4); background: rgba(255,107,94,0.06); } .lx-rules b { color: var(--t1); }
.lx-rules li.new { border-color: rgba(245,154,216,0.6); background: rgba(245,154,216,0.08); animation: lxin 500ms var(--ease); }
.lx-cite { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ln); font-size: 11.5px; color: #f59ad8; } .lx-cite span + span { color: var(--t3); }

/* graph */
.lx-g { display: block; width: 100%; max-width: 760px; height: auto; margin: 6px auto 0; }
.lx-g .gl line { stroke-width: 1.2; opacity: 0.45; stroke-dasharray: 3 4; animation: lxdash 30s linear infinite; }
@keyframes lxdash { to { stroke-dashoffset: -400; } }
.lx-g .gn rect { fill: color-mix(in srgb, var(--c) 12%, #121318); stroke: color-mix(in srgb, var(--c) 70%, transparent); }
.lx-g text { fill: #eef0f3; font: 600 10.5px var(--font); text-anchor: middle; } .lx-g text.s { fill: #8a8f98; font-size: 9px; font-weight: 500; }
.lx-g .gc circle { fill: rgba(143,125,255,0.25); stroke: #8f7dff; stroke-width: 1.5; filter: drop-shadow(0 0 14px rgba(143,125,255,0.6)); }
.lx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 11.5px; color: var(--t3); }
.lx-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--c); }

/* program */
.lx-lock { font-size: 12px; color: var(--t3); }
[data-role='ciso'] .eng-only, [data-role='eng'] .ciso-only { display: none; }
.lx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lx-st { padding: 11px 12px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); }
.lx-st span { font-size: 11px; color: var(--t3); } .lx-st b { display: block; font-size: 24px; font-weight: 650; letter-spacing: -0.03em; margin: 2px 0; } .lx-st small { font-size: 10.5px; color: var(--t3); }
.lx-st.r b { color: #ff7a6e; } .lx-st.a b { color: #ffb547; } .lx-st.c b { color: #6fd3f7; } .lx-st.g b { color: #34e0a1; }
.lx-prog { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; transition: filter 300ms, opacity 300ms; }
[data-role='eng'] .lx-prog, [data-role='eng'] .lx-stats { filter: blur(5px); opacity: 0.35; pointer-events: none; }
.lx-tbl { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--b2); border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; }
.lx-tbl th, .lx-tbl td { padding: 9px 10px; text-align: left; border-top: 1px solid var(--ln); white-space: nowrap; }
.lx-tbl thead th { border-top: 0; font-size: 11px; font-weight: 500; color: var(--t3); }
.lx-tbl tbody th { font-weight: 600; } .lx-tbl .m { color: var(--t3); }
.lx-badge { display: inline-block; font-size: 10.5px; font-weight: 600; font-style: normal; padding: 1px 7px; border-radius: 99px; }
.lx-badge.g { background: rgba(52,224,161,0.14); color: #34e0a1; } .lx-badge.a { background: rgba(255,181,71,0.14); color: #ffc46b; } .lx-badge.r { background: rgba(255,107,94,0.15); color: #ff8a80; }
.lx-bar { display: block; width: 90px; height: 4px; border-radius: 9px; background: #2a2c33; position: relative; overflow: hidden; }
.lx-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; } .lx-bar.g i { background: #34e0a1; } .lx-bar.a i { background: #ffb547; } .lx-bar.r i { background: #ff6b5e; }
.lx-fw { padding: 12px 14px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); }
.lx-fw ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lx-fw li { display: grid; grid-template-columns: 58px 1fr 24px; gap: 8px; align-items: center; font-size: 12px; color: var(--t2); }
.lx-fw i { height: 5px; border-radius: 9px; background: #2a2c33; position: relative; overflow: hidden; }
.lx-fw i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #8f7dff, #6fd3f7); }
.lx-fw b { font: 500 11px var(--mono); color: var(--t3); text-align: right; }

/* integrations */
.lx-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.lx-tool { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); }
.lx-tool .lx-i { width: 22px; height: 22px; border-radius: 6px; }
.lx-tool span { flex: 1; min-width: 0; } .lx-tool b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lx-tool small { font-size: 10.5px; color: var(--t3); }

/* Twin panel (agent panel) */
.lx-tp { display: flex; flex-direction: column; min-width: 0; background: #101115; border-left: 1px solid var(--ln); }
.tp-h { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--ln); }
.tp-h b { font-size: 13px; } .tp-mod { padding: 1px 7px; border-radius: 5px; border: 1px solid var(--ln2); font-size: 11px; color: var(--t3); } .tp-x { margin-left: auto; color: var(--t3); letter-spacing: 6px; font-size: 12px; }
.tp-body { flex: 1; overflow: auto; padding: 14px; scrollbar-width: none; }
.tp-b { display: none; }
.lx[data-v='home'] .tp-b[data-p='home'], .lx[data-v='board'] .tp-b[data-p='board'], .lx[data-v='issue'] .tp-b[data-p='issue'], .lx[data-v='playbook'] .tp-b[data-p='playbook'],
.lx[data-v='graph'] .tp-b[data-p='graph'], .lx[data-v='program'] .tp-b[data-p='program'], .lx[data-v='stack'] .tp-b[data-p='stack'] { display: grid; gap: 10px; }
.tp-b > * { animation: lxin 420ms var(--ease) both; } .tp-b > *:nth-child(2) { animation-delay: 120ms; } .tp-b > *:nth-child(3) { animation-delay: 240ms; } .tp-b > *:nth-child(4) { animation-delay: 380ms; } .tp-b > *:nth-child(5) { animation-delay: 520ms; } .tp-b > *:nth-child(6) { animation-delay: 660ms; }
.tp-u { justify-self: end; max-width: 92%; padding: 9px 11px; border-radius: 10px; background: #1d1e25; border: 1px solid var(--ln); font-size: 12.5px; color: var(--t1); }
.tp-ctx { justify-self: end; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); } .tp-ctx .st { width: 12px; height: 12px; }
.tp-worked { font-size: 11.5px; color: var(--t3); }
.tp-from { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); }
.tp-msg { font-size: 12.5px; line-height: 1.55; color: var(--t2); } .tp-msg b { color: var(--t1); }
.tp-msg ul { margin: 4px 0 0; padding-left: 16px; } .tp-l { margin-top: 8px; font-weight: 700; color: var(--t1); }
.tp-btns { display: flex; gap: 6px; margin-top: 10px; }
.tp-changed { padding: 10px 11px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); }
.tp-changed p { font-size: 12px; color: var(--t3); } .tp-changed p b { color: var(--t1); margin-right: 4px; }
.tp-changed ul { list-style: none; padding: 0; margin: 7px 0 0; display: grid; gap: 6px; } .tp-changed li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); }
.tp-ask { padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,181,71,0.45); background: rgba(255,181,71,0.06); display: grid; gap: 3px; }
.tp-ask.z { border-color: rgba(245,154,216,0.5); background: rgba(245,154,216,0.06); }
.tp-ask b { font-size: 12.5px; } .tp-ask > span { font-size: 11.5px; color: var(--t3); }
.tp-src { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--t3); }
.tp-log, .tp-acts { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.tp-log li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ln); font-size: 12px; color: var(--t2); } .tp-log span { font: 500 11px var(--mono); color: var(--t3); }
.tp-acts li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--ln); font-size: 12px; color: var(--t2); } .tp-acts b { display: block; color: var(--t1); font-weight: 600; } .tp-acts .lx-i { margin-top: 2px; }
.tp-note { font-size: 11.5px; color: var(--t3); }
.tp-reply { margin: 10px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--b2); font-size: 12px; color: var(--t3); }
.tp-reply p { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.tp-chip { font-size: 11.5px; color: var(--t2); } .tp-send { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #2a2b33; color: var(--t1); font-size: 12px; }

/* toast (itsaplan style) */
.lx-toast { position: absolute; z-index: 12; left: calc(216px + (100% - 216px - 316px) / 2); bottom: 22px; transform: translate(-50%, 16px); display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; border-radius: 12px; background: #f4f5f7; color: #101114; font-size: 12.5px; font-weight: 500; box-shadow: 0 16px 40px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 280ms, transform 280ms; white-space: nowrap; }
.lx-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lx-toast .lx-btn { background: #fff; border-color: #d8dbe0; color: #101114 !important; }
.lx-toast.plain .lx-btn { display: none; }

/* feature switcher */
.lx-feats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.lx-f { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 14px 6px 0; border: 0; background: none; text-align: left; color: var(--tx-3); cursor: pointer; font: inherit; }
.lx-f-bar { position: absolute; left: 0; right: 14px; top: -1px; height: 2px; background: transparent; overflow: hidden; }
.lx-f-bar i { display: block; height: 100%; width: 0; background: var(--fc); }
.lx-f[aria-selected='true'] .lx-f-bar i { animation: lxbar var(--dur, 7000ms) linear forwards; }
.lx-f[aria-selected='true'].manual .lx-f-bar i { animation: none; width: 100%; }
@keyframes lxbar { to { width: 100%; } }
.lx-f b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 650; color: var(--tx-2); letter-spacing: -0.01em; }
.lx-f b i { width: 7px; height: 7px; border-radius: 50%; background: var(--fc); opacity: 0.5; }
.lx-f-d { font-size: 13px; line-height: 1.45; }
.lx-f:hover b, .lx-f[aria-selected='true'] b { color: var(--tx); }
.lx-f[aria-selected='true'] b i { opacity: 1; box-shadow: 0 0 10px var(--fc); }
.lx-f[aria-selected='true'] .lx-f-d { color: var(--tx-2); }

@media (max-width: 1280px) {
  .lx-body { grid-template-columns: 200px minmax(0, 1fr) 280px; }
  .lx-toast { left: calc(200px + (100% - 200px - 280px) / 2); }
  .lx-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
  .lx-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .hx-copy { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .lx-body { grid-template-columns: 1fr 290px; }
  .lx-side { display: none; }
  .lx-toast { left: calc((100% - 290px) / 2); }
  .lx-prog, .lx-home { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hx h1 { font-size: clamp(36px, 9vw, 52px); }
  .wrap-wide { width: calc(100% - 2 * var(--gut)); }
  .lx-chrome { height: 34px; } .lx-ex { display: none; } .lx-url { font-size: 10.5px; }
  .lx-body { grid-template-columns: 1fr; height: auto; }
  .lx-main { height: 470px; }
  .lx-tp { border-left: 0; border-top: 1px solid var(--ln); height: 330px; }
  .tp-reply { display: none; }
  .lx-top { padding: 0 12px; gap: 8px; } .lx-tbs, .lx-seg, .lx-nav-r { display: none; }
  .lx-board { grid-template-columns: repeat(5, 220px); }
  .lx-issue, .lx-pb { grid-template-columns: 1fr; } .lx-props, .lx-pbl { display: none; }
  .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-tbl td:nth-child(3), .lx-tbl th:nth-child(3) { display: none; }
  .lx-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-stat3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-pad { padding: 14px 14px 70px; }
  .lx-toast { left: 50%; white-space: normal; width: max-content; max-width: 92%; }
  .lx-feats { display: flex; overflow-x: auto; scrollbar-width: none; gap: 16px; margin: 14px calc(var(--gut) * -1) 0; padding: 0 var(--gut); scroll-snap-type: x mandatory; }
  .lx-feats::-webkit-scrollbar { display: none; }
  .lx-f { flex: 0 0 72%; scroll-snap-align: start; }
}

/* v12: company logos on customer quote cards */
.voice figcaption > span { min-width: 0; }
.v-logo { margin-left: auto; width: auto; max-width: 92px; filter: brightness(0) invert(1); opacity: 0.7; flex: none; }
.foot .copy { max-width: none; }

/* ===== v12: people, private vs shared boards, RBAC, Slack/Teams ===== */
.lx[data-u='avi'] .u-only:not([data-u~='avi']), .lx[data-u='raghul'] .u-only:not([data-u~='raghul']), .lx[data-u='komal'] .u-only:not([data-u~='komal']) { display: none !important; }
.lx-main .u-only { animation: lxin 380ms var(--ease); }

/* hero benefit icons */
.hx-ben li { padding-left: 38px; }
.hx-ben li::before, .hx-ben li::after { content: none; }
.hx-ic { position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 35%, transparent); color: var(--bc); }
.hx-ic .lx-svg { width: 14px; height: 14px; }

/* person switcher above the window */
.lx-whobar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lx-whobar-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); margin-right: 4px; }
.lx-who { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--tx-2); font: 600 13px var(--font); cursor: pointer; text-align: left; transition: border-color 200ms, background 200ms; }
.lx-who .lx-av { width: 26px; height: 26px; font-size: 10px; }
.lx-who small { display: block; font-size: 11px; font-weight: 500; color: var(--tx-3); }
.lx-who:hover { border-color: rgba(185,166,255,0.45); }
.lx-who[aria-pressed='true'] { background: rgba(143,125,255,0.16); border-color: rgba(185,166,255,0.7); color: var(--tx); box-shadow: 0 0 24px rgba(101,54,255,0.25); }
.lx-whobar-h { margin-left: auto; font-size: 13px; color: var(--tx-3); }

/* sidebar footer: current person */
.lx-me { padding: 10px 6px 4px; }
.lx-me-u { display: flex; align-items: center; gap: 9px; }
.lx-me-u .lx-av { width: 26px; height: 26px; font-size: 9.5px; }

/* home */
.lx-risk { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,107,94,0.35); border-left: 3px solid #ff6b5e; background: rgba(255,107,94,0.07); }
.lx-risk b { color: #ff8a80; font-size: 12.5px; } .lx-risk span { font-weight: 600; font-size: 12.5px; } .lx-risk small { margin-left: auto; font-size: 11.5px; color: var(--t3); }
.lx-ask { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ln); background: var(--b2); }
.lx-ask p:first-child { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--t3); }
.lx-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lx-sugg span { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ln2); font-size: 11.5px; color: var(--t2); }
.lx-need { align-items: flex-start; border-left: 1px solid var(--ln); }
.lx-need .nd-dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 0 3px rgba(255,181,71,0.18); flex: none; }
.lx-need small { display: flex; align-items: center; gap: 5px; } .lx-need small .lx-i { width: 12px; height: 12px; }
.lx-need em { display: block; font-style: normal; font-size: 11px; color: #34e0a1; margin-top: 2px; }
.lx-need.is-done .nd-dot { background: #34e0a1; box-shadow: 0 0 0 3px rgba(52,224,161,0.18); }

/* my work (private) */
.lx-private, .lx-shared { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.lx-private { color: #c9bdff; background: rgba(143,125,255,0.14); }
.lx-shared { color: #8fdcf8; background: rgba(111,211,247,0.12); }
.lx-private + .lx-seg { margin-left: 0; }
.lx-col-d { margin: -4px 4px 9px; font-size: 11px; color: var(--t3); }
.lx-col.c-need .lx-col-b { padding: 6px; margin: -6px; border-radius: 12px; background: rgba(255,181,71,0.05); }
.lc-from { display: inline-flex; align-self: start; gap: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(111,211,247,0.1); color: #8fdcf8; font-size: 10.5px; font-weight: 600; }
.lc-prep { display: grid; gap: 7px; padding: 8px 9px; border-radius: 8px; background: rgba(255,181,71,0.08); border: 1px solid rgba(255,181,71,0.2); font-size: 11.5px; color: var(--t2); }
.lc-prep .lx-btn { justify-self: start; }
.lc.moved { animation: lxin 500ms var(--ease); border-color: rgba(52,224,161,0.45); }

/* security board (shared) */
.lx-lock { margin-bottom: 10px; }
.lx-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
.lx-st b { font-size: 22px; }
.eps { display: grid; gap: 8px; margin-top: 12px; }
.ep { border-radius: 11px; background: var(--b2); border: 1px solid var(--ln); overflow: hidden; }
.ep-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; padding: 10px 12px; }
.ep-bar { width: 3px; height: 16px; border-radius: 3px; background: var(--ec); }
.ep-k { font: 600 10px var(--mono); letter-spacing: 0.1em; color: var(--t3); }
.ep-h b { font-size: 13px; } .ep-c { font-size: 11.5px; color: var(--t3); } .ep-h small { width: 100%; padding-left: 12px; font-size: 11px; color: var(--t3); }
.ep-ts { list-style: none; padding: 0 8px 8px; margin: 0; display: grid; gap: 2px; }
.ep-row { display: grid; grid-template-columns: 14px 64px minmax(0, 1fr) auto 18px 70px 30px 78px; gap: 8px; align-items: center; padding: 7px 6px; border-radius: 7px; font-size: 12px; }
.ep-row:hover { background: rgba(255,255,255,0.03); }
.ep-row .st { width: 13px; height: 13px; } .ep-row b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row small { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ep-prog { height: 4px; border-radius: 9px; background: #2a2c33; position: relative; overflow: hidden; } .ep-prog i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #8f7dff; }
.ep-n, .ep-due { font-style: normal; font-size: 11px; color: var(--t3); white-space: nowrap; } .ep-due { text-align: right; }
.ep-due.r { color: #ff7a6e; } .ep-due.a { color: #ffb547; } .ep-due.g { color: #34e0a1; }
.ep-subs { list-style: none; margin: 2px 0 6px 92px; padding: 0 0 0 12px; border-left: 1px dashed var(--ln2); display: grid; gap: 4px; }
.ep-subs li { display: grid; grid-template-columns: 13px minmax(0, 1fr) 18px auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 7px; font-size: 11.5px; color: var(--t2); }
.ep-subs .st { width: 12px; height: 12px; } .ep-subs em { font-style: normal; font-size: 10.5px; color: var(--t3); }
.lx[data-u='avi'] .ep-subs li[data-mine='avi'], .lx[data-u='raghul'] .ep-subs li[data-mine='raghul'], .lx[data-u='komal'] .ep-subs li[data-mine='komal'] { background: rgba(143,125,255,0.14); box-shadow: inset 0 0 0 1px rgba(143,125,255,0.4); color: var(--t1); }
.lx[data-u='avi'] .ep-t[data-owner='avi'] .ep-row, .lx[data-u='raghul'] .ep-t[data-owner='raghul'] .ep-row, .lx[data-u='komal'] .ep-t[data-owner='komal'] .ep-row { background: rgba(143,125,255,0.08); }
.ep-lock { display: none; align-items: center; gap: 9px; padding: 11px 12px; font-size: 12.5px; color: var(--t3); background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px); }
.ep-lock b { color: var(--t2); } .ep-lock small { margin-left: auto; font-size: 11px; }
.lx[data-u='raghul'] .ep:not([data-see~='raghul']) .ep-open, .lx[data-u='komal'] .ep:not([data-see~='komal']) .ep-open { display: none; }
.lx[data-u='raghul'] .ep:not([data-see~='raghul']) .ep-lock, .lx[data-u='komal'] .ep:not([data-see~='komal']) .ep-lock { display: flex; }
.lx[data-u='raghul'] .ep:not([data-see~='raghul']), .lx[data-u='komal'] .ep:not([data-see~='komal']) { border-style: dashed; }

/* Twin panel: Slack / Teams */
.tp-app { display: inline-flex; } .tp-app .lx-i { width: 18px; height: 18px; border-radius: 5px; }
.lx[data-chat='slack'] .tp-teams, .lx[data-chat='teams'] .tp-slack { display: none; }
.tp-sw { margin-left: auto; display: flex; padding: 2px; border-radius: 7px; border: 1px solid var(--ln); background: var(--b0); }
.tp-sw button { padding: 2px 8px; border: 0; border-radius: 5px; background: none; font-size: 11px !important; color: var(--t3) !important; }
.lx[data-chat='slack'] .tp-sw [data-chat='slack'] { background: #4a154b; color: #fff !important; }
.lx[data-chat='teams'] .tp-sw [data-chat='teams'] { background: #5b5fc7; color: #fff !important; }
.lx[data-chat='slack'] .lx-tp { --chat: #4a154b; } .lx[data-chat='teams'] .lx-tp { --chat: #5b5fc7; }
.lx-tp .tp-h { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--chat) 80%, transparent); }
.lx[data-chat='teams'] .lx-btn.p { background: #5b5fc7; border-color: #5b5fc7; }
.lx[data-chat='slack'] .tp-b .lx-btn.p { background: #007a5a; border-color: #007a5a; }
.tp-post { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 12px; color: var(--t2); line-height: 1.5; }
.tp-post .lx-av { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.tp-post b { color: var(--t1); font-size: 12.5px; } .tp-post p + p { margin-top: 3px; }
.tp-post p:last-child:not(:first-of-type) { color: #8fdcf8; }
.tp-ctx, .tp-worked { font-size: 11.5px; }

@media (max-width: 1280px) { .ep-row { grid-template-columns: 14px 60px minmax(0, 1fr) 18px 30px 72px; } .ep-row small, .ep-prog { display: none; } .ep-subs { margin-left: 30px; } .lx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .lx-whobar-h { margin: 4px 0 0; width: 100%; font-size: 12px; }
  .lx-whobar { gap: 6px; } .lx-who small { display: none; }
  .ep-row { grid-template-columns: 14px minmax(0, 1fr) 18px 64px; } .ep-row .lc-id, .ep-n { display: none; }
  .ep-subs { margin-left: 8px; }
  .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-risk small { margin-left: 0; width: 100%; }
}
.lx[data-v='mywork'] [data-v='mywork'] { display: block; animation: lxin 420ms var(--ease); }
.lx[data-v='mywork'] .tp-b[data-p='mywork'] { display: grid; gap: 10px; }

/* v12: one framework, every role */
.rf { background: var(--bg); padding: clamp(80px, 9vw, 130px) 0; }
.rf-head { max-width: 860px; }
.rf-head h2 { font-size: clamp(30px, 2.6vw + 14px, 52px); line-height: 1.08; letter-spacing: -0.035em; color: var(--tx); }
.rf-head .lead { margin-top: 18px; color: var(--tx-3); max-width: 680px; }
.rf-box { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; margin-top: 40px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.rf-tabs { display: grid; align-content: start; gap: 2px; padding: 12px; border-right: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.rf-tabs button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: var(--tx-3); font: 600 14.5px var(--font); text-align: left; cursor: pointer; transition: background 160ms, color 160ms; }
.rf-tabs img { width: 24px; height: 24px; opacity: 0.55; }
.rf-tabs button:hover { color: var(--tx); background: rgba(255,255,255,0.04); }
.rf-tabs button[aria-selected='true'] { color: var(--tx); background: rgba(143,125,255,0.14); box-shadow: inset 2px 0 0 #8f7dff; }
.rf-tabs button[aria-selected='true'] img { opacity: 1; }
.rf-p { padding: 26px 30px; animation: lxin 380ms var(--ease); }
.rf-p ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.rf-p li { display: grid; grid-template-columns: 34px 200px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rf-p li b { font-size: 15px; color: var(--tx); font-weight: 600; } .rf-p li > span:last-child { font-size: 15px; color: var(--tx-2); line-height: 1.5; }
.rf-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--rc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); color: var(--rc); }
.rf-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf-ic.ok { --rc: #34e0a1; }
.rf-dod { display: grid; grid-template-columns: 34px 200px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(52,224,161,0.07); border: 1px solid rgba(52,224,161,0.3); }
.rf-dod b { color: #34e0a1; font-size: 15px; } .rf-dod > span:last-child { color: var(--tx); font-weight: 600; font-size: 15px; }
.rf-gap { margin-top: 22px; max-width: 860px; font-size: 16px; color: var(--tx-3); } .rf-gap b { color: var(--tx); }
@media (max-width: 900px) {
  .rf-box { grid-template-columns: 1fr; }
  .rf-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .rf-tabs::-webkit-scrollbar { display: none; }
  .rf-tabs button { flex: none; white-space: nowrap; }
  .rf-tabs button[aria-selected='true'] { box-shadow: inset 0 -2px 0 #8f7dff; }
  .rf-p { padding: 18px; }
  .rf-p li, .rf-dod { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
  .rf-p li > span:last-child, .rf-dod > span:last-child { grid-column: 2; }
}
.chg-k { display: flex; align-items: center; gap: 8px; }
.chg-k img { width: 22px; height: 22px; opacity: 0.8; }
.lx-home .lx-k span { float: none !important; }

/* ===== v13: guided path, shorter window, verified outcome ===== */
.hx-ben { gap: 16px; }
.hx-ben li { font-size: 17px; }
.lx-body { height: 600px; }
.lx-whobar { margin-bottom: 12px; }
.lx-who small { font-weight: 500; }
.lx-guide { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 10px; }
.lx-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lx-step { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--tx-2); font: 600 14px var(--font); cursor: pointer; transition: border-color 200ms, background 200ms, color 200ms; }
.lx-step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--mono); font-style: normal; background: rgba(255,255,255,0.06); color: var(--tx-3); }
.lx-step:hover { color: var(--tx); border-color: color-mix(in srgb, var(--fc) 50%, transparent); }
.lx-step[aria-pressed='true'] { color: var(--tx); background: color-mix(in srgb, var(--fc) 14%, transparent); border-color: color-mix(in srgb, var(--fc) 70%, transparent); }
.lx-step[aria-pressed='true'] i { background: var(--fc); color: #0b0b0e; }
.lx-arrow { color: var(--tx-3); font-size: 14px; }
.lx-deeps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lx-deeps > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); margin-right: 4px; }
.lx-deep { padding: 5px 11px; border-radius: 99px; border: 1px dashed var(--line); background: none; color: var(--tx-3); font: 600 12.5px var(--font); cursor: pointer; }
.lx-deep:hover { color: var(--tx); border-color: color-mix(in srgb, var(--fc) 60%, transparent); }
.lx-deep[aria-pressed='true'] { color: var(--tx); border-style: solid; border-color: color-mix(in srgb, var(--fc) 70%, transparent); background: color-mix(in srgb, var(--fc) 12%, transparent); }
.lx-caps { min-height: 30px; margin-bottom: 12px; }
.lx-cap { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tx-2); animation: lxin 300ms var(--ease); }
.lx-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px var(--fc); flex: none; }
/* the task that matters, enlarged */
.lc.focus { border-color: rgba(255,181,71,0.7); box-shadow: 0 0 0 1px rgba(255,181,71,0.35), 0 14px 40px rgba(255,140,40,0.16); transform: scale(1.03); transform-origin: top center; z-index: 1; position: relative; }
.lc.focus .lc-t b { font-size: 13.5px; }
.lc.focus .lx-btn { padding: 6px 14px; }
/* verified outcome */
.oc-hero { display: flex; align-items: center; gap: 16px; }
.oc-big { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #34e0a1; color: #06140e; font-size: 26px; font-weight: 800; box-shadow: 0 0 40px rgba(52,224,161,0.4); flex: none; }
.oc-dod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(52,224,161,0.07); border: 1px solid rgba(52,224,161,0.3); }
.oc-dod b { font-size: 12px; color: #34e0a1; margin-right: 6px; } .oc-dod span { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: rgba(52,224,161,0.12); color: #9ff0cf; }
.oc-tl { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 0; }
.oc-tl li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; position: relative; padding-bottom: 14px; animation: lxin 420ms var(--ease) both; }
.oc-tl li:nth-child(2) { animation-delay: 150ms; } .oc-tl li:nth-child(3) { animation-delay: 300ms; } .oc-tl li:nth-child(4) { animation-delay: 450ms; } .oc-tl li:nth-child(5) { animation-delay: 600ms; }
.oc-tl li::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: rgba(52,224,161,0.3); }
.oc-tl li:last-child::before { display: none; }
.oc-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(52,224,161,0.16); color: #34e0a1; font-size: 11px; font-weight: 800; }
.oc-h { display: flex; align-items: baseline; gap: 10px; } .oc-h b { font-size: 13px; } .oc-h em { font-style: normal; font: 500 11px var(--mono); color: var(--t3); }
.oc-tl p:not(.oc-h) { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--t2); } .oc-tl small { font-size: 11px; color: var(--t3); }
.lx[data-v='outcome'] [data-v='outcome'] { display: block; animation: lxin 420ms var(--ease); }
.lx[data-v='outcome'] .tp-b[data-p='outcome'] { display: grid; gap: 10px; }
.lx-feats { display: none; }
@media (max-width: 1080px) { .lx-deeps { margin-left: 0; } }
@media (max-width: 760px) {
  .lx-body { height: auto; } .lx-main { height: 440px; } .lx-tp { height: 300px; }
  .lx-path { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .lx-path::-webkit-scrollbar { display: none; }
  .lx-step { flex: none; font-size: 13px; }
  .lx-cap { font-size: 13.5px; align-items: flex-start; } .lx-cap i { margin-top: 6px; }
  .lc.focus { transform: none; }
}

/* ===== v14: one connected story ===== */
.hx-copy.one { display: block; max-width: 900px; }
.hx-copy.one .hero-sub { max-width: 720px; }
.hx-use { margin-top: 22px; font-size: 14px; color: var(--tx-3); letter-spacing: 0.01em; }
.hx-handoff { max-width: 760px; margin-bottom: 26px; }
.hx-handoff h2 { font-size: clamp(26px, 1.8vw + 14px, 38px); letter-spacing: -0.03em; line-height: 1.1; color: var(--tx); }
.hx-handoff p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--tx-3); }
.lx-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-vt { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); text-align: left; cursor: pointer; font: inherit; color: var(--tx-3); transition: border-color 200ms, background 200ms; }
.lx-vt b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: var(--tx-2); }
.lx-vt span { font-size: 13.5px; line-height: 1.45; }
.lx-vt:hover { border-color: rgba(185,166,255,0.4); }
.lx-vt[aria-pressed='true'] { border-color: rgba(143,125,255,0.75); background: rgba(143,125,255,0.1); box-shadow: 0 0 30px rgba(101,54,255,0.18); }
.lx-vt[aria-pressed='true'] b { color: var(--tx); } .lx-vt[aria-pressed='true'] span { color: var(--tx-2); }
.lx-upd { display: none; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: rgba(52,224,161,0.16); color: #34e0a1; }
.lx-vt.updated .lx-upd { display: inline-block; animation: lxin 400ms var(--ease); }
.lx-bar2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0 12px; }
.lx-cap1 { flex: 1; min-width: 280px; font-size: 15px; color: var(--tx); display: flex; align-items: center; gap: 10px; }
.lx-cap1::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8f7dff; box-shadow: 0 0 10px #8f7dff; flex: none; }
.lx-cap1.done::before { background: #34e0a1; box-shadow: 0 0 10px #34e0a1; }
.lx-exs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lx-exs > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); margin-right: 2px; }
.lx-ex-b { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--tx-3); font: 600 12.5px var(--font); cursor: pointer; }
.lx-ex-b[aria-pressed='true'] { color: var(--tx); border-color: rgba(143,125,255,0.7); background: rgba(143,125,255,0.12); }
.lx-roles { margin-left: auto; display: flex; align-items: center; gap: 3px; padding: 2px; border-radius: 8px; border: 1px solid var(--ln); background: rgba(255,255,255,0.02); }
.lx-roles > span { font-size: 10.5px; color: var(--t3); padding: 0 6px; }
.lx-roles .lx-who { padding: 3px 9px; border: 0; border-radius: 6px; background: none; font: 600 11px var(--font); color: var(--t3); box-shadow: none; }
.lx-roles .lx-who[aria-pressed='true'] { background: rgba(143,125,255,0.22); color: #fff; box-shadow: none; }
.lx-ex { display: none; }

/* my work: one enlarged decision + compact board */
.mw { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 16px; height: calc(100% - 44px); overflow: auto; scrollbar-width: none; }
.fx { padding: 18px; border-radius: 14px; background: var(--b2); border: 1px solid rgba(255,181,71,0.55); box-shadow: 0 0 0 1px rgba(255,181,71,0.15), 0 18px 50px rgba(255,140,40,0.1); align-self: start; transition: border-color 400ms, box-shadow 400ms; }
.fx.is-done { border-color: rgba(52,224,161,0.6); box-shadow: 0 0 0 1px rgba(52,224,161,0.2), 0 18px 50px rgba(52,224,161,0.12); }
.fx-top { display: flex; align-items: center; gap: 8px; }
.fx-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #ffc46b; } .fx-tag.fx-ok { color: #34e0a1; } .fx-tag .st { width: 13px; height: 13px; }
.fx-sample { margin-left: auto; font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); border: 1px solid var(--ln2); padding: 1px 7px; border-radius: 99px; }
.fx-h { margin-top: 10px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.fx-ctx { margin-top: 6px; font-size: 12px; color: #8fdcf8; }
.fx-prep { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-prep li { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,0.05); color: var(--t2); }
.fx-qs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ln); }
.fx-q { padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--qc) 35%, transparent); background: color-mix(in srgb, var(--qc) 8%, transparent); color: var(--t2) !important; font-size: 11.5px !important; font-weight: 600 !important; }
.fx-q:hover, .fx-q[aria-pressed='true'] { color: #fff !important; border-color: var(--qc); background: color-mix(in srgb, var(--qc) 18%, transparent); }
.fx-act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.fx-go { padding: 9px 16px !important; font-size: 13px !important; background: #ffb547 !important; border-color: #ffb547 !important; color: #1a1205 !important; box-shadow: 0 0 0 0 rgba(255,181,71,0.5); animation: fxpulse 2.4s infinite; }
@keyframes fxpulse { 70% { box-shadow: 0 0 0 10px rgba(255,181,71,0); } 100% { box-shadow: 0 0 0 0 rgba(255,181,71,0); } }
.fx-act > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t3); }
.fx-after { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 0; }
.fx-after li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 12px; position: relative; opacity: 0; animation: fxin 420ms var(--ease) forwards; }
@keyframes fxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fx-after li:nth-child(1) { animation-delay: 100ms; } .fx-after li:nth-child(2) { animation-delay: 700ms; } .fx-after li:nth-child(3) { animation-delay: 1300ms; } .fx-after li:nth-child(4) { animation-delay: 1900ms; }
.fx-after li::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: rgba(52,224,161,0.3); } .fx-after li:last-child::before { display: none; }
.fx-after b { display: block; font-size: 13px; } .fx-after small { font-size: 11.5px; color: var(--t3); }
[data-flow]:not(.is-done) .if-done, [data-flow].is-done .if-pending { display: none !important; }
.if-done-li:not(.is-done) { display: none !important; }
.mw-list { min-width: 0; }
.ml-g { margin-bottom: 10px; }
.ml-h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); margin-bottom: 4px; } .ml-h .st { width: 13px; height: 13px; } .ml-h span { color: var(--t3); }
.ml ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.ml li { display: grid; grid-template-columns: 13px 58px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; background: var(--b2); border: 1px solid var(--ln); font-size: 12px; }
.ml li .st { width: 12px; height: 12px; } .ml li b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml li.sel { border-color: rgba(143,125,255,0.6); background: rgba(143,125,255,0.1); }
.ml li.moved { border-color: rgba(52,224,161,0.5); animation: lxin 400ms var(--ease); }
.c-work .ml-h b { color: #8fdcf8; } .c-need .ml-h b { color: #ffc46b; } .c-done .ml-h b { color: #34e0a1; }

/* team flow cells */
.ep-flow em { font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ep-flow .a { color: #ffb547; } .ep-flow .g { color: #34e0a1; }
.ep-t.is-done .ep-row { background: rgba(52,224,161,0.08); box-shadow: inset 2px 0 0 #34e0a1; }

/* program (leadership) */
.pgt td, .pgt th { vertical-align: middle; }
.pgt em { font-style: normal; } .pgt .a { color: #ffb547; } .pgt .g { color: #34e0a1; } .pgt .m { color: var(--t3); }
.pgt tr.is-flash td, .pgt tr.is-flash th { animation: pgflash 1.6s var(--ease); }
@keyframes pgflash { 0%, 40% { background: rgba(52,224,161,0.14); } 100% { background: transparent; } }
.pg-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.pg-card { padding: 12px 14px; border-radius: 10px; background: var(--b2); border: 1px solid var(--ln); }
.pg-ver { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pg-ver li { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: var(--t2); }
.pg-ver li.is-done { animation: lxin 500ms var(--ease); } .pg-ver b { font: 500 11px var(--mono); color: var(--t3); } .pg-ver em { font-style: normal; font-size: 11px; color: var(--t3); }
.pg-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }
.pg-trace > span { padding: 3px 9px; border-radius: 7px; background: rgba(255,255,255,0.04); color: var(--t2); }
.pg-trace em { font-style: normal; } .pg-trace .a { color: #ffb547; } .pg-trace .g { color: #34e0a1; }

/* Twin panel answers */
.tp-ans { display: grid; gap: 10px; animation: lxin 350ms var(--ease); }
.tp-ans[hidden] { display: none; }
.tp-capab { justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; color: var(--qc); background: color-mix(in srgb, var(--qc) 14%, transparent); }
.lx[data-v='team'] [data-v='team'], .lx[data-v='program'] [data-v='program'] { display: block; animation: lxin 420ms var(--ease); }
.lx[data-v='team'] .tp-b[data-p='team'], .lx[data-v='program'] .tp-b[data-p='program'] { display: grid; gap: 10px; }

/* customer proof after the demo */
.hx-proof { background: var(--bg); padding: 30px 0 30px; }
.p1 { padding: 28px 30px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.p1-head img { height: 22px; filter: brightness(0) invert(1); opacity: 0.85; margin-bottom: 14px; }
.p1-head h2 { font-size: clamp(24px, 1.4vw + 14px, 32px); letter-spacing: -0.02em; color: var(--tx); }
.p1-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.p1-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #a594f9; margin-bottom: 6px; }
.p1-cols p:not(.p1-k) { font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.p1-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.p1-q blockquote { font-size: 19px; font-weight: 600; color: var(--tx); } .p1-q figcaption { font-size: 14px; color: var(--tx-3); } .p1-q figcaption b { color: var(--tx-2); } .p1-q .more { margin-left: auto; }

@media (max-width: 1080px) { .mw { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .lx-views { grid-template-columns: 1fr; gap: 6px; } .lx-vt { padding: 10px 12px; } .lx-vt span { display: none; } .lx-vt[aria-pressed='true'] span { display: block; }
  .lx-roles > span { display: none; } .lx-roles { margin-left: 8px; } .lx-url { display: none; }
  .pg-low, .p1-cols { grid-template-columns: 1fr; }
  .pgt th:nth-child(3), .pgt td:nth-child(3), .pgt th:nth-child(6), .pgt td:nth-child(6) { display: none; }
  .lx-cap1 { font-size: 14px; min-width: 0; }
}

.hx-handoff { text-align: left; margin-left: 0; }
.ep-t.is-done .ep-prog i { width: 100% !important; background: #34e0a1; }
.pgt th, .pgt td { white-space: normal; }
.lx-cap1 { text-align: left; }
@media (max-width: 760px) { .lx-roles .lx-who { font-size: 10px; padding: 3px 6px; white-space: nowrap; } .lx-roles .lx-who[data-user='raghul'] { max-width: 70px; overflow: hidden; text-overflow: ellipsis; } }

/* ===== v15: compact hero, one connected job, leadership chain ===== */
#lx [hidden], .lx15 [hidden] { display: none !important; }
.hx15 { padding-top: clamp(96px, 9vw, 116px); }
.hx15-copy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: end; text-align: left; }
.hx15 h1 { margin-top: 18px; font-size: clamp(38px, 3.6vw + 8px, 64px); line-height: 1.0; letter-spacing: -0.045em; }
.hx15 .hero-sub { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tx-2); max-width: none; }
.hx15 .hx-ben { margin: 16px 0 0; gap: 10px; }
.hx15 .hx-ben li { font-size: 15px; color: var(--tx-2); }
.hx15 .hero-cta { justify-content: flex-start; margin-top: 20px; }
.lx15 { margin-top: 36px; }
.lx15 .lx-guide { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 10px; }
.lx15 .lx-step { padding: 6px 14px 6px 6px; }
.lx15 .lx-step span { display: grid; text-align: left; line-height: 1.2; }
.lx15 .lx-step small { font-size: 11px; font-weight: 500; color: var(--tx-3); }
.lx-ctl { margin-left: auto; display: flex; gap: 6px; }
.lx-ctl-b { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--tx-3); font: 600 12.5px var(--font); cursor: pointer; }
.lx-ctl-b:hover { color: var(--tx); border-color: rgba(185,166,255,0.5); }
.lx15 .lx-bar2 { margin: 0 0 12px; }
.lx-next { padding: 7px 14px; border-radius: 99px; border: 0; background: #f2f3f5; color: #0b0b0e; font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.lx-next.warn { background: #ffb547; }
.lx-next[hidden] { display: none; }
.lx15 + * .lx-deeps, .lx15 .lx-deeps { display: flex; margin: 14px 0 0; }
.lx[data-u] .lx-roles .lx-who[aria-pressed='true'] { background: rgba(143,125,255,0.22); color: #fff; }
.jcard.moved { animation: lxin 500ms var(--ease); }
.lx[data-stage='1'] .jcard.focus .lx-btn.w { background: #ffb547; border-color: #ffb547; color: #1a1205 !important; animation: fxpulse 2.4s infinite; }
.jrow .ep-row { background: rgba(143,125,255,0.08); box-shadow: inset 2px 0 0 #8f7dff; }
.lx[data-stage='4'] .jrow .ep-row { background: rgba(52,224,161,0.08); box-shadow: inset 2px 0 0 #34e0a1; }
.jprog { transition: width 600ms var(--ease); }
.lx[data-stage='4'] .jprog { background: #34e0a1 !important; }
.ep-row .c { color: #8fdcf8; } .ep-row .g, .lx-props .g, .pchain .g, .tp-post .g { color: #34e0a1; } .ep-row .a, .pchain .a { color: #ffb547; }
.tp-typing { font-size: 11.5px; color: #8fdcf8; } .tp-typing span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #6fd3f7; animation: hotp 1.4s infinite; }
.tp-post[data-from] { animation: lxin 420ms var(--ease); }
/* leadership: strategy to evidence */
.pchain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-radius: 12px; border: 1px solid var(--ln); background: var(--b2); overflow: hidden; }
.pchain li { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--ln); position: relative; }
.pchain li:first-child { border-top: 0; }
.pc-l { font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #a594f9; }
.pchain b { display: block; font-size: 12.5px; font-weight: 600; } .pchain small { font-size: 11px; color: var(--t3); }
.pc-s { font-size: 12px; color: var(--t2); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pw { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; } .pw .st { width: 12px; height: 12px; }
.pdec { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,181,71,0.45); background: rgba(255,181,71,0.05); }
.pdec-k { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #ffc46b; } .pdec-k .st { width: 13px; height: 13px; }
.pdec-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.pdec-g > div > span { display: block; font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); }
.pdec-g b { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; } .pdec-g small { font-size: 11px; color: var(--t3); }
.pdec.done { border-color: rgba(52,224,161,0.5); background: rgba(52,224,161,0.05); }
.lx-steps .jstep .st { width: 14px; height: 14px; }
@media (max-width: 1080px) { .hx15-copy { grid-template-columns: 1fr; gap: 18px; } .lx-ctl { margin-left: 0; } }
@media (max-width: 760px) {
  .hx15 h1 { font-size: clamp(34px, 9vw, 48px); }
  .lx15 .lx-path { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .lx15 .lx-step { flex: none; }
  .pchain li { grid-template-columns: 64px minmax(0, 1fr); } .pc-s { grid-column: 2; }
  .pdec-g { grid-template-columns: 1fr; }
  .lx-roles > span { display: none; }
}

/* ===== v16: clean product tour ===== */
.hx16 h1 { font-size: clamp(40px, 4vw + 8px, 72px); }
.hx16 .hero-sub { margin-top: 18px; max-width: 600px; }
.hx16 .hx15-copy { align-items: center; }
.hx-ben.b16 { gap: 18px; margin: 0; }
.hx-ben.b16 li { display: flex; gap: 14px; padding-left: 0; font-size: 15px; color: var(--tx-3); line-height: 1.5; }
.hx-ben.b16 .hx-ic { position: static; flex: none; width: 34px; height: 34px; border-radius: 10px; }
.hx-ben.b16 .hx-ic .lx-svg { width: 17px; height: 17px; }
.hx-ben.b16 b { display: block; font-size: 16px; color: var(--tx); font-weight: 650; }
.lx16 { margin-top: 44px; }
.lx16 .lx-body { grid-template-columns: 210px minmax(0, 1fr); height: 640px; }
.lx16 .lx-feats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 18px; }
.lx16 .lx-f { padding-right: 12px; }
.lx16 .lx-f b { font-size: 14px; }
.lx16 .lx-f-d { font-size: 12.5px; }
.lx16 .lx-f[aria-selected='true'] .lx-f-bar i { animation: none; width: 100%; }
.lx16 .lx-toast { left: calc(210px + (100% - 210px) / 2); }
.lx[data-v='auto'] [data-v='auto'] { display: block; animation: lxin 420ms var(--ease); }
.lx .lx-seg button { padding: 3px 9px; border: 0; border-radius: 5px; background: none; font-size: 11.5px !important; color: var(--t3) !important; }
.lx .lx-seg button[aria-pressed='true'] { background: rgba(255,255,255,0.09); color: var(--t1) !important; }
.lx .lx-seg + .lx-seg { margin-left: 6px; }
/* my work layouts */
[data-v='mywork'][data-layout='list'] .lx-board, [data-v='mywork'][data-layout='board'] .lx-listwrap { display: none !important; }
[data-v='mywork'] .lx-board { padding-top: 14px; }
[data-density='compact'] .lc .lc-pills, [data-density='compact'] .lc .lc-from, [data-density='compact'] .lx-col-d, [data-density='compact'] .lc-prep > span { display: none; }
[data-density='compact'] .lc { gap: 4px; padding: 8px 10px; } [data-density='compact'] .lc-prep { padding: 0; border: 0; background: none; }
[data-density='compact'] .lx-col-b { gap: 5px; }
.lx-listwrap { padding: 12px 16px 80px; }
.lx-list { width: 100%; border-collapse: collapse; font-size: 12px; }
.lx-list thead th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); padding: 6px 8px; border-bottom: 1px solid var(--ln); }
.lx-list td, .lx-list tbody th { padding: 7px 8px; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: middle; white-space: nowrap; }
.lx-list tbody th { font-weight: 550; white-space: normal; } .lx-list .m { color: var(--t3); } .lx-list .st { width: 13px; height: 13px; }
.lx-list tr.lg td { background: rgba(255,255,255,0.025); font-size: 12px; color: var(--t2); padding: 8px; }
.lx-list tr.lg b { color: var(--t1); margin: 0 4px; } .lx-list tr.lg span { color: var(--t3); } .lx-list tr.lg em { font-style: normal; color: var(--t3); margin-left: 8px; font-size: 11.5px; }
/* security board people */
[data-v='board'] .bv-people { display: none; margin-top: 12px; }
[data-v='board'][data-bv='people'] .bv-people { display: block; } [data-v='board'][data-bv='people'] .bv-tree { display: none; }
.lx-heat { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--b2); border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; }
.lx-heat th, .lx-heat td { padding: 8px; text-align: center; color: var(--t3); font-weight: 500; }
.lx-heat tbody th { text-align: left; color: var(--t1); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hm { display: block; padding: 6px 0; border-radius: 7px; background: rgba(255,255,255,0.03); font-weight: 600; }
.hm.h1 { background: rgba(143,125,255,0.25); color: #fff; } .hm.h2 { background: rgba(143,125,255,0.4); color: #fff; } .hm.h3 { background: rgba(143,125,255,0.55); color: #fff; } .hm.h4 { background: rgba(143,125,255,0.72); color: #fff; }
.lx-heat .r { color: #ff7a6e; } .hb { display: block; width: 80px; height: 5px; border-radius: 9px; background: #2a2c33; position: relative; overflow: hidden; } .hb i { position: absolute; inset: 0 auto 0 0; width: var(--r); background: #ff6b5e; }
/* program */
.pg2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.pc-s.a { color: #ffb547; }
.pg-list { list-style: none; padding: 12px; margin: 0; display: grid; gap: 12px; border-radius: 12px; border: 1px solid var(--ln); background: var(--b2); }
.pg-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.pg-list .lx-bar { grid-column: 1 / -1; width: 100%; }
.pdec.done { border-color: rgba(52,224,161,0.5); }
/* automations */
.lx-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .lx-chiprow.mt { margin-top: 18px; }
.lx-chiprow button { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--ln2); background: none; font-size: 12px !important; font-weight: 600 !important; color: var(--t2) !important; }
.lx-chiprow button[aria-pressed='true'] { background: rgba(143,125,255,0.2); border-color: rgba(143,125,255,0.6); color: #fff !important; }
.au-doms { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: var(--t3); }
.au-doms i, .au-f em i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.aus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.au { display: flex; flex-direction: column; gap: 6px; padding: 13px; border-radius: 12px; background: var(--b2); border: 1px solid var(--ln); }
.au[hidden] { display: none; }
.au-h { display: flex; justify-content: space-between; align-items: center; } .au-h small { font-size: 11px; color: var(--t3); }
.au-ics { display: inline-flex; gap: 4px; } .au-ics .lx-i { width: 18px; height: 18px; border-radius: 5px; }
.au b { font-size: 13px; font-weight: 650; } .au > span { flex: 1; font-size: 12px; color: var(--t3); line-height: 1.45; }
.au-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; } .au-f em { font-style: normal; font-size: 11px; color: var(--t3); }
/* integrations */
.bds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bd { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--b2); border: 1px solid var(--ln); align-content: start; }
.bd b { font-size: 12.5px; font-weight: 600; line-height: 1.35; } .bd .lx-btn { justify-self: start; }
.lx-tool[hidden] { display: none; }
@media (max-width: 1280px) { .lx16 .lx-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 6px; } .aus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .lx16 .lx-body { grid-template-columns: 1fr; } .lx16 .lx-toast { left: 50%; } .pg2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .lx16 .lx-body { height: auto; } .lx16 .lx-main { height: 500px; }
  .lx16 .lx-feats { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; }
  .lx16 .lx-f { flex: 0 0 64%; }
  .aus, .bds { grid-template-columns: 1fr; }
  [data-v='mywork'] .lx-top .lx-seg:first-of-type, .lx-private { display: none; }
  .lx-list th:nth-child(4), .lx-list td:nth-child(4), .lx-list th:nth-child(5), .lx-list td:nth-child(5) { display: none; }
}
/* v16: roles section as examples + personas */
.rf-tbl { margin-top: 36px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); overflow-x: auto; }
.rf-tbl table { width: 100%; border-collapse: collapse; min-width: 820px; }
.rf-tbl th, .rf-tbl td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.5; border-top: 1px solid var(--line); color: var(--tx-2); }
.rf-tbl thead th { border-top: 0; font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); }
.rf-tbl tbody th { color: var(--tx); font-weight: 650; width: 22%; }
.rf-tbl tbody th img { display: block; width: 26px; height: 26px; margin-bottom: 8px; opacity: 0.85; }
.rf-dec { color: #ffd08a !important; }
.rf-done { color: var(--tx) !important; } .rf-done span { color: #34e0a1; margin-right: 8px; font-weight: 700; }
.rf-per { margin-top: 48px; }
.rf-per ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rf-per li { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.rf-per li b { display: block; font-size: 15px; color: var(--tx); } .rf-per li span { display: block; margin-top: 4px; font-size: 14px; color: var(--tx-3); line-height: 1.5; }
@media (max-width: 900px) { .rf-per ul { grid-template-columns: 1fr; } }
.lx-list tr.lg .st { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.lx16 .lx-board { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.rf-tbl tbody th { vertical-align: top; } .rf-tbl tbody th img { width: 34px; height: 34px; margin-bottom: 6px; opacity: 1; }

/* ===== v17 hero: header + product mockup in the prototype's design (px-) ===== */
.hx17 { padding-top: clamp(96px, 9vw, 120px); padding-bottom: 24px; }
.hx17-copy { text-align: left; }
.hx17-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-top: 18px; }
.hx17 h1 { font-size: clamp(40px, 4vw + 8px, 70px); line-height: 1.0; letter-spacing: -0.045em; }
.hx17 .hero-sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tx-2); max-width: 560px; }
.hx17 .hero-cta { justify-content: flex-start; margin-top: 24px; }
.px-stage { position: relative; z-index: 2; margin-top: 48px; }
.px-stage::before { content: ''; position: absolute; left: 50%; top: -30px; width: min(1200px, 90%); height: 280px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 40%, rgba(101,54,255,0.3), transparent 70%); filter: blur(30px); pointer-events: none; }

.px { --bg: #111114; --panel: #19191d; --panel-2: #222227; --line: #2b2b31; --ink: #ededf0; --muted: #8e8e9a; --soft: #b4b4be;
  --accent: #8b85ff; --accent-bg: rgba(139,133,255,.1); --twin: #22b8d8; --twin-bg: rgba(34,184,216,.14); --need: #fb923c; --need-bg: rgba(251,146,60,.14);
  --p0: #f87171; --p0-bg: rgba(248,113,113,.14); --ok: #4ade80; --ok-bg: rgba(74,222,128,.12);
  position: relative; border-radius: 14px; overflow: hidden; background: var(--bg); color: var(--ink); text-align: left;
  font: 400 13px/1.45 Inter, system-ui, -apple-system, sans-serif; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 50px 140px rgba(40,20,120,0.45), 0 0 0 1px rgba(0,0,0,0.7); }
.px button { font: inherit; color: inherit; cursor: pointer; }
.px b { font-weight: 600; }
.px-chrome { position: relative; display: flex; align-items: center; height: 36px; padding: 0 14px; background: #0c0c0e; border-bottom: 1px solid var(--line); }
.px-dots { display: flex; gap: 7px; } .px-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .px-dots i:nth-child(2) { background: #febc2e; } .px-dots i:nth-child(3) { background: #28c840; }
.px-url { position: absolute; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 6px; background: #1b1b20; color: var(--muted); font: 500 11.5px 'IBM Plex Mono', var(--mono); }
.px-url i { font-style: normal; opacity: .5; margin: 0 4px; } .px-url b { color: var(--soft); font-weight: 500; }
.px-ex { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.px-body { position: relative; display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 680px; }

/* sidebar */
.px-side { display: flex; flex-direction: column; padding: 14px 10px 10px; border-right: 1px solid var(--line); background: var(--bg); }
.px-logo { padding: 2px 8px 14px; } .px-logo img { height: 19px; }
.px-navs { display: grid; gap: 1px; }
.px-nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--soft) !important; font-size: 13.5px !important; text-align: left; }
.px-nav .px-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button.px-nav:hover { background: var(--panel); color: var(--ink) !important; }
.px-nav[aria-current] { background: var(--panel-2); color: var(--ink) !important; font-weight: 500; }
.px-nav.dim { cursor: default; } .px-nav kbd { margin-left: auto; font: 500 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.px-sec { margin: 14px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.px-sec.gap { margin: 6px 0; border-top: 1px solid var(--line); }
.px-me { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 6px 2px; border-top: 1px solid var(--line); }
.px-me b { display: block; font-size: 12.5px; } .px-me small { font-size: 11px; color: var(--muted); }

/* main + shared */
.px-main { position: relative; overflow: hidden; }
.px-v { display: none; height: 100%; overflow: auto; padding: 22px 26px 60px; scrollbar-width: thin; scrollbar-color: #2b2b31 transparent; }
.px[data-v='home'] [data-v='home'], .px[data-v='mywork'] [data-v='mywork'], .px[data-v='board'] [data-v='board'], .px[data-v='program'] [data-v='program'], .px[data-v='know'] [data-v='know'],
.px[data-v='graph'] [data-v='graph'], .px[data-v='activity'] [data-v='activity'], .px[data-v='auto'] [data-v='auto'], .px[data-v='stack'] [data-v='stack'] { display: block; animation: pxin 320ms ease; }
@keyframes pxin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.px-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.px-head h3 { font: 700 24px/1.15 Manrope, Inter, sans-serif; letter-spacing: -0.02em; } .px-head h3.big { font-size: 26px; }
.px-head p { margin-top: 4px; color: var(--muted); font-size: 13px; max-width: 720px; }
.px-head-r { display: flex; gap: 8px; align-items: center; flex: none; }
.px-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px !important; font-weight: 500 !important; white-space: nowrap; }
.px-btn:hover { background: var(--panel-2); }
.px-btn.w { background: var(--btn, #ededf0); color: #111114 !important; border-color: #ededf0; }
.px-btn.is-ok { background: var(--ok-bg) !important; color: var(--ok) !important; border-color: transparent !important; cursor: default; }
.px-btn .px-i { width: 14px; height: 14px; }
.px-i { width: 16px; height: 16px; border-radius: 4px; flex: none; vertical-align: middle; }
.px-tile { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--tc); color: #fff; font: 700 8.5px Inter, sans-serif; flex: none; vertical-align: middle; }
.px-icons { display: inline-flex; gap: 3px; }
.px-av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ac); color: #e4e0ff; font: 600 8.5px Inter, sans-serif; flex: none; border: 1px solid rgba(255,255,255,.15); }
.px-av.twin { background: radial-gradient(circle at 35% 30%, #d9f4ff, #22b8d8 45%, #3b25b8 90%); }
.px-st { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; flex: none; font: 700 9px Inter, sans-serif; }
.px-st.k-need { background: var(--need); color: #111; } .px-st.k-todo { border: 1.5px solid var(--muted); }
.px-st.k-twin { border: 1.5px solid var(--twin); background: linear-gradient(90deg, var(--twin) 50%, transparent 50%); }
.px-st.k-wait { border: 1.5px dashed var(--muted); } .px-st.k-done { background: var(--ok); color: #0b2b16; }
.px-prio { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; } .px-prio i { width: 3px; border-radius: 1px; background: #3a3a42; } .px-prio i.on { background: var(--soft); }
.px-flag { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: var(--p0); color: #fff; font: 700 9px Inter, sans-serif; }
.px-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); font-size: 11px; color: var(--soft); white-space: nowrap; }
.px-tag i { width: 6px; height: 6px; border-radius: 50%; }
.px-pill { display: inline-block; font-style: normal; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.px-pill.g { background: var(--ok-bg); color: var(--ok); } .px-pill.o { background: var(--need-bg); color: var(--need); } .px-pill.r { background: var(--p0-bg); color: var(--p0); }
.px-pill.m { background: var(--panel-2); color: var(--soft); } .px-pill.v { background: var(--accent-bg); color: var(--accent); }
.px-card { padding: 14px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.px-ct { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.px-ct a { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--accent); } .px-ct a.m { color: var(--muted); }
.px-ct.out { margin: 18px 0 10px; } .px-ct.sm { font-size: 12.5px; margin: 14px 0 8px; }
.px-cs { margin: 3px 0 10px; color: var(--muted); font-size: 12.5px; }
.px-n { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--need); color: #111; font-size: 11px; font-weight: 700; }
.px-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.px-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.px-tabs span { padding: 7px 11px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.px-tabs span.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; } .px-tabs i { font-style: normal; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.px-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.px-bar .px-tabs { margin-bottom: 0; border-bottom: 0; } .px-bar-r { display: flex; gap: 6px; }
.px-seg { display: inline-flex; padding: 2px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); }
.px-seg button { padding: 3px 10px; border: 0; border-radius: 5px; background: none; font-size: 12px !important; color: var(--muted) !important; }
.px-seg button[aria-pressed='true'] { background: var(--panel-2); color: var(--ink) !important; }
.px-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.px-filters span { padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; color: var(--soft); }
.px-filters span.on { background: var(--accent-bg); border-color: var(--accent); color: var(--ink); }
.px-search { margin-left: auto; min-width: 180px; color: var(--muted) !important; } .px-search.wide { margin-left: 0; min-width: 280px; }
.px-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.px-chiprow button { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: none; font-size: 12.5px !important; color: var(--soft) !important; }
.px-chiprow button[aria-pressed='true'] { background: var(--accent-bg); border-color: var(--accent); color: var(--ink) !important; }
.px-hb { display: inline-block; position: relative; width: 120px; height: 5px; border-radius: 9px; background: var(--panel-2); overflow: hidden; vertical-align: middle; }
.px-hb i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--p0); border-radius: inherit; }
.px-hb.wide { width: 100%; display: block; } .px-hb.g i { background: var(--ok); } .px-hb.o i { background: var(--need); } .px-hb.r i { background: var(--p0); }
.px .r { color: var(--p0); } .px .o { color: var(--need); } .px .g { color: var(--ok); } .px .y { color: #facc15; } .px .m { color: var(--muted); }

/* home */
.px-chips { display: flex; gap: 14px; margin-top: 8px !important; font-size: 13px; color: var(--soft) !important; }
.px-chips .need { color: var(--need); } .px-chips .twin { color: var(--twin); }
.px-welcome { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(90deg, rgba(79,70,229,.18), rgba(79,70,229,.06)); border: 1px solid rgba(139,133,255,.35); margin-bottom: 12px; }
.px-welcome a { color: var(--accent); }
.px-orb { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #d9f4ff, #22b8d8 45%, #3b25b8 90%); }
.px-risk { padding: 10px 14px; border-radius: 10px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35); border-left: 3px solid var(--p0); margin-bottom: 12px; }
.px-risk > b { color: var(--p0); } .px-risk > small { margin-left: 8px; color: var(--muted); }
.px-risk p { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 500; } .px-risk p span { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--p0); font-size: 12px; }
.px-ask { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 14px; }
.px-ask > p:first-child { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.px-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .px-sugg span { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; color: var(--soft); }
.px-sugg span::before { content: '✦ '; color: var(--accent); }
.px-home { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.px-card.need-top { border-top: 2px solid var(--need); } .px-card.twin-top { border-top: 2px solid var(--twin); }
.px-needs, .px-since, .px-today, .px-run { list-style: none; padding: 0; margin: 0; }
.px-need { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.px-need b { display: block; font-size: 13px; } .px-need small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.px-need small.ev em { font-style: normal; color: var(--ok); } .px-due { font-size: 12px; color: var(--need); white-space: nowrap; }
.px-need.is-done b { text-decoration: line-through; color: var(--muted); }
.px-more { margin-top: 6px; font-size: 12px; color: var(--accent); }
.px-since li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.px-sd { width: 8px; height: 8px; border-radius: 50%; background: var(--twin); margin-top: 5px; } .px-sd.k-ok { background: var(--ok); }
.px-since b { display: block; font-size: 12.5px; font-weight: 500; } .px-since small { font-size: 11.5px; color: var(--muted); } .px-since em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.px-today li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.px-today li:first-child { border-top: 0; } .px-today span { font: 500 11.5px var(--mono); color: var(--muted); }
.px-today b { display: block; font-size: 12.5px; font-weight: 500; } .px-today small { font-size: 11.5px; color: var(--muted); }
.px-run li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.px-run b { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 4px; }
.px-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.px-stats p, .px-stats4 p { padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 11.5px; color: var(--muted); }
.px-stats b, .px-stats4 b { display: block; font-size: 20px; font-weight: 700; color: var(--ink); } .px-stats b.t { color: var(--twin); }

/* my work */
.px-sync { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); margin-bottom: 14px; }
.px-sync p { flex: 1; color: var(--soft); font-size: 12.5px; } .px-sync .px-i { width: 18px; height: 18px; }
.px-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.px-col { border-radius: 10px; background: var(--panel); border: 1px solid var(--line); padding: 10px; min-width: 0; }
.px-col.k-need { background: rgba(251,146,60,.06); border-color: rgba(251,146,60,.3); border-top: 2px solid var(--need); }
.px-col-h { display: flex; align-items: center; gap: 7px; font-size: 13px; } .px-col-h span { color: var(--muted); font-size: 12px; } .px-col-h i { margin-left: auto; font-style: normal; color: var(--muted); }
.px-col.k-need .px-col-h b { color: var(--need); }
.px-col-d { margin: 3px 0 10px; font-size: 11.5px; color: var(--muted); }
.px-col-b { display: grid; gap: 8px; }
.px-kc { display: grid; gap: 6px; padding: 10px 11px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.px-kc.hot { border-left: 2px solid var(--p0); } .px-kc.k-need.hot { border-left-color: var(--need); }
.px-kc-top { display: flex; justify-content: space-between; align-items: center; } .px-id { font: 500 10.5px var(--mono); color: var(--muted); }
.px-kc-t { display: grid; grid-template-columns: 14px 1fr; gap: 7px; align-items: start; } .px-kc-t .px-st { margin-top: 2px; } .px-kc-t b { font-size: 13px; line-height: 1.35; }
.px-kc-m { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.px-date { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--soft); white-space: nowrap; }
.px-date.r { background: var(--need-bg); color: var(--need); } .px-date.g { background: var(--ok-bg); color: var(--ok); }
.px-list .px-date { background: none; padding: 0; }
.px-type { font-size: 11px; color: var(--muted); }
.px-note { font-size: 12px; color: var(--soft); line-height: 1.45; }
.px-ev { list-style: none; padding: 7px 9px; margin: 0; display: grid; gap: 3px; border-radius: 7px; background: var(--panel); font-size: 11.5px; color: var(--soft); }
.px-kc-f { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .px-kc-f .px-av { margin-left: 2px; }
.px-steps { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; } .px-steps i { width: 9px; height: 3px; border-radius: 2px; background: #33333b; }
.px-steps i.on { background: var(--accent); } .px-steps.k-twin i.on { background: var(--twin); } .px-steps.k-need i.on { background: var(--need); } .px-steps.k-done i.on { background: var(--ok); }
.px-steps small { margin-left: 6px; font-size: 10.5px; color: var(--muted); }
.px-kc.moved { animation: pxin 400ms ease; border-color: rgba(74,222,128,.5); }
[data-density='compact'] .px-note, [data-density='compact'] .px-ev, [data-density='compact'] .px-kc-m .px-type, [data-density='compact'] .px-kc-m .px-tag, [data-density='compact'] .px-col-d, [data-density='compact'] .px-steps small { display: none; }
[data-density='compact'] .px-kc { gap: 5px; padding: 8px 10px; }
[data-layout='list'] .px-board, [data-layout='board'] .px-listw { display: none; }
.px-list { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.px-list thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); }
.px-list td, .px-list tbody th { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.px-list tbody th { font-weight: 500; white-space: normal; } .px-list .m { color: var(--muted); }
.px-list tr.px-lg td { background: var(--panel); color: var(--soft); } .px-list tr.px-lg .px-st { display: inline-grid; vertical-align: -2px; } .px-list tr.px-lg b { color: var(--ink); margin: 0 4px; } .px-list tr.px-lg em { font-style: normal; color: var(--muted); margin-left: 8px; }

/* security board */
.px-h4 { font-size: 15px; font-weight: 600; } .px-lock { font-size: 12px; color: var(--muted); margin-top: 3px; }
.px-st6s { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.px-st6 { padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.px-st6 p { display: flex; justify-content: space-between; font-size: 12px; color: var(--soft); } .px-st6 p i { font-style: normal; color: var(--muted); }
.px-st6.r p i { color: var(--p0); } .px-st6.o p i { color: var(--need); } .px-st6.y p i { color: #facc15; } .px-st6.g p i { color: var(--ok); }
.px-st6 b { display: block; font-size: 24px; font-weight: 600; margin: 2px 0; } .px-st6 small { font-size: 10.5px; color: var(--muted); }
.px-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: 12px; color: var(--soft); }
.px-people span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border-radius: 99px; border: 1px solid var(--line); }
.px-people em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.px-people em i { width: 7px; height: 7px; border-radius: 50%; } .px-people i.r { background: var(--p0); } .px-people i.o { background: var(--need); } .px-people i.y { background: #facc15; } .px-people i.m { background: var(--muted); } .px-people i.g { background: var(--ok); }
.px-people em:first-of-type { margin-left: 6px; }
.px-ep { border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; }
.px-ep-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 10px 12px; }
.px-ep-bar { width: 3px; height: 18px; border-radius: 3px; background: var(--ec); } .px-ep-k { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .08em; }
.px-ep-h b { font-size: 14px; } .px-n0 { color: var(--muted); font-size: 12px; } .px-ep-h small { width: 100%; padding-left: 34px; font-size: 11.5px; color: var(--muted); }
.px-ep-r { margin-left: auto; display: flex; align-items: center; gap: 12px; } .px-ep-r em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.px-car { color: var(--muted); width: 12px; }
.px-ep ul { list-style: none; padding: 0 8px 8px; margin: 0; }
.px-ep li { display: grid; grid-template-columns: 12px 14px minmax(0, 1fr) 170px 120px 90px; gap: 10px; align-items: center; padding: 8px; border-top: 1px solid var(--line); }
.px-fl { font-size: 11px; color: var(--muted); } .px-fl.r { color: var(--p0); } .px-fl.y { color: #facc15; }
.px-ep li b { display: block; font-size: 13px; font-weight: 500; } .px-ep li small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-own { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); white-space: nowrap; overflow: hidden; }
.px-sub { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; } .px-sub i { height: 4px; border-radius: 9px; background: var(--panel-2); position: relative; overflow: hidden; }
.px-sub i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.px-sub em { font-style: normal; font-size: 11px; color: var(--muted); } .px-sub small { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); }
.px-sub.sm { width: 110px; }
.px-sla { font-size: 11.5px; text-align: right; color: var(--muted); white-space: nowrap; } .px-sla.r { color: var(--p0); } .px-sla.y { color: #facc15; }
[data-v='board'] .bv-table, [data-v='board'] .bv-people { display: none; }
[data-bv='table'] .bv-tree, [data-bv='people'] .bv-tree { display: none; } [data-bv='table'] .bv-table, [data-bv='people'] .bv-people { display: block; }
.px-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.px-tbl th, .px-tbl td { padding: 9px 10px; text-align: left; border-top: 1px solid var(--line); } .px-tbl thead th { border-top: 0; font-size: 11px; font-weight: 500; color: var(--muted); }
.px-tbl tbody th { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.px-ed { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.px-tbl.hm td { text-align: center; } .px-hm { display: block; padding: 6px 0; border-radius: 6px; background: var(--panel-2); color: var(--muted); font-weight: 600; }
.px-hm.h1 { background: rgba(139,133,255,.3); color: #fff; } .px-hm.h2 { background: rgba(139,133,255,.45); color: #fff; } .px-hm.h3 { background: rgba(139,133,255,.6); color: #fff; } .px-hm.h4 { background: rgba(139,133,255,.75); color: #fff; }

/* program */
.px-prog { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.px-chain { list-style: none; padding: 0; margin: 10px 0 0; }
.px-chain li { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.px-cl { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.px-chain b { display: block; font-size: 13px; } .px-chain small { font-size: 11.5px; color: var(--muted); } .px-chain p { font-size: 12.5px; color: var(--soft); }
.px-progs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; }
.px-progs li { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; } .px-progs li .px-hb { grid-column: 1 / -1; }
.px-progs b { display: block; font-size: 12.5px; } .px-progs small { font-size: 11px; color: var(--muted); }
.px-dec { border-color: rgba(251,146,60,.45); background: rgba(251,146,60,.05); }
.px-dec-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 10px 0 12px; }
.px-dec-g span { display: block; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.px-dec-g b { display: block; margin-top: 3px; font-size: 13px; } .px-dec-g small { font-size: 11.5px; color: var(--muted); }

/* knowledge */
[data-v='know'] .kt-pb { display: none; } [data-kt='pb'] .kt-mem { display: none; } [data-kt='pb'] .kt-pb { display: grid; }
.px-mem ul { list-style: none; padding: 0; margin: 6px 0 0; }
.px-mem li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.px-mk { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.px-mk.k-review { background: var(--accent-bg); color: var(--accent); } .px-mk.k-gap { background: rgba(250,204,21,.14); color: #facc15; } .px-mk.k-ok { background: var(--ok-bg); color: var(--ok); }
.px-mem b { display: block; font-size: 13px; font-weight: 500; } .px-mem small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.px-mem small a { color: var(--twin); } .px-mem .px-i { width: 13px; height: 13px; }
.px-pb { grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
.px-pbl { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.px-pbl li { display: flex; gap: 9px; padding: 9px 10px; border-radius: 8px; border: 1px solid transparent; } .px-pbl li.on { background: var(--panel); border-color: var(--line); box-shadow: inset 2px 0 0 #f472b6; }
.px-pbl b { display: block; font-size: 12.5px; font-weight: 500; } .px-pbl small { font-size: 11px; color: var(--muted); }
.px-pbh { display: flex; gap: 10px; align-items: center; } .px-pbh .px-i { width: 26px; height: 26px; } .px-pbh b { display: block; font-size: 15px; } .px-pbh small { font-size: 11.5px; color: var(--muted); }
.px-pbs { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; }
.px-pbs li { display: grid; grid-template-columns: 20px 1fr 16px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.px-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font: 600 10px var(--mono); color: var(--muted); }
.px-pbs b { display: block; font-size: 12.5px; font-weight: 500; } .px-pbs small { font-size: 11px; color: #f472b6; }
.px-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.px-rules li { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 12.5px; color: var(--soft); } .px-rules li.r { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.05); } .px-rules b { color: var(--ink); }
.px-rules li.new { border-color: rgba(244,114,182,.6); animation: pxin 400ms ease; }
.px-zeus { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(244,114,182,.07); border: 1px solid rgba(244,114,182,.35); font-size: 12.5px; color: var(--soft); }
.px-zeus span { flex: 1; } .px-zeus b { color: #f9a8d4; }

/* org graph */
.px-chipsel { padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; }
.px-graph { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.px-graph svg { display: block; width: 100%; height: auto; border-radius: 10px; background: radial-gradient(circle at 50% 50%, rgba(139,133,255,.08), transparent 70%); }
.px-graph .gl line { stroke-width: 1.2; opacity: .5; stroke-dasharray: 3 4; }
.px-graph .gn rect { fill: color-mix(in srgb, var(--c) 12%, #19191d); stroke: color-mix(in srgb, var(--c) 70%, transparent); }
.px-graph text { fill: #ededf0; font: 600 10.5px Inter, sans-serif; text-anchor: middle; } .px-graph text.s { fill: #8e8e9a; font-size: 9px; font-weight: 500; }
.px-graph .gc circle { fill: rgba(139,133,255,.22); stroke: var(--accent); stroke-width: 1.5; }
.px-qa p { font-size: 12.5px; color: var(--soft); line-height: 1.55; margin-top: 8px; } .px-qa b { color: var(--ink); }
.px-q { margin-top: 0 !important; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); color: var(--ink) !important; }
.px-srcs { display: flex; align-items: center; gap: 5px; font-size: 11.5px !important; color: var(--muted) !important; }
.px-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.px-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--c); }

/* activity */
.px-stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.px-feed { list-style: none; padding: 0; margin: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.px-feed li { display: grid; grid-template-columns: 64px 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.px-feed li:first-child { border-top: 0; } .px-time { font: 500 11px var(--mono); color: var(--muted); }
.px-feed div > span { color: var(--soft); } .px-feed small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .px-feed .px-i { width: 14px; height: 14px; }

/* automations */
[data-v='auto'] .at-yours { display: none; } [data-at='yours'] .at-yours { display: block; } [data-at='yours'] .at-add { display: none; }
.px-doms { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; font-size: 12px; color: var(--muted); }
.px-doms i, .px-au-f em i, .px-dom i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.px-aus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.px-au { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.px-au[hidden] { display: none; } .px-au.on { border-left: 2px solid var(--twin); }
.px-au-h { display: flex; justify-content: space-between; align-items: center; } .px-au-h small { font-size: 11px; color: var(--muted); }
.px-au > b { font-size: 13.5px; } .px-au > span { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.45; }
.px-au-f, .px-au-m { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .px-au-f em, .px-dom { font-style: normal; font-size: 11.5px; color: var(--muted); }
.px-au-f small, .px-au-m small { font-size: 11px; color: var(--muted); }
.px-sw { width: 30px; height: 17px; border-radius: 99px; background: var(--ok); position: relative; } .px-sw i { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.px-enabled { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px; border-radius: 10px; background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.3); font-size: 12.5px; color: var(--soft); }
.px-enabled b { font-size: 20px; color: var(--ok); }

/* integrations */
.px-connrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .px-connrow > span:first-of-type { flex: 1; } .px-connrow .px-i { width: 22px; height: 22px; }
.px-connrow b { display: block; } .px-connrow small { font-size: 11.5px; color: var(--muted); } .px-connrow small i { font-style: normal; }
.px-bds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.px-bd { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); align-content: start; }
.px-bd b { font-size: 13px; } .px-bd small { font-size: 11.5px; color: var(--muted); } .px-bd .px-btn { justify-self: start; margin-top: 4px; }
.px-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.px-tool { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.px-tool[hidden] { display: none; } .px-tool > div { flex: 1; min-width: 0; } .px-tool .px-i, .px-tool .px-tile { width: 22px; height: 22px; } .px-tool .px-tile { font-size: 11px; }
.px-tool b { display: block; font-size: 12.5px; } .px-tool small { font-size: 11px; color: var(--muted); } .px-tool em { font-style: normal; font-size: 12px; }

/* hints and toast */
.px-hint { position: absolute; z-index: 9; left: 216px; width: 280px; padding: 12px 14px; border-radius: 10px; background: #f4f4f6; color: #111114; box-shadow: 0 16px 40px rgba(0,0,0,.5); font: 400 12.5px/1.5 Inter, sans-serif; animation: pxin 250ms ease; }
.px-hint::before { content: ''; position: absolute; left: -6px; top: 14px; width: 12px; height: 12px; background: #f4f4f6; transform: rotate(45deg); }
.px-hint b { display: block; font-size: 13px; margin-bottom: 2px; } .px-hint[hidden] { display: none; }
.px-toast { position: absolute; left: calc(208px + (100% - 208px) / 2); bottom: 18px; z-index: 10; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 9px 14px; border-radius: 10px; background: #f4f4f6; color: #111114; font: 500 12.5px Inter, sans-serif; box-shadow: 0 14px 36px rgba(0,0,0,.5); transition: opacity 220ms, transform 220ms; white-space: nowrap; }
.px-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1200px) { .px-aus, .px-bds, .px-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-st6s { grid-template-columns: repeat(3, minmax(0, 1fr)); } .px-ep li { grid-template-columns: 12px 14px minmax(0, 1fr) 120px 80px; } .px-own { display: none; } }
@media (max-width: 1000px) {
  .hx17-row { grid-template-columns: 1fr; gap: 18px; }
  .px-body { grid-template-columns: 1fr; height: auto; }
  .px-side { flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .px-logo, .px-me, .px-sec, .px-nav.dim { display: none; } .px-navs { display: flex; gap: 2px; } .px-nav { white-space: nowrap; }
  .px-main { height: 560px; } .px-home, .px-prog, .px-graph, .px-pb { grid-template-columns: 1fr; }
  .px-hint { left: 12px; right: 12px; width: auto; top: 52px !important; } .px-hint::before { display: none; }
  .px-toast { left: 50%; white-space: normal; max-width: 90%; }
}
@media (max-width: 640px) {
  .hx17 h1 { font-size: clamp(34px, 9vw, 46px); } .px-v { padding: 16px 14px 50px; }
  .px-url, .px-ex { display: none; } .px-head { flex-wrap: wrap; } .px-board { grid-template-columns: repeat(5, 240px); }
  .px-aus, .px-bds, .px-tools, .px-st6s, .px-stats4, .px-dec-g { grid-template-columns: 1fr; } .px-need { grid-template-columns: 16px minmax(0, 1fr); } .px-need .px-due, .px-need .px-btn { grid-column: 2; justify-self: start; }
  .px-ep li { grid-template-columns: 12px minmax(0, 1fr) 70px; } .px-ep li .px-fl, .px-ep li .px-sub { display: none; }
  .px-chain li { grid-template-columns: 1fr; gap: 2px; } .px-list th:nth-child(4), .px-list td:nth-child(4), .px-list th:nth-child(5), .px-list td:nth-child(5), .px-list th:nth-child(7), .px-list td:nth-child(7) { display: none; }
  .px-feed li { grid-template-columns: 22px minmax(0, 1fr); } .px-time, .px-feed .px-pill { display: none; } .px-sync { flex-wrap: wrap; }
}
/* v17: personas as work orders */
.wos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.wo { position: relative; padding: 20px 22px 26px; border-radius: 6px 6px 0 0; background: #17171b; border: 1px solid rgba(255,255,255,0.08); border-bottom: 0;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; }
.wo::before { content: ''; position: absolute; left: 50%; top: -1px; width: 34px; height: 6px; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: rgba(255,255,255,0.12); }
.wo-k { font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); }
.wo-h { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,0.12); }
.wo-h img { width: 28px; height: 28px; } .wo-h b { font-size: 17px; color: var(--tx); font-weight: 650; letter-spacing: -0.01em; }
.wo dl { display: grid; grid-template-columns: 74px 1fr; gap: 4px 10px; margin: 12px 0 0; font: 500 12.5px var(--mono); }
.wo dt { color: var(--tx-3); } .wo dd { margin: 0; color: var(--tx-2); }
.wo-d { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.12); font-size: 14.5px; line-height: 1.5; color: var(--tx-2); }
.wo-stamp { position: absolute; right: 18px; bottom: 22px; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-6deg); opacity: 0.9; }
.wo-stamp.g { color: #4ade80; } .wo-stamp.v { color: #8b85ff; } .wo-stamp.o { color: #fb923c; }
.wo .wo-d { padding-right: 70px; }
@media (max-width: 1000px) { .wos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wos { grid-template-columns: 1fr; } }

.px-risk p { justify-content: flex-start; text-align: left; }
.px p, .px li, .px div { text-align: left; }