/* v7: Why XiKey pillars + How we work building */
.why-sec { background: radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pillar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.pillar h3 { margin: 12px 0 6px; font-size: 19px; } .pillar p { margin: 0; color: var(--muted); font-size: 15px; }
.p-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.p-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-compete { --c: #d8ee73; } .p-easy { --c: #5fd4b8; } .p-platform { --c: #6fa8dc; } .p-price { --c: #f0d98a; } .p-lang { --c: #e09a63; } .p-light { --c: #b9a8ff; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.pm-grid.row4 { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
@media (max-width: 980px) { .pm-grid.row4 { grid-template-columns: 1fr 1fr; } }

/* ---------- Building ---------- */
.building { max-width: 1060px; margin: 8px auto 0; position: relative; }
.roof { height: 54px; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.roof .sign { position: relative; z-index: 1; padding: 6px 22px; border-radius: 12px 12px 0 0; background: #0f1724; border: 1px solid #2c3b55; border-bottom: 0; color: #d8ee73; font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 12px #d8ee73; }
.roof .antenna { position: absolute; bottom: 30px; inset-inline-start: 50%; width: 3px; height: 26px; background: #4a5a77; }
.roof .antenna::after { content: ""; position: absolute; top: -6px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ff6b5a; box-shadow: 0 0 10px #ff6b5a; }
.fx-on .roof .antenna::after { animation: beacon 1.6s ease-in-out infinite; } @keyframes beacon { 50% { opacity: .2; } }
.tower { display: grid; grid-template-columns: 54px 1fr; background: linear-gradient(180deg, #0f1724, #0b111c); border: 2px solid #2c3b55; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 60px rgba(124,140,255,.06); }
.shaft { position: relative; border-inline-end: 2px solid #2c3b55; background: repeating-linear-gradient(180deg, #0c1320 0 128px, #1b2639 128px 130px); }
.shaft::before, .shaft::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #2b3a54; } .shaft::before { left: 14px; } .shaft::after { right: 14px; }
.car { position: absolute; left: 7px; right: 7px; height: 64px; top: 30px; border-radius: 6px; background: linear-gradient(180deg, #2a3a58, #1c2840); border: 1px solid #4a5f8a; display: grid; place-items: center; z-index: 1; }
.car span { width: 14px; height: 14px; border-radius: 4px; background: #d8ee73; box-shadow: 0 0 12px #d8ee73; }
.fx-on .car { animation: lift 12s cubic-bezier(.6,0,.4,1) infinite; }
.fx-on .car span { animation: cargo 12s steps(1) infinite; }
@keyframes lift { 0%, 6% { top: 30px; } 44%, 56% { top: calc(100% - 94px); } 94%, 100% { top: 30px; } }
@keyframes cargo { 0% { background: #d8ee73; box-shadow: 0 0 12px #d8ee73; } 50% { background: #5fd4b8; box-shadow: 0 0 12px #5fd4b8; } }
.floors { display: grid; }
.floor { --lc: #d8ee73; display: grid; grid-template-columns: 46px minmax(220px, 1fr) 1.25fr; gap: 16px; align-items: center; min-height: 128px; padding: 12px 18px 12px 14px; padding-inline-start: 14px; border-bottom: 2px solid #2c3b55; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 7%, transparent), transparent 60%); }
[dir="rtl"] .floor { background: linear-gradient(-90deg, color-mix(in srgb, var(--lc) 7%, transparent), transparent 60%); }
.floor::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent, var(--lc), transparent); opacity: .5; }
.f-founder { --lc: #d8ee73; } .f-orch { --lc: #b9a8ff; } .f-teams { --lc: #7c8cff; } .f-engines { --lc: #5fd4b8; } .f-brain { --lc: #e09a63; } .f-infra { --lc: #9fb3cf; }
.fl-num { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #11161f; background: var(--lc); box-shadow: 0 0 18px color-mix(in srgb, var(--lc) 55%, transparent); }
.fl-text h3 { margin: 0 0 4px; font-size: 18px; color: #eef2f7; } .fl-text p { margin: 0; color: #a9b6c9; font-size: 13.8px; line-height: 1.5; }
.fl-scene { height: 104px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border: 1px solid #22314a; overflow: hidden; position: relative; }
.fl-scene::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 129px, rgba(255,255,255,.04) 129px 131px); pointer-events: none; }
.fl-scene svg { width: 100%; height: 100%; display: block; direction: ltr; }
.fl-scene svg * { vector-effect: non-scaling-stroke; }
.ground { height: 22px; margin: 0 -30px; background: linear-gradient(180deg, #2c3b55, #121a28); border-radius: 0 0 12px 12px; }
@media (max-width: 900px) { .floor { grid-template-columns: 40px 1fr; } .fl-scene { grid-column: 1 / -1; } .tower { grid-template-columns: 36px 1fr; } }

/* floor 1: founder decision board */
.f-founder .board { fill: #182234; stroke: #2f4060; }
.f-founder .card rect { fill: #233250; stroke: #d8ee73; stroke-width: 1.2; } .f-founder .card path { stroke: #a9b6c9; stroke-width: 2; stroke-linecap: round; }
.f-founder .stamp { fill: #d8ee73; } .f-founder .tick-m { fill: none; stroke: #11161f; stroke-width: 2.5; stroke-linecap: round; }
.f-founder .person circle, .f-founder .person path { fill: #3a4d72; } .f-founder .desk { fill: #2f4060; }
.fx-on .f-founder .card { animation: cardin 6s ease-in-out infinite; } .fx-on .f-founder .c2 { animation-delay: .6s; } .fx-on .f-founder .c3 { animation-delay: 1.2s; }
@keyframes cardin { 0% { transform: translateY(-60px); opacity: 0; } 12%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fx-on .f-founder .stamp, .fx-on .f-founder .tick-m { animation: stamp 6s ease infinite; transform-box: fill-box; transform-origin: center; }
@keyframes stamp { 0%, 35% { opacity: 0; transform: scale(2.2); } 42%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.fx-on .f-founder .person { animation: bob 3s ease-in-out infinite; } @keyframes bob { 50% { translate: 0 -3px; } }

/* floor 2: orchestration conveyor + routing */
.f-orch .belt { stroke: #3a4d72; stroke-width: 4; stroke-dasharray: 10 8; } .fx-on .f-orch .belt { animation: beltmove 1s linear infinite; } @keyframes beltmove { to { stroke-dashoffset: -18; } }
.f-orch .box { fill: #b9a8ff; } .fx-on .f-orch .box { animation: convey 6s linear infinite; } .f-orch .b1 { animation-delay: 1.5s; } .f-orch .b2 { animation-delay: 3s; } .f-orch .b3 { animation-delay: 4.5s; }
@keyframes convey { 0% { transform: translateX(0); } 45% { transform: translateX(290px); opacity: 1; } 50% { transform: translateX(290px); opacity: 0; } 100% { transform: translateX(290px); opacity: 0; } }
.f-orch .hub circle { fill: #241d44; stroke: #b9a8ff; stroke-width: 2; } .f-orch .hub path { stroke: #b9a8ff; stroke-width: 2.5; stroke-linecap: round; }
.fx-on .f-orch .hub { animation: spin6 8s linear infinite; transform-box: fill-box; transform-origin: center; } @keyframes spin6 { to { transform: rotate(360deg); } }
.f-orch .route { fill: none; stroke: #b9a8ff; stroke-width: 2; stroke-dasharray: 4 6; } .fx-on .f-orch .route { animation: flow 1.2s linear infinite; } @keyframes flow { to { stroke-dashoffset: -20; } }
.f-orch .eye ellipse { fill: none; stroke: #5fd4b8; stroke-width: 2; } .f-orch .eye circle { fill: #5fd4b8; }
.fx-on .f-orch .eye circle { animation: look 4s ease-in-out infinite; } @keyframes look { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* floor 3: teams */
.f-teams .mon { fill: #263458; } .f-teams .scr { fill: #0c1426; } .f-teams .code { stroke: #7c8cff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 30; }
.f-teams .tbl { fill: #2f4060; } .f-teams .head { fill: #4a5f8a; }
.fx-on .f-teams .code { animation: type 2.4s steps(6) infinite; } .fx-on .f-teams .d1 .code { animation-delay: .4s; } .fx-on .f-teams .d2 .code { animation-delay: .8s; }
.fx-on .f-teams .d3 .code { animation-delay: 1.2s; } .fx-on .f-teams .d4 .code { animation-delay: 1.6s; } .fx-on .f-teams .d5 .code { animation-delay: 2s; }
@keyframes type { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.fx-on .f-teams .head { animation: bob 2.6s ease-in-out infinite; }

/* floor 4: engines */
.f-engines .ring { fill: none; stroke: #2f6f62; stroke-width: 2; stroke-dasharray: 6 4; } .f-engines .core { fill: #5fd4b8; } .f-engines .blade { stroke: #5fd4b8; stroke-width: 3; stroke-linecap: round; }
.fx-on .f-engines .ring, .fx-on .f-engines .blade { animation: spin6 4s linear infinite; transform-origin: 0 0; } .fx-on .f-engines .e1 .blade, .fx-on .f-engines .e3 .blade { animation-direction: reverse; }
.fx-on .f-engines .core { animation: corepulse 1.6s ease-in-out infinite; } @keyframes corepulse { 50% { opacity: .45; } }

/* floor 5: shared brain */
.f-brain .db ellipse, .f-brain .db path { fill: none; stroke: #e09a63; stroke-width: 2; }
.f-brain .node { fill: #3b2a1e; stroke: #e09a63; stroke-width: 1.5; } .f-brain .syn { stroke: #6b4a33; stroke-width: 1.5; stroke-dasharray: 3 5; }
.fx-on .f-brain .node { animation: fire 3s ease-in-out infinite; } @keyframes fire { 0%, 70%, 100% { fill: #3b2a1e; } 80% { fill: #e09a63; } }
.f-brain .n1 { animation-delay: .3s; } .f-brain .n2 { animation-delay: .6s; } .f-brain .n3 { animation-delay: .9s; } .f-brain .n4 { animation-delay: 1.2s; }
.f-brain .n5 { animation-delay: 1.5s; } .f-brain .n6 { animation-delay: 1.8s; } .f-brain .n7 { animation-delay: 2.1s; } .f-brain .n8 { animation-delay: 2.4s; } .f-brain .n9 { animation-delay: 2.7s; }
.fx-on .f-brain .syn { animation: flow 1.4s linear infinite; }

/* floor 6: infrastructure */
.f-infra .rack > rect:first-child { fill: #141d2c; stroke: #3a4d72; } .f-infra .unit { fill: #1f2b40; } .f-infra .led { fill: #5fd4b8; }
.f-infra .l1 { fill: #d8ee73; } .f-infra .l2 { fill: #6fa8dc; } .f-infra .l3 { fill: #5fd4b8; }
.fx-on .f-infra .led { animation: blink 1.1s steps(2) infinite; } .fx-on .f-infra .l1 { animation-duration: 1.7s; } .fx-on .f-infra .l2 { animation-duration: .8s; } .fx-on .f-infra .l3 { animation-duration: 2.3s; }
@keyframes blink { 50% { opacity: .15; } }

/* building sits on the dark ops background in both themes */
.ops .building .fl-text h3 { color: #eef2f7; }

/* v8: Why XiKey rewrite — proof chips, Runs-on logos, audiences, trust bar */
.pillar { display: flex; flex-direction: column; }
.pillar p { flex: 1; }
.proof { margin-top: 14px; align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--ink);
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.p-touch { --c: #f0d98a; }
.runs { --c: #6fa8dc; margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.runs .mini-h { margin: 0; }
.os-logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.os-logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; }
.os-logo svg { height: 38px; width: auto; flex: none; }
.os-logo.l-macos svg { color: var(--ink); height: 40px; }
.os-logo.l-android svg { height: 30px; }
.os-logo small { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 0 7px; margin-inline-start: 4px; }
.audience { display: grid; grid-template-columns: .8fr 1.6fr; gap: 24px; align-items: start; margin-top: 30px; }
.audience .sub-h { margin-top: 6px; }
.aud-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aud { --c: #d8ee73; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.aud h4 { margin: 2px 0 2px; font-size: 16px; } .aud p { margin: 0; color: var(--muted); font-size: 14px; }
.a-ind { --c: #d8ee73; } .a-pro { --c: #6fa8dc; } .a-smb { --c: #e09a63; } .a-stu { --c: #b9a8ff; }
.aud .p-ico { --c: inherit; } .aud:has(.a-pro) { --c: #6fa8dc; } .aud:has(.a-smb) { --c: #e09a63; } .aud:has(.a-stu) { --c: #b9a8ff; }
.trust-bar { list-style: none; margin: 24px 0 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.trust-bar li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.trust-bar svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #7fd49a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .audience, .aud-list, .trust-bar { grid-template-columns: 1fr; } }

/* hero: rotating globe with app icons orbiting (globe.js positions the icons) */
.globe-scene { perspective: none; display: grid; place-items: center; }
.orbit-stage { position: relative; width: min(100%, 540px); aspect-ratio: 1; }
.orbit-stage::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.orbit-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.orb-app { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 22%; z-index: 3;
  box-shadow: 0 10px 24px rgb(0 0 0 / .35); will-change: transform, opacity; }
@media (max-width: 860px) { .globe-scene { height: auto; } .orbit-stage { width: min(100%, 380px); } }

/* logo: the desktop.xikey.com tilted II tile; each XiKey site keeps the form and changes the colour (www = lime) */
.brand-mark { display: inline-flex; flex: none; gap: 4px; padding: 9px 10px; border-radius: 8px; background: #d8ee73; transform: rotate(-6deg); }
.brand-mark i { display: block; width: 4px; height: 18px; background: #171f21; }
.brand .tm { font-size: 11px; vertical-align: top; margin-inline-start: 1px; }
.bundle-note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }