
:root{
  --bg:#0b0f19;--bg-2:#0e1424;--card:#111827;--text:#e6edff;--muted:#9aa4bf;
  --neon:#ff2a6d;--cyan:#00d1ff;--glow:0 0 20px rgba(255,42,109,.45),0 0 40px rgba(255,42,109,.28);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 20% 0%,rgba(255,42,109,.12),transparent),radial-gradient(900px 600px at 80% 0%,rgba(0,209,255,.1),transparent),var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(11,15,25,.92),rgba(11,15,25,.6));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:36px;height:36px;filter:drop-shadow(0 0 8px rgba(255,42,109,.6))}
.brand strong{letter-spacing:.5px}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:999px;color:#d5dcff;border:1px solid rgba(255,255,255,.08);transition:transform .2s, box-shadow .2s, background .2s}
.menu a:hover{transform:translateY(-1px);box-shadow:var(--glow);background:rgba(255,42,109,.08)}
.menu a.active{background:linear-gradient(90deg,rgba(255,42,109,.2),rgba(0,209,255,.2));box-shadow:var(--glow)}
.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);cursor:pointer;transition:transform .15s, box-shadow .15s}
.hamburger:hover{transform:translateY(-1px);box-shadow:var(--glow)}
.hamburger span{position:relative;display:block;width:22px;height:2px;background:#e6edff;border-radius:2px;box-shadow:0 0 8px rgba(255,42,109,.5)}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#e6edff;border-radius:2px;transition:transform .2s, opacity .2s}
.hamburger span::before{top:-7px}.hamburger span::after{top:7px}
body.nav-open .hamburger span{background:transparent}
body.nav-open .hamburger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .hamburger span::after{transform:translateY(-7px) rotate(-45deg)}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,var(--neon),#f94184);color:white;box-shadow:var(--glow);border:none;cursor:pointer;font-weight:600;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:linear-gradient(90deg,#0ea5ea,#5eead4);box-shadow:0 0 20px rgba(14,165,234,.35)}
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading::after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.65);border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:100px 0}
.gradient-text{background:linear-gradient(90deg,#fff,#ffadc8,#b2f0ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%;animation:gradient-pan 8s linear infinite}
@keyframes gradient-pan{0%{background-position:0% 0%}100%{background-position:300% 0%}}
.lead{font-size:18px;color:var(--muted);margin-bottom:24px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(255,42,109,.1) inset;transform:translateY(6px);opacity:0;animation:rise .8s ease forwards .25s}
.stat:nth-child(2){animation-delay:.45s}.stat:nth-child(3){animation-delay:.65s}
.stat strong{font-size:28px;display:block}
.section{padding:80px 0;border-top:1px solid rgba(255,255,255,.06)}
.kblocks{display:grid;grid-template-columns:1fr;gap:18px}
.kblock{display:grid;grid-template-columns:.15fr 1fr;gap:18px;align-items:start;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:20px;border-radius:var(--radius);transition:transform .25s,box-shadow .25s}
.kblock:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.kblock .num{font-size:22px;color:#fff;background:linear-gradient(90deg,var(--neon),#ff7099);padding:10px 14px;border-radius:12px;box-shadow:var(--glow)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:20px;border-radius:var(--radius);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg), rgba(255,42,109,.5), rgba(0,209,255,.4), rgba(255,42,109,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;animation:border-rotate 12s linear infinite}
@keyframes border-rotate{to{--a:360deg}}
.quotes{min-height:60px;color:#c7d2fe;font-style:italic;transition:opacity .25s ease}
.quotes.fade{opacity:.2}
.footer{padding:28px 0;color:#9aa4bf;border-top:1px solid rgba(255,255,255,.06);margin-top:60px}
.hidden{display:none !important}
.page{display:none}
.page.active{display:block}
/* Services */
.dashboard{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:14px;border-radius:14px;transform:translateY(8px);opacity:0;animation:rise .7s ease forwards}
.kpi:nth-child(1){animation-delay:.1s}.kpi:nth-child(2){animation-delay:.2s}.kpi:nth-child(3){animation-delay:.3s}.kpi:nth-child(4){animation-delay:.4s}
canvas{width:100%;height:260px;background:#0f1426;border-radius:14px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 24px rgba(255,42,109,.12)}
.services-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.tier{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,rgba(255,42,109,.06),rgba(0,0,0,0));box-shadow:0 0 0 1px rgba(255,42,109,.12) inset;transform:translateY(10px);opacity:0;animation:rise .8s ease forwards .2s}
.tier:nth-child(2){animation-delay:.35s}.tier:nth-child(3){animation-delay:.5s}
/* Career */
.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.job{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;cursor:pointer;transition:transform .2s, box-shadow .2s}
.job:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100}
.modal{display:none;width:min(840px,92vw);max-height:85vh;overflow:auto;background:#0d1222;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;box-shadow:var(--glow)}
.modal[aria-hidden="false"], .modal:not([aria-hidden]){display:block}
.modal header{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:10px;margin-bottom:10px}
.modal .close{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 12px;color:#fff;cursor:pointer}
/* Contact */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* About */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.counter{padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;text-align:center;transform:translateY(12px);opacity:0;animation:rise .8s ease forwards .2s}
.counter:nth-child(2){animation-delay:.35s}.counter:nth-child(3){animation-delay:.5s}.counter:nth-child(4){animation-delay:.65s}
/* Login */
.login-wrap{display:grid;place-items:center;min-height:50vh}
.login-box{padding:26px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));text-align:center;max-width:520px;box-shadow:0 0 40px rgba(255,42,109,.15)}
.login-btn{font-size:16px;padding:12px 18px;margin-top:12px}
.small{color:var(--muted);font-size:14px}
.form{display:grid;gap:12px;margin-top:10px;text-align:left}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0b1120;color:#e6edff}
.input:focus{outline:none;border-color:#ff2a6d;box-shadow:0 0 0 3px rgba(255,42,109,.25)}
/* Utilities */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(0,209,255,.1),rgba(255,42,109,.1));border:1px solid rgba(255,255,255,.12)}
.hr{height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));margin:20px 0}
.scroll-reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease, transform .8s ease}
.scroll-reveal.show{opacity:1;transform:none}
@keyframes rise{to{transform:none;opacity:1}}
/* Background particle canvas */
.bg-canvas{position:absolute;inset:-20px -0 -0 -0;z-index:-1;opacity:.35;filter:blur(.2px)}
/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:#0f172a;border:1px solid rgba(255,255,255,.15);padding:12px 16px;border-radius:12px;box-shadow:var(--glow);opacity:0;transform:translateY(10px);animation:toastIn .35s ease forwards}
@keyframes toastIn{to{opacity:1;transform:none}}

