@font-face { font-family: 'Outfit'; src: url('fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --ink: #ddd3c0; --ink-rgb: 221 211 192; --ink-hi: #f4f1ea; --bg: #0a0a0a; --bg-rgb: 10 10 10; --pad: 64px; --inv: brightness(.87) sepia(.3); --inv-hi: brightness(.96) sepia(.1); --gs-dot: 4px; --gs-dot-hi: 5px; --gs-rule: 10px; --glow: rgba(255,255,255,.9); --img-rest: grayscale(1) brightness(.75); --lb-shadow: rgba(0,0,0,.8); }
/* light theme: system preference by default, html[data-theme] overrides (toggle in nav) */
:root[data-theme="light"] { --ink: #0a0a0a; --ink-rgb: 10 10 10; --ink-hi: #0a0a0a; --inv-hi: invert(1); --bg: #f2efe9; --bg-rgb: 242 239 233; --inv: invert(1); --gs-dot: 0; --gs-dot-hi: 0; --gs-rule: 0; --glow: rgba(0,0,0,.35); --img-rest: grayscale(1) brightness(1.05); --lb-shadow: rgba(0,0,0,.25); --a: #8f6413; --b: #0f6b7e; --c: #5a3fc0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #0a0a0a; --ink-rgb: 10 10 10; --ink-hi: #0a0a0a; --inv-hi: invert(1); --bg: #f2efe9; --bg-rgb: 242 239 233; --inv: invert(1); --gs-dot: 0; --gs-dot-hi: 0; --gs-rule: 0; --glow: rgba(0,0,0,.35); --img-rest: grayscale(1) brightness(1.05); --lb-shadow: rgba(0,0,0,.25); --a: #8f6413; --b: #0f6b7e; --c: #5a3fc0; } }
html { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
/* white logo images invert on light */
.wm-lysi, .ring img, .lysi { filter: var(--inv); }
/* product tints per theme (read by products.html via getComputedStyle) */
.tile[data-cta="fd"] { --p1: #c8f542; --p2: #8b7cf6; } .tile[data-cta="id"] { --p1: var(--a); --p2: var(--c); } .tile[data-cta="okr"] { --p1: var(--b); --p2: var(--a); }
:root[data-theme="light"] .tile[data-cta="fd"] { --p1: #4f7400; --p2: #4334b5; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tile[data-cta="fd"] { --p1: #4f7400; --p2: #4334b5; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: var(--w-body); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 6px; }
.label { font-size: 13px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.small { font-size: 12px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; }

/* header */
:root { --dim: .5; --o-faint: .25; --o-mid: .65; --o-text: .85; --o-h1: .7; --o-line: .2; --o-line-hi: .5; --w-h1: 200; --w-body: 300; --w-panel: 200; --edge: 0; --t: opacity .5s ease; }
/* light: rest states must stay legible on a pale ground */
:root[data-theme="light"] { --dim: .75; --o-faint: .45; --o-mid: .85; --o-text: .92; --o-h1: .85; --o-line: .35; --o-line-hi: .7; --w-h1: 300; --w-body: 400; --w-panel: 300; --edge: .18; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --dim: .75; --o-faint: .45; --o-mid: .85; --o-text: .92; --o-h1: .85; --o-line: .35; --o-line-hi: .7; --w-h1: 300; --w-body: 400; --w-panel: 300; --edge: .18; } }
.hdr { position: sticky; top: 0; z-index: 5; height: 128px; background: var(--bg); }
.wm { position: absolute; left: var(--pad); top: 26px; width: 151px; height: 76px; transform-origin: left center; }
.wm:hover { text-decoration: none; }
/* wordmark rebuilt from intro parts (stage 436x220) so dots can light up on their own */
.wm-stage { position: absolute; left: 0; top: 0; width: 436px; height: 220px; transform: scale(.3455); transform-origin: 0 0; }
.wm-lysi { position: absolute; left: 0; top: 0; width: 435px; height: auto; display: block; opacity: var(--dim); transition: var(--t); }
.wm-dot { position: absolute; background: var(--ink); opacity: var(--dim); transition: var(--t); }
.wm-ltr { position: absolute; top: 193px; font-size: 29.5px; font-weight: 300; line-height: 1; white-space: nowrap; opacity: var(--dim); transition: var(--t); }
.ring { position: absolute; left: var(--pad); top: 14px; width: 44px; height: 44px; opacity: 0; transform-origin: center; }
.ring img { width: 44px; height: 44px; display: block; opacity: var(--dim); transition: var(--t); }
.rule { position: absolute; left: 235px; right: var(--pad); top: 83px; height: 4px; background: var(--ink); opacity: var(--dim); transition: var(--t); }
.nav { position: absolute; right: var(--pad); top: 60px; display: flex; gap: 40px; font-size: 13px; font-weight: 300; line-height: 1; letter-spacing: 0.28em; text-transform: uppercase; opacity: var(--dim); transition: var(--t); }
.edge { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); opacity: var(--edge); }
/* product tint: logo + line take the product's colours while a tile is hovered */
/* product tint: only the dots take colour, NXT LVL stays grey */
.hdr.tinted .wm-dot { opacity: 1; background: var(--p1); box-shadow: 0 0 var(--gs-dot) var(--p1); }
.hdr.tinted .wm-dot:nth-of-type(n+5) { background: var(--p2); box-shadow: 0 0 var(--gs-dot) var(--p2); }
.hdr.tinted .rule { opacity: 1; background: linear-gradient(90deg, var(--p1), var(--p2)); box-shadow: 0 0 var(--gs-rule) var(--p2); }
.wm-dot, .wm-ltr, .rule { transition: opacity .5s ease, background .7s ease, color .7s ease, box-shadow .7s ease, text-shadow .7s ease; }
/* nav links: brighten, never underline */
.nav a { opacity: var(--o-mid); transition: var(--t); }
.nav a:hover { opacity: 1; text-decoration: none; }
.hdr:hover .nav { opacity: 1; }
/* hover header → dots + line light up; hover logo → whole logo lights up */
.hdr:hover .wm-dot, .hdr:hover .rule, .hdr:hover .nav { opacity: 1; }
.wm:hover .wm-lysi, .wm:hover .wm-ltr, .ring:hover img { opacity: 1; }

/* page: header + footer only */
body { min-height: 100vh; display: flex; flex-direction: column; }
main.mission { flex: 1; display: flex; align-items: center; padding: 0 var(--pad); }
.mission h1 { margin: 0; font-size: 56px; font-weight: var(--w-h1); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; max-width: 1100px; opacity: var(--o-h1); transition: var(--t); }
.mission:hover h1 { opacity: 1; }
main.mission { flex-direction: column; align-items: flex-start; justify-content: center; }
:root { --a: #e2b56a; --b: #6fc3d6; --c: #b79cf2; }
.w { all: unset; cursor: pointer; transition: color .4s ease; }
.w:hover, .w:focus-visible { color: var(--k); }
.w[data-k="a"] { --k: var(--a); } .w[data-k="b"] { --k: var(--b); } .w[data-k="c"] { --k: var(--c); }
.mission[data-open="a"] .w[data-k="a"], .mission[data-open="b"] .w[data-k="b"], .mission[data-open="c"] .w[data-k="c"] { color: var(--k); }
.detail { display: grid; max-width: 640px; }
.detail p { grid-area: 1/1; margin: 24px 0 0; font-size: 20px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.mission[data-open="a"] p[data-k="a"] { color: var(--a); } .mission[data-open="b"] p[data-k="b"] { color: var(--b); } .mission[data-open="c"] p[data-k="c"] { color: var(--c); }
.mission[data-open="a"] p[data-k="a"], .mission[data-open="b"] p[data-k="b"], .mission[data-open="c"] p[data-k="c"] { opacity: 1; transform: none; }
/* cube: the hero visual (index only). One body at rest; a = Tailored, b = Software Products, c = Next Level. Classes are prefixed (cx, ct, cc, cw…) so they never collide with the page classes */
:root { --cx-t0: #2b2b2b; --cx-t1: #292929; --cx-t2: #2d2d2d; --cx-e: #3a3a3a; --cx-fog: rgba(40,40,40,.55); --cx-light: rgba(255,255,255,.12); --cx-shadow: rgba(0,0,0,.85); --cx-scrim: rgb(var(--bg-rgb) / .45); }
:root[data-theme="light"] { --cx-t0: #cfc9bd; --cx-t1: #c7c1b5; --cx-t2: #d6d0c4; --cx-e: #b5afa3; --cx-fog: rgba(190,184,174,.5); --cx-light: rgba(255,255,255,.7); --cx-shadow: rgba(0,0,0,.35); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --cx-t0: #cfc9bd; --cx-t1: #c7c1b5; --cx-t2: #d6d0c4; --cx-e: #b5afa3; --cx-fog: rgba(190,184,174,.5); --cx-light: rgba(255,255,255,.7); --cx-shadow: rgba(0,0,0,.35); } }
main.mission { position: relative; overflow: hidden; }
.mission h1, .detail { position: relative; z-index: 2; }
.cx { position: absolute; right: 4vw; top: 50%; width: 660px; height: 660px; margin-top: -330px; transform: scale(.72); perspective: 3200px; perspective-origin: 50% 45%; z-index: 0; pointer-events: none; }
.cx, .cx * { box-sizing: border-box; }
.cx-scrim { position: absolute; inset: 0; background: var(--cx-scrim); pointer-events: none; z-index: 1; }
.cfog{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(circle,var(--fog) 0,rgba(10,10,10,0) 60%);transition:background 1.2s ease;pointer-events:none}
.cl{position:absolute;left:-20px;top:-40px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--cx-light),rgba(255,255,255,0) 60%);filter:blur(24px);opacity:1;transition:opacity 1s ease;pointer-events:none}
.cx.st-a .cl{background:radial-gradient(circle,rgba(226,181,106,.16),rgba(226,181,106,0) 60%)}.cx.st-b .cl{background:radial-gradient(circle,rgba(111,195,214,.12),rgba(111,195,214,0) 60%)}.cx.st-c .cl{background:radial-gradient(circle,rgba(183,156,242,.12),rgba(183,156,242,0) 60%)}
.csh{position:absolute;left:50%;top:50%;width:640px;height:150px;margin:220px 0 0 -320px;border-radius:50%;background:radial-gradient(ellipse,var(--cx-shadow),rgba(0,0,0,0) 65%);filter:blur(18px);transition:opacity 1s ease}
.ccube{position:absolute;left:180px;top:180px;width:300px;height:300px;transform-style:preserve-3d;transition:transform 2s cubic-bezier(.65,0,.25,1);
  --e:var(--cx-e);--t0:var(--cx-t0);--t1:var(--cx-t1);--t2:var(--cx-t2);--seam:transparent;--fa:1;--bw:1px;--gl:0 0 0 rgba(0,0,0,0);--lo:1;transform:rotateX(-30deg) rotateY(-42deg)}
.cf::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lit,none);opacity:var(--lo);transition:opacity 1s ease}
.top{--lit:radial-gradient(circle at 22% 28%,rgba(255,255,255,.30),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 72%)}
.front{--lit:radial-gradient(circle at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.right{--lit:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.35))}
.cf{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));transform-style:preserve-3d;border:var(--bw) solid var(--e);box-shadow:var(--gl);transition:border-color 1s ease,border-width 1s ease,box-shadow 1s ease}
.front{transform:translateZ(150px)}.back{transform:rotateY(180deg) translateZ(150px)}.right{transform:rotateY(90deg) translateZ(150px)}
.left{transform:rotateY(-90deg) translateZ(150px)}.top{transform:rotateX(90deg) translateZ(150px)}.bottom{transform:rotateX(-90deg) translateZ(150px)}
.ct{position:relative;transform-style:preserve-3d}
.ct.p0{--c:var(--t0)}.ct.p1{--c:var(--t1)}.ct.p2{--c:var(--t2)}
.cc{position:absolute;inset:0;background:var(--c);border:0 solid var(--seam);transform:translateZ(0);opacity:var(--fa);transition:transform 1.3s cubic-bezier(.6,0,.2,1) .6s,background 1s ease,border-color 1s ease,opacity .8s ease}
.ct.sr .cc{border-right-width:2.5px}.ct.sb .cc{border-bottom-width:2.5px}
.cw{position:absolute;background:var(--c);filter:brightness(.55);opacity:var(--fa);--lift:0px;transition:height 1.3s cubic-bezier(.6,0,.2,1) .6s,width 1.3s cubic-bezier(.6,0,.2,1) .6s,transform 1.3s cubic-bezier(.6,0,.2,1) .6s,background 1s ease,opacity .8s ease}
.wt{left:0;top:0;width:100%;height:0;transform-origin:top;transform:translateZ(var(--lift)) rotateX(90deg);filter:brightness(.95);background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}
.wb{left:0;bottom:0;width:100%;height:0;transform-origin:bottom;transform:translateZ(var(--lift)) rotateX(-90deg);filter:brightness(.42);background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
.wl{left:0;top:0;width:0;height:100%;transform-origin:left;transform:translateZ(var(--lift)) rotateY(-90deg);filter:brightness(.85);background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}
.wr{right:0;top:0;width:0;height:100%;transform-origin:right;transform:translateZ(var(--lift)) rotateY(90deg);filter:brightness(.55);background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}
/* lighting by face role: top lit, sides shaded */
/* filters live on the caps, never on the tile: a filter on the tile would flatten its 3D walls */
.top .cc{filter:brightness(1.08);--cg:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%,rgba(0,0,0,.14))}
.front .cc{filter:brightness(.92);--cg:linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.28))}
.left .cc{filter:brightness(.8);--cg:linear-gradient(200deg,rgba(255,255,255,.06),rgba(0,0,0,.38))}
.right .cc{filter:brightness(.66);--cg:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.5))}
.back .cc{filter:brightness(.55);--cg:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.55))}
.bottom .cc{filter:brightness(.5);--cg:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65))}
/* per-piece shading lives on an overlay that only appears once the pieces exist; at rest each face is one uniform body */
.cc::after{content:"";position:absolute;inset:0;background:var(--cg);opacity:var(--co,0);transition:opacity 1s ease .4s;pointer-events:none}
.cx.st-a .ccube,.cx.st-b .ccube,.cx.st-c .ccube{--co:1}
/* ---- Tailored: turn; pieces push out of the core as real blocks; gold */
.cx.st-a .ccube{transform:rotateX(-30deg) rotateY(48deg);--e:#e2b56a;--bw:0px;--t0:#4f4637;--t1:#473f31;--t2:#57503f;--seam:#14110b;--gl:0 0 0 rgba(0,0,0,0)}
.cx.st-a .cc,.cx.st-b .cc,.cx.st-c .cc{transform:translateZ(var(--out))}
.cx.st-a .wt,.cx.st-a .wb,.cx.st-b .wt,.cx.st-b .wb,.cx.st-c .wt,.cx.st-c .wb{height:var(--out)}.cx.st-a .wl,.cx.st-a .wr,.cx.st-b .wl,.cx.st-b .wr,.cx.st-c .wl,.cx.st-c .wr{width:var(--out)}
/* ---- Products: turn on; shell thins to a frame; pieces sink in; core, planes, parts, grid, net */
.cx.st-b .ccube{transform:rotateX(-30deg) rotateY(138deg);--e:#6fc3d6;--bw:0px;--fa:.32;--t0:#3f8a9c;--t1:#2d6b7c;--t2:#56a6b8;--seam:rgba(111,195,214,.45);--gl:0 0 0 rgba(0,0,0,0)}
.cin{position:absolute;inset:0;transform-style:preserve-3d}
.cpl,.ccore i,.cp i,.cg{opacity:0;transition:opacity 1s ease 1s}
.cx.st-b .cpl,.cx.st-b .ccore i,.cx.st-b .cp i,.cx.st-b .cg{opacity:1}
.cx.st-c .cp i,.cx.st-c .cp.x i{opacity:1}
.cpl{position:absolute;left:50px;top:50px;width:200px;height:200px;border:1px solid rgba(111,195,214,.85);background:rgba(111,195,214,.12);transform:rotateX(90deg) translateZ(var(--z))}
.ccore{position:absolute;left:118px;top:118px;width:64px;height:64px;transform-style:preserve-3d;animation:spin 8s linear infinite}
.ccore i{position:absolute;inset:0;background:rgba(191,233,242,.9);border:1px solid #fff;box-shadow:0 0 34px 10px rgba(111,195,214,.85)}
.ccore i:nth-child(1){transform:translateZ(32px)}.ccore i:nth-child(2){transform:rotateY(180deg) translateZ(32px)}.ccore i:nth-child(3){transform:rotateY(90deg) translateZ(32px)}
.ccore i:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}.ccore i:nth-child(5){transform:rotateX(90deg) translateZ(32px)}.ccore i:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}
@keyframes spin{from{transform:rotateX(20deg) rotateY(0)}to{transform:rotateX(20deg) rotateY(360deg)}}
.cp{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;transform-style:preserve-3d;--sp:1;transform:translate3d(calc(var(--x)*var(--sp)),calc(var(--y)*var(--sp)),calc(var(--z)*var(--sp))) rotateY(var(--r));transition:transform 1.8s cubic-bezier(.6,0,.2,1)}
.cpd{position:absolute;inset:0;transform-style:preserve-3d;animation:drift 5s ease-in-out infinite alternate;animation-delay:var(--d)}
.cx.st-c .cp{--sp:2.3}
.cp i{position:absolute;inset:0;background:rgba(111,195,214,.28);border:1px solid #6fc3d6}
.cp i:nth-child(1){transform:translateZ(22px)}.cp i:nth-child(2){transform:rotateY(90deg) translateZ(22px)}.cp i:nth-child(3){transform:rotateX(90deg) translateZ(22px)}
@keyframes drift{from{transform:translate3d(0,0,0) rotateY(0)}to{transform:translate3d(24px,-30px,40px) rotateY(70deg)}}
.cg{position:absolute;left:0;top:0;width:300px;height:300px;transform:rotateX(90deg) translateZ(-150px);background:repeating-linear-gradient(90deg,rgba(111,195,214,.28) 0 1px,transparent 1px 50px),repeating-linear-gradient(0deg,rgba(111,195,214,.28) 0 1px,transparent 1px 50px)}
/* ---- Next Level: tip over; bottom opens onto a universe */
.cx.st-c .ccube{transform:rotateX(-30deg) rotateY(182deg);animation:orbit 26s linear infinite;--e:#b79cf2;--bw:0px;--fa:.45;--t0:#8f78d8;--t1:#6d58b8;--t2:#a793e6;--seam:rgba(183,156,242,.45);--gl:0 0 0 rgba(0,0,0,0)}
.cbeam{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(183,156,242,.5),rgba(183,156,242,0) 60%);filter:blur(16px);opacity:0;transition:opacity 1.2s ease 1.1s;pointer-events:none}
.cx.st-c .cbeam{opacity:1}
.cnet{position:absolute;inset:0;opacity:0;transition:opacity 1s ease .8s;pointer-events:none}
.cx.st-b .cnet,.cx.st-c .cnet{opacity:1}
.cnet svg{position:absolute;inset:0;width:100%;height:100%}.cnet line{stroke:#fff;stroke-opacity:.16}.cx.st-c .cnet line{stroke:#b79cf2;stroke-opacity:.3}
.cnet b{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;animation:tw 3s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes tw{from{opacity:.3;transform:translateY(0)}to{opacity:1;transform:translateY(-12px)}}
.corb{position:absolute;left:50%;top:50%;width:760px;height:230px;margin:-115px 0 0 -380px;border:1px dashed rgba(183,156,242,.5);border-radius:50%;opacity:0;transition:opacity 1s ease 1.3s}
.cx.st-c .corb{opacity:1}
.cx .cfog{--fog:var(--cx-fog)}.cx.st-a .cfog{--fog:rgba(58,48,32,.55)}.cx.st-b .cfog{--fog:rgba(30,50,56,.6)}.cx.st-c .cfog{--fog:rgba(42,35,64,.6)}
.cx.st-c .csh{opacity:.6}
/* Next Level: split — each piece becomes a 26px block floating off the core, farther the more it stood out */
.cx.st-c .cw{--lift:calc(var(--out)*1.6 + 60px)}
.cx.st-c .cc{transform:translateZ(calc(var(--out)*1.6 + 86px))}
.cx.st-c .wt,.cx.st-c .wb{height:26px}.cx.st-c .wl,.cx.st-c .wr{width:26px}
.cx.st-c .cpl,.cx.st-c .cg,.cx.st-c .ccore i{opacity:0}
/* the construct keeps turning; it starts from the angle it had (--start set by the script), so nothing snaps */
@keyframes orbit{from{transform:rotateX(-30deg) rotateY(var(--start))}to{transform:rotateX(-30deg) rotateY(calc(var(--start) + 360deg))}}
/* Next Level parts: three colours, two sizes */
.cp.s{width:26px;height:26px;margin:-13px 0 0 -13px}
.cp.s i:nth-child(1){transform:translateZ(13px)}.cp.s i:nth-child(2){transform:rotateY(90deg) translateZ(13px)}.cp.s i:nth-child(3){transform:rotateX(90deg) translateZ(13px)}
.cx.st-c .cp.g i{background:rgba(226,181,106,.32);border-color:#e2b56a}
.cx.st-c .cp.c i{background:rgba(111,195,214,.32);border-color:#6fc3d6}
.cx.st-c .cp.v i{background:rgba(183,156,242,.32);border-color:#b79cf2}
.cx.st-c .cbeam{background:radial-gradient(circle,rgba(183,156,242,.35),rgba(111,195,214,.12) 40%,rgba(226,181,106,0) 65%)}

/* the seven logo dots, as cubes, in the heart of the form — one colour, the same that lights the logo */
.cd7{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateY(-138deg) rotateX(30deg) rotateZ(-14deg)}
.cx.st-c .cd7{animation:d7un 26s linear infinite}
@keyframes d7un{from{transform:rotateY(calc(-1*var(--start))) rotateX(30deg) rotateZ(-14deg)}to{transform:rotateY(calc(-1*var(--start) - 360deg)) rotateX(30deg) rotateZ(-14deg)}}
.cd7s{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:d7sway 9s ease-in-out infinite alternate}
@keyframes d7sway{from{transform:rotateY(-16deg)}to{transform:rotateY(16deg)}}
.cd7 .cdp{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translate3d(0,0,0);transition:transform 2.4s cubic-bezier(.6,0,.2,1) .3s}
.cx.st-c .cd7 .cdp{transform:translate3d(var(--dx),var(--dy),0)}
.cd7 .cdc{position:absolute;left:0;top:0;transform-style:preserve-3d}
/* all seven tumble in step: one pace, one phase */
.cx.st-c .cd7 .cdc{animation:dcspin 20s linear infinite}
@keyframes dcspin{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(360deg)}}
.cd7 .cdc i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:#bfe9f2;border:1px solid #fff;opacity:0;transition:opacity .5s ease .2s,background 2.8s ease 1s,border-color 2.8s ease 1s,box-shadow 2.8s ease 1s;box-shadow:0 0 24px rgba(111,195,214,.8)}
.cd7 .cdc i:nth-child(1){transform:translateZ(calc(var(--s)/2))}.cd7 .cdc i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cd7 .cdc i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}.cd7 .cdc i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cd7 .cdc i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}.cd7 .cdc i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cd7 .cdc i:nth-child(5){filter:brightness(1.12)}.cd7 .cdc i:nth-child(3),.cd7 .cdc i:nth-child(4){filter:brightness(.82)}.cd7 .cdc i:nth-child(2){filter:brightness(.7)}.cd7 .cdc i:nth-child(6){filter:brightness(.6)}
.cx.st-c .cd7 .cdc i{opacity:1;background:#e6e1d6;border-color:#f4f1ea;box-shadow:0 0 10px rgba(244,241,234,.35)}
/* the nucleus hands over: it fades as the seven leave it */
.cx.st-c .ccore i{transition:opacity 1.2s ease .2s}
.cx.st-c .cd7 .cdc{transform:translate3d(var(--dx),var(--dy),0)}
.cd7 .cdc{transform:translate3d(0,0,0)}

/* Next Level lights the whole logo, slowly, a step above the rest (mark, dots, letters, line) */
body.v2[data-hover="c"] .hdr .wm-dot, body.v2[data-open="c"] .hdr .wm-dot, body.v2[data-hover="c"] .hdr .rule, body.v2[data-open="c"] .hdr .rule { background: var(--ink-hi); box-shadow: 0 0 var(--gs-dot) var(--ink-hi); transition-duration: 2.8s; transition-delay: 1s; }
.wm-lysi, .wm-ltr { transition: opacity .5s ease, filter 2.8s ease, color 2.8s ease; }
body.v2[data-hover="c"] .hdr .wm-lysi, body.v2[data-open="c"] .hdr .wm-lysi { opacity: 1; filter: var(--inv-hi); transition: opacity 2.8s ease 1s, filter 2.8s ease 1s; }
body.v2[data-hover="c"] .hdr .wm-ltr, body.v2[data-open="c"] .hdr .wm-ltr { opacity: 1; color: var(--ink-hi); transition: opacity 2.8s ease 1s, color 2.8s ease 1s; }
@media (max-width: 720px) {
  /* folded phone: the line sits in the top third, the cube below it, overlapping a little */
  main.mission { justify-content: flex-start; padding-top: 9vh; }
  .cx { right: 50%; margin-right: -330px; top: 66%; transform: scale(.46); }
  .cx-scrim { background: rgb(var(--bg-rgb) / .5); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  /* unfolded / tablet: line on the left, cube centred on the right, allowed to run a little off the edge */
  .cx { right: -9vw; transform: scale(.68); }
  .mission h1 { max-width: 62vw; }
  .detail { max-width: 62vw; }
}
@media (prefers-reduced-motion: reduce) { .cx * { animation: none; transition-duration: 0s; } }

/* products */
main.products { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 32px; align-content: start; padding: 40px var(--pad); }
.tile { display: block; position: relative; }
.tile:hover { text-decoration: none; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border: 1px solid rgb(var(--ink-rgb) / var(--o-line)); filter: var(--img-rest); transition: filter .6s ease, transform .6s ease; }
.tile:hover img, .tile:focus-visible img { filter: none; border-color: rgb(var(--ink-rgb) / var(--o-line-hi)); }
.cap { display: flex; align-items: baseline; gap: 14px; padding: 18px 0 0; font-size: 18px; font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; color: var(--ink); opacity: var(--o-faint); transform-origin: left top; transition: opacity .5s ease, transform .5s ease; }
.tile:hover .cap { opacity: .9; transform: scale(1.15); }
.name b { font-weight: 300; font-size: 10px; letter-spacing: 0.12em; margin-left: 6px; opacity: var(--o-text); }
.sep { width: 24px; height: 1px; background: currentColor; opacity: var(--o-mid); flex: none; }
.tag { text-transform: none; letter-spacing: 0.02em; font-size: 13px; opacity: var(--o-text); }
.nav a[aria-current] { opacity: 1; }
.nav button { all: unset; cursor: pointer; opacity: var(--o-mid); transition: var(--t); } .nav button:hover, .nav button:focus-visible { opacity: 1; }
.nav button::after { content: "Light"; } :root[data-theme="light"] .nav button::after { content: "Dark"; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav button::after { content: "Dark"; } }
footer { margin-top: auto; border-top: 1px solid rgb(var(--ink-rgb) / var(--edge)); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 40px var(--pad); opacity: var(--dim); transition: var(--t); }
footer:hover { opacity: 1; }
footer nav { display: flex; gap: 40px; }

/* legal pages */
.legal { padding: 96px var(--pad) 120px; max-width: 860px; }
.legal h1 { margin: 0 0 56px; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.legal h2 { margin: 56px 0 16px; font-size: 13px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.legal p, .legal li { margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
.legal ul { padding-left: 20px; }
.legal a { text-decoration: underline; text-underline-offset: 4px; }

/* intro */
.intro { cursor: pointer; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.intro-scale { transform: scale(1.6); transform-origin: center; }
@supports (animation-timeline: scroll()) {
  .hdr { animation: hdrH linear both; animation-timeline: scroll(root); animation-range: 0 320px; }
  .wm { animation: wmOut linear both; animation-timeline: scroll(root); animation-range: 0 200px; }
  .ring { animation: ringIn linear both; animation-timeline: scroll(root); animation-range: 120px 320px; }
  .rule { animation: fade linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
  .nav { animation: navUp linear both; animation-timeline: scroll(root); animation-range: 0 320px; }
  .edge { animation: glow linear both; animation-timeline: scroll(root); animation-range: 200px 320px; }
}
@keyframes hdrH { from { height: 128px; } to { height: 72px; } }
@keyframes wmOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.7); } }
@keyframes ringIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes navUp { from { top: 60px; } to { top: 30px; } }
.intro { animation: hide .8s ease 7.8s forwards; }
.brand { opacity: 0; animation: glow .8s ease 8.4s forwards; }
@keyframes hide { to { opacity: 0; visibility: hidden; } }
.lysi { opacity: 0; animation: glow 1s ease-in .2s forwards; }
.tag1 { opacity: 0; animation: glow 1.2s ease-in 1.2s forwards, wipe .35s steps(7, jump-start) 5.8s forwards; }
.tag1i { animation: wipeIn .35s steps(7, jump-start) 5.8s forwards; }
.ltr { opacity: 0; }
.ltr.e { animation: glow .5s ease-out 2.8s forwards, fade .35s ease 5.8s forwards; }
.lN { animation: glow .5s ease-out 2.8s forwards, mN .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mN { from { left: 0px; } to { left: -2.6px; } }
.lX { animation: glow .5s ease-out 2.8s forwards, mX .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mX { from { left: 92px; } to { left: 68.5px; } }
.lT { animation: glow .5s ease-out 2.8s forwards, mT .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mT { from { left: 138px; } to { left: 138.7px; } }
.lL1 { animation: glow .5s ease-out 2.8s forwards, mL1 .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mL1 { from { left: 230px; } to { left: 282.8px; } }
.lV { animation: glow .5s ease-out 2.8s forwards, mV .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mV { from { left: 322px; } to { left: 349.8px; } }
.lL2 { animation: glow .5s ease-out 2.8s forwards, mL2 .35s cubic-bezier(.7,0,.2,1) 5.8s forwards; } @keyframes mL2 { from { left: 414px; } to { left: 419.6px; } }
.dot { opacity: 0; transform: scale(0); animation: pop .15s cubic-bezier(.2,.8,.3,1) forwards; }
.dot:nth-child(1) { animation-delay: 5.8s; } .dot:nth-child(2) { animation-delay: 5.85s; } .dot:nth-child(3) { animation-delay: 5.9s; }
.dot:nth-child(4) { animation-delay: 5.95s; } .dot:nth-child(5) { animation-delay: 6s; } .dot:nth-child(6) { animation-delay: 6.05s; } .dot:nth-child(7) { animation-delay: 6.1s; }
@keyframes glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade { to { opacity: 0; } }
@keyframes wipe { from { left: 0; width: 435px; } to { left: 435px; width: 0; } }
@keyframes wipeIn { from { margin-left: 0; } to { margin-left: -435px; } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.intro { animation: hide .8s ease 7.8s forwards; }
.brand { opacity: 0; animation: glow .8s ease 8.4s forwards; }
@keyframes hide { to { opacity: 0; visibility: hidden; } }
html.no-intro .intro { display: none; }
html.no-intro .brand { opacity: 1; animation: none; }
/* after intro: logo + line flare bright, then settle to dim */
.wm-lysi, .wm-dot, .wm-ltr, .rule { animation: flare 2.6s cubic-bezier(.4,0,.2,1) 8.4s; }
@keyframes flare { 0% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 6px var(--glow)); } 35% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 6px var(--glow)); } 100% { opacity: var(--dim); filter: none; } }
/* the wordmark image keeps its invert through the flare */
@keyframes flareImg { 0% { opacity: 1; filter: var(--inv) brightness(1.8) drop-shadow(0 0 6px var(--glow)); } 35% { opacity: 1; filter: var(--inv) brightness(1.8) drop-shadow(0 0 6px var(--glow)); } 100% { opacity: var(--dim); filter: var(--inv); } }
.wm-lysi { animation-name: flareImg; }
html.no-intro .wm-lysi, html.no-intro .wm-dot, html.no-intro .wm-ltr, html.no-intro .rule { animation: none; }
@supports (animation-timeline: scroll()) {
  .rule { animation: flare 2.6s cubic-bezier(.4,0,.2,1) 8.4s, fade linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 160px; }
  html.no-intro .rule { animation: fade linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } .brand { opacity: 1; animation: none; } .wm-lysi, .wm-dot, .wm-ltr, .rule { animation: none; } }

/* intro variant B: logo + line + nav sit dark grey from the start, animation centred, then one flare, then routine */
.v2 .intro { z-index: 0; background: transparent; pointer-events: none; }
.v2 .intro-scale { opacity: .85; transform: scale(1.3); }
.v2 .hdr, .v2 main, .v2 footer { position: relative; z-index: 1; }
.v2 .hdr { position: sticky; background: transparent; }
.v2 .wm-lysi, .v2 .wm-dot, .v2 .wm-ltr, .v2 .rule, .v2 .nav { opacity: var(--o-faint); animation: flare 2.6s cubic-bezier(.4,0,.2,1) 8.4s forwards; }
/* .done is set by JS once the flare is over (or the intro was skipped): back to the dim routine, hover works */
.v2.done .wm-lysi, .v2.done .wm-dot, .v2.done .wm-ltr, .v2.done .rule, .v2.done .nav { opacity: var(--dim); animation: none; }
.v2.done .hdr:hover .wm-dot, .v2.done .hdr:hover .rule, .v2.done .hdr:hover .nav, .v2.done .wm:hover .wm-lysi, .v2.done .wm:hover .wm-ltr,
.v2.done .hdr.tinted .wm-dot { opacity: 1; }

/* mission word open → logo dots take its colour, full brightness */
/* hover wins over open so the cursor always shows its own word's colour */
body[data-open="a"] { --k: var(--a); } body[data-open="b"] { --k: var(--b); } body[data-open="c"] { --k: var(--c); }
body[data-hover="a"] { --k: var(--a); } body[data-hover="b"] { --k: var(--b); } body[data-hover="c"] { --k: var(--c); }
body.v2[data-open="a"] .wm-dot, body.v2[data-open="b"] .wm-dot, body.v2[data-open="c"] .wm-dot,
body.v2[data-hover="a"] .wm-dot, body.v2[data-hover="b"] .wm-dot, body.v2[data-hover="c"] .wm-dot { opacity: 1; background: var(--k); box-shadow: 0 0 var(--gs-dot-hi) var(--k); animation: none; }
body.v2[data-open="a"] .rule, body.v2[data-open="b"] .rule, body.v2[data-open="c"] .rule,
body.v2[data-hover="a"] .rule, body.v2[data-hover="b"] .rule, body.v2[data-hover="c"] .rule { opacity: 1; background: var(--k); box-shadow: 0 0 var(--gs-rule) var(--k); animation: none; }

/* touch devices: no hover, so show tiles in colour and captions readable */
@media (hover: none) {
  .tile img { filter: none; }
  .cap { opacity: var(--o-text); }
  .wm-lysi, .wm-dot, .wm-ltr, .rule, .nav, footer { opacity: var(--o-mid); }
}

/* lightbox: click a tile → image full screen */
.lb { position: fixed; inset: 0; z-index: 20; background: rgb(var(--bg-rgb) / .96); display: flex; align-items: center; justify-content: center; padding: 3vw; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.lb.on { opacity: 1; pointer-events: auto; }
.lb-box { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 100%; max-height: 100%; }
.lb img { max-width: 100%; max-height: calc(100vh - 6vw - 200px); object-fit: contain; box-shadow: 0 0 80px var(--lb-shadow); }
/* lightbox actions: download vs customized */
.lb-cta { display: none; }
.lb[data-cta="fd"] .lb-cta[data-cta="fd"], .lb[data-cta="id"] .lb-cta[data-cta="id"], .lb[data-cta="okr"] .lb-cta[data-cta="okr"] { display: flex; }
.lb-cta {  gap: 48px; flex-wrap: wrap; justify-content: center; align-items: flex-start; cursor: auto; }
.lb-sec { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.lb-h { font-size: 12px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; opacity: var(--o-mid); }
.lb-p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; opacity: var(--o-text); }
.lb-row { display: flex; gap: 20px; flex-wrap: wrap; }
.btn { display: flex; flex-direction: column; gap: 6px; padding: 16px 24px; border: 1px solid rgb(var(--ink-rgb) / var(--o-line-hi)); font-size: 13px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; opacity: var(--o-text); transition: var(--t), border-color .3s ease; }
.btn span { font-size: 12px; font-weight: 300; letter-spacing: 0.04em; text-transform: none; opacity: var(--o-text); }
.btn:hover, .btn:focus-visible { opacity: 1; border-color: var(--ink); text-decoration: none; }
.tile { cursor: zoom-in; }
/* image-less tile: typographic panel in the site's language */
.panel { position: relative; aspect-ratio: 16/9; border: 1px solid rgb(var(--ink-rgb) / var(--o-line)); padding: 8%; display: flex; flex-direction: column; justify-content: space-between; opacity: var(--o-mid); transition: opacity .6s ease, border-color .6s ease; }
.tile:hover .panel, .tile:focus-visible .panel { opacity: 1; border-color: rgb(var(--ink-rgb) / var(--o-line-hi)); }
.panel-dots { display: flex; align-items: center; gap: 4.5%; }
.panel-dots span { display: block; background: var(--ink); width: 4px; height: 4px; }
.panel-dots span:nth-child(2) { width: 6px; height: 6px; } .panel-dots span:nth-child(3) { width: 8px; height: 8px; } .panel-dots span:nth-child(4) { width: 10px; height: 10px; }
.panel-dots span:nth-child(5) { width: 12px; height: 12px; } .panel-dots span:nth-child(6) { width: 14px; height: 14px; } .panel-dots span:nth-child(7) { width: 16px; height: 16px; }
.tile:hover .panel-dots span:nth-child(-n+4) { background: var(--a); } .tile:hover .panel-dots span:nth-child(n+5) { background: var(--c); }
.panel-t { font-size: clamp(22px, 2.6vw, 40px); font-weight: var(--w-panel); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }

/* mobile */
@media (max-width: 720px) {
  :root { --pad: 20px; }
  .hdr { height: 84px; }
  .wm { top: 18px; width: 95px; height: 48px; } .wm-stage { transform: scale(.218); }
  .ring { top: 13px; width: 34px; height: 34px; } .ring img { width: 34px; height: 34px; }
  .rule { left: 128px; top: 54px; height: 3px; }
  .nav { top: 36px; gap: 24px; font-size: 11px; letter-spacing: 0.24em; }
  .intro-scale { transform: scale(0.78); }
  /* phone: the line is the only message on screen — it may use the full width */
  main.mission { padding-left: 16px; padding-right: 16px; }
  .mission h1 { font-size: clamp(38px, 11.5vw, 52px); line-height: 1.08; letter-spacing: .02em; max-width: none; }
  .detail { max-width: none; }
  main.products { grid-template-columns: 1fr; gap: 24px; padding: 24px var(--pad); }
  .cap { flex-wrap: wrap; gap: 8px 14px; white-space: normal; font-size: 14px; } .sep { display: none; }
  .detail p { font-size: 18px; }
  .lb { padding: 16px; overflow-y: auto; } .lb-box { max-height: none; } .lb-cta { flex-direction: column; gap: 24px; width: 100%; } .lb-row { flex-direction: column; gap: 12px; } .btn { padding: 14px 16px; }
  .lb img { max-height: 40vh; }
  footer { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  footer nav { gap: 28px; }
  .legal { padding: 56px var(--pad) 80px; }
  .legal h1 { font-size: 36px; margin-bottom: 40px; }
  .legal p, .legal li { font-size: 16px; }
  .v2 .intro-scale { transform: scale(.72); }
  @keyframes hdrH { from { height: 84px; } to { height: 60px; } }
  @keyframes navUp { from { top: 36px; } to { top: 25px; } }
}

/* theme: wordmark image flare keeps invert (must follow the .v2 rules) */
.v2 .wm-lysi { animation-name: flareImg; }

/* lit state: beige at rest → off-white when lit (dark mode; light mode has one ink) */
.hdr:hover .wm-dot, body[data-hover] .wm-dot:not(.x), .hdr:hover .rule { background: var(--ink-hi); }
.hdr.tinted .wm-dot, body[data-hover="a"] .wm-dot, body[data-hover="b"] .wm-dot, body[data-hover="c"] .wm-dot, body[data-open="a"] .wm-dot, body[data-open="b"] .wm-dot, body[data-open="c"] .wm-dot { background: var(--p1, var(--k)); }
.hdr.tinted .wm-dot:nth-of-type(n+5) { background: var(--p2); }
.hdr:hover .nav, .wm:hover .wm-ltr, .mission:hover h1, footer:hover, .tile:hover .cap, .tile:hover .panel, .btn:hover, .btn:focus-visible, .lb-box, .legal a:hover { color: var(--ink-hi); }
.wm:hover .wm-lysi, .ring:hover img { filter: var(--inv-hi); }
.btn:hover, .btn:focus-visible { border-color: var(--ink-hi); }