:root.fx-css { --fx-bg: radial-gradient(1000px 600px at 70% 20%, #0d2147 0%, #060b18 55%, #020409 100%); --fx-accent: #3aa0ff; --fx-accent2: #c7d1e0; --fx-glow: rgba(47,139,255,.5); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.fx-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-content: center; gap: 18px; justify-items: center; background: var(--fx-bg); transition: opacity .6s ease, visibility .6s; }
.fx-loader.fx-gone { opacity: 0; visibility: hidden; }
.fx-loader-mark { width: 74px; height: 74px; position: relative; perspective: 400px; }
.fx-loader-mark span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--fx-accent); border-right-color: var(--fx-accent2); animation: fxspin 1.2s linear infinite; }
.fx-loader-mark span:nth-child(2) { inset: 10px; animation-duration: 1.6s; animation-direction: reverse; transform: rotateX(60deg); }
.fx-loader-mark span:nth-child(3) { inset: 22px; animation-duration: .9s; transform: rotateY(60deg); }
.fx-loader-name { font: 600 13px/1 system-ui, -apple-system, Segoe UI, sans-serif; letter-spacing: .32em; color: var(--fx-accent2); }
@keyframes fxspin { to { rotate: 360deg; } }
body.fx-ready { animation: fxenter .5s ease both; }
body.fx-leave { opacity: 0; transform: translateY(-6px) scale(.995); transition: opacity .22s ease, transform .22s ease; }
@keyframes fxenter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms); }
.fx-rv.fx-in { opacity: 1; transform: none; }
.fx-tilt { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .25s ease, box-shadow .3s ease; transform-style: preserve-3d; position: relative; }
.fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(500px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%); opacity: 0; transition: opacity .3s; }
.fx-tilt:hover::after { opacity: 1; }
.fx-tilt:hover { box-shadow: 0 24px 60px -24px var(--fx-glow); }
.fx-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .25s ease; }
.fx-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.fx-btn:hover::before { transform: translateX(120%); }
.fx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--fx-glow); }
.fx-hero { position: relative; overflow: hidden; isolation: isolate; }
.fx-hero > * { position: relative; z-index: 2; }
.fx-hero > .fx-particles, .fx-hero > .fx-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-hero > .fx-3d { opacity: 0; transition: opacity 1.2s ease; }
.fx-hero > .fx-3d.fx-3d-on { opacity: 1; }
.fx-hero > .fx-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 899px) { .fx-hero > .fx-3d { opacity: .0; } .fx-hero > .fx-3d.fx-3d-on { opacity: .35; } }
.fx-reduce *, .fx-reduce *::before, .fx-reduce *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { .fx-rv { opacity: 1; transform: none; } .fx-particles, .fx-3d { display: none; } }