/* Mobile nav */
@media(max-width:900px){
  .menu{position:absolute;top:64px;right:16px;left:16px;display:none;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:linear-gradient(180deg,rgba(14,20,36,.98),rgba(14,20,36,.9));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.45)}
  body.nav-open .menu{display:flex;animation:menuIn .18s ease}
  @keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .hamburger{display:inline-flex}
}

@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:26px}
  h1{font-size:clamp(26px,6vw,44px)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .dashboard{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .services-list{grid-template-columns:repeat(2,1fr)}
  .price{grid-template-columns:1fr}
  .jobs{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
}


/* --- Demo Dashboard (non-breaking styles) --- */
.demo-dashboard { padding-top: 24px; }
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.demo-card { padding: 16px; }
.demo-terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  height: 260px;
  overflow: auto;
  padding: 12px;
  line-height: 1.4;
}
.demo-terminal .line { white-space: pre-wrap; opacity: .95; }
.demo-terminal .time { opacity: .6; margin-right: 6px; }
.demo-terminal .agent { color: #8fd3ff; }
.demo-terminal .supplier { color: #a6e3a1; }

.demo-bars { display: flex; flex-direction: column; gap: 12px; }
.demo-bars .bar {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center;
  padding: 0 12px;
}
.demo-bars .bar .label { width: 110px; font-weight: 600; opacity: .9; }
.demo-bars .bar .value {
  margin-left: auto; z-index: 2; font-variant-numeric: tabular-nums; opacity: .9;
}
.demo-bars .bar .fill {
  position: absolute; left: 110px; top: 4px; bottom: 4px; width: 0%;
  background: linear-gradient(90deg, rgba(79,209,197,.35), rgba(79,209,253,.55));
  border-radius: 8px;
  transition: width 1.2s ease;
}

/* Canvas sizing: allow responsive downscale */
#demo-demand { width: 100%; height: 260px; display: block; }

@media (max-width: 980px) {
  .demo-grid { grid-template-columns: 1fr; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .demo-bars .bar .fill { transition: none; }
}
