/* Secbit.AI illustration system: frontal glass panels, white raised surfaces,
   a centered blue mark and quiet, consistent depth across both pages. */
:root{--art-glass:linear-gradient(120deg,#f8fbffcc,#eaf2ffb3 52%,#f6faffcc);--art-face:linear-gradient(145deg,#fff,#f0f6ff);--art-border:#d4e2f6;--art-line:#afc7eb;--art-ink:#5475a3;--art-muted:#8299b8;--art-shadow:0 16px 32px #587da515;--art-stack:0 5px 0 #e0ebfb,0 9px 0 #d0e1f8,0 18px 32px #587da515}
/* Main illustrations share the same geometry and materials. */
.hero-floor{display:none}.hero-grid{opacity:.35}
.hero-visual{width:55%;height:auto;aspect-ratio:640/460;right:-1%;top:50%;transform:translateY(-50%);margin:0;max-width:none}
.cdn-visual{width:100%;height:auto;aspect-ratio:640/460;margin:0;isolation:isolate}
.system-illustration{display:block;width:100%;height:auto;fill:none;stroke:none}
.system-art-caption{position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.7px;color:var(--art-muted)}
/* Product paths and their supporting nodes. */
.network-diagram,.delivery-demo,.edge-defense{background:linear-gradient(145deg,#fff,#f9fbff);border-color:#dfe8f5;border-radius:20px;box-shadow:var(--art-shadow)}
.diagram-grid{background:none;opacity:1;left:30%;right:37%;top:22%;bottom:19%;border:1px solid var(--art-border);border-radius:20px;background:var(--art-glass);box-shadow:inset 0 2px 0 #fff}
.diagram-topline,.demo-toolbar{border-bottom-color:#e7eef8;background:#ffffff8a}
.diagram-node>span,.flow-node>div{background:var(--art-face);border-color:var(--art-border);border-radius:13px;box-shadow:0 4px 0 #e6effc,0 8px 18px #587da50c;color:#83a0c9}
.edgex-node>span{width:68px;height:68px;border:1.5px solid white;border-radius:18px;transform:none;background:var(--art-face);box-shadow:var(--art-stack)}
.edgex-node>span svg{width:38px;height:43px;transform:none}
.edgex-node strong{color:var(--art-ink);margin-top:8px}.edgex-node small{color:var(--art-muted)}
.product-panel.planned .edgex-node>span{background:var(--art-face);border-color:#fff;box-shadow:var(--art-stack)}
.route-line,.connection-lines .route-line{stroke:var(--art-line)}.route-faint{display:none}.route-motion{stroke:#7fa4df;animation:none;stroke-dasharray:3 30;opacity:.55}
.cache-node>div{background:var(--art-face);border:1.5px solid #fff;border-radius:18px;box-shadow:var(--art-stack)}.cache-node svg{width:36px;height:40px}.cache-node strong{color:var(--art-ink);margin-top:8px}
.flow-line{color:var(--art-muted)}.flow-line i{animation:none;background:#9db9e5}.flow-assets>span{border-radius:6px;background:#f4f8ff;border-color:#e2ebf8}
.delivery-demo[data-mode=direct] .cache-node>div{background:transparent;border-color:transparent;box-shadow:none}
.diagram-bottom .mini-bars{display:none}
/* Content and business illustrations retain their subject, with one material. */
.solution-art,.benefit-art,.scenario-visual{background:radial-gradient(ellipse at center,#edf4ff,#fafcff 80%);border-bottom-color:#e9f0f9}
.solution-art:before{inset:auto;width:78%;height:76%;top:10%;left:11%;background:var(--art-glass);border:1px solid var(--art-border);border-radius:21px;box-shadow:inset 0 2px 0 #fff}
.store-window,.code-card{transform:none;border:1px solid #d7e4f5;border-radius:14px;background:var(--art-face);box-shadow:var(--art-stack);overflow:hidden;position:relative;z-index:1}
.window-top{background:#ffffff90;border-bottom-color:#e7eef9}.window-top i{background:#bfcee5}
.shopping-bag{background:var(--art-glass);border:1px solid #dae6f8;border-radius:10px}.shopping-bag svg{color:#789ccd;fill:#e4eefd}
.store-lines>span{background:#95b5e6;border-radius:4px}.store-lines>i{border-radius:2px}.store-chart i{background:#d6e4f9}.store-chart i:nth-last-child(-n+2){background:#afc9ee}
.art-chip{z-index:2;border-radius:10px;border-color:#dce7f7;background:#fff;color:#738eaf;box-shadow:0 5px 0 #edf3fd,0 10px 20px #587da50d}
.game-orbit{display:none}.gamepad{transform:none;z-index:1;position:relative;filter:drop-shadow(0 5px 0 #d8e5f8) drop-shadow(0 10px 12px #8da9d222)}
.gamepad>path:first-of-type{fill:var(--art-face-solid,#f7faff);stroke:#b9ceee}.gamepad>path:nth-of-type(2){stroke:#89a8d8}.gamepad>circle{fill:#8caddf}.gamepad>rect{fill:#c3d5ee}
.code-preview{color:#8298b5}.code-preview span,.code-preview em,.code-preview b{color:#638bc1}
/* Setup and global network now use the same light glass surface. */
.terminal{transform:none;background:var(--art-face);border:1px solid var(--art-border);border-radius:20px;box-shadow:var(--art-stack)}
.terminal-header{background:#ffffff90;border-bottom-color:#e0e9f6;color:#7890b0}.terminal-dots i:nth-child(n){background:#c1d3ec}.terminal-header button{color:#7899c6}
.terminal pre{color:#8b9fb9}.terminal .code-comment{color:#8da1be}.terminal .code-purple{color:#7091bf}.terminal .code-green{color:#5479ae}.terminal .code-blue{color:#4f83cb}
.terminal-footer{color:#849ab8;border-top-color:#e0e9f6}.terminal-footer .status-dot{background:#8aa9d2}
.world-map{background:var(--art-glass);border:1px solid var(--art-border);border-radius:24px;box-shadow:var(--art-shadow);overflow:hidden}
.world-map:before{content:"";position:absolute;left:24px;right:24px;top:10px;border-top:2px solid #ffffffb3;pointer-events:none}
.world-map canvas{opacity:.9}.map-marker>span{background:var(--art-face);border:1px solid #d7e3f5;border-radius:8px;padding:6px 9px;box-shadow:0 3px 0 #e4edfa}.map-marker>span>span{background:none;border:0;padding:0;box-shadow:none}
.map-marker i{background:#86a9df;box-shadow:0 0 0 5px #bdd2f233}.map-note{bottom:13px;right:18px;color:#8fa3bf}
/* CDN benefit illustrations. */
.benefit-art:before{content:"";position:absolute;width:76%;height:70%;left:12%;top:13%;background:var(--art-glass);border:1px solid var(--art-border);border-radius:20px;box-shadow:inset 0 2px 0 #ffffffb3}
.mini-world{padding:0}/* Center on the glass panel: 13% top + half its 70% height. */
.mini-world>svg{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:82px;height:82px;padding:14px;color:#82a4d4;stroke-width:1;background:var(--art-face);border:1px solid #fff;border-radius:20px;box-shadow:var(--art-stack)}
.mini-world i{display:none}.mini-world>span{bottom:16px;color:#7f98bc}
.mini-cache,.mini-files{z-index:1}.mini-cache>span{border-radius:7px;border-color:#dce7f7;color:#8ca2bf;background:#ffffffdb}
.mini-cache>b{background:var(--art-face);border:1px solid white;border-radius:13px;box-shadow:var(--art-stack);color:#698dc0}.mini-cache>b svg{color:#7d9ecb}
.mini-files{transform:none;gap:11px}.mini-files span{border-radius:10px;background:var(--art-face);border:1px solid white;color:#7897c1;box-shadow:0 4px 0 #e1ebfa,0 7px 0 #d2e2f8,0 12px 18px #587da50d}.mini-files span:nth-child(even){transform:none}
/* CDN scenario illustrations. */
.scene-grid{display:none}.scene-art:before{content:"";position:absolute;width:87%;height:80%;left:6.5%;top:10%;border:1px solid var(--art-border);border-radius:24px;background:var(--art-glass);box-shadow:inset 0 2px 0 #fff}
.shop-window,.code-scene,.release-card{transform:none;border:1px solid #d7e4f5;border-radius:16px;background:var(--art-face);box-shadow:var(--art-stack);position:relative}
.shop-window{width:76%}.shop-top{background:#fff;border-color:#e5edf8}.shop-top b{color:#6684ac}.shop-top span,.shop-top i{color:#98abc3;border-color:#bed0e8}
.product-display{background:linear-gradient(120deg,#f5f9ff,#e7f0fd)}.shop-copy small{color:#8ba2c0}.shop-copy strong{color:#6788b5}.shop-copy>span{color:#87a0c1}
.vase-one,.vase-two{transform:none;background:linear-gradient(90deg,#cbdef7,#f8fbff 40%,#dfebfb 70%,#c0d6f2);box-shadow:0 7px 12px #789bc11f}
.vase-one:before,.vase-two:before{background:linear-gradient(90deg,#cbdff8,#f6faff,#c1d6f2)}.vase-one:after{background:#a4bddf;border-color:#d8e5f7}.display-floor{background:linear-gradient(180deg,#dce9fb00,#d2e1f63d)}
.shop-products i:nth-child(n){background:#edf3fc;border:1px solid #e0eafa;border-radius:5px}
.asset-float{transform:none;border-radius:12px;box-shadow:0 4px 0 #e5eefb,0 12px 22px #587da50d}.asset-image{background:linear-gradient(140deg,#f1f6ff 50%,#c5d9f4 50%,#e0ebfb 70%);border-color:#d4e2f6;border-radius:6px}.asset-float>svg{color:#86a8cf}
.code-scene>div{background:#ffffffa6}.code-scene pre{color:#90a6c3}.code-scene pre b{color:#648bc0}.code-scene footer{color:#91a6c2;border-color:#e3ecf9}.code-scene footer span{color:#7a9ac5}
.release-card{color:#4f739f}.release-card>span{color:#879fbe}.release-symbol{color:#8caedc}.release-card>strong{color:#4f739f}.release-card>div:not(.release-symbol){color:#7e99bd}.release-card>i{background:linear-gradient(90deg,#a8c4ec 76%,#e7effb 76%)}
.setup-domain{padding:15px 17px;border:1px solid var(--art-border);border-radius:13px;background:var(--art-glass);width:fit-content;box-shadow:inset 0 2px 0 #fff}
/* Keep small imagery legible and aligned at existing responsive breakpoints. */
@media(min-width:1450px){.hero-visual{width:57%;right:-2%}}
@media(max-width:1200px){.hero-visual{width:55%;right:-1%}.system-art-caption{font-size:7px}}
@media(max-width:980px){.hero-visual{width:54%;right:-1%}.cdn-visual{width:100%;margin:0}.system-art-caption{font-size:6px}.mini-world>svg{width:73px;height:73px;padding:12px}.mini-world>span{font-size:6px;bottom:13px}.mini-files{gap:7px}}
@media(max-width:760px){.hero-visual{position:relative;width:100%;max-width:480px;right:auto;top:auto;transform:none;height:auto;aspect-ratio:640/460;margin:22px auto 8px}.cdn-visual{width:min(100%,480px);height:auto;aspect-ratio:640/460;margin:20px auto 8px}.system-art-caption{font-size:7px;bottom:0}.edgex-node>span{width:55px;height:55px;border-radius:15px}.edgex-node>span svg{width:30px;height:35px}.edgex-node strong{margin-top:7px}.diagram-grid{left:29%;right:36%;top:22%;bottom:17%;border-radius:16px}.network-diagram,.delivery-demo{border-radius:17px}.cache-node>div{border-radius:15px}.cache-node svg{width:30px;height:35px}.solution-art:before{width:77%;left:11.5%;border-radius:20px}.mini-world>svg{width:76px;height:76px}.mini-world>span{font-size:7px;bottom:15px}.mini-files{gap:12px}.world-map{border-radius:20px}.map-marker>span{padding:4px 7px;border-radius:6px}.map-note{font-size:6px;bottom:10px;right:12px}.scene-art:before{border-radius:20px}.shop-window{width:77%}.setup-domain{padding:13px 14px;gap:8px}}
/* Fine details remain soft, while explanatory text stays readable. */
.gamepad>circle,.gamepad>rect{stroke:#8faad0;stroke-width:.8}
.terminal pre{font-size:11px;line-height:1.9;color:#7b91af}
@media(max-width:760px){.terminal pre,html[lang=en] .terminal pre{font-size:10px}}

/* Secbit.AI identity: outlined wordmark, shared cap height and a blue dot. */
.brand{--brand-wordmark-height:24px;--brand-icon-size:29px;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;line-height:1}
.brand>svg.brand-mark{width:var(--brand-icon-size);height:var(--brand-icon-size);flex-shrink:0;color:#2864ec;fill:none;stroke:none}
.brand>svg.brand-wordmark{width:calc(var(--brand-wordmark-height) * 5.003);height:var(--brand-wordmark-height);display:block;flex-shrink:0;color:#14213c;fill:none;stroke:none;overflow:visible}
.footer-brand>.brand{--brand-wordmark-height:24px;--brand-icon-size:29px}
@media(max-width:1020px){.brand{--brand-wordmark-height:23px;--brand-icon-size:28px;gap:8px}}
@media(max-width:760px){.brand{--brand-wordmark-height:21.5px;--brand-icon-size:26px;gap:7px}.footer-brand>.brand{--brand-wordmark-height:23px;--brand-icon-size:28px}}
@media(max-width:370px){.brand{--brand-wordmark-height:20px;--brand-icon-size:24px;gap:7px}}