:root { --paper:#f3f6fb; --ink:#162d49; --muted:#64758a; --green:#366dde; --lime:#a0dfff; --line:#d8e1ef; }
.site-header { background:#071321ed; border-color:#1b2b41; color:#e5edfb; }
.brand-dot { color:#8fbaff; }
nav a:hover { color:#91caff; }
nav .nav-contact { border-color:#385478; }
.hero { position:relative; background:#071321; color:#edf5ff; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 80% 50%,#16448677,transparent 60%),radial-gradient(ellipse at 4% 0%,#1d34545c,transparent 60%); }
.hero-grid { position:relative; grid-template-columns:.85fr 1.15fr; width:min(1500px,calc(100% - 80px)); gap:0; padding-block:65px 60px; }
.hero-copy { z-index:2; padding-left:10px; }
.hero h1 { font-size:clamp(34px,3.7vw,58px); line-height:1.45; letter-spacing:-.075em; }
.hero .eyebrow { color:#91c5ff; font-size:9px; letter-spacing:.13em; }
.hero .live-dot { background:#67dfd8; box-shadow:0 0 12px #67dfd8aa; }
.hero .highlight { color:#8fbeff; background:linear-gradient(100deg,#b5d3ff,#76a5ff 65%,#7ae2ef); background-clip:text; -webkit-text-fill-color:transparent; }
.hero .highlight:after { display:none; }
.hero-description { color:#9caec7; font-size:14px; margin-block:28px 35px; }
.hero .primary { background:#477ee8; box-shadow:0 8px 30px #1852b433; }
.hero .primary:hover { background:#6395f7; }
.hero .text-link { color:#d3e5ff; font-size:11px; }
.hero .button-row { gap:20px; }
.hero .button { font-size:12px; padding-inline:20px; gap:20px; }
.hero-foot { color:#6b85a5; margin-top:42px; font-size:9px; }
.hero-foot .tiny-code { color:#74bfff; }
.hero-foot i { color:#4d6d95; }
.tech-strip { background:#0c1b2d; border-color:#23354e; color:#a9bed9; }
.tech-strip .strip-label,.tech-strip .strip-label strong { color:#8fa6c6; }
.tech-strip .container>span:not(.strip-label) { color:#b2c8e5; }
.tech-strip .container>.strip-symbol { color:#73cffa!important; }
.scene-viewer { position:relative; min-width:0; overflow:hidden; isolation:isolate; }
.hero-viewer { height:550px; margin-left:-25px; }
.webgl-mount { position:absolute; inset:0; z-index:1; }
.webgl-mount canvas { width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.webgl-mount canvas:active { cursor:grabbing; }
.webgl-mount canvas:focus-visible { outline:2px solid #8dcfff; outline-offset:-3px; }
.scene-fallback { position:absolute; inset:50px 0; display:grid; place-items:center; pointer-events:none; }
.scene-fallback img { width:85%; height:100%; object-fit:contain; }
[data-ready="true"] .scene-fallback { display:none; }
[data-ready="false"] .webgl-mount { visibility:hidden; }
.scene-hud { position:absolute; top:20px; left:25px; right:20px; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:3; pointer-events:none; font:8px/1.7 Consolas,monospace; color:#739ac6; letter-spacing:.07em; }
.scene-hud>span:first-child { white-space:nowrap; display:flex; align-items:center; gap:7px; }
.scene-hud i { width:5px; height:5px; background:#78e9ef; box-shadow:0 0 12px #69dbe0; border-radius:50%; }
.scene-load-status { text-align:right; font:9px/1.6 "Malgun Gothic",sans-serif; letter-spacing:0; max-width:230px; color:#8ea7c4; }
.scene-coordinate { position:absolute; right:20px; bottom:108px; font:8px/1.8 Consolas,monospace; color:#526f92; pointer-events:none; z-index:3; text-align:right; }
.scene-controls { position:absolute; bottom:35px; left:20px; right:20px; z-index:4; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.scene-controls>div { display:flex; gap:3px; background:#0c1d30e8; border:1px solid #2e4462; border-radius:7px; padding:4px; backdrop-filter:blur(12px); }
.scene-controls button { border:0; background:transparent; color:#a1bad9; font-size:9px; padding:7px 9px; border-radius:4px; min-height:30px; }
.scene-controls button:hover { background:#223d5f; color:white; }
.scene-controls button[aria-pressed="true"] { color:#c4f3ff; background:#21486d; }
.scene-controls button:disabled { opacity:.45; }
.scene-instruction { position:absolute; bottom:9px; width:100%; text-align:center; font-size:9px; color:#7590b1; z-index:3; pointer-events:none; }
.scene-instruction span { margin:0 9px; color:#426082; }
.twin-section { padding-block:110px 85px; background:#081422; color:#e2edff; position:relative; }
.twin-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; margin-bottom:40px; }
.twin-heading h2 { font-size:43px; }
.twin-heading .eyebrow { color:#81c3ff; font-size:10px; }
.twin-heading p:not(.eyebrow) { color:#8ea5c3; font-size:13px; line-height:1.9; }
.concept-badge { display:inline-block; border:1px solid #31415a; border-radius:4px; padding:5px 9px; color:#92a7c4; font-size:9px; margin-top:16px; }
.twin-workspace { border:1px solid #2d435d; border-radius:13px; overflow:hidden; box-shadow:0 24px 70px #0005,0 0 80px #1d5fb110; background:#0b1b2d; }
.twin-topbar { display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid #243b56; background:#12233a; }
.twin-topbar>div { display:flex; align-items:center; gap:9px; }
.twin-topbar img { object-fit:contain; }
.twin-topbar strong { font-size:11px; font-weight:600; letter-spacing:.05em; }
.twin-topbar>div>span { font:8px Consolas,monospace; color:#6d88ac; }
.twin-indicator { font:9px Consolas,monospace; color:#79e3d5; display:flex; align-items:center; gap:7px; }
.twin-indicator:before { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; }
.twin-indicator[data-state="alarm"] { color:#ff9c9c; }
.twin-indicator[data-state="offline"] { color:#96a5b7; }
.twin-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; }
.twin-viewer { height:530px; background:radial-gradient(ellipse at 50% 45%,#183b62 0%,#0b1b2d 70%); }
.equipment-panel { border-left:1px solid #2a3c52; padding:24px 20px; background:#102034; }
.panel-eyebrow { font:8px Consolas,monospace; letter-spacing:.08em; color:#688cb5; }
.equipment-list { display:flex; flex-direction:column; gap:7px; margin-top:17px; }
.equipment-list button { display:flex; align-items:center; gap:10px; padding:11px 12px; text-align:left; border:1px solid #2b415e; border-radius:5px; background:transparent; color:#adbfda; font-size:11px; }
.equipment-list button>span { font:9px Consolas,monospace; color:#6e96c6; }
.equipment-list button>i { margin-left:auto; font-style:normal; font-size:15px; color:#6e96c6; }
.equipment-list button:hover { background:#1b3554; }
.equipment-list button[aria-pressed="true"] { color:#dcecff; border-color:#4b7cbd; background:#1a3a60; }
.equipment-detail { margin-top:26px; border-top:1px solid #2d425d; padding-top:22px; }
.equipment-detail>span { font:8px Consolas,monospace; color:#6fbad8; letter-spacing:.07em; }
.equipment-detail h3 { margin-top:8px; font-size:17px; letter-spacing:-.04em; }
.equipment-detail p { color:#8ba1bf; font-size:10px; line-height:1.9; margin-top:10px; }
.equipment-metrics { display:flex; gap:14px; margin-top:19px; }
.equipment-metrics>div { flex:1; }
.equipment-metrics>div>span { display:block; font-size:8px; color:#859dbb; }
.equipment-metrics strong { display:block; font-size:12px; margin-top:5px; color:#91dbd8; }
.equipment-metrics>div:last-child strong { font:23px/1.4 Consolas,monospace; color:#e3ecfa; }
.equipment-metrics small { font-size:11px; color:#6886ab; }
[data-status="alarm"] [data-field="status"] { color:#ffa1ae; }
[data-status="offline"] [data-field="status"] { color:#9da7b4; }
.panel-note { font-size:8px; color:#6c85a3; line-height:1.9; margin-top:19px; }
.twin-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 22px; border-top:1px solid #2b405b; background:#112339; }
.twin-states { display:flex; gap:7px; }
.twin-states button { background:#142b43; color:#a0b8d4; border:1px solid #304d6e; padding:8px 12px; font-size:10px; border-radius:5px; }
.twin-states button:hover { background:#244667; }
.twin-states button[aria-pressed="true"] { color:#d2e9ff; background:#285c9d; border-color:#5798e0; }
.twin-bottom p { color:#94adca; font-size:10px; }
.twin-capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:40px; }
.twin-capabilities article { border-top:1px solid #29425d; padding-top:22px; }
.twin-capabilities article>span { font:10px Consolas,monospace; color:#648dc0; }
.twin-capabilities h3 { font-size:19px; margin-top:12px; font-weight:550; }
.twin-capabilities p { font-size:12px; line-height:1.9; color:#819ab9; margin-top:12px; }
.twin-disclaimer { border-top:1px solid #1c3047; padding-top:22px; margin-top:33px; font-size:10px; line-height:1.9; color:#6983a3; }
.service-icon { stroke:#4c79b9; }
.tags span { background:#e3ebf6; color:#5675a2; }
.service-number,.service-note,.service-note>span { color:#6c84a6; }
.demo-section { background:#e7edf7; }
.product-card { background:#eaf0f9; border-color:#d2deef; }
.mobile-product { background:#edf1f8; }
.platform-tag,.free-tag { color:#526e9f; border-color:#c2d2e8; }
.product-button { background:#f4f7ff; border-color:#b5c9e5; color:#325b93; }
.product-button:hover,.manual-banner:hover { background:#e0eafd; }
.about-section { background:#e9eef6; border-color:#d8e2ef; }
.contact-section { background:radial-gradient(ellipse at 85% 50%,#1e4974,#102744 70%); }
.contact-section .eyebrow,.contact-section h2>span { color:#96cbff; }
.contact-section p,.contact-other,.contact-other button { color:#a5bad6; }
.contact-guide { background:#183454; border-color:#365578; }
.contact-guide ul,.contact-guide small { color:#adc2dc; }
.lime { background:#a9d6ff; color:#173756; }
.lime:hover { background:#c6e5ff; }
.contact-email { border-color:#5d7ca5; }
.contact-email:hover { color:#a9d6ff; }
footer { background:#f0f4fa; }
@media(min-width:1500px) { .hero-grid { padding-block:85px; } .hero-viewer { height:600px; } }
@media(max-width:1100px) {
  .hero-grid { width:calc(100% - 50px); }
  .hero h1 { font-size:37px; }
  .hero-viewer { height:500px; }
  .hero-description { font-size:12px; }
  .hero .button-row { flex-wrap:wrap; gap:14px; }
  .hero .eyebrow { font-size:8px; }
  .twin-grid { grid-template-columns:minmax(0,1fr) 225px; }
  .equipment-panel { padding:20px 16px; }
  .twin-heading h2 { font-size:36px; }
  .twin-bottom { flex-wrap:wrap; }
}
@media(max-width:800px) {
  nav { background:#0b1b2d; border-color:#2d4665; }
  .menu-toggle { border-color:#3b526f; }
  .hero-grid { grid-template-columns:1fr; padding-block:50px 20px; width:calc(100% - 40px); }
  .hero-copy { padding-left:0; }
  .hero h1 { font-size:46px; }
  .hero-description { font-size:14px; }
  .hero .eyebrow { font-size:9px; }
  .hero-foot { margin-top:28px; }
  .hero-viewer { margin:20px -20px 0; height:460px; }
  .twin-section { padding-block:65px 55px; }
  .twin-heading { display:block; }
  .twin-heading h2 { font-size:32px; }
  .twin-heading p:not(.eyebrow) { margin-top:23px; font-size:12px; }
  .twin-grid { grid-template-columns:1fr; }
  .twin-viewer { height:440px; }
  .equipment-panel { border-left:0; border-top:1px solid #2a3c52; display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
  .panel-eyebrow { grid-column:1/-1; }
  .equipment-detail { border:0; padding:0; margin-top:14px; }
  .equipment-list { margin-top:14px; }
  .panel-note { grid-column:1/-1; margin-top:15px; }
  .twin-capabilities { gap:22px; }
  .twin-capabilities h3 { font-size:16px; }
  .twin-capabilities p { font-size:11px; }
}
@media(max-width:560px) {
  .hero h1 { font-size:clamp(29px,8vw,41px); }
  .hero .eyebrow { font-size:7px; }
  .hero-description { font-size:12px; line-height:1.95; }
  .hero-description br:first-child { display:none; }
  .hero .button-row { gap:18px; }
  .hero .button { padding:12px 15px; font-size:11px; }
  .hero .text-link { font-size:10px; }
  .hero-foot { font-size:8px; }
  .hero-viewer { height:370px; margin-top:20px; }
  .scene-hud { top:16px; left:14px; right:14px; gap:13px; font-size:7px; }
  .scene-load-status { font-size:7px; max-width:155px; }
  .scene-coordinate { display:none; }
  .scene-controls { gap:5px; left:9px; right:9px; bottom:29px; }
  .scene-controls>div { padding:3px; }
  .scene-controls button { font-size:8px; padding:6px 7px; min-height:29px; }
  .scene-instruction { font-size:8px; }
  .twin-heading h2 { font-size:29px; }
  .twin-heading .eyebrow { font-size:8px; }
  .twin-heading p:not(.eyebrow) { font-size:11px; }
  .twin-topbar { padding:13px 14px; }
  .twin-topbar>div>span { display:none; }
  .twin-viewer { height:370px; }
  .equipment-panel { gap:0 14px; padding:20px 14px; }
  .equipment-list button { font-size:9px; gap:7px; padding:10px 8px; }
  .equipment-list button i { display:none; }
  .equipment-detail h3 { font-size:14px; }
  .equipment-detail>span { font-size:7px; }
  .equipment-detail p { font-size:9px; }
  .equipment-metrics { flex-wrap:wrap; gap:12px; margin-top:14px; }
  .equipment-metrics>div { flex-basis:100%; }
  .equipment-metrics strong { font-size:11px; }
  .equipment-metrics>div:last-child strong { font-size:20px; }
  .twin-bottom { padding:14px; gap:12px; }
  .twin-states { width:100%; gap:5px; }
  .twin-states button { flex:1; padding:9px 6px; font-size:9px; }
  .twin-bottom p { font-size:9px; }
  .twin-capabilities { grid-template-columns:1fr; gap:25px; margin-top:30px; }
  .twin-capabilities h3 { font-size:19px; }
  .twin-capabilities p { font-size:12px; }
  .twin-disclaimer { font-size:9px; }
}