/* ============================================================
   Virtual Employees AI — Design System
   Dark tech / neon blue / glass / spectacular
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #04060e;
  --bg-2:      #070b1a;
  --panel:     rgba(16, 24, 48, 0.55);
  --panel-2:   rgba(12, 18, 38, 0.78);
  --glass-brd: rgba(120, 165, 255, 0.16);
  --glass-brd-strong: rgba(140, 185, 255, 0.34);

  /* Text */
  --text:      #eaf0ff;
  --text-dim:  #93a0c4;
  --text-mute: #5e6b8e;

  /* Accent — neon blue */
  --acc:       #2f7bff;
  --acc-2:     #59b6ff;
  --acc-3:     #8fd4ff;
  --acc-deep:  #1746c8;
  --glow:      rgba(47, 123, 255, 0.55);
  --glow-soft: rgba(47, 123, 255, 0.22);

  /* Fonts */
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--acc); color: #fff; }

/* ----- Ambient background layers ----- */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-grad {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(55% 45% at 72% 8%, rgba(47,123,255,0.16), transparent 60%),
    radial-gradient(50% 50% at 10% 22%, rgba(23,70,200,0.12), transparent 60%);
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
}
.bg-blob.b1 { width: 540px; height: 540px; left: 55%; top: -8%;
  background: radial-gradient(circle, var(--acc), transparent 65%);
  animation: drift1 22s ease-in-out infinite; }
.bg-blob.b2 { width: 460px; height: 460px; left: -6%; top: 38%;
  background: radial-gradient(circle, var(--acc-deep), transparent 65%);
  animation: drift2 28s ease-in-out infinite; }
.bg-blob.b3 { width: 520px; height: 520px; left: 30%; top: 64%;
  background: radial-gradient(circle, var(--acc-2), transparent 66%);
  opacity: .32; animation: drift3 34s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate(70px, -40px) scale(1.08); } }
@keyframes drift3 { 50% { transform: translate(-50px, -60px) scale(1.16); } }

.bg-aurora {
  position: absolute; inset: -35%;
  background:
    radial-gradient(38% 50% at 24% 26%, rgba(47,123,255,0.26), transparent 60%),
    radial-gradient(42% 46% at 80% 16%, rgba(89,182,255,0.18), transparent 62%),
    radial-gradient(46% 52% at 62% 96%, rgba(23,70,200,0.22), transparent 60%);
  filter: blur(30px);
  animation: auroraMove 24s ease-in-out infinite alternate;
}
@keyframes auroraMove {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)  scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0)   rotate(7deg)  scale(1.16); }
  100% { transform: translate3d(-2%, 4%, 0)  rotate(-5deg) scale(1.1); }
}
.bg-noise {
  position: absolute; inset: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Matrix blue code rain */
.matrix-rain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .42; mix-blend-mode: screen;
  mask-image: radial-gradient(128% 92% at 50% 22%, transparent 16%, #000 70%);
  -webkit-mask-image: radial-gradient(128% 92% at 50% 22%, transparent 16%, #000 70%);
}

/* Glitch effects */
@media (prefers-reduced-motion: no-preference) {
  .glitch-soft { animation: glitchSlice 8s steps(1, end) infinite; }
  .glitch-rgb { animation: glitchRgb 6.5s steps(1, end) infinite; }
}
@keyframes glitchSlice {
  0%, 94%, 100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  94.5% { transform: translate(-3px,0); clip-path: inset(6% 0 80% 0); }
  95%   { transform: translate(4px,0);  clip-path: inset(54% 0 20% 0); }
  95.6% { transform: translate(-2px,0); clip-path: inset(34% 0 42% 0); }
  96.1% { transform: translate(2px,0);  clip-path: inset(74% 0 6% 0); }
  96.6% { transform: translate(0,0);    clip-path: inset(0 0 0 0); }
}
@keyframes glitchRgb {
  0%, 90%, 100% { text-shadow: none; opacity: 1; }
  91% { text-shadow: -2px 0 var(--acc-2), 2px 0 var(--acc-3); opacity: .8; }
  92% { text-shadow: 2px 0 var(--acc-3), -2px 0 var(--acc-2); }
  93% { text-shadow: none; opacity: 1; }
}

/* ----- Layout ----- */
.shell { position: relative; z-index: 1; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--acc-2), var(--acc));
  box-shadow: 0 0 0 1px rgba(120,165,255,.4), 0 14px 36px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(140,185,255,.6), 0 20px 48px -10px var(--glow); }
.btn-ghost {
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border-color: var(--glass-brd);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--glass-brd-strong); background: rgba(255,255,255,0.06); transform: translateY(-2px); }

/* ----- Eyebrow / labels ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acc-2);
  padding: 7px 13px; border-radius: 999px;
  background: rgba(47,123,255,0.08);
  border: 1px solid rgba(47,123,255,0.22);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc-2);
  box-shadow: 0 0 10px 2px var(--acc-2);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--acc-2);
}
.kicker::before { content: "[ "; color: var(--text-mute); }
.kicker::after { content: " ]"; color: var(--text-mute); }

/* ----- Glass card ----- */
.glass {
  background: var(--panel);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ----- Scroll reveal ----- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

.gradient-text {
  background: linear-gradient(110deg, var(--acc-3), var(--acc), var(--acc-2), var(--acc-3));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 220% 0; } }