.fx-css .fx-hero { background-image: linear-gradient(rgba(58,160,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(58,160,255,.06) 1px, transparent 1px), radial-gradient(900px 500px at 80% 20%, rgba(47,139,255,.22), transparent 60%); background-size: 42px 42px, 42px 42px, auto; }
.fx-css .card { position: relative; border: 1px solid rgba(120,160,220,.25); }
.fx-css .card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; background: linear-gradient(#3aa0ff,#3aa0ff) top left / 14px 2px no-repeat, linear-gradient(#3aa0ff,#3aa0ff) top left / 2px 14px no-repeat, linear-gradient(#3aa0ff,#3aa0ff) bottom right / 14px 2px no-repeat, linear-gradient(#3aa0ff,#3aa0ff) bottom right / 2px 14px no-repeat; opacity: .8; }
/* Command center (homepage) */
.cc { padding: 56px 0; background: radial-gradient(900px 500px at 70% 0%, #0f2a5c, #050a16 70%); color: #dfe7f5; }
.cc .cc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.cc h2 { color: #fff; margin: 0 0 6px; } .cc .cc-sub { color: #93a6c4; margin: 0 0 22px; font-size: 14px; }
.cc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 860px) { .cc-grid { grid-template-columns: 1fr; } }
.cc-panel { background: rgba(10,20,40,.75); border: 1px solid rgba(58,160,255,.28); border-radius: 14px; padding: 14px; box-shadow: inset 0 0 40px rgba(47,139,255,.08); }
.cc-panel h3 { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; color: #7fbfff; margin: 0 0 12px; display: flex; justify-content: space-between; }
.cc-cams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-cam { position: relative; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #10203d, #070d1a); border: 1px solid rgba(120,170,240,.2); }
.cc-cam::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.cc-cam::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(58,160,255,.18), transparent); animation: ccscan 3.2s linear infinite; }
.cc-cam i { position: absolute; width: 46%; height: 60%; left: 27%; top: 22%; border: 1px dashed rgba(120,190,255,.5); border-radius: 4px; animation: cctrack 6s ease-in-out infinite; }
.cc-cam b, .cc-cam em { position: absolute; font: 600 10px/1 ui-monospace, Menlo, monospace; color: #cfe3ff; z-index: 2; } .cc-cam b { left: 8px; top: 8px; } .cc-cam em { right: 8px; bottom: 8px; font-style: normal; color: #7fbfff; }
.cc-cam .rec { position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; animation: ccblink 1.2s steps(2) infinite; z-index: 2; }
@keyframes ccscan { from { top: -30%; } to { top: 100%; } } @keyframes ccblink { 50% { opacity: 0; } }
@keyframes cctrack { 0%,100% { translate: -14% 4%; } 50% { translate: 14% -6%; } }
.cc-map svg { width: 100%; height: auto; display: block; }
.cc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.cc-stats div { background: rgba(58,160,255,.07); border: 1px solid rgba(58,160,255,.2); border-radius: 10px; padding: 10px; text-align: center; }
.cc-stats strong { display: block; font-size: 22px; color: #fff; } .cc-stats span { font-size: 11px; color: #93a6c4; letter-spacing: .08em; text-transform: uppercase; }
.cc-note { font-size: 11px; color: #7186a6; margin-top: 12px; }
.cc-cta { display: inline-block; margin-top: 18px; padding: 12px 22px; border-radius: 10px; background: linear-gradient(135deg,#1f6fe0,#3aa0ff); color: #fff; font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .cc-cam::after, .cc-cam i, .cc-cam .rec { animation: none; } }

/* v2 page experiences */
.sxq-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; } @media (max-width: 860px) { .sxq-grid { grid-template-columns: 1fr; } }
.sxq-svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 480px) { .sxq-svc { grid-template-columns: 1fr; } }
.sxq-opt { text-align: left; padding: 12px; border-radius: 10px; border: 1px solid rgba(58,160,255,.3); background: rgba(58,160,255,.06); color: #dfe7f5; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.sxq-opt b { display: block; color: #fff; } .sxq-opt span { font-size: 12px; color: #93a6c4; }
.sxq-opt.on, .sxq-opt:hover { background: rgba(58,160,255,.2); border-color: #3aa0ff; transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(47,139,255,.8); }
.sxq-lab { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 10px 0; font-size: 13px; color: #b8c6dc; } .sxq-lab input { grid-column: 1 / -1; accent-color: #3aa0ff; } .sxq-lab output { color: #fff; font-weight: 800; }
.sxq-out { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sxq-gauge { position: relative; width: 200px; height: 200px; margin: 8px 0; }
.sxq-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#3aa0ff var(--p, 10%), rgba(58,160,255,.12) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); transition: background .6s; animation: sxqspin 12s linear infinite; }
@keyframes sxqspin { to { rotate: 360deg; } }
.sxq-num { position: absolute; inset: 0; display: grid; place-content: center; } .sxq-num small, .sxq-num span { color: #93a6c4; font-size: 12px; } .sxq-num strong { color: #fff; font-size: 30px; }
.sxq-range { color: #dfe7f5; font-size: 14px; margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .sxq-ring { animation: none; } }