:root { --landing-ink:#151a23; --landing-muted:#657083; --landing-blue:#006fff; --landing-silver:#f4f6f9; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { background:white; color:var(--landing-ink); }
.skip { position:fixed; top:-80px; z-index:100; background:white; padding:16px; }
.skip:focus { top:0; }
.landing-header { height:76px; padding:0 5%; display:flex; align-items:center; gap:48px; border-bottom:1px solid #edf0f4; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); position:sticky; top:0; z-index:50; }
.wordmark { display:flex; align-items:center; gap:10px; font-weight:650; font-size:19px; letter-spacing:-.6px; color:var(--landing-ink); }
.brand-icon { background:var(--landing-blue); color:white; width:30px; height:34px; display:grid; place-items:center; border-radius:8px 8px 12px 12px; font-weight:700; }
.landing-header nav { display:flex; gap:30px; margin:auto; }
.landing-header nav a,.login { font-size:13px; color:var(--landing-muted); padding:14px 0; }
.landing-header a:hover { color:var(--landing-blue); }
.hero { text-align:center; overflow:hidden; padding:70px 20px 0; background:radial-gradient(ellipse at 50% 75%,#e3efff,transparent 65%),linear-gradient(white,#f8faff); }
.eyebrow { font-size:11px; font-weight:650; letter-spacing:2px; color:var(--landing-blue); }
.eyebrow > span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--landing-blue); margin-right:8px; }
h1 { font-size:clamp(48px,6.4vw,88px); letter-spacing:-4px; font-weight:550; line-height:1.05; margin:24px 0; }
h1 em { font-style:normal; color:var(--landing-blue); }
.hero-copy { font-size:17px; line-height:1.75; color:var(--landing-muted); }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:30px; margin:28px 0; }
.cta { display:inline-flex; align-items:center; gap:28px; color:white; background:var(--landing-blue); padding:14px 22px; border-radius:6px; font-size:14px; transition:background .2s,transform .2s; }
.cta:hover { color:white; background:var(--accent-hover); transform:translateY(-2px); }
.text-link { font-size:14px; color:var(--landing-blue); display:inline-block; padding:12px 0; }
.scene { position:relative; height:570px; max-width:1200px; margin:0 auto; perspective:1400px; }
.product-device { position:absolute; left:15%; top:55px; width:70%; background:white; border:6px solid #dce2eb; outline:1px solid white; border-radius:18px; text-align:left; transform:rotateX(19deg) rotateY(-13deg) rotateZ(2deg); box-shadow:30px 40px 70px #5b7fac30,0 3px 0 3px #b5c1d2; transition:transform .6s ease; }
.scene:hover .product-device { transform:rotateX(10deg) rotateY(-5deg) rotateZ(0); }
.device-top { display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid #edf0f4; font-size:10px; color:#7c8799; }
.device-top b { font-size:13px; color:#222; }.mini-logo { color:var(--landing-blue); margin-right:8px; }
.device-top i { width:20px; height:20px; background:#edf5ff; border-radius:50%; }
.device-content { padding:24px 30px; background:#fbfcfe; border-radius:0 0 12px 12px; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; }.preview-heading small { font-size:8px; letter-spacing:1px; color:#8992a2; }.preview-heading h2 { font-size:24px; margin:6px 0 20px; letter-spacing:-1px; }
.live-badge { color:#118965; background:#e5f7ef; padding:4px 10px; border-radius:20px; font-size:10px; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.preview-stats > div { padding:16px; border:1px solid #e7ebf1; background:white; border-radius:8px; }.preview-stats span,.preview-stats small { display:block; font-size:9px; color:#7b879a; }.preview-stats strong { display:block; font-size:30px; font-weight:550; margin:4px 0; }
.wave-card { border:1px solid #e7ebf1; background:white; margin-top:16px; padding:16px; border-radius:8px; }.wave-card > div { display:flex; justify-content:space-between; font-size:10px; }.wave-card span { color:#8b96a8; }.wave-card svg { width:100%; height:125px; margin-top:20px; }.chart-times { font-size:8px!important; }
.float-card { position:absolute; display:flex; gap:14px; align-items:center; text-align:left; background:#ffffffef; border:1px solid white; padding:20px; border-radius:12px; box-shadow:0 20px 50px #39629220; animation:float 7s ease-in-out infinite; }.float-card small,.float-card b,.float-card span { display:block; }.float-card small { font-size:8px; letter-spacing:1.5px; color:var(--landing-blue); }.float-card b { font-size:14px; margin:5px 0; }.float-card div > span { font-size:10px; color:var(--landing-muted); }.float-symbol { color:var(--landing-blue); font-size:26px; }.replay-float { left:2%; top:235px; }.shield-float { right:0; top:365px; animation-delay:-3s; }.preview-label { position:absolute; bottom:12px; left:0; right:0; font-size:8px; letter-spacing:2px; color:#7a8ba4; }
.orbit { position:absolute; width:850px; height:350px; border:1px solid #b9d8ff50; border-radius:50%; left:15%; top:170px; transform:rotate(-15deg); }.orbit-two { transform:rotate(20deg); }
.platform { padding:100px 5%; max-width:1500px; margin:auto; }.section-intro { text-align:center; }.section-intro h2,.detail-section h2,.security-section h2,.closing h2 { font-size:clamp(36px,4.5vw,60px); font-weight:550; letter-spacing:-2.5px; line-height:1.08; margin:20px 0; }.section-intro > p:last-child { color:var(--landing-muted); line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:55px; }.feature { color:var(--landing-ink); background:var(--landing-silver); border:1px solid #edf0f4; border-radius:14px; padding:30px; transition:transform .3s,box-shadow .3s; }.feature:hover { color:var(--landing-ink); transform:translateY(-6px); box-shadow:0 20px 45px #122a4810; }.feature-number { font-size:10px; letter-spacing:1.5px; color:#7f8999; }.feature h3 { font-size:22px; letter-spacing:-.7px; font-weight:550; }.feature p { color:var(--landing-muted); font-size:14px; line-height:1.7; }.feature-link { display:block; margin-top:25px; font-size:12px; color:var(--landing-blue); }
.feature-object { height:180px; display:flex; justify-content:center; align-items:center; perspective:500px; }.replay-object span { width:150px; height:100px; display:grid; place-items:center; font-size:36px; color:var(--landing-blue); background:linear-gradient(140deg,white,#d8e7fb); border:4px solid white; border-radius:12px; transform:rotateY(-25deg) rotateX(15deg); box-shadow:12px 20px 20px #52688525; }.security-object span { font-size:105px; color:var(--landing-blue); text-shadow:3px 3px #b0caff,6px 6px #dce8fc,12px 18px 25px #668ab550; transform:rotateY(-20deg); }.automation-object span { background:white; color:var(--landing-blue); box-shadow:0 14px 20px #52688520; border:1px solid #dce7f7; width:62px; height:62px; display:grid; place-items:center; border-radius:14px; transform:rotateX(25deg) rotateZ(-12deg); font-size:25px; }.automation-object i { width:40px; height:2px; background:var(--landing-blue); }
.detail-section,.security-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10%; padding:90px max(6%,calc((100vw - 1280px)/2)); }.detail-section p:not(.eyebrow),.security-section p:not(.eyebrow) { color:var(--landing-muted); line-height:1.8; font-size:16px; max-width:470px; }.detail-section ul { padding:0; list-style:none; font-size:13px; line-height:2.5; color:var(--landing-muted); }.detail-section li:before { content:'✓'; color:var(--landing-blue); margin-right:12px; }
.session-art { position:relative; perspective:1000px; padding:45px 0; }.art-browser { border:5px solid #e0e6f0; border-radius:14px; background:white; box-shadow:25px 35px 65px #56739725; transform:rotateY(-16deg) rotateX(8deg); padding:15px; }.art-browser > span { display:block; background:#f3f5f9; text-align:center; padding:8px; color:#8a95a6; font-size:10px; border-radius:5px; }.art-content { display:flex; gap:20px; padding:30px 10px; }.art-content > div:first-child { width:50%; height:160px; background:radial-gradient(ellipse at 40% 30%,white,#cddcf1); border-radius:12px; }.art-content > div:last-child { flex:1; padding-top:20px; }.art-content i { height:8px; display:block; background:#e7edf5; margin:10px 0; border-radius:4px; }.art-content b { display:block; font-size:11px; color:white; padding:8px; text-align:center; background:var(--landing-blue); border-radius:5px; margin-top:25px; }.art-timeline { display:flex; align-items:center; font-size:9px; gap:10px; padding:10px; }.art-timeline span { height:4px; flex:1; background:linear-gradient(to right,#006fff 40%,#e9edf4 40%); }.cursor { position:absolute; color:var(--landing-blue); top:60%; left:65%; font-size:35px; animation:float 6s ease-in-out infinite; }.cursor span { font-size:10px; color:white; background:var(--landing-blue); padding:5px 10px; border-radius:5px; }
.security-section { background:#080f1e; color:white; min-height:540px; }.security-section p:not(.eyebrow) { color:#a1aec4; }.security-section small { display:block; color:#8b9ab3; max-width:440px; margin-top:25px; font-size:11px; line-height:1.7; }.security-orb { position:relative; height:350px; display:grid; place-items:center; perspective:700px; }.security-orb > div { width:210px; height:210px; border-radius:50%; display:grid; place-items:center; font-size:135px; color:#67adff; background:radial-gradient(circle at 30% 20%,#1e3f70,#080f1e 70%); box-shadow:inset 2px 2px 3px #609ee5,0 0 75px #006fff25; }.ring { position:absolute; width:330px; height:330px; border:1px solid #3b86e270; border-radius:50%; transform:rotateX(65deg) rotateY(25deg); }.ring.second { transform:rotateX(30deg) rotateY(-55deg); }
.flow-art { padding:25px; perspective:700px; }.flow-art div { background:white; border:1px solid #dce5f1; border-radius:10px; padding:20px; box-shadow:10px 12px 25px #54759b15; display:flex; gap:20px; font-size:13px; transform:rotateY(-10deg); }.flow-art span { font-size:10px; color:#9aabc2; }.flow-art b { margin-left:auto; color:var(--landing-blue); }.flow-art > i { display:block; height:25px; width:1px; background:var(--landing-blue); margin:auto; }
.closing { text-align:center; padding:110px 20px; background:linear-gradient(#f7faff,#eaf2ff); }.closing p:not(.eyebrow) { color:var(--landing-muted); }.closing .cta { margin:20px; }footer { padding:40px 5%; display:flex; align-items:center; flex-wrap:wrap; gap:28px; }footer p,footer small { color:var(--landing-muted); font-size:12px; }footer nav { margin-left:auto; display:flex; gap:24px; font-size:12px; }
@keyframes float { 50% { transform:translateY(-12px); } }
@media(max-width:800px) { .landing-header { gap:20px; height:auto; min-height:70px; flex-wrap:wrap; padding:15px 5%; }.landing-header nav { order:3; width:100%; justify-content:space-between; gap:14px; }.login { margin-left:auto; }h1 { letter-spacing:-2px; }.hero { padding-top:40px; }.scene { height:410px; }.product-device { left:5%; width:90%; top:25px; }.float-card { display:none; }.device-content { padding:18px; }.preview-stats strong { font-size:23px; }.wave-card svg { height:80px; }.feature-grid { grid-template-columns:1fr; }.feature-object { height:140px; }.detail-section,.security-section { grid-template-columns:1fr; gap:35px; padding:65px 7%; }.security-orb { order:2; }.platform { padding:65px 6%; }.hero-copy { font-size:14px; }.device-top > span { display:none; }footer nav { margin-left:0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; }.product-device,.scene:hover .product-device { transform:rotateX(10deg) rotateY(-5deg); } }

/* Spatial motion system */
.scene { --rx:19deg; --ry:-13deg; --mx:0px; --my:0px; transform-style:preserve-3d; }
.hero-glow { position:absolute; inset:10% 15% 5%; background:radial-gradient(circle at 50% 50%,rgba(0,111,255,.22),rgba(41,156,255,.07) 42%,transparent 72%); filter:blur(30px); transform:translateZ(-80px); animation:glow-breathe 5s ease-in-out infinite; }
.spatial-grid { position:absolute; left:-15%; right:-15%; bottom:-34%; height:78%; background-image:linear-gradient(rgba(0,111,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,111,255,.13) 1px,transparent 1px); background-size:46px 46px; transform:rotateX(68deg) translateZ(-120px); transform-origin:center top; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%); animation:grid-travel 8s linear infinite; }
.product-device { transform-style:preserve-3d; transform:translate3d(var(--mx),var(--my),40px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(2deg); will-change:transform; transition:transform .22s ease-out; }
.scene:hover .product-device { transform:translate3d(var(--mx),var(--my),40px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
.device-top,.preview-heading { transform:translateZ(12px); }.preview-stats > div { transform:translateZ(22px); transition:transform .25s,box-shadow .25s; }.preview-stats > div:hover { transform:translateZ(42px) translateY(-4px); box-shadow:0 18px 38px rgba(22,80,150,.15); }.wave-card { position:relative; overflow:hidden; transform:translateZ(16px); }
.device-scan { position:absolute; z-index:8; inset:0; pointer-events:none; overflow:hidden; border-radius:12px; }.device-scan::after { content:''; position:absolute; left:-15%; width:130%; height:2px; top:-5%; background:linear-gradient(90deg,transparent,#60aaff,transparent); box-shadow:0 0 18px 4px rgba(0,111,255,.3); animation:device-scan 6s ease-in-out infinite; }
.float-card { transform-style:preserve-3d; will-change:transform; }.replay-float { animation:float-depth-one 6s ease-in-out infinite; }.shield-float { animation:float-depth-two 7s ease-in-out infinite; }.action-float { left:24%; top:475px; padding:15px 18px; animation:float-depth-three 5.5s ease-in-out infinite; }.action-float .float-symbol { width:32px;height:32px;border-radius:50%;background:#e7f3ff;display:grid;place-items:center;font-size:15px; }
.signal-node { position:absolute; z-index:2; width:18px; height:18px; border:1px solid rgba(0,111,255,.35); border-radius:50%; box-shadow:0 0 0 8px rgba(0,111,255,.05),0 0 26px rgba(0,111,255,.4); }.signal-node span { position:absolute; inset:5px; border-radius:50%; background:#1680ff; }.node-one { left:8%; top:105px; animation:node-one 10s linear infinite; }.node-two { right:12%; top:110px; animation:node-two 12s linear infinite; }.node-three { right:26%; bottom:40px; animation:node-three 9s linear infinite; }
.orbit { animation:orbit-pulse 5s ease-in-out infinite; }.orbit-two { animation-delay:-2.5s; }
.feature { perspective:800px; transform-style:preserve-3d; }.feature-object { transform-style:preserve-3d; }.replay-object span { animation:replay-card-spin 8s ease-in-out infinite; }.security-object span { animation:shield-turn 7s ease-in-out infinite; }.automation-object span:first-child { animation:auto-node-left 4.5s ease-in-out infinite; }.automation-object span:last-child { animation:auto-node-right 4.5s ease-in-out infinite -.8s; }.automation-object i { animation:connector-pulse 2s ease-in-out infinite; transform-origin:left; }
.art-depth { position:absolute; width:76%; height:65%; right:8%; top:15%; border:1px solid rgba(0,111,255,.25); border-radius:14px; background:linear-gradient(135deg,rgba(239,246,255,.8),rgba(255,255,255,.2)); }.art-depth-one { transform:translate3d(42px,-26px,-80px) rotateY(-16deg) rotateX(8deg); }.art-depth-two { transform:translate3d(22px,-13px,-40px) rotateY(-16deg) rotateX(8deg); }.art-browser { position:relative; z-index:3; transition:transform .25s ease-out; will-change:transform; }
.security-orb { transform-style:preserve-3d; }.security-orb > div { animation:orb-hover 5s ease-in-out infinite; transform-style:preserve-3d; }.security-orb .ring { animation:ring-one 9s linear infinite; }.security-orb .ring.second { animation:ring-two 12s linear infinite reverse; }.security-orb .ring.third { width:270px;height:270px;transform:rotateX(78deg) rotateY(-8deg);animation:ring-three 7s linear infinite; }.security-particle { position:absolute;width:7px;height:7px;border-radius:50%;background:#67adff;box-shadow:0 0 16px #2c8bff; }.p-one { animation:particle-one 8s linear infinite; }.p-two { animation:particle-two 10s linear infinite -3s; }.p-three { animation:particle-three 7s linear infinite -5s; }
.flow-art { transform-style:preserve-3d; }.flow-art div { will-change:transform; animation:workflow-card 6s ease-in-out infinite; }.flow-art div:nth-of-type(2) { animation-delay:-1.2s; }.flow-art div:nth-of-type(3) { animation-delay:-2.4s; }.flow-art div:nth-of-type(4) { animation-delay:-3.6s; }.flow-art > i { position:relative;overflow:hidden; }.flow-art > i::after { content:'';position:absolute;left:-2px;top:-7px;width:5px;height:10px;border-radius:5px;background:#75b6ff;box-shadow:0 0 10px #006fff;animation:flow-signal 1.8s linear infinite; }
.reveal { opacity:0; transform:translateY(44px); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1;transform:none; }
@keyframes glow-breathe { 50% { opacity:.55;transform:translateZ(-80px) scale(1.12); } }
@keyframes grid-travel { to { background-position:0 46px,46px 0; } }
@keyframes device-scan { 0%,12%{top:-5%;opacity:0} 20%{opacity:1} 80%{opacity:1} 88%,100%{top:105%;opacity:0} }
@keyframes orbit-pulse { 50% { border-color:rgba(0,111,255,.22);transform:rotate(-15deg) scale(1.06); } }
@keyframes float-depth-one { 50% { transform:translate3d(10px,-18px,70px) rotateY(-5deg); } }
@keyframes float-depth-two { 50% { transform:translate3d(-12px,-22px,95px) rotateY(7deg); } }
@keyframes float-depth-three { 50% { transform:translate3d(8px,-14px,55px) rotateX(-4deg); } }
@keyframes node-one { 50%{transform:translate3d(110px,35px,80px) scale(1.3)} to{transform:translate3d(0,0,0)} }
@keyframes node-two { 50%{transform:translate3d(-90px,65px,120px) scale(.7)} to{transform:translate3d(0,0,0)} }
@keyframes node-three { 50%{transform:translate3d(-65px,-80px,90px) scale(1.2)} to{transform:translate3d(0,0,0)} }
@keyframes replay-card-spin { 0%,100%{transform:rotateY(-25deg) rotateX(15deg) translateZ(0)} 50%{transform:rotateY(20deg) rotateX(-4deg) translateZ(28px)} }
@keyframes shield-turn { 50%{transform:rotateY(160deg) rotateX(10deg) translateZ(30px);text-shadow:-3px 3px #b0caff,-6px 6px #dce8fc,-12px 18px 25px #668ab550} }
@keyframes auto-node-left { 50%{transform:rotateX(10deg) rotateZ(8deg) translate3d(-8px,-9px,35px)} }
@keyframes auto-node-right { 50%{transform:rotateX(-10deg) rotateZ(-5deg) translate3d(8px,9px,40px)} }
@keyframes connector-pulse { 50%{transform:scaleX(.78);filter:drop-shadow(0 0 4px #006fff)} }
@keyframes orb-hover { 50%{transform:translateY(-15px) rotateY(18deg);box-shadow:inset 2px 2px 3px #609ee5,0 0 110px #006fff45} }
@keyframes ring-one { to{transform:rotateX(65deg) rotateY(385deg)} } @keyframes ring-two { to{transform:rotateX(390deg) rotateY(-55deg)} } @keyframes ring-three { to{transform:rotateX(78deg) rotateY(352deg)} }
@keyframes particle-one { 0%{transform:rotate(0) translateX(150px) rotate(0)} 100%{transform:rotate(360deg) translateX(150px) rotate(-360deg)} } @keyframes particle-two { 0%{transform:rotate(90deg) translateX(130px)} 100%{transform:rotate(450deg) translateX(130px)} } @keyframes particle-three { 0%{transform:rotate(210deg) translateX(110px)} 100%{transform:rotate(570deg) translateX(110px)} }
@keyframes workflow-card { 0%,100%{transform:rotateY(-10deg) translateZ(0)} 50%{transform:rotateY(5deg) translate3d(7px,-7px,32px);box-shadow:14px 22px 35px #2f65932b} }
@keyframes flow-signal { from{top:-12px} to{top:30px} }
@media(max-width:800px) { .action-float,.signal-node { display:none; }.spatial-grid { bottom:-15%; }.product-device { transform:translate3d(0,0,30px) rotateX(13deg) rotateY(-7deg); }.scene:hover .product-device { transform:translate3d(0,0,30px) rotateX(13deg) rotateY(-7deg); } }
@media(prefers-reduced-motion:reduce) { .reveal { opacity:1;transform:none; }.product-device,.scene:hover .product-device { transform:rotateX(10deg) rotateY(-5deg); } }

/* Scroll-driven product anatomy */
.anatomy { --anatomy-p:0; position:relative; height:280vh; color:white; background:#050b18; }
.anatomy-sticky { position:sticky; top:76px; height:calc(100vh - 76px); min-height:650px; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 58%,rgba(0,111,255,.2),transparent 29%),radial-gradient(circle at 50% 50%,#0c1a34 0,#050b18 56%,#02050c 100%); }
.anatomy-sticky::before { content:''; position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(93,161,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(93,161,255,.08) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(circle at center,#000,transparent 72%); transform:perspective(900px) rotateX(calc(62deg - (var(--anatomy-p) * 10deg))) scale(1.35) translateY(26%); }
.anatomy-copy { position:absolute; z-index:9; top:7%; left:0; right:0; text-align:center; pointer-events:none; }
.anatomy-copy h2 { margin:12px 0 10px; font-size:clamp(42px,5vw,70px); line-height:.98; letter-spacing:-3.5px; font-weight:520; transform:translateY(calc(var(--anatomy-p) * -8px)); }
.anatomy-copy h2 em { color:#55a5ff; font-style:normal; text-shadow:0 0 36px rgba(0,111,255,.28); }
.anatomy-phase { min-height:24px; margin:0; color:#90a4c4; font-size:13px; letter-spacing:.02em; transition:opacity .25s ease; }
.anatomy-stage { position:absolute; z-index:3; inset:16% 0 0; perspective:1400px; transform-style:preserve-3d; }
.anatomy-aura { position:absolute; left:50%; top:55%; width:510px; height:510px; border-radius:50%; background:radial-gradient(circle,rgba(0,111,255,.25),rgba(0,111,255,.07) 36%,transparent 68%); filter:blur(16px); opacity:calc(.35 + (var(--anatomy-p) * .65)); transform:translate(-50%,-50%) scale(calc(.56 + (var(--anatomy-p) * .58))); }
.system-core { position:absolute; z-index:7; left:50%; top:55%; width:190px; height:190px; display:grid; place-items:center; border-radius:50%; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateY(calc(var(--anatomy-p) * 180deg)) rotateX(calc(var(--anatomy-p) * -9deg)) scale(calc(1.22 - (var(--anatomy-p) * .22))); background:radial-gradient(circle at 32% 24%,#76b9ff 0,#087aff 20%,#0757bd 56%,#031c47 100%); border:1px solid rgba(162,210,255,.7); box-shadow:inset -22px -28px 55px rgba(0,13,45,.65),inset 9px 8px 19px rgba(255,255,255,.35),0 0 0 12px rgba(0,111,255,.08),0 35px 95px rgba(0,111,255,.42); will-change:transform; }
.core-mark { width:72px; height:82px; display:grid; place-items:center; border-radius:18px 18px 28px 28px; color:#0872ee; background:rgba(255,255,255,.96); font-size:40px; font-weight:750; box-shadow:0 14px 30px rgba(0,20,64,.34); transform:translateZ(44px); }
.system-core > span { position:absolute; bottom:27px; font-size:8px; font-weight:700; letter-spacing:2px; color:#dcecff; transform:translateZ(30px); }
.core-halo { position:absolute; inset:-22px; border:1px solid rgba(90,170,255,.45); border-radius:50%; animation:core-halo 2.7s ease-out infinite; }
.system-layer { position:absolute; z-index:5; left:50%; top:55%; width:276px; min-height:86px; padding:16px 18px; display:flex; align-items:center; gap:14px; border:1px solid rgba(164,207,255,.3); border-top-color:rgba(226,241,255,.66); border-radius:15px; color:white; background:linear-gradient(135deg,rgba(27,59,108,.9),rgba(8,24,53,.86)); backdrop-filter:blur(18px); box-shadow:inset 0 1px rgba(255,255,255,.18),0 24px 65px rgba(0,0,0,.42),0 0 44px rgba(0,111,255,.09); opacity:calc(.13 + (var(--anatomy-p) * .87)); transform-style:preserve-3d; will-change:transform,opacity; }
.system-layer .layer-index { align-self:flex-start; color:#72b4ff; font-size:9px; letter-spacing:1px; }
.system-layer div { display:flex; min-width:0; flex:1; flex-direction:column; }
.system-layer small { color:#65acff; font-size:8px; font-weight:750; letter-spacing:2px; }
.system-layer strong { margin:5px 0; font-size:15px; font-weight:580; letter-spacing:-.2px; white-space:nowrap; }
.system-layer i { color:#8498b7; font-size:9px; font-style:normal; letter-spacing:.4px; }
.system-layer > b { width:38px; height:38px; display:grid; flex:0 0 auto; place-items:center; border-radius:11px; color:#77b7ff; background:rgba(0,111,255,.14); border:1px solid rgba(90,166,255,.23); font-size:18px; transform:translateZ(26px); }
.layer-replay { transform:translate3d(calc(-50% - (var(--anatomy-p) * 340px)),calc(-50% - (var(--anatomy-p) * 74px)),calc(var(--anatomy-p) * 145px)) rotateY(calc(var(--anatomy-p) * -24deg)) scale(calc(.74 + (var(--anatomy-p) * .26))); }
.layer-security { transform:translate3d(calc(-50% + (var(--anatomy-p) * 340px)),calc(-50% - (var(--anatomy-p) * 74px)),calc(var(--anatomy-p) * 145px)) rotateY(calc(var(--anatomy-p) * 24deg)) scale(calc(.74 + (var(--anatomy-p) * .26))); }
.layer-automation { transform:translate3d(-50%,calc(-50% + (var(--anatomy-p) * 205px)),calc(var(--anatomy-p) * 190px)) rotateX(calc(var(--anatomy-p) * -18deg)) scale(calc(.74 + (var(--anatomy-p) * .26))); }
.anatomy-orbit { position:absolute; z-index:2; left:50%; top:55%; width:670px; height:310px; border:1px solid rgba(93,170,255,.24); border-radius:50%; opacity:var(--anatomy-p); transform-style:preserve-3d; }
.orbit-alpha { transform:translate(-50%,-50%) rotateX(66deg) rotateZ(calc(var(--anatomy-p) * 42deg)); }
.orbit-beta { transform:translate(-50%,-50%) rotateY(68deg) rotateZ(calc(var(--anatomy-p) * -38deg)); }
.data-beam { position:absolute; z-index:3; left:50%; top:55%; width:300px; height:1px; transform-origin:left; opacity:calc(var(--anatomy-p) * .8); background:linear-gradient(90deg,#4da3ff,rgba(0,111,255,.06)); }
.data-beam i { position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:#b9dcff; box-shadow:0 0 13px 4px #087aff; animation:beam-particle 1.8s linear infinite; }
.beam-one { transform:rotate(-168deg) scaleX(var(--anatomy-p)); }.beam-two { transform:rotate(-12deg) scaleX(var(--anatomy-p)); }.beam-three { width:190px; transform:rotate(90deg) scaleX(var(--anatomy-p)); }
.beam-two i { animation-delay:-.6s; }.beam-three i { animation-delay:-1.2s; }
.product-render { position:absolute; z-index:6; left:50%; top:57%; width:min(88vw,1120px); aspect-ratio:3/2; transform-style:preserve-3d; transform:translate(-50%,-50%) translateY(calc(var(--anatomy-p) * 14px)) scale(calc(.78 + (var(--anatomy-p) * .2))) rotateX(calc(4deg - (var(--anatomy-p) * 4deg))); filter:drop-shadow(0 46px 54px rgba(0,0,0,.45)); will-change:transform; }
.product-render img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.product-closed { z-index:2; opacity:clamp(0,calc(1 - (var(--anatomy-p) * 2.2)),1); transform:scale(calc(1 - (var(--anatomy-p) * .08))) rotateZ(calc(var(--anatomy-p) * -3deg)); filter:saturate(.94) contrast(1.03); }
.product-exploded { z-index:3; opacity:clamp(0,calc((var(--anatomy-p) - .2) * 2.1),1); transform:scale(calc(.86 + (var(--anatomy-p) * .14))) translateX(calc((1 - var(--anatomy-p)) * 18px)); filter:saturate(.96) contrast(1.04); }
.product-light { position:absolute; z-index:4; left:5%; right:5%; top:8%; height:24%; pointer-events:none; opacity:clamp(0,calc(var(--anatomy-p) * .55),.55); background:linear-gradient(115deg,transparent 38%,rgba(184,222,255,.23) 48%,transparent 58%); filter:blur(14px); transform:translateX(calc(-70% + (var(--anatomy-p) * 140%))) rotate(-8deg); mix-blend-mode:screen; }
.software-scene { will-change:transform,opacity; transition:filter .25s ease; }
.replay-scene { z-index:2; opacity:var(--replay-o,1); transform:translate3d(calc(var(--anatomy-p) * -28px),calc(var(--anatomy-p) * 8px),0) scale(calc(1 - (var(--anatomy-p) * .04))); filter:saturate(.92) contrast(1.03); }
.security-scene { z-index:3; opacity:var(--security-o,0); transform:translate3d(calc((.5 - var(--anatomy-p)) * 34px),calc((.5 - var(--anatomy-p)) * 12px),0) scale(calc(.92 + (var(--security-o,0) * .08))); filter:saturate(.92) contrast(1.04); }
.automation-scene { z-index:4; opacity:var(--automation-o,0); transform:translate3d(calc((1 - var(--anatomy-p)) * 34px),calc((1 - var(--anatomy-p)) * -10px),0) scale(calc(.92 + (var(--automation-o,0) * .08))); filter:saturate(.92) contrast(1.04); }
.scene-index { position:absolute; z-index:11; left:50%; bottom:3.5%; display:flex; gap:38px; transform:translateX(-50%); }
.scene-step { position:relative; display:flex; align-items:center; gap:9px; padding:8px 0 13px; color:#657c9f; font-size:9px; font-weight:650; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; transition:color .35s ease,transform .35s ease; }
.scene-step b { color:#3978c1; font-size:8px; }
.scene-step::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#51a3ff; transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.scene-step.is-active { color:white; transform:translateY(-2px); }.scene-step.is-active b { color:#61adff; }.scene-step.is-active::after { transform:scaleX(1); }
.system-callout { position:absolute; z-index:9; width:220px; color:white; opacity:clamp(0,calc((var(--anatomy-p) - .56) * 4),1); transform:translateY(calc((1 - var(--anatomy-p)) * 18px)); transition:opacity .08s linear; text-shadow:0 2px 18px #020712; }
.system-callout span,.system-callout strong,.system-callout small { display:block; }
.system-callout span { margin-bottom:8px; color:#54a6ff; font-size:8px; font-weight:750; letter-spacing:2px; }
.system-callout strong { font-size:15px; font-weight:580; letter-spacing:-.2px; }
.system-callout small { margin-top:6px; color:#8194b2; font-size:10px; }
.system-callout::before { content:''; position:absolute; top:22px; width:96px; height:1px; background:linear-gradient(90deg,rgba(97,172,255,.82),rgba(97,172,255,.08)); transform:scaleX(var(--anatomy-p)); }
.system-callout::after { content:''; position:absolute; top:19px; width:7px; height:7px; border-radius:50%; background:#61acff; box-shadow:0 0 14px #0b78f3; opacity:var(--anatomy-p); }
.callout-replay { left:4.5%; top:41%; text-align:left; }.callout-replay::before { left:calc(100% + 14px); transform-origin:left; }.callout-replay::after { left:calc(100% + 106px); }
.callout-security { right:4.5%; top:41%; text-align:right; }.callout-security::before { right:calc(100% + 14px); transform-origin:right; background:linear-gradient(90deg,rgba(97,172,255,.08),rgba(97,172,255,.82)); }.callout-security::after { right:calc(100% + 106px); }
.callout-automation { left:50%; bottom:4%; text-align:center; transform:translateX(-50%) translateY(calc((1 - var(--anatomy-p)) * 18px)); }.callout-automation::before { left:50%; top:auto; bottom:calc(100% + 16px); width:1px; height:62px; transform:scaleY(var(--anatomy-p)); transform-origin:bottom; background:linear-gradient(0deg,rgba(97,172,255,.82),rgba(97,172,255,.08)); }.callout-automation::after { left:calc(50% - 3px); top:auto; bottom:calc(100% + 74px); }
.anatomy-progress { position:absolute; z-index:10; right:5%; top:50%; width:1px; height:160px; background:rgba(154,190,235,.2); }
.anatomy-progress > span { position:absolute; left:0; top:0; width:1px; height:calc(var(--anatomy-p) * 100%); background:#62adff; box-shadow:0 0 10px #087aff; }
.anatomy-progress > i { position:absolute; left:-3px; width:7px; height:7px; border-radius:50%; background:#263b5d; border:1px solid #719bd0; }
.anatomy-progress > i:nth-of-type(1) { top:0; }.anatomy-progress > i:nth-of-type(2) { top:50%; }.anatomy-progress > i:nth-of-type(3) { bottom:0; }
.anatomy-progress small { position:absolute; right:15px; top:0; color:#66809f; font-size:7px; letter-spacing:1.8px; writing-mode:vertical-rl; transform:rotate(180deg); }
@keyframes core-halo { from { opacity:.75;transform:scale(.82); } to { opacity:0;transform:scale(1.28); } }
@keyframes beam-particle { from { left:0; } to { left:100%; } }
@media(max-width:800px) {
  .anatomy { height:235vh; }
  .anatomy-sticky { top:108px; height:calc(100vh - 108px); min-height:620px; }
  .anatomy-copy { top:5%; padding:0 40px; }
  .anatomy-copy h2 { font-size:36px; letter-spacing:-2.2px; }
  .anatomy-stage { inset:18% 0 0; transform:scale(.82); }
  .product-render { width:660px; top:56%; }
  .scene-index { bottom:2.5%;gap:18px; }
  .scene-step { gap:5px;font-size:7px;letter-spacing:.7px; }
  .system-callout { width:145px; }
  .system-callout strong { font-size:12px; }.system-callout small { font-size:8px; }
  .callout-replay { left:10px; top:34%; }.callout-security { right:10px; top:47%; }.callout-automation { bottom:3%; }
  .system-callout::before,.system-callout::after { display:none; }
  .system-core { width:150px;height:150px; }
  .core-mark { width:58px;height:65px;font-size:32px; }
  .system-core > span { bottom:19px; }
  .system-layer { width:230px; min-height:76px; padding:13px; }
  .system-layer strong { font-size:13px; }
  .layer-replay { transform:translate3d(calc(-50% - (var(--anatomy-p) * 108px)),calc(-50% - (var(--anatomy-p) * 155px)),calc(var(--anatomy-p) * 100px)) rotateY(calc(var(--anatomy-p) * -16deg)) scale(calc(.68 + (var(--anatomy-p) * .2))); }
  .layer-security { transform:translate3d(calc(-50% + (var(--anatomy-p) * 108px)),calc(-50% - (var(--anatomy-p) * 45px)),calc(var(--anatomy-p) * 110px)) rotateY(calc(var(--anatomy-p) * 16deg)) scale(calc(.68 + (var(--anatomy-p) * .2))); }
  .layer-automation { transform:translate3d(calc(-50% - (var(--anatomy-p) * 42px)),calc(-50% + (var(--anatomy-p) * 135px)),calc(var(--anatomy-p) * 120px)) rotateX(calc(var(--anatomy-p) * -12deg)) scale(calc(.68 + (var(--anatomy-p) * .2))); }
  .anatomy-orbit { width:410px;height:230px; }
  .data-beam { width:150px; }.beam-three { width:125px; }
  .anatomy-progress { right:18px;height:130px; }
}
@media(prefers-reduced-motion:reduce) {
  .anatomy { --anatomy-p:1; height:auto; }
  .anatomy-sticky { position:relative;top:auto;height:760px; }
  .core-halo,.data-beam i { animation:none!important; }
}