/* Lightweight CSS 3D: no WebGL, remote libraries or network requests. */
:root{--tech-line:#e6001224;--tech-glass:#ffffffdf;--tech-shadow:#a5243924;--tech-grid:#d64c6113}
:root[data-theme=dark]{--tech-line:#ff637b40;--tech-glass:#25232de8;--tech-shadow:#e6001233;--tech-grid:#f26a7c12}
body{background-image:radial-gradient(ellipse at 85% 18%,var(--tech-grid),transparent 45%)}
.hero{isolation:isolate;min-height:570px;overflow:clip;padding-top:100px;padding-bottom:100px}
.hero>.eyebrow,.hero>h1,.hero>p,.hero>.hero-link{position:relative;z-index:2;max-width:58%}
.hero h1{font-size:clamp(38px,4.6vw,62px)}
.tech-scene{position:absolute;right:0;top:32px;width:500px;height:500px;perspective:1000px;pointer-events:none}
.scene-grid{position:absolute;inset:50% -10% -16%;background-image:linear-gradient(var(--tech-grid) 1px,transparent 1px),linear-gradient(90deg,var(--tech-grid) 1px,transparent 1px);background-size:30px 30px;transform:rotateX(65deg) rotateZ(-18deg);mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.scene-aura{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#e600121c,transparent 68%);filter:blur(14px)}
.scene-assembly{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg));transition:transform .3s ease-out}
.orbit{position:absolute;left:15%;top:15%;width:70%;height:70%;border:1px solid var(--tech-line);border-radius:50%;transform-style:preserve-3d}
.orbit-one{transform:rotateX(66deg) rotateZ(-28deg);box-shadow:0 0 25px var(--tech-grid)}
.orbit-two{transform:rotateY(62deg) rotateZ(32deg);border-style:dashed}
.orbit-three{transform:rotateX(-30deg) rotateY(55deg);opacity:.5}
.orbit i{position:absolute;inset:-1px;animation:orbit-travel 18s linear infinite}
.orbit i:before{content:'';position:absolute;top:0;left:50%;width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 18px #e6001266}
.orbit-two i{animation-duration:26s;animation-direction:reverse}
.core-platform{position:absolute;left:27%;top:50%;width:46%;height:42%;border-radius:32px;transform:rotateX(63deg) rotateZ(-35deg);border:1px solid var(--tech-line);background:linear-gradient(135deg,var(--tech-glass),var(--tech-grid));box-shadow:9px 12px 0 var(--tech-grid),0 36px 45px var(--tech-shadow)}
.platform-bottom{top:58%;opacity:.55}.platform-top:after{content:'';position:absolute;inset:15px;border:1px dashed var(--tech-line);border-radius:24px}
.brand-core{position:absolute;left:34%;top:23%;width:32%;height:39%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:13px;background:linear-gradient(145deg,var(--tech-glass),var(--panel));border:1px solid var(--tech-line);border-radius:30px;box-shadow:8px 9px 0 var(--tech-grid),18px 30px 55px var(--tech-shadow),inset 0 1px 1px #fff8;transform:translateZ(55px) rotateY(-18deg) rotateX(12deg);animation:core-hover 7s ease-in-out infinite}
.brand-core img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 8px 8px #e6001218)}
.brand-core>span{font-size:9px;letter-spacing:4px;color:var(--muted)}
.core-bars{display:flex;align-items:center;gap:4px;height:15px}.core-bars i{width:3px;height:6px;border-radius:2px;background:var(--red);opacity:.4}.core-bars i:nth-child(2n){height:12px}.core-bars i:nth-child(3){height:16px;opacity:.8}
.float-module{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--tech-glass);border:1px solid var(--tech-line);border-radius:16px;box-shadow:0 18px 36px var(--tech-shadow);transform:translateZ(80px);animation:module-hover 8s ease-in-out infinite;backdrop-filter:blur(10px)}
.module-commerce{left:4%;top:28%;rotate:-8deg}.module-mail{right:6%;top:63%;rotate:7deg;animation-delay:-4s}
.module-symbol{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:var(--accent);color:var(--red);font-size:24px}.float-module small{font-size:8px;letter-spacing:1.7px;color:var(--muted);display:block}.float-module strong{font-size:13px;font-weight:500;display:block}.float-module b{font-size:10px;color:var(--red);font-weight:400;margin-left:10px}
.scene-coordinate{position:absolute;font:8px/1.4 monospace;letter-spacing:2px;color:var(--muted)}.coord-one{left:18%;top:9%}.coord-two{right:15%;bottom:7%}
.motion-toggle{position:absolute;right:20px;bottom:25px;z-index:3;color:var(--muted);font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:6px 12px}.motion-toggle[hidden]{display:none}.motion-toggle:hover{color:var(--red);border-color:var(--red)}
.product-grid{perspective:1200px}.product{position:relative;transform:rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .25s ease-out,box-shadow .25s,border-color .25s;background-image:radial-gradient(circle at var(--light-x,50%) var(--light-y,0%),var(--tech-grid),transparent 60%)}
.product:hover{border-color:var(--tech-line);box-shadow:0 25px 60px var(--tech-shadow)}
.product-icon{box-shadow:4px 5px 0 var(--tech-grid);transform:rotate(-5deg);transition:transform .3s}.product:hover .product-icon{transform:rotate(0deg) translateY(-3px)}
.scene-paused .tech-scene *{animation-play-state:paused!important}.scene-paused .scene-assembly{transform:none}.scene-paused .product{transform:none}
@keyframes orbit-travel{to{transform:rotate(360deg)}}
@keyframes core-hover{50%{transform:translateZ(55px) translateY(-13px) rotateY(-10deg) rotateX(8deg)}}
@keyframes module-hover{50%{transform:translateZ(80px) translateY(-12px)}}
@media(min-width:901px) and (max-width:1150px){.tech-scene{right:0;width:460px;scale:.85;transform-origin:right center}.hero h1{font-size:48px}}
@media(max-width:900px){.hero{padding:65px 0 35px;min-height:0}.hero>.eyebrow,.hero>h1,.hero>p,.hero>.hero-link{max-width:100%}.tech-scene{position:relative;top:auto;right:auto;width:min(540px,100%);height:440px;margin:-15px auto 0}.motion-toggle{bottom:10px;right:0}.hero h1{font-size:clamp(34px,6.8vw,54px)}}
@media(max-width:480px){.tech-scene{height:340px;margin:12px auto 0}.float-module{padding:11px 12px;gap:7px}.float-module b{display:none}.module-commerce{left:0}.module-mail{right:6%}.brand-core{border-radius:22px;gap:8px}.brand-core img{width:55px;height:55px}.brand-core>span{font-size:7px;letter-spacing:2px}.scene-coordinate{font-size:6px;letter-spacing:1px}.hero>.eyebrow{letter-spacing:1px}.core-bars{scale:.8}.hero{padding-top:45px}}
@media(prefers-reduced-motion:reduce){.tech-scene *{animation:none!important}.scene-assembly,.product,.product-icon{transform:none!important;transition:none!important}}
