/* Cybex site: one design system for the homepage and the product pages.
   Same language as /os (Space Grotesk + JetBrains Mono, dark canvas, aurora, rounded cards).
   Each product page sets its own palette on <body class="p-…">. No inline styles anywhere (CSP). */

:root {
  --bg: #0b0c0f; --bg-2: #101115; --card: #141519; --card-2: #1b1c21;
  --line: #24252b; --line-2: #31323a;
  --fg: #f3f2ec; --mute: #a0a1a9; --dim: #8b8c94;
  --acc: #ff5468; --acc-fill: #dc1e37; --acc-ink: #ffffff; --acc-soft: rgba(220, 30, 55, .14);
  --au-1: rgba(220, 30, 55, .55); --au-2: #1e3a8a; --au-3: rgba(163, 179, 126, .35);
  --glow: rgba(37, 99, 235, .45);
  --focus: var(--fg);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 20px;
  --wrap: 1200px;
  color-scheme: dark;
}

/* ---------- product palettes ---------- */
.p-tiaris  { --bg:#0b0f0a; --bg-2:#10150f; --card:#121811; --card-2:#182016; --line:#232d20; --line-2:#33402c;
             --fg:#f3f1e8; --mute:#a9b19a; --dim:#8a947e;
             --acc:#a3b37e; --acc-fill:#a3b37e; --acc-ink:#10150f; --acc-soft:rgba(163,179,126,.14);
             --au-1:rgba(107,138,79,.6); --au-2:rgba(242,193,78,.35); --au-3:rgba(61,82,48,.7); --glow:rgba(107,138,79,.45); }
