/* X3 / DEPTH 1.3.0 — CSS geometry, local assets, no render loop. */
.x3-body{--x3-surface:#f5f5f5;--x3-surface-end:#e8e8e8;--x3-rim:#fff;--x3-edge:#d0d0d0;--x3-shadow:0 18px 40px #0000000d,0 4px 10px #00000008;--x3-ink:#151515;background-image:radial-gradient(ellipse at 75% 10%,#00000004,transparent 50%)}
.x3-body.dark{--x3-surface:#1b1b1e;--x3-surface-end:#101012;--x3-rim:#ffffff20;--x3-edge:#ffffff16;--x3-shadow:0 22px 50px #0005,0 5px 12px #0004;--x3-ink:#eee;background-image:radial-gradient(ellipse at 75% 10%,#ffffff04,transparent 50%)}
.x3-body .x3-main{isolation:isolate}
.x3-body .x3-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:2.5rem;min-height:670px;padding-block:3rem 3.5rem}
.x3-body .x3-hero-copy{position:relative;z-index:1}
.x3-body .x3-hero h1{font-size:clamp(2.8rem,4.65vw,4.9rem);font-weight:620;letter-spacing:-.055em;text-wrap:balance;text-shadow:0 3px 0 #00000005}
[dir=rtl] .x3-body .x3-hero h1{font-size:clamp(2.5rem,4.1vw,4.1rem);line-height:1.5;letter-spacing:0}
.x3-body .x3-hero-description{font-size:.95rem;line-height:1.95;max-width:29rem}
.x3-body .x3-eyebrow{letter-spacing:.13em}
.x3-body .x3-hero-actions{gap:1.5rem}
.x3-body .x3-cta,.x3-body.x3-body .x3-buy-submit{position:relative;border:1px solid hsl(var(--color-base)/.22);border-radius:9px;background:linear-gradient(170deg,hsl(var(--color-primary)),hsl(var(--color-primary)/.87));box-shadow:inset 0 1px 0 #ffffff70,0 4px 0 hsl(var(--color-base)/.18),0 12px 26px #0002;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.x3-body .x3-cta:hover,.x3-body.x3-body .x3-buy-submit:hover{opacity:1;transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff80,0 6px 0 hsl(var(--color-base)/.15),0 16px 30px #0003}
.x3-body .x3-cta:active,.x3-body.x3-body .x3-buy-submit:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff60,0 1px 0 hsl(var(--color-base)/.2)}
.x3-body .x3-category-grid,.x3-body .x3-featured-grid{gap:1.5rem;perspective:1400px}
.x3-body .x3-category-card,.x3-body .x3-product-card{border:1px solid var(--x3-edge);border-top-color:var(--x3-rim);border-radius:16px;background:radial-gradient(ellipse at var(--x3-light-x,30%) var(--x3-light-y,0%),hsl(var(--color-base)/.04),transparent 65%),linear-gradient(150deg,var(--x3-surface),var(--x3-surface-end));box-shadow:inset 0 1px 0 var(--x3-rim),var(--x3-shadow),0 3px 0 var(--x3-edge);transform:perspective(1100px) rotateX(var(--x3-dy,0deg)) rotateY(var(--x3-dx,0deg));transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.x3-body .x3-category-card:hover,.x3-body .x3-product-card:hover{border-color:hsl(var(--color-base)/.28);box-shadow:inset 0 1px 0 var(--x3-rim),0 30px 55px #0003,0 3px 0 hsl(var(--color-base)/.12)}
.x3-body .x3-card-top{margin-bottom:1rem}
.x3-body .x3-category-card{padding:1.6rem}
.x3-body .x3-card-link{padding-top:1.2rem;position:relative}
.x3-body .x3-product-card .x3-product-image{border:1px solid var(--x3-edge);border-radius:10px;padding:5px;background:hsl(var(--color-background)/.6);box-shadow:0 7px 14px #0002}
.x3-body.x3-body .x3-order-card,.x3-body.x3-body .x3-config-card,.x3-body.x3-body .x3-cart-panel,.x3-body.x3-body .x3-buy-description,.x3-body .x3-next-actions,.x3-body .x3-main #login,.x3-body .x3-main #register,.x3-body .x3-main #reset{border-radius:15px;border-color:var(--x3-edge);border-top-color:var(--x3-rim);background:linear-gradient(145deg,var(--x3-surface),var(--x3-surface-end));box-shadow:inset 0 1px 0 var(--x3-rim),var(--x3-shadow)}
.x3-body.x3-body .x3-order-card{border-top:2px solid hsl(var(--color-base)/.72)}
.x3-body.x3-body .x3-resource-grid>div{border-radius:11px;background:linear-gradient(145deg,var(--x3-surface),var(--x3-surface-end));border-color:var(--x3-edge);box-shadow:inset 0 1px 0 var(--x3-rim),0 5px 12px #0001}
.x3-body.x3-body .x3-cycle-option{border-radius:9px;background:hsl(var(--color-background)/.32);box-shadow:inset 0 1px 3px #0000000d}
.x3-body.x3-body .x3-cycle-option.is-selected,.x3-body.x3-body .x3-cycle-option:has(input:checked){background:linear-gradient(150deg,hsl(var(--color-base)/.07),hsl(var(--color-base)/.02));box-shadow:inset 0 1px 0 var(--x3-rim),0 4px 9px #0002}
.x3-body.x3-body .x3-buy-cover{border-radius:15px;box-shadow:inset 0 1px 0 var(--x3-rim),10px 14px 25px #0002,3px 3px 0 var(--x3-edge);background:linear-gradient(145deg,var(--x3-surface),var(--x3-surface-end));border:1px solid var(--x3-edge)}
.x3-body .x3-main .bg-background-secondary.border:not(input):not(select):not(textarea){box-shadow:inset 0 1px 0 var(--x3-rim),0 6px 18px #0000000d}
.x3-body .x3-process{background:linear-gradient(180deg,hsl(var(--color-base)/.025),transparent);box-shadow:inset 0 1px 0 var(--x3-rim)}
.x3-body .x3-faq details{padding-inline:1rem;transition:background .18s ease}
.x3-body .x3-faq details[open]{background:hsl(var(--color-base)/.025)}
.x3-body .x3-footer{box-shadow:inset 0 1px 0 var(--x3-rim);background:linear-gradient(145deg,var(--x3-surface-end),hsl(var(--color-background-secondary)))}
/* The cabinet is a real CSS box: front/back, right wall and top on separate planes. */
.x3-depth-stage{min-width:0;position:relative;align-self:center;width:100%}
.x3-depth-scene{height:500px;position:relative;perspective:1250px;isolation:isolate;direction:ltr;contain:layout style}
.x3-depth-halo{position:absolute;inset:7% -2% 0;background:radial-gradient(ellipse at 50% 42%,hsl(var(--color-base)/.08),transparent 65%);pointer-events:none}
.x3-depth-word{position:absolute;inset:3% 0 auto;text-align:center;font:800 clamp(9rem,21vw,18rem)/1 Arial,sans-serif;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px hsl(var(--color-base)/.07);user-select:none;pointer-events:none}
.x3-depth-floor{position:absolute;inset:55% -5% -12%;background-image:linear-gradient(hsl(var(--color-base)/.09) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--color-base)/.09) 1px,transparent 1px);background-size:34px 34px;transform:perspective(450px) rotateX(65deg);mask-image:radial-gradient(ellipse,black,transparent 68%);pointer-events:none}
.x3-depth-shadow{position:absolute;width:65%;height:65px;left:15%;bottom:7%;background:#0007;filter:blur(20px);border-radius:50%;transform:rotate(-9deg);pointer-events:none}
.x3-depth-rack{--rack-w:300px;--rack-h:324px;--rack-d:104px;position:absolute;left:50%;top:47%;width:var(--rack-w);height:var(--rack-h);margin-left:calc(var(--rack-w)/-2);margin-top:calc(var(--rack-h)/-2);transform-style:preserve-3d;transform:rotateX(calc(-13deg + var(--x3-dy,0deg))) rotateY(calc(-27deg + var(--x3-dx,0deg))) rotateZ(-3deg);transition:transform .3s cubic-bezier(.2,.7,.2,1);color:#ddd}
.x3-depth-face{position:absolute;backface-visibility:hidden;border:1px solid #6f6f75;box-sizing:border-box}
.x3-depth-front{inset:0;transform:translateZ(calc(var(--rack-d)/2));border-radius:8px;background:linear-gradient(120deg,#404045 0,#171719 12%,#101012 65%,#2a2a2d);box-shadow:inset 1px 1px 0 #ffffff45,inset -2px -2px 0 #000,0 0 0 3px #0b0b0c,0 0 0 4px #58585d;padding:19px 21px 15px}
.x3-depth-back{inset:0;transform:translateZ(calc(var(--rack-d)/-2)) rotateY(180deg);background:#121214;border-radius:6px}
.x3-depth-side{width:var(--rack-d);height:var(--rack-h);left:100%;top:0;transform-origin:left center;transform:translateZ(calc(var(--rack-d)/2)) rotateY(90deg);background:linear-gradient(110deg,#323236,#171719 35%,#222225);border-radius:0 4px 4px 0;box-shadow:inset -2px 0 0 #ffffff16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.x3-depth-side>span{font:800 39px/1 Arial,sans-serif;letter-spacing:-5px;color:#707078;transform:rotate(90deg);margin-bottom:19px;text-shadow:1px 1px #070708}
.x3-depth-side>small{font:7px/1 Consolas,monospace;letter-spacing:2px;color:#77777e;writing-mode:vertical-rl;margin-top:5px}
.x3-depth-side>i{width:3px;height:25px;background:#080809;box-shadow:1px 0 0 #ffffff15;position:absolute;bottom:22px;left:25px}
.x3-depth-side>i:nth-of-type(2){left:34px}.x3-depth-side>i:nth-of-type(3){left:43px}
.x3-depth-top{width:var(--rack-w);height:var(--rack-d);left:0;top:0;transform-origin:top center;transform:translateZ(calc(var(--rack-d)/-2)) rotateX(90deg);border-radius:4px 4px 0 0;background:repeating-linear-gradient(90deg,#0000 0 18px,#ffffff04 19px 20px),linear-gradient(150deg,#45454b,#242427 70%,#37373b);box-shadow:inset 0 0 0 6px #ffffff07}
.x3-depth-top span{position:absolute;top:35px;left:21px;font:7px/1 Consolas,monospace;letter-spacing:2px;color:#8b8b92}
.x3-depth-rack-header{display:flex;align-items:center;justify-content:space-between;padding:0 2px 22px;font:8px/1 Consolas,monospace;letter-spacing:.8px;color:#e5e5e8;text-shadow:0 1px #000}
.x3-depth-rack-header>span:first-child{font-weight:700}.x3-depth-rack-header>span:last-child{font-size:7px;color:#7d7d84}.x3-depth-slash{color:#777}
.x3-depth-rack-rails{position:absolute;inset:51px 9px 47px;pointer-events:none;display:flex;justify-content:space-between}
.x3-depth-rack-rails i{width:5px;background:radial-gradient(circle,#050506 1.5px,#414146 2px,transparent 2.5px) 0 0/5px 14px}
.x3-depth-nodes{display:flex;flex-direction:column;gap:11px;transform-style:preserve-3d}
.x3-depth-node{height:63px;border:1px solid #5b5b61;border-radius:3px;position:relative;transform:translateZ(6px);background:linear-gradient(175deg,#38383d,#1b1b1e 22%,#161619 75%,#222226);box-shadow:inset 0 1px 0 #ffffff20,0 4px 0 #080809,0 5px 0 #37373b}
.x3-depth-node-id{position:absolute;left:6px;top:26px;font:7px/1 Consolas,monospace;color:#909098}
.x3-depth-grille{position:absolute;inset:12px 65px 12px 23px;background:repeating-linear-gradient(90deg,#060607 0 2px,#323237 2px 4px);border:1px solid #080809;box-shadow:inset 0 1px 5px #0008}
.x3-depth-node-handle{position:absolute;width:25px;height:20px;right:26px;top:21px;border:2px solid #777780;border-bottom-color:#414146;border-radius:3px;box-shadow:1px 2px 0 #0008,inset 0 0 0 3px #111114;background:#080809}
.x3-depth-node-led{position:absolute;right:10px;top:23px;display:flex;flex-direction:column;gap:7px}
.x3-depth-node-led i{width:3px;height:3px;background:#e2e2e8;border-radius:50%;box-shadow:0 0 5px #ffffff70}
.x3-depth-node-led i:last-child{background:#5d5d65;box-shadow:none}
.x3-depth-node-line{height:1px;position:absolute;bottom:3px;inset-inline:10px;background:linear-gradient(90deg,transparent,#ffffff13,transparent)}
.x3-depth-rack-footer{display:flex;justify-content:space-between;align-items:center;padding-top:19px;font:6px/1.6 Consolas,monospace;letter-spacing:1px;color:#85858e}
.x3-depth-rack-logo{width:28px!important;height:18px!important;aspect-ratio:auto;color:#d3d3d9}
.x3-depth-power{font:17px/1 Arial,sans-serif;border:1px solid #ffffff25;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;color:#b7b7c2;box-shadow:inset 0 1px 0 #ffffff20,0 2px 3px #0005}
.x3-depth-coordinate,.x3-depth-edition{position:absolute;bottom:18px;font:8px/1.5 Consolas,monospace;letter-spacing:1px;color:hsl(var(--color-muted))}
.x3-depth-coordinate{left:7px}.x3-depth-edition{right:7px}
.x3-depth-caption{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--x3-edge);padding:14px 0 0;font-size:.72rem;color:hsl(var(--color-base))}
.x3-depth-caption small{display:block;font-size:.6rem;color:hsl(var(--color-muted));margin-top:.25rem}
.x3-depth-motion{min-height:36px;padding:.4rem .7rem;border:1px solid var(--x3-edge);border-radius:7px;color:hsl(var(--color-muted));background:hsl(var(--color-background-secondary));font-size:.65rem;flex-shrink:0}
.x3-depth-motion[hidden]{display:none!important}
/* Compact hardware shares the same depth language and keeps the original variants. */
.x3-body .x3-depth-hardware{position:relative;width:100%;height:155px;max-height:none;margin:.4rem 0 1.1rem;perspective:800px;direction:ltr;contain:layout style}
.x3-depth-mini{position:absolute;left:50%;top:55%;width:200px;height:55px;margin-left:-100px;margin-top:-27px;transform-style:preserve-3d;transform:rotateX(calc(-20deg + var(--x3-dy,0deg))) rotateY(calc(-23deg + var(--x3-dx,0deg))) rotateZ(-4deg);transition:transform .25s ease}
.x3-depth-mini-front{position:absolute;inset:0;transform:translateZ(30px);border:1px solid #727279;border-radius:3px;background:linear-gradient(#39393f,#151518 40%,#242428);box-shadow:inset 0 1px 0 #ffffff25,0 4px 0 #0c0c0e;display:flex;align-items:center}
.x3-depth-mini-top{position:absolute;inset:0 0 auto;height:60px;transform-origin:top;transform:translateZ(-30px) rotateX(90deg);border:1px solid #65656c;background:linear-gradient(135deg,#49494f,#252528);border-radius:4px 4px 0 0;box-shadow:inset 0 0 0 4px #ffffff08}
.x3-depth-mini-top>span{position:absolute;top:24px;left:15px;font:7px/1 Consolas,monospace;letter-spacing:1px;color:#a0a0a8}
.x3-depth-mini-top>i{position:absolute;top:17px;right:16px;width:26px;height:26px;border:1px solid #ffffff1a;background:#ffffff04;border-radius:3px}
.x3-depth-mini-side{position:absolute;left:100%;top:0;width:60px;height:55px;transform-origin:left;transform:translateZ(30px) rotateY(90deg);border:1px solid #55555c;background:linear-gradient(120deg,#303034,#171719)}
.x3-depth-mini-number{font:700 10px/1 Arial,sans-serif;position:absolute;left:9px;top:22px;color:#aaaab5}
.x3-depth-mini-grille{position:absolute;inset:10px 35px 10px 32px;background:repeating-linear-gradient(90deg,#080809 0 2px,#4a4a51 2px 4px);border:1px solid #101012;box-shadow:inset 0 1px 3px #0006}
.x3-depth-mini-led{position:absolute;right:15px;top:25px;width:4px;height:4px;border-radius:50%;background:#ececf4;box-shadow:0 0 5px #fff6}
.x3-depth-mini-shadow{position:absolute;left:14%;right:8%;bottom:15px;height:24px;border-radius:50%;background:#0003;filter:blur(10px)}
.x3-depth-mini-fans{display:flex;gap:14px;position:absolute;left:52px;top:8px}
.x3-depth-mini-fans i{width:35px;height:35px;border-radius:50%;border:2px solid #666670;background:repeating-conic-gradient(#1a1a1e 0 30deg,#4d4d57 30deg 60deg);box-shadow:inset 0 0 0 6px #101014}
.x3-depth-mini-drives{position:absolute;left:43px;right:34px;top:10px;height:33px;display:flex;gap:6px}
.x3-depth-mini-drives i{flex:1;background:linear-gradient(90deg,#4a4a52,#27272e);border:1px solid #777780;border-radius:2px;box-shadow:0 2px 0 #080809;position:relative}
.x3-depth-mini-drives i:after{content:"";position:absolute;bottom:4px;left:5px;width:3px;height:3px;background:#aaaab2;border-radius:50%}
.x3-body.x3-body .x3-buy-cover .x3-depth-hardware{width:100%;height:100%;min-height:80px;margin:0;overflow:clip}
.x3-buy-cover .x3-depth-mini{scale:.58}.x3-buy-cover .x3-depth-mini-shadow{bottom:18%;left:10%;right:10%;height:15px}
@media(min-width:1100px){.x3-depth-rack{--rack-w:334px;--rack-h:342px;--rack-d:116px}.x3-depth-node{height:68px}.x3-depth-rack-header{padding-bottom:24px}.x3-depth-rack-footer{padding-top:20px}.x3-depth-node-handle{top:23px}.x3-depth-node-id{top:29px}.x3-depth-node-led{top:26px}}
@media(max-width:1050px){.x3-body .x3-hero{gap:1.5rem;min-height:600px}.x3-depth-scene{height:445px}.x3-depth-rack{--rack-w:270px;--rack-h:310px;--rack-d:94px}.x3-depth-front{padding:17px 19px 12px}.x3-depth-node{height:62px}.x3-depth-rack-header{padding-bottom:19px}.x3-depth-rack-footer{padding-top:16px}.x3-depth-mini{scale:.85}}
@media(max-width:760px){.x3-body .x3-hero{grid-template-columns:1fr;gap:.5rem;padding-top:2.5rem;padding-bottom:2.5rem;min-height:0}.x3-body .x3-hero h1{max-width:13em;font-size:clamp(2.5rem,7.5vw,3.9rem)}[dir=rtl] .x3-body .x3-hero h1{font-size:clamp(2.2rem,6.5vw,3.4rem)}.x3-depth-stage{max-width:520px;margin-inline:auto}.x3-depth-scene{height:400px;margin-top:1rem}.x3-depth-rack{--rack-w:270px;--rack-h:310px;--rack-d:90px;top:47%}.x3-depth-word{font-size:15rem;top:3%}.x3-body .x3-category-grid{gap:1.25rem}.x3-depth-shadow{bottom:7%}.x3-body .x3-category-card:hover,.x3-body .x3-product-card:hover{box-shadow:inset 0 1px 0 var(--x3-rim),var(--x3-shadow)}.x3-body.x3-body .x3-buy-mobile{box-shadow:0 -7px 25px #0002}}
@media(max-width:400px){.x3-depth-scene{height:345px}.x3-depth-rack{--rack-w:226px;--rack-h:274px;--rack-d:78px}.x3-depth-front{padding:15px 17px 10px}.x3-depth-node{height:53px}.x3-depth-rack-header{font-size:6px;padding-bottom:17px}.x3-depth-rack-header>span:last-child{font-size:6px}.x3-depth-rack-footer{padding-top:14px;font-size:5px}.x3-depth-grille{inset:10px 54px 10px 19px}.x3-depth-node-id{left:4px;top:23px;font-size:6px}.x3-depth-node-handle{width:21px;height:18px;right:21px;top:17px}.x3-depth-node-led{right:8px;top:20px}.x3-depth-word{font-size:12rem}.x3-depth-coordinate,.x3-depth-edition{font-size:6px}.x3-depth-caption{gap:.5rem}.x3-depth-caption>span{font-size:.66rem}.x3-depth-motion{font-size:.6rem;padding:.4rem .5rem}.x3-body.x3-body .x3-buy-cover .x3-depth-mini{scale:.32}}
@media(hover:none),(pointer:coarse){.x3-category-card,.x3-product-card{--x3-dx:0deg!important;--x3-dy:0deg!important}}
html[data-x3-depth-motion=off] .x3-depth-stage,html[data-x3-depth-motion=off] .x3-category-card,html[data-x3-depth-motion=off] .x3-product-card,.x3-body[data-motion=off]{--x3-dx:0deg!important;--x3-dy:0deg!important}
html[data-x3-depth-motion=off] .x3-depth-rack,html[data-x3-depth-motion=off] .x3-depth-mini,.x3-body[data-motion=off] .x3-depth-rack,.x3-body[data-motion=off] .x3-depth-mini{transition:none}
html[data-x3-depth-motion=off] .x3-cta,html[data-x3-depth-motion=off] .x3-buy-submit,.x3-body[data-motion=off] .x3-cta,.x3-body[data-motion=off] .x3-buy-submit{transition:none;transform:none}
@media(prefers-reduced-motion:reduce){.x3-depth-stage,.x3-depth-hardware,.x3-category-card,.x3-product-card{--x3-dx:0deg!important;--x3-dy:0deg!important}.x3-body .x3-depth-rack,.x3-body .x3-depth-mini,.x3-body .x3-category-card,.x3-body .x3-product-card,.x3-body .x3-cta,.x3-body.x3-body .x3-buy-submit{transition:none}.x3-body .x3-cta:hover,.x3-body.x3-body .x3-buy-submit:hover,.x3-body .x3-cta:active,.x3-body.x3-body .x3-buy-submit:active{transform:none}.x3-depth-motion{display:none!important}}
@media print{.x3-depth-stage,.x3-depth-hardware{display:none!important}.x3-body .x3-category-card,.x3-body .x3-product-card,.x3-body.x3-body .x3-order-card,.x3-body.x3-body .x3-buy-description,.x3-body.x3-body .x3-resource-grid>div{box-shadow:none!important;transform:none!important;background:none!important}}