:root {
  --ox-bg: #0b0715;
  --ox-surface: rgba(255,255,255,0.06);
  --ox-surface-2: rgba(255,255,255,0.09);
  --ox-border: rgba(255,255,255,0.12);
  --ox-text: #f3effa;
  --ox-muted: #c8bbda;
  --ox-primary: #8a2be2;
  --ox-primary-2: #c23bd4;
  --ox-secondary: #5a189a;
  --ox-accent: #d946ef;
  --ox-success: #22c55e;
  --ox-warn: #f59e0b;
  --ox-alert: #ef4444;
  --ox-shadow: 0 20px 60px rgba(10, 2, 25, 0.35);
  --ox-container: 1240px;
  --ox-maxcopy: 760px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ox-text);background:radial-gradient(circle at top left, rgba(138,43,226,.28), transparent 25%),radial-gradient(circle at top right, rgba(210,63,233,.16), transparent 20%),linear-gradient(180deg,#0a0714 0%,#12091f 28%,#0b0715 100%);overflow-x:hidden}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.ox-container{width:min(var(--ox-container), calc(100% - 32px));margin:0 auto}
.ox-section{padding:90px 0;position:relative}
.ox-topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:rgba(11,7,21,.72);border-bottom:1px solid rgba(255,255,255,.08)}
.ox-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.ox-brand{display:flex;align-items:center;gap:14px;min-width:290px}
.ox-brand-mark{width:220px;height:60px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden;box-shadow:var(--ox-shadow);padding:4px}
.ox-brand-mark img{width:100%;height:100%;object-fit:contain}
.ox-brand-text{display:none}
.ox-menu{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.ox-menu a{color:var(--ox-muted);font-size:14px;transition:color .25s ease}.ox-menu a:hover{color:#fff}
.ox-actions{display:flex;align-items:center;gap:12px}
.ox-btn,.ox-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:14px;font-weight:700;font-size:14px;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease}
.ox-btn{color:#fff;background:linear-gradient(135deg,var(--ox-secondary),var(--ox-primary-2));box-shadow:0 18px 34px rgba(138,43,226,.28);border:none;cursor:pointer}.ox-btn-secondary{border:1px solid var(--ox-border);background:rgba(255,255,255,.05);color:var(--ox-text)}
.ox-btn:hover,.ox-btn-secondary:hover{transform:translateY(-2px)}
.ox-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ox-border);background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
.ox-chip-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--ox-primary),var(--ox-accent));box-shadow:0 0 0 8px rgba(217,70,239,.09)}
.ox-hero{padding:72px 0 50px}
.ox-hero-grid,.ox-page-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:32px;align-items:center}
.ox-heading{font-size:clamp(42px, 7vw, 74px);line-height:.96;letter-spacing:-.045em;margin:22px 0 18px;max-width:11ch}.ox-heading .ox-gradient{background:linear-gradient(135deg,#fff 10%,#cf9aff 52%,#f0abfc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ox-body{color:var(--ox-muted);font-size:18px;line-height:1.75;max-width:var(--ox-maxcopy);margin-bottom:28px}.ox-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.ox-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px}
.ox-stat,.ox-solution,.ox-feature,.ox-industry,.ox-insight,.ox-contact-card,.ox-story-card,.ox-kpi{padding:22px;border-radius:22px;background:var(--ox-surface);border:1px solid var(--ox-border)}
.ox-stat strong{display:block;font-size:26px;margin-bottom:8px}.ox-stat span,.ox-subtitle,.ox-solution p,.ox-feature p,.ox-industry p,.ox-insight p,.ox-contact-card p,.ox-story-card p{color:var(--ox-muted);line-height:1.75}
.ox-panel,.ox-page-panel{position:relative;min-height:580px;border-radius:28px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:var(--ox-shadow);overflow:hidden}
.ox-panel::before,.ox-page-panel::before{content:'';position:absolute;inset:-20% auto auto -12%;width:240px;height:240px;background:radial-gradient(circle,rgba(194,59,212,.34),transparent 70%);pointer-events:none}
.ox-panel::after,.ox-page-panel::after{content:'';position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;background:radial-gradient(circle,rgba(90,24,154,.25),transparent 72%);border-radius:50%}
.ox-card,.ox-demo-card,.ox-db-card{border-radius:22px;border:1px solid rgba(255,255,255,.12);background:rgba(7,3,15,.58);padding:22px;backdrop-filter:blur(16px)}
.ox-panel-top,.ox-metric,.ox-mini-row,.ox-node,.ox-footer-row,.ox-progress-meta,.ox-demo-head,.ox-db-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ox-pill-list,.ox-partners,.ox-hero-cta,.ox-toolbar{display:flex;gap:8px;flex-wrap:wrap}
.ox-pill,.ox-badge,.ox-tool{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:#ecdaf5;font-size:12px;border:1px solid rgba(255,255,255,.1)}
.ox-dashboard,.ox-system-stack,.ox-mini-list,.ox-section-head,.ox-field,.ox-demo-wrap,.ox-ticket-list,.ox-progress-list{display:grid;gap:12px}
.ox-grid-2,.ox-demo-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.ox-grid-3,.ox-demo-kpis,.ox-db-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ox-h6,.ox-kicker,.ox-kpi .label{font-size:12px;text-transform:uppercase;letter-spacing:.12em}.ox-h6{color:#d9bef3}.ox-kicker,.ox-kpi .label{color:#f0abfc;font-weight:800}
.ox-mini-row,.ox-node,.ox-list li{color:#f4e8fc}.ox-mini-row span:last-child,.ox-link,.ox-kpi .trend{color:#f0abfc;font-weight:700}
.ox-logo-showcase,.ox-logo-panel{display:grid;place-items:center;min-height:170px;padding:12px}.ox-logo-showcase img,.ox-logo-panel img{width:min(100%,420px);filter:drop-shadow(0 14px 34px rgba(194,59,212,.2))}
.ox-section-head{max-width:820px;margin-bottom:42px}.ox-title{font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.03em;margin:0}
.ox-story{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ox-solutions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ox-opshub{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px}.ox-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ox-industries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ox-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ox-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(90,24,154,.24),rgba(217,70,239,.18));border:1px solid rgba(255,255,255,.12);margin-bottom:18px;font-size:22px}
.ox-list{display:grid;gap:10px;margin-top:18px;padding:0;list-style:none}.ox-list li{position:relative;padding-left:22px;line-height:1.6}.ox-list li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--ox-primary),var(--ox-accent))}
.ox-partner{min-width:170px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#f9f2ff;font-weight:700;letter-spacing:.02em;text-align:center}
.ox-contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.ox-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative}.ox-field.full{grid-column:1/-1}
label{font-size:13px;color:#eadbf5} input,textarea,select{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(9,4,18,.72);color:#fcf8ff;padding:15px 16px;border-radius:14px;outline:none;font:inherit;min-height:52px} textarea{min-height:140px;resize:vertical} input:focus,textarea:focus,select:focus{border-color:rgba(217,70,239,.54);box-shadow:0 0 0 4px rgba(217,70,239,.1)}
.ox-footer{padding:30px 0 60px;color:#d2bfdf;font-size:14px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.ox-appear{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}.ox-appear.is-visible{opacity:1;transform:translateY(0)}
/* OpsHub live dashboard */
.ox-page-hero{padding:88px 0 54px}.ox-breadcrumb{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);font-size:13px;color:var(--ox-muted)}
.ox-demo-shell{position:relative;padding:22px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12);box-shadow:var(--ox-shadow);overflow:hidden}.ox-demo-shell::before{content:'';position:absolute;left:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(138,43,226,.28), transparent 72%);pointer-events:none}.ox-demo-shell::after{content:'';position:absolute;right:-90px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(236,72,153,.16), transparent 72%);pointer-events:none}
.ox-db-top{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.ox-db-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.ox-kpi strong{display:block;font-size:30px;line-height:1;margin-bottom:6px}
.ox-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:end;min-height:240px}.ox-bar-col{display:grid;gap:8px;justify-items:center}.ox-bar{width:100%;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#cf9aff 0%,#8a2be2 45%,#ec4899 100%);box-shadow:0 10px 22px rgba(168,85,247,.18)}.ox-bar-label{font-size:11px;color:var(--ox-muted)}
.ox-spark{display:grid;grid-template-columns:repeat(24,1fr);gap:6px;align-items:end;height:84px;margin-top:14px}.ox-spark span{display:block;width:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(217,70,239,.95));border-radius:6px 6px 4px 4px;opacity:.92}
.ox-ticket{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.ox-ticket strong{display:block;font-size:14px;margin-bottom:4px}.ox-ticket span{font-size:12px;color:var(--ox-muted)}
.ox-status{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:800}.ox-status.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.2)}.ox-status.warn{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}.ox-status.alert{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.ox-track{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.ox-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#8a2be2,#d946ef)}
.ox-mini-matrix{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.ox-cell{aspect-ratio:1/1;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.ox-cell.h1{background:rgba(34,197,94,.18)} .ox-cell.h2{background:rgba(168,85,247,.22)} .ox-cell.h3{background:rgba(217,70,239,.28)} .ox-cell.h4{background:rgba(239,68,68,.22)}
.ox-map{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ox-node{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-size:14px;color:#f4e8fc;display:flex;justify-content:space-between;align-items:center}.ox-node span{font-size:12px;color:#d7b7f3;text-transform:uppercase;letter-spacing:.08em}
.ox-callout{padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(90,24,154,.22),rgba(217,70,239,.14));border:1px solid rgba(255,255,255,.12)}
@media (max-width:1100px){.ox-hero-grid,.ox-page-grid,.ox-opshub,.ox-contact-wrap,.ox-story,.ox-grid-2,.ox-demo-grid,.ox-db-top{grid-template-columns:1fr}.ox-solutions,.ox-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.ox-industries,.ox-stats,.ox-grid-3,.ox-db-kpis{grid-template-columns:1fr}}
@media (max-width:860px){.ox-brand-mark{width:180px;height:52px}}
@media (max-width:780px){.ox-menu{display:none}.ox-nav{align-items:flex-start}.ox-actions{width:100%;justify-content:flex-end}.ox-heading{max-width:none}.ox-solutions,.ox-feature-grid,.ox-insights,.ox-industries,.ox-form,.ox-grid-2,.ox-demo-grid,.ox-db-kpis,.ox-db-top{grid-template-columns:1fr}.ox-hero,.ox-page-hero{padding-top:44px}.ox-section{padding:68px 0}.ox-brand{min-width:unset}.ox-brand-mark{width:160px;height:48px}}