.p-whombat { --bg:#f3ecde; --bg-2:#ede4d1; --card:#fbf7ee; --card-2:#e8dec9; --line:#e0d3b9; --line-2:#cdbd98;
             --fg:#2b221d; --mute:#5a4d43; --dim:#6b5d52;
             --acc:#6b5522; --acc-fill:#2b221d; --acc-ink:#f3ecde; --acc-soft:rgba(185,147,70,.16);
             --au-1:rgba(214,176,90,.45); --au-2:rgba(185,147,70,.3); --au-3:rgba(255,255,255,.7); --glow:rgba(107,85,34,.25);
             --focus:#2b221d; color-scheme: light; }
.p-fusebox { --bg:#0d0b08; --bg-2:#14110b; --card:#16130d; --card-2:#1d1910; --line:#2c2516; --line-2:#3e3420;
             --fg:#f4efe4; --mute:#b0a690; --dim:#948a7b;
             --acc:#f2b53d; --acc-fill:#f2b53d; --acc-ink:#14110b; --acc-soft:rgba(242,181,61,.13);
             --au-1:rgba(242,181,61,.42); --au-2:rgba(220,30,55,.3); --au-3:rgba(242,140,40,.3); --glow:rgba(242,181,61,.3); }
.p-portal  { --bg:#0c0d14; --bg-2:#11131d; --card:#151726; --card-2:#1b1e30; --line:#23263a; --line-2:#31354d;
             --fg:#f3f2ec; --mute:#a3a6b8; --dim:#8a8da3;
             --acc:#a5b4fc; --acc-fill:#a5b4fc; --acc-ink:#14162a; --acc-soft:rgba(165,180,252,.13);
             --au-1:#3730a3; --au-2:#6366f1; --au-3:rgba(45,212,191,.35); --glow:rgba(79,70,229,.55); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
h2 { font-size: clamp(34px, 4.4vw, 54px); }
h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
.lead { color: var(--mute); font-size: clamp(17px, 1.5vw, 19px); max-width: 640px; }
.grad { background: linear-gradient(100deg, var(--fg) 15%, var(--grad-2, var(--acc)) 60%, var(--grad-3, var(--acc)) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-portal { --grad-2:#c7d2fe; --grad-3:#5eead4; }
.p-tiaris { --grad-2:#c9d4a6; --grad-3:#f2c14e; }
.p-fusebox { --grad-2:#f7cf7c; --grad-3:#f2b53d; }
.p-whombat .grad { background: none; color: var(--acc); }
.kbd { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; background: var(--card-2); white-space: nowrap; }
code { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--mute); }
.center { text-align: center; justify-items: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 16px; border: 1px solid var(--line-2); background: none; transition: transform .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); border-color: var(--mute); }
.btn--primary { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.btn--primary:hover { border-color: var(--acc-fill); filter: brightness(1.08); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.ulink { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.ulink:hover { text-decoration-color: var(--acc); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header / nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.site-nav .wrap { display: flex; align-items: center; gap: 26px; min-height: 68px; }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { height: 24px; width: auto; }
.crumb { display: flex; flex: none; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; }
.crumb .brand img { height: 18px; opacity: .8; }
.p-whombat .crumb .brand img { filter: invert(1) brightness(.25); opacity: 1; }
.crumb .sep { color: var(--dim); font-weight: 400; }
.crumb .product { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.crumb .product img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 6px; font-size: 15px; color: var(--mute); }
.nav-links a, .menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; }
.nav-links a:hover, .menu summary:hover { color: var(--fg); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu { position: relative; color: var(--mute); font-size: 15px; }
.menu summary { list-style: none; cursor: pointer; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary { color: var(--fg); }
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 320px; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); display: grid; gap: 2px; }
.nav-right .menu-panel { left: auto; right: 0; }
.menu-panel a { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; color: var(--fg); }
.menu-panel a:hover, .menu-panel a[aria-current] { background: var(--card-2); }
.menu-panel b { font-weight: 600; }
.menu-panel span { grid-column: 2; font-size: 13px; color: var(--mute); }
.menu-panel .dot { align-self: center; }

/* status dots, one colour per product */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--acc)); flex: none; display: inline-block; }
.pill.c-os { --ping: #60a5fa; }
.c-tiaris { --c: #a3b37e; } .c-whombat { --c: #d6b05a; } .c-os { --c: #60a5fa; } .c-fusebox { --c: #f2b53d; } .c-portal { --c: #a5b4fc; } .c-zulu { --c: #4a4a52; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(64px, 9vw, 104px) 0 clamp(40px, 5vw, 64px); isolation: isolate; overflow-x: clip; }
.aurora { position: absolute; inset: -220px -10% auto; height: 900px; filter: blur(100px); opacity: .55; pointer-events: none; z-index: -1; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; animation: drift 20s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 640px; height: 640px; left: 4%; top: 12%; background: radial-gradient(circle, var(--au-1), transparent 65%); }
.aurora i:nth-child(2) { width: 540px; height: 540px; right: 4%; top: 0; background: radial-gradient(circle, var(--au-2), transparent 65%); animation-delay: -7s; }
.aurora i:nth-child(3) { width: 420px; height: 420px; left: 44%; top: 38%; background: radial-gradient(circle, var(--au-3), transparent 65%); animation-delay: -12s; }
@keyframes drift { to { transform: translate(50px, 30px) scale(1.1); } }
.p-whombat .aurora { opacity: .8; filter: blur(80px); }
.pill { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--mute); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 70%, transparent); border-radius: 999px; padding: 6px 16px 6px 8px; }
.pill b { color: var(--fg); font-weight: 500; }
.pill .ping { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ping, var(--acc)) 18%, transparent); display: grid; place-items: center; flex: none; }
.pill .ping::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ping, var(--acc)); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ping, var(--acc)) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
a.pill:hover { border-color: var(--mute); }

.hero--home h1 { font-size: clamp(48px, 8.6vw, 108px); letter-spacing: -.035em; line-height: 1.02; margin: 28px 0 28px; }
.hero--home h1 span { color: #5b5c64; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.hero__row .lead { max-width: 600px; }

.hero--product .wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; }
.hero--product .wrap > * { max-width: 100%; }
.hero--product h1 { font-size: clamp(44px, 7.2vw, 92px); max-width: 1000px; }
.hero--product .lead { margin: 0 auto; }
.hero--product .actions { justify-content: center; }
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.meta li { display: flex; align-items: center; gap: 8px; }
.meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.product-mark { height: clamp(48px, 6vw, 72px); width: auto; }

/* product index under the home hero */
.index { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.index a { display: grid; gap: 6px; align-content: start; padding: 22px 18px 8px; border-right: 1px solid var(--line); transition: background .2s; }
.index a:first-child { padding-left: 0; }
.index a:last-child { border-right: 0; }
.index a:hover .index__name { color: var(--c); }
.status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.index__name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; transition: color .2s; }
.index__desc { font-size: 14px; color: var(--mute); line-height: 1.4; }
.index__path { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 6px; }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(72px, 9vw, 112px) 0 0; }
.section--tight { padding-top: clamp(40px, 5vw, 56px); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.sec-head--split .lead { max-width: 440px; font-size: 17px; }
.sec-head h2 + .lead { margin-top: 0; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.split--rev > :first-child { order: 2; }

/* ---------- home: product cards ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.card { position: relative; display: flex; flex-direction: column; min-height: 460px; border-radius: 22px; overflow: hidden; border: 1px solid var(--k-line); background: var(--k-bg); color: var(--k-fg, var(--fg)); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.card__text { position: relative; z-index: 2; display: grid; gap: 10px; align-content: start; padding: 28px 30px 0; }
.card__cat { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-cat, var(--k-mute)); }
.card__title { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.card__title h3 { font-size: 34px; letter-spacing: -.025em; }
.card .card__tag { font-size: 17px; font-weight: 500; color: var(--k-acc); }
.card p { font-size: 15px; color: var(--k-mute); max-width: 440px; }
.card__go { position: absolute; right: 20px; top: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--k-acc); color: var(--k-ink); font-weight: 600; font-size: 14px; }
.card__go small { font-family: var(--mono); font-size: 12px; font-weight: 400; opacity: .75; }
.card__vis { margin-top: auto; position: relative; }
.chip { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--k-chip, var(--line-2)); color: var(--k-acc, var(--acc)); }
.chip .dot { width: 6px; height: 6px; background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.k-tiaris { --k-bg:#10150f; --k-line:#232d20; --k-acc:#a3b37e; --k-ink:#10150f; --k-mute:#b3bba5; --k-chip:#3b4a2d; }
.k-tiaris .card__logo { height: 54px; width: auto; margin: 4px 0 2px; }
.k-tiaris .card__vis { position: absolute; right: -24px; bottom: -28px; width: min(300px, 52%); }
.k-tiaris dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin-top: 8px; max-width: 260px; }
.k-tiaris dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8c977a; padding-top: 2px; }
.k-tiaris dd { color: #dde2d0; }
.k-whombat { --k-bg:#f3ecde; --k-line:#e4d9c2; --k-fg:#2b221d; --k-mute:#4a3f37; --k-acc:#6b5522; --k-ink:#f3ecde; --k-chip:#cdbd98; --k-cat:#6b5d52; }
.k-whombat .card__go { background: #2b221d; }
.k-whombat .card__tag { color: #2b221d; font-weight: 700; }
.k-whombat .card__logo { height: 46px; width: auto; margin: 4px 0 2px; }
.agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 24px 30px 28px; }
.agents li { background: #e8dec9; border-radius: 14px; padding: 12px 6px 10px; text-align: center; font-size: 12px; color: #4a3f37; }
.agents img { height: 62px; width: auto; margin: 0 auto 6px; }
.agents b { display: block; color: #2b221d; font-size: 13px; }
.k-os { --k-bg:#0d1220; --k-line:#1f2a44; --k-acc:#60a5fa; --k-ink:#0d1220; --k-mute:#a5adc2; --k-chip:#2b3b60; }
.card.k-os { display: grid; grid-template-columns: .9fr 1.3fr; min-height: 0; }
.k-os .card__text { padding-bottom: 30px; align-content: center; }
.k-os .card__vis { margin: 22px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.1); }
.k-os .card__go { left: 30px; right: auto; top: auto; bottom: 30px; }
.k-os .card__text { padding-bottom: 96px; }
.os-mark { height: 40px; width: auto; }
.desk-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.desk-bar { position: absolute; left: 0; right: 0; top: 0; height: 24px; background: rgba(17,18,21,.85); display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 11px var(--mono); color: #ccc; }
.desk-bar b { background: #7fb2ff; color: #111; border-radius: 4px; padding: 0 6px; font-weight: 600; }
.desk-bar span { margin-left: auto; }
.desk-win { position: absolute; top: 18%; height: 66%; border-radius: 9px; background: rgba(22,23,27,.92); border: 1px solid rgba(255,255,255,.1); }
.desk-win::before { content: ""; position: absolute; left: 12px; right: 12px; top: 14px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); box-shadow: 0 18px 0 rgba(255,255,255,.07), 0 36px 0 rgba(255,255,255,.07), 0 54px 0 rgba(255,255,255,.07); }
.desk-win--a { left: 6%; width: 52%; border-color: #7fb2ff; }
.desk-win--b { left: 61%; width: 33%; }
.desk-wiz { position: absolute; right: 5%; bottom: 6%; width: 16%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.k-fusebox { --k-bg:#14110b; --k-line:#2c2516; --k-acc:#f2b53d; --k-ink:#14110b; --k-mute:#b8ae98; --k-chip:#4b3c1c; }
.fusebox-word { font-family: var(--mono); font-weight: 600; letter-spacing: -.04em; }
.fusebox-word span { color: #f2b53d; }
.k-fusebox .card__vis, .k-portal .card__vis { margin: 26px 0 0 30px; border-radius: 12px 0 0 0; overflow: hidden; border: 1px solid var(--k-line); border-right: 0; border-bottom: 0; height: 210px; }
.k-fusebox .card__vis img { width: 100%; object-fit: cover; object-position: left top; }
.k-portal { --k-bg:#151826; --k-line:#2e3450; --k-acc:#a5b4fc; --k-ink:#151826; --k-mute:#aeb1c4; --k-chip:#383f5e; }
.k-portal .card__vis img { width: 150%; max-width: none; }
.app-icon { height: 44px; width: auto; }

/* ---------- home: expertise, tags, timeline ---------- */
.exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.exp li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; gap: 10px; align-content: start; }
.num { font-family: var(--mono); font-size: 12px; color: var(--acc); }
.exp p { color: var(--mute); font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tags li { font-size: 13px; color: var(--mute); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; }
.about { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
.about h2 { font-size: clamp(34px, 4vw, 46px); margin-top: 16px; }
.about .lead { margin-top: 18px; font-size: 17px; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
.timeline li { position: relative; display: grid; gap: 4px; align-content: start; padding: 20px 18px 0 0; border-top: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.timeline .label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.timeline b { font-size: 20px; letter-spacing: -.01em; }
.timeline p { font-size: 14px; color: var(--mute); }

/* ---------- product pages ---------- */
.frame { border-radius: 20px; padding: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 12%, var(--bg)), var(--bg-2)); border: 1px solid var(--line-2); box-shadow: 0 70px 140px -50px var(--glow), 0 30px 60px -30px rgba(0,0,0,.8); }
.p-whombat .frame { box-shadow: 0 50px 100px -50px var(--glow); }
.frame img { border-radius: 12px; width: 100%; }
.stage { position: relative; width: min(1120px, 100%); margin: 34px auto 0; }
.caption { margin-top: 18px; font-size: 13px; color: var(--dim); text-align: center; }
.caption b { color: var(--mute); font-weight: 500; }
.stage + .caption { margin-top: clamp(24px, 5vw, 64px); }
.term { font-family: var(--mono); font-size: 13px; text-align: left; border-radius: 14px; background: #0f1017; border: 1px solid var(--line-2); box-shadow: 0 40px 70px -20px #000; overflow: hidden; color: #d4d6e4; }
.term__bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--dim); }
.term__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.term__bar span { margin-left: 8px; background: var(--card-2); color: var(--acc); padding: 2px 8px; border-radius: 5px; }
.term pre { padding: 14px 16px; line-height: 1.7; font-family: inherit; white-space: pre; overflow-x: auto; }
.term .p { color: #5eead4; } .term .d { color: var(--dim); } .term .a { color: var(--acc); } .term .ok { color: #4ade80; }
.stage .term { position: absolute; right: -40px; bottom: -44px; width: 440px; }

.seg { display: inline-flex; flex-wrap: wrap; padding: 5px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); gap: 4px; }
.seg button { border: 0; background: none; cursor: pointer; font: 600 15px var(--sans); min-height: 44px; padding: 0 18px; border-radius: 10px; color: var(--mute); transition: background .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--acc-fill); color: var(--acc-ink); }
.shots__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.shots__caption { font-size: 16px; color: var(--mute); }
.shots__frame { max-height: 760px; overflow: hidden; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.three > li { border-top: 1px solid var(--line-2); padding-top: 18px; }
.three p { color: var(--mute); font-size: 15px; margin-top: 6px; }
.four { grid-template-columns: repeat(4, 1fr); }

.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.tile__text { padding: 26px 26px 0; display: grid; gap: 8px; }
.tile__text p { color: var(--mute); font-size: 15px; }
.tile__vis { margin-top: auto; padding: 22px 26px 26px; }

.facts { display: grid; gap: 18px; margin-top: 28px; }
.fact { display: flex; gap: 14px; }
.fact .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-family: var(--mono); font-size: 15px; }
.fact p { color: var(--mute); font-size: 15px; }
.fact b { color: var(--fg); display: block; font-weight: 600; }
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--badge, var(--acc)); border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }

.cta-panel { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 5vw, 56px); background: radial-gradient(ellipse 80% 120% at 100% 0%, var(--glow), transparent 60%), radial-gradient(ellipse 60% 90% at 0% 100%, var(--acc-soft), transparent 60%), var(--card); border: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
.cta-panel h2 { font-size: clamp(32px, 4vw, 46px); margin-top: 16px; }
.cta-panel .lead { margin-top: 14px; font-size: 17px; }
.cta-panel .actions { margin-top: 26px; }
.boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.boxes li { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); font-size: 15px; }
.boxes small { display: block; color: var(--dim); font-size: 12px; font-family: var(--mono); }
.shell { border-radius: 16px; background: #0b0c12; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 13.5px; line-height: 1.8; padding: 20px 22px; color: #d4d6e4; overflow-x: auto; }
.shell div { white-space: pre; }
.shell .c { color: #7b7e92; } .shell .p { color: #5eead4; } .shell .gap { margin-top: 10px; }
.p-fusebox .shell .p { color: #f2b53d; }
.p-tiaris .shell .p { color: #a3b37e; }

/* more from Cybex */
.more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.more a { display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 18px; border-radius: 16px; border: 1px solid var(--k-line); background: var(--k-bg); color: var(--k-fg, #f3f2ec); transition: transform .2s; }
.more a:hover { transform: translateY(-3px); }
.more .status { color: inherit; opacity: .7; font-size: 10.5px; }
.more b { font-size: 22px; letter-spacing: -.02em; }
.more span { font-size: 13px; opacity: .82; }
.more em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--k-acc); margin-top: auto; padding-top: 10px; }
.more .k-whombat em { color: #6b5522; }
.eyebrow--cybex { color: #ff5468; }
.p-whombat .eyebrow--cybex { color: #b3122a; }

/* ---------- /portal ---------- */
.osgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.osgrid li { aspect-ratio: 1; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); display: grid; place-items: center; }
.osgrid img { width: 46%; filter: invert(.88); }
.snips { display: grid; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.snips li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); color: #cfd3ea; }
.snips li:first-child { border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: var(--acc-soft); }
.snips span { color: var(--dim); }
.route { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; }
.route li { padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); display: grid; gap: 2px; text-align: center; }
.route li:last-child { border-color: rgba(94,234,212,.5); color: #5eead4; }
.route small { color: var(--dim); font-size: 11px; }
.route .ln { flex: 1; min-width: 16px; height: 2px; padding: 0; border: 0; background: repeating-linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 11px); }
.fwd { margin-top: 14px; display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.fwd b { color: var(--acc); font-weight: 400; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.themes li { border-radius: 12px; padding: 10px; border: 1px solid var(--line); display: grid; gap: 6px; font-size: 12px; background: var(--t-bg); color: var(--t-fg, #e6e7f0); }
.themes li:first-child { outline: 2px solid var(--acc); outline-offset: 2px; }
.themes i { display: flex; gap: 4px; }
.themes i::before, .themes i::after, .themes i b { content: ""; flex: 1; height: 16px; border-radius: 4px; }
.themes i::before { background: var(--t-1); } .themes i b { background: var(--t-2); } .themes i::after { background: var(--t-3); }
.th-portal { --t-bg:#1d2033; --t-1:#a5b4fc; --t-2:#5eead4; --t-3:#31354d; }
.th-latte { --t-bg:#eff1f5; --t-fg:#4c4f69; --t-1:#8839ef; --t-2:#40a02b; --t-3:#dce0e8; }
.th-frappe { --t-bg:#303446; --t-1:#ca9ee6; --t-2:#a6d189; --t-3:#414559; }
.th-macchiato { --t-bg:#24273a; --t-1:#c6a0f6; --t-2:#a6da95; --t-3:#363a4f; }
.th-mocha { --t-bg:#1e1e2e; --t-1:#cba6f7; --t-2:#a6e3a1; --t-3:#313244; }
.th-noctalia { --t-bg:#0e0e14; --t-1:#fff59b; --t-2:#a9aefe; --t-3:#26262e; }
.hub-diagram { background: radial-gradient(ellipse 70% 70% at 50% 50%, var(--acc-soft), transparent 70%), var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 18px; }
.hub-row { display: flex; gap: 12px; }
.hub-row li { flex: 1; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); padding: 14px 8px; text-align: center; font-size: 14px; overflow-wrap: anywhere; }
.hub-row small { display: block; color: var(--dim); font-size: 12px; font-family: var(--mono); }
.hub-arrows { display: flex; justify-content: space-around; color: var(--acc); font-family: var(--mono); font-size: 12px; }
.hub-box { border-radius: 16px; border: 1px solid rgba(94,234,212,.45); background: rgba(94,234,212,.07); padding: 18px; text-align: center; }
.hub-box b { font-size: 18px; color: #5eead4; }
.hub-box p { font-size: 13px; color: var(--mute); }
.hub-box ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.hub-box li { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 7px; background: #11131d; border: 1px solid var(--line-2); color: #cfd3ea; }
.hub-box li::before { content: "● "; color: #4ade80; }
.p-portal .badge { --badge: #5eead4; margin-left: 10px; }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(80px, 10vw, 120px); border-top: 1px solid var(--line); padding: 46px 0 52px; font-size: 14px; color: var(--mute); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px 40px; }
.site-footer .brand img { height: 22px; }
.p-whombat .site-footer .brand img { filter: invert(1) brightness(.25); }
.site-footer address { font-style: normal; margin-top: 10px; }
.site-footer .legal { margin-top: 10px; }
.tagline { color: var(--acc); }
.site-footer h2 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.site-footer ul { display: grid; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--fg); }
.site-footer ul a:hover { color: var(--acc); }
.site-footer .note { grid-column: 1 / -1; font-size: 12px; color: var(--dim); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .crumb ~ .nav-links > a:nth-child(n + 3) { display: none; }
  .index { grid-template-columns: repeat(3, 1fr); }
  .index a:nth-child(3n) { border-right: 0; }
  .index a:nth-child(3n + 1) { padding-left: 0; }
  .bento > .span-3, .bento > .span-4, .bento > .span-2 { grid-column: span 3; }
  .card.k-os { grid-template-columns: 1fr; }
  .k-os .card__text { padding-bottom: 0; }
  .k-os .card__go { left: auto; right: 20px; top: 20px; bottom: auto; }
  .exp { grid-template-columns: repeat(2, 1fr); }
  .about, .split, .cta-panel { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .tiles > * { grid-column: span 3 !important; }
  .more { grid-template-columns: repeat(2, 1fr); }
  .stage .term { position: relative; right: auto; bottom: auto; width: auto; margin: 16px 0 0; }
  .four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-links > a, .crumb ~ .nav-links { display: none; }
  .bento > * { grid-column: 1 / -1 !important; }
  .card { min-height: 0; }
  .k-tiaris .card__text { padding-bottom: 210px; }
  .k-tiaris .card__vis { width: 240px; }
  .three, .tiles { grid-template-columns: 1fr; }
  .osgrid { grid-template-columns: repeat(4, 1fr); }
  .tiles > * { grid-column: auto !important; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .site-footer .wrap > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-nav .wrap { gap: 8px; }
  .crumb { font-size: 16px; gap: 8px; }
  .crumb .brand { display: none; }
  .crumb .sep { display: none; }
  .nav-right .btn--ghost { display: none; }
  .site-nav .wrap { position: relative; }
  .menu { position: static; }
  .menu-panel, .nav-right .menu-panel { left: auto; right: clamp(12px, 4vw, 40px); width: min(320px, calc(100vw - 24px)); }
  .index { grid-template-columns: 1fr 1fr; }
  .index a, .index a:nth-child(n) { padding-left: 0; padding-right: 12px; border-right: 0; }
  .card__go { position: static; margin: 22px 0 0 24px; width: max-content; }
  .k-os .card__go { margin: 22px 0 0 24px; }
  .card { display: flex; flex-direction: column; }
  .card__text { padding: 0 24px; margin-top: 18px; }
  .k-fusebox .card__vis, .k-portal .card__vis { margin-left: 24px; height: 170px; }
  .agents { grid-template-columns: repeat(2, 1fr); padding: 22px 24px 24px; }
  .exp, .four, .more, .boxes { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .card__title h3 { font-size: 30px; }
  .hero__row .btn { width: 100%; }
  .stage .term { display: none; }
}
@media (max-width: 380px) {
  .nav-right { gap: 6px; }
  .menu summary { padding: 0 6px; }
  .nav-right .btn--primary { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}