/* Hero 3D — Figma Space 1627:34139 laid out like a row of slabs in depth (your data at the back, KiCode_ in front).
   Your data glows from inside and that light flows on under all four slabs: one glow behind them, one over their feet.
   Faces are drawn at Figma's own pixel size; hero3d.js scales the world to the stage. */

.h3d{position:relative;width:100vw;left:50%;margin-left:-50vw;height:clamp(338px,29.4vw,552px);margin-top:26px;overflow:hidden;
  --k:.6;--P:1900;contain:layout paint}
.h3d-glow{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.h3d-glow-front{z-index:2}
/* Three.js renders the slabs here; the DOM slabs (.h3d-view) are its source (printed to face-*.webp) and the no-WebGL view */
/* the hero's foot cuts the slabs dead straight, glow and all: the row stands inside the stage, running on below it */
.h3d-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.h3d.gl3d .h3d-view{display:none}
.h3d.nogl .h3d-gl{display:none}
.h3d-view{position:absolute;inset:0;z-index:1;perspective:calc(var(--P) * var(--k) * 1px);perspective-origin:50% 60%}
.h3d-world{position:absolute;left:50%;top:112.36%;width:0;height:0;transform-style:preserve-3d}
.h3d-card{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:0 0}
.h3d-rise{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0,var(--rise,520px),0);transition:transform 2.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.h3d.in .h3d-rise{transform:none}
.h3d-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.h3d-edge i,.h3d-face{position:absolute;inset:0;border-radius:var(--r,30px)}
.h3d-edge i{display:block;transform:translateZ(calc(var(--z) * -1px));
  /* brushed-aluminium side: bright at the face, deeper toward the back; the foot picks up the glow */
  background:linear-gradient(180deg,hsl(200 22% calc(100% - var(--d2) * 5%)) 0%,hsl(204 14% calc(92% - var(--d2) * 15%)) 12%,hsl(206 11% calc(85% - var(--d2) * 19%)) 55%,hsl(200 12% calc(82% - var(--d2) * 17%)) 82%,hsl(186 30% calc(80% - var(--d2) * 12%)) 100%)}
.h3d-face{overflow:hidden;transform:translateZ(.6px);backface-visibility:hidden;font-family:var(--sans);color:#1F2937}
.h3d-face .i{width:1em;height:1em;flex:none}

/* ---------- your data ---------- */
.c-data{--r:30px}
.c-data .h3d-edge i{background:linear-gradient(180deg,hsl(208 34% calc(34% - var(--d2) * 12%)) 0%,hsl(210 42% calc(20% - var(--d2) * 8%)) 30%,hsl(212 50% calc(13% - var(--d2) * 5%)) 100%)}
.c-data .h3d-face{background:#0B1724;color:#fff}
.dg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dg-dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.6px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);mix-blend-mode:overlay}
.dg-title{position:absolute;left:40px;top:36px;font:400 34px/1 var(--sans);letter-spacing:-.5px;color:#fff}
.dg-src{position:absolute;left:40px;top:92px;display:flex;flex-direction:column;gap:12px;font:400 17px/1 var(--sans);color:#9FB2C3}
.dg-src li{display:flex;align-items:center;gap:10px}
.dg-src li::before{content:"";width:7px;height:7px;border-radius:50%;background:#4CBED2}
.dg-src b{font-weight:400;color:#7FD3D6}

/* ---------- agentic workflow: the product's builder as it draws now (2026-11) ---------- */
.c-flow .h3d-face{background:#F4F8FC radial-gradient(circle,#D3E2F0 0 1.3px,transparent 1.8px) 9px 9px/18px 18px}
.wf-defs{position:absolute;width:0;height:0;overflow:hidden}
.c-flow svg.kf{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-wires{position:absolute;inset:0;width:100%;height:100%;stroke:#A9B1B7;stroke-width:2;stroke-linecap:round}
.wf-step{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--w) * 1px);box-sizing:border-box;padding:13px 14px 14px;
  border-radius:11px;background:#fff;box-shadow:0 0 0 .5px rgba(16,24,40,.04),0 1px 4px rgba(16,24,40,.08)}
.wf-head{display:flex;align-items:center;justify-content:space-between}
.wf-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:12px;font:500 11.5px/1 var(--sans);white-space:nowrap;background:var(--pb);color:var(--pf)}
.wf-pill svg.kf{font-size:13px}
[data-k=trigger]{--pb:#CDE3FB;--pf:#2F3E9E}[data-k=variable]{--pb:#C3EFE3;--pf:#245244}[data-k=agent]{--pb:#D3EEEE;--pf:#134B48}
[data-k=action]{--pb:#DCF3E4;--pf:#21763A}[data-k=condition]{--pb:#E1D9F5;--pf:#46349D}[data-k=loop]{--pb:#FCEBD7;--pf:#6B4A0E}[data-k=delay]{--pb:#FCE0C4;--pf:#77561F}
.wf-more{display:flex;gap:3px}
.wf-more b{width:3.5px;height:3.5px;border-radius:50%;background:#A8AEB3}
.wf-title{display:block;margin-top:11px;font:500 15px/18px var(--sans);color:#3D464D;white-space:nowrap}
.wf-desc{display:block;margin-top:5px;font:400 13px/16px var(--sans);color:#575E64;white-space:nowrap}
.wf-plus{position:absolute;left:calc((var(--x) - var(--d) / 2) * 1px);top:calc((var(--y) - var(--d) / 2) * 1px);width:calc(var(--d) * 1px);height:calc(var(--d) * 1px);
  box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #DCE2E7;display:grid;place-items:center;color:#3F8BD6;font-size:calc(var(--d) * .62px)}
.wf-dia{position:absolute;left:calc((var(--x) - 20) * 1px);top:calc((var(--y) - 20) * 1px);width:40px;height:40px;display:grid;place-items:center;color:#3F7FC6;font-size:19px}
.wf-dia i{position:absolute;width:28.3px;height:28.3px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1.75px #6C9FD8;transform:rotate(45deg)}
.wf-dia svg.kf{position:relative;transform:rotate(-90deg)}
.wf-tag{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);height:18px;padding:0 6px;border-radius:3.5px;display:grid;place-items:center;
  font:600 9.5px/1 var(--sans);letter-spacing:.04em;color:#fff;background:#F23A2D;transform:translate(-50%,-50%) rotate(-90deg)}
.wf-tag.wf-yes{background:#00A88F}
.wf-bar{position:absolute;left:30px;top:28px;display:flex;gap:6px;padding:6px;border-radius:11px;background:#fff;box-shadow:0 1px 4px rgba(16,24,40,.07)}
.wf-tool{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 6px;box-sizing:border-box;border-radius:8px;box-shadow:inset 0 0 0 1px #E3E6E9;font:400 13px/1 var(--sans);color:#3A3C3F;white-space:nowrap}
.wf-tool>span{display:grid;place-items:center;width:21px;height:21px;border-radius:5px;background:var(--pb);color:var(--pf);font-size:13px}
.wf-tool[data-k=action]{--pb:#DCF4E8;--pf:#05673F}.wf-tool[data-k=agent]{--pb:#E2F6F6}.wf-tool[data-k=condition]{--pb:#CBCEF1;--pf:#2E3F9D}
.wf-zoom{position:absolute;right:30px;top:38px;display:flex;align-items:center;gap:8px;font:400 13px/1 var(--sans);color:#3A3C3F}
.wf-zoom i{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.08);color:#3A3C3F;font-size:15px}

/* ---------- your app (builder) ---------- */
.c-app .h3d-face{background:#F3F4F6}
.ap-nav{display:flex;align-items:center;height:36px;padding:0 16px 0 14px;background:#fff}
.ap-nav .kz-mark{width:17px;height:17px;color:#0C595C}
.ap-nav ul{display:flex;gap:13px;margin:0 auto;font:400 8.5px/1 var(--sans);color:#4B5563}
.ap-nav li{display:flex;align-items:center;gap:4px}
.ap-nav li .i{font-size:10px;color:#6B7280}
.ap-tools{display:flex;align-items:center;gap:9px;color:#6B7280;font-size:11px}
.ap-av{width:17px;height:17px;border-radius:50%;background:#F26C56;color:#fff;font:500 8px/17px var(--sans);text-align:center;font-style:normal}
.ap-banner{position:relative;height:194px;margin:12px 26px 0;border-radius:13px;overflow:hidden;
  background:linear-gradient(90deg,#0A3B3E 0%,rgba(10,59,62,.9) 22%,rgba(12,89,92,.55) 48%,rgba(12,89,92,0) 74%),url(handshake.webp) 50% 38%/cover #0C595C}
.ap-b-copy{position:absolute;left:16px;bottom:15px}
.ap-b-t{font:500 16px/1.1 var(--sans);color:#fff}
.ap-b-s{font:400 8.5px/1 var(--sans);color:#C9E1E1;margin-top:6px}
.ap-chips{display:flex;gap:5px;margin-top:9px}
.ap-chips span{display:flex;align-items:center;gap:4px;height:16px;padding:0 7px;border-radius:8px;font:500 7.5px/1 var(--sans);background:#E3E9EC;color:#33404C}
.ap-chips .ch-on{background:#2E9E5B;color:#fff}
.ap-chips .ch-on::before{content:"";width:4px;height:4px;border-radius:50%;background:#fff}
.ap-chips .ch-warn{background:#1E2A35;color:#fff}
.ap-chips .ch-warn .i{color:#F5B83D;font-size:9px}
.ap-hello{position:absolute;right:18px;bottom:13px;font:300 26px/1 var(--serif);color:#fff;font-feature-settings:normal !important}
.ap-kpis{display:flex;gap:21px;margin:14px 26px 0}
.ap-kpis>div{flex:1 1 0;min-width:0;height:87px;background:#fff;border-radius:13px;padding:15px 14px;white-space:nowrap;overflow:hidden}
.ap-kpis small{display:block;font:400 8px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#6B7280}
.ap-kpis b{display:block;font:400 23px/1 var(--sans);color:#1F2937;margin-top:20px}
.ap-h{font:500 16px/1 var(--sans);color:#1F2937;margin:22px 26px 0}
.ap-hs{font:400 8px/1 var(--sans);color:#6B7280;margin:6px 26px 0}
.ap-learn{display:grid;grid-template-columns:1.12fr 1fr 1fr;margin:12px 26px 0;height:198px;background:#fff;border-radius:11px;padding:15px 0}
.ap-col{padding:0 16px}
.ap-col+.ap-col{box-shadow:inset 1px 0 0 #EEF0F2}
.ap-ch{display:flex;align-items:center;gap:6px;font:500 9.5px/1 var(--sans);color:#1F2937;margin-bottom:11px}
.ap-ch .i{font-size:12px;color:#4B5563}
.ap-feat{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 9px 0 11px;background:#EEF1F3;border-radius:8px;margin-bottom:4px;font:500 10px/1.2 var(--sans);color:#1F2937}
.ap-feat small{display:block;font:400 7px/1 var(--sans);color:#6B7280;margin-bottom:4px}
.ap-feat i{width:23px;height:23px;border-radius:50%;background:#0C595C;color:#fff;display:grid;place-items:center;font-size:10px}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;font:400 8.5px/1.2 var(--sans);color:#374151;box-shadow:inset 0 -1px 0 #F1F3F5}
.ap-row .i{font-size:10px;color:#6B7280}
.ap-row2{flex-direction:column;align-items:flex-start;gap:3px}
.ap-row2 small{font-size:7px;color:#8A929A}
.ap-news{margin:10px 26px 0;height:40px;padding:0 13px;background:#fff;border-radius:11px 11px 0 0;font:500 9px/32px var(--sans);color:#1F2937}

/* ---------- KiCode_ ---------- */
.c-kc{--r:26px}
.c-kc .h3d-face{background:#fff}
.kc-head{position:absolute;left:20px;top:20px;display:flex;align-items:center;gap:10px;font:400 18px/1 var(--sans);color:#1F2937}
.kc-head img{width:31px;height:31px}
.kc-thread{position:absolute;left:18px;right:18px;top:76px;display:flex;flex-direction:column;gap:6px}
.kc-msg{align-self:flex-end;max-width:252px;margin-bottom:8px;background:#E1F2F3;border-radius:14px 14px 4px 14px;padding:10px 13px;font:400 12.5px/1.45 var(--sans);color:#1F2937}
.kc-done{display:flex;align-items:center;gap:7px;height:18px;margin-bottom:4px;font:400 12.5px/18px var(--sans);color:#01989E}
.kc-done .i{font-size:15px}
.kc-made{display:flex;align-items:center;gap:10px;height:42px;padding:0 13px 0 7px;border-radius:12px;background:#F6F7F9}
.kc-made span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#E1F2F3;color:#0C595C;font-size:15px}
.kc-made b{flex:1;font:400 12.5px/1 var(--sans);color:#1F2937;white-space:nowrap}
.kc-made em{font:400 11px/1 var(--sans);font-style:normal;color:#8A929A}
/* KiCode's prompt bar: Figma's glass pill with its words set live (the chat is already building, so it asks what's next) */
.kc-pill{position:absolute;left:18px;bottom:19px;width:297px;height:55px;background:url(../figma/kicode-pill-blank.png) center/100% 100% no-repeat}
.kc-pill span{position:absolute;left:24.7px;top:0;bottom:0;display:flex;align-items:center;font:400 12.5px/1 var(--sans);color:#fff;white-space:nowrap}

@media (max-width:760px){
  .h3d{height:clamp(240px,60.5vw,374px);margin-top:20px}
  .h3d-view{perspective-origin:50% 58%}
}
@media (prefers-reduced-motion:reduce){
  .h3d-rise{transition:none}
}
/* sprite icons are stroke-only (kizen.design, 1.5) */
.h3d-face svg.i{fill:none}
/* no WebGL: a still band and a still glow in your data */
.h3d.nogl .h3d-glow-back{background:radial-gradient(70% 34% at 50% 100%,rgba(76,190,210,.55) 0%,rgba(255,179,154,.30) 40%,rgba(255,255,255,0) 78%)}
.h3d.nogl .c-data .h3d-face{background:radial-gradient(52% 46% at 38% 66%,#3DB8BD 0%,#0C595C 46%,#0B1724 82%)}