:root{
  --bg:#06101d; --bg2:#0a1627; --panel:#0d1f35cc; --panel2:#102844; --text:#eaf4ff; --muted:#9fb8d5;
  --cyan:#20c7ff; --blue:#2787ff; --green:#34d399; --orange:#ffb84d; --border:#244766; --shadow:0 24px 80px rgba(0,0,0,.35);
  --max:1180px; --radius:22px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% -10%,#123d67 0,#06101d 36%,#030912 100%);color:var(--text);line-height:1.6} 
a{color:inherit;text-decoration:none}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.nav{position:sticky;top:0;z-index:50;background:rgba(3,9,18,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(60,125,180,.25)}.nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.08em}.brand-mark{font-size:34px;line-height:1}.brand-x{color:var(--blue)}.nav-links{display:flex;gap:18px;align-items:center;color:var(--muted);font-size:14px}.nav-links a:hover{color:var(--cyan)}.nav-actions{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:linear-gradient(180deg,#173657,#0c2037);padding:11px 16px;border-radius:999px;color:var(--text);font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.18)}.btn:hover{border-color:var(--cyan);transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101d;border:none}.btn.ghost{background:transparent}.hero{padding:86px 0 52px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr .96fr;gap:44px;align-items:center}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:800}.h1{font-size:clamp(44px,6vw,82px);line-height:.98;margin:16px 0 20px;letter-spacing:-.055em}.lead{font-size:clamp(18px,2vw,23px);color:#c9dbef;max-width:720px}.hero-card{position:relative;border:1px solid rgba(65,150,215,.28);background:linear-gradient(180deg,rgba(18,50,84,.72),rgba(4,13,25,.74));border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.hero-card img{display:block;width:100%;height:auto}.hero-card .label{position:absolute;left:18px;bottom:18px;border:1px solid rgba(32,199,255,.4);background:rgba(3,9,18,.7);padding:9px 12px;border-radius:14px;color:#cdefff;font-size:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.stat{border:1px solid rgba(65,150,215,.24);background:rgba(9,27,48,.62);border-radius:18px;padding:18px}.stat strong{display:block;font-size:28px}.stat span{color:var(--muted);font-size:13px}.section{padding:70px 0}.section.alt{background:linear-gradient(180deg,rgba(12,31,53,.28),rgba(7,17,30,.08));border-top:1px solid rgba(65,150,215,.12);border-bottom:1px solid rgba(65,150,215,.12)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.section h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0;letter-spacing:-.035em}.section p.sub{color:var(--muted);max-width:700px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid rgba(65,150,215,.23);background:linear-gradient(180deg,rgba(15,39,66,.72),rgba(7,19,34,.74));border-radius:20px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.18)}.card h3{margin:0 0 10px;font-size:20px}.card p,.card li{color:var(--muted)}.icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(32,199,255,.12);border:1px solid rgba(32,199,255,.25);color:var(--cyan);font-weight:900;margin-bottom:14px}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.mock-img{width:100%;border-radius:22px;border:1px solid rgba(65,150,215,.28);box-shadow:var(--shadow)}.code{background:#030912;border:1px solid rgba(65,150,215,.25);border-radius:18px;padding:20px;overflow:auto;color:#d8ecff}.code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}.pill-row{display:flex;flex-wrap:wrap;gap:10px}.pill{border:1px solid rgba(32,199,255,.28);background:rgba(32,199,255,.08);padding:8px 11px;border-radius:999px;color:#cfefff;font-size:13px}.timeline{display:grid;gap:12px}.step{display:grid;grid-template-columns:110px 1fr;gap:18px;border:1px solid rgba(65,150,215,.22);background:rgba(9,27,48,.54);border-radius:18px;padding:18px}.step b{color:var(--cyan)}.footer{padding:42px 0;border-top:1px solid rgba(65,150,215,.18);color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px}.footer a{display:block;color:var(--muted);margin:7px 0}.footer a:hover{color:var(--cyan)}.page-hero{padding:64px 0 36px}.page-hero h1{font-size:clamp(42px,5vw,68px);line-height:1;margin:10px 0}.breadcrumb{color:var(--muted);font-size:14px}.doc-layout{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}.sidebar{position:sticky;top:96px;border:1px solid rgba(65,150,215,.22);background:rgba(8,22,38,.75);border-radius:20px;padding:18px;max-height:calc(100vh - 118px);overflow:auto}.sidebar a{display:block;color:var(--muted);padding:8px 10px;border-radius:10px;font-size:14px}.sidebar a:hover{background:rgba(32,199,255,.1);color:var(--cyan)}.doc{border:1px solid rgba(65,150,215,.22);background:rgba(8,22,38,.68);border-radius:22px;padding:34px}.doc h2{margin-top:32px;border-top:1px solid rgba(65,150,215,.18);padding-top:28px}.doc h2:first-child{border-top:0;margin-top:0;padding-top:0}.doc h3{color:#dff5ff}.doc table{width:100%;border-collapse:collapse;margin:18px 0}.doc th,.doc td{border:1px solid rgba(65,150,215,.22);padding:10px;text-align:left}.doc th{background:rgba(32,199,255,.08)}.doc p,.doc li{color:#bdd0e7}.search{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(65,150,215,.3);background:#06101d;color:var(--text);margin-bottom:12px}.repo-banner{border:1px solid rgba(52,211,153,.25);background:linear-gradient(135deg,rgba(52,211,153,.12),rgba(32,199,255,.08));border-radius:20px;padding:22px;display:flex;justify-content:space-between;gap:20px;align-items:center}.notice{border-left:4px solid var(--orange);background:rgba(255,184,77,.09);padding:14px 16px;border-radius:12px;color:#ffe2b2}.mobile-menu{display:none}@media(max-width:900px){.nav-links{display:none}.mobile-menu{display:inline-flex}.hero-grid,.split,.doc-layout{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}.sidebar{position:relative;top:auto;max-height:none}.section-head{display:block}.hero{padding-top:46px}}@media(max-width:520px){.container{width:min(var(--max),calc(100% - 24px))}.stats{grid-template-columns:1fr}.step{grid-template-columns:1fr}.nav-actions .btn.ghost{display:none}.h1{font-size:42px}}

.viewer-panel{border:1px solid rgba(65,150,215,.28);background:linear-gradient(180deg,rgba(14,34,58,.88),rgba(5,13,24,.9));border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.viewer-top{height:42px;border-bottom:1px solid rgba(65,150,215,.2);display:flex;gap:8px;align-items:center;padding:0 16px}.viewer-top span{width:11px;height:11px;border-radius:50%;background:rgba(32,199,255,.45)}.viewer-body{display:grid;grid-template-columns:170px 1fr;min-height:330px}.viewer-body aside{border-right:1px solid rgba(65,150,215,.18);padding:18px;background:rgba(3,9,18,.35)}.viewer-body aside b{display:block;margin-bottom:12px;color:#dff5ff}.viewer-body aside a{display:block;color:var(--muted);font-size:13px;padding:8px 0}.viewer-body main{position:relative;overflow:hidden;background:radial-gradient(circle at 55% 38%,rgba(32,199,255,.22),transparent 31%),linear-gradient(135deg,rgba(39,135,255,.08),rgba(52,211,153,.08))}.scene-grid{position:absolute;inset:28px;border:1px solid rgba(32,199,255,.16);border-radius:18px;background-image:linear-gradient(rgba(32,199,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(32,199,255,.08) 1px,transparent 1px);background-size:26px 26px}.cloud{position:absolute;left:24px;top:42px;width:130px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(32,199,255,.8) 1px,transparent 2px);background-size:12px 12px;opacity:.85}.model-box{position:absolute;right:46px;top:54px;width:96px;height:108px;border:2px solid rgba(52,211,153,.75);transform:skewY(-12deg);box-shadow:20px 16px 0 rgba(52,211,153,.12)}.vector-line{position:absolute;left:50px;right:64px;bottom:72px;height:3px;background:linear-gradient(90deg,var(--orange),var(--cyan));transform:rotate(-8deg);border-radius:999px}.survey-pin{position:absolute;left:52%;top:47%;width:18px;height:18px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 8px rgba(255,184,77,.16)}@media(max-width:520px){.viewer-body{grid-template-columns:1fr}.viewer-body aside{border-right:0;border-bottom:1px solid rgba(65,150,215,.18)}}

/* Detailed OPX Viewer mockup */
.viewer-mockup{border:1px solid rgba(65,150,215,.32);background:linear-gradient(180deg,rgba(13,31,53,.96),rgba(4,12,23,.96));border-radius:24px;box-shadow:var(--shadow);overflow:hidden;min-height:460px}.mockup-titlebar{height:46px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid rgba(65,150,215,.2);background:rgba(3,9,18,.42)}.window-dots{display:flex;gap:7px}.window-dots span{width:11px;height:11px;border-radius:99px;background:rgba(32,199,255,.5)}.mockup-titlebar strong{font-size:14px}.mockup-titlebar small{margin-left:auto;color:var(--muted)}.mockup-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid rgba(65,150,215,.18);background:rgba(8,22,38,.56)}.mockup-toolbar button{border:1px solid rgba(65,150,215,.25);background:rgba(15,39,66,.75);color:#d8ecff;border-radius:10px;padding:8px 10px;font-weight:700;font-size:12px}.mockup-toolbar button.active{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101d;border:0}.mockup-status{margin-left:auto;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.mockup-status.ok{color:#baf7dc;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25)}.mockup-layout{display:grid;grid-template-columns:178px 1fr 168px;min-height:340px}.layer-tree,.inspector{padding:14px;background:rgba(3,9,18,.32)}.layer-tree{border-right:1px solid rgba(65,150,215,.18)}.inspector{border-left:1px solid rgba(65,150,215,.18)}.panel-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);font-weight:900;margin-bottom:10px}.layer-tree label{display:block;color:#cfe0f2;font-size:12px;padding:7px 0}.layer-tree input{accent-color:#20c7ff;margin-right:7px}.layer-tree hr{border:0;border-top:1px solid rgba(65,150,215,.18);margin:12px 0}.tree-card,.inspect-card{border:1px solid rgba(65,150,215,.2);border-radius:13px;padding:10px;background:rgba(15,39,66,.5);margin-bottom:9px}.tree-card b,.inspect-card b{display:block;font-size:12px}.tree-card span,.inspect-card span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.mockup-viewport{position:relative;overflow:hidden;background:radial-gradient(circle at 46% 35%,rgba(32,199,255,.18),transparent 28%),linear-gradient(135deg,rgba(39,135,255,.08),rgba(52,211,153,.08))}.viewport-hud{position:absolute;left:14px;right:14px;top:12px;z-index:2;display:flex;justify-content:space-between;color:#dff5ff;font-size:12px}.viewport-hud span{border:1px solid rgba(65,150,215,.2);background:rgba(3,9,18,.52);border-radius:999px;padding:6px 9px}.viewport-grid{position:absolute;inset:48px 20px 34px;border:1px solid rgba(32,199,255,.16);border-radius:20px;background-image:linear-gradient(rgba(32,199,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(32,199,255,.075) 1px,transparent 1px);background-size:24px 24px;transform:perspective(900px) rotateX(58deg) rotateZ(-18deg);transform-origin:50% 52%}.mock-cloud{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(32,199,255,.92) 1px,transparent 2px);background-size:11px 11px;filter:drop-shadow(0 0 12px rgba(32,199,255,.35))}.cloud-a{left:8%;top:15%;width:170px;height:110px}.cloud-b{right:12%;bottom:14%;width:120px;height:84px;opacity:.7}.mock-ifc{position:absolute;right:20%;top:20%;width:112px;height:96px;border:2px solid rgba(52,211,153,.85);background:rgba(52,211,153,.08);box-shadow:18px 16px 0 rgba(52,211,153,.12)}.mock-ifc i{position:absolute;background:rgba(52,211,153,.55)}.mock-ifc i:nth-child(1){left:25%;top:0;bottom:0;width:2px}.mock-ifc i:nth-child(2){right:25%;top:0;bottom:0;width:2px}.mock-ifc i:nth-child(3){left:0;right:0;top:48%;height:2px}.mock-road{position:absolute;left:6%;right:8%;bottom:31%;height:8px;background:linear-gradient(90deg,var(--orange),var(--cyan));border-radius:999px;transform:rotate(4deg)}.mock-parcel{position:absolute;border:2px solid rgba(255,184,77,.72);background:rgba(255,184,77,.07)}.parcel-a{left:18%;bottom:10%;width:140px;height:78px}.parcel-b{right:8%;top:8%;width:120px;height:74px}.mock-pin{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 8px rgba(255,184,77,.16);z-index:3}.mock-pin span{position:absolute;left:18px;top:-8px;white-space:nowrap;font-size:11px;color:#ffe4b6;background:rgba(3,9,18,.68);border-radius:8px;padding:3px 6px}.pin-a{left:38%;top:42%}.pin-b{right:30%;bottom:24%;background:var(--green);box-shadow:0 0 0 8px rgba(52,211,153,.14)}.scale-bar{position:absolute;right:18px;bottom:14px;border-top:3px solid #dff5ff;width:64px;text-align:center;color:#dff5ff;font-size:11px;padding-top:4px}.metric{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(65,150,215,.14);padding:9px 0;font-size:12px}.metric span{color:var(--muted)}.metric b{color:#eaf4ff}.mini-chart{height:72px;margin-top:14px;border:1px solid rgba(65,150,215,.18);border-radius:12px;padding:10px;display:flex;align-items:end;gap:8px;background:rgba(15,39,66,.38)}.mini-chart i{flex:1;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue))}.mockup-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid rgba(65,150,215,.18);color:var(--muted);font-size:11px;background:rgba(3,9,18,.4)}
@media(max-width:900px){.mockup-layout{grid-template-columns:1fr}.layer-tree,.inspector{border:0;border-bottom:1px solid rgba(65,150,215,.18)}.mockup-viewport{min-height:330px}.mockup-status{margin-left:0}.viewport-grid{inset:54px 20px 42px}}

/* OPX Project Viewer concept mockup refinement */
.viewer-mockup-pro{transform:translateZ(0)}
.pro-layout{grid-template-columns:220px minmax(340px,1fr) 210px;min-height:430px}.pro-tree{font-size:12px}.tree-group{border:1px solid rgba(65,150,215,.16);border-radius:14px;padding:9px 10px;margin-bottom:10px;background:rgba(15,39,66,.33)}.tree-group b{display:block;color:#eaf4ff;margin-bottom:5px;font-size:12px}.tree-group label{padding:4px 0}.pro-viewport{min-height:430px}.view-tabs{position:absolute;left:14px;top:52px;z-index:4;display:flex;gap:6px}.view-tabs span{font-size:11px;font-weight:800;color:#bed5ec;border:1px solid rgba(65,150,215,.24);background:rgba(3,9,18,.55);border-radius:999px;padding:5px 9px}.view-tabs span.active{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101d;border:0}.pro-scene{inset:86px 28px 44px;transform:perspective(980px) rotateX(60deg) rotateZ(-22deg)}.cloud-c{left:37%;top:44%;width:92px;height:58px;opacity:.62}.pro-building{right:18%;top:16%;width:118px;height:118px;transform:skewY(-10deg)}.pro-building em{position:absolute;left:22px;right:22px;bottom:-20px;height:20px;border:2px solid rgba(52,211,153,.55);border-top:0;background:rgba(52,211,153,.06)}.pro-road{left:3%;right:10%;bottom:28%;height:10px}.parcel-c{left:48%;bottom:2%;width:118px;height:62px;border-color:rgba(32,199,255,.62);background:rgba(32,199,255,.06)}.pin-c{right:21%;top:30%;background:var(--blue);box-shadow:0 0 0 8px rgba(39,135,255,.16)}.floating-card{position:absolute;z-index:5;left:18px;bottom:18px;border:1px solid rgba(52,211,153,.25);background:rgba(3,9,18,.68);border-radius:14px;padding:10px 12px;box-shadow:0 18px 40px rgba(0,0,0,.22)}.floating-card b{display:block;font-size:12px;color:#dff5ff}.floating-card span{display:block;font-size:11px;color:#baf7dc;margin-top:2px}.legend{margin-top:14px;display:grid;gap:7px}.legend span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px}.l-point{background:var(--cyan)}.l-gis{background:var(--orange)}.l-ifc{background:var(--green)}.l-survey{background:var(--blue)}
@media(max-width:1100px){.pro-layout{grid-template-columns:190px minmax(320px,1fr)}}@media(max-width:900px){.pro-layout{grid-template-columns:1fr}.pro-viewport{min-height:420px}.pro-inspector{border-top:1px solid rgba(65,150,215,.18)}}

.viewer-concept-main-image{display:block;width:100%;height:auto;object-fit:cover;background:#eef4ff}
@media(max-width:900px){.viewer-concept-main-image{margin-top:18px}}