:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #050608;
}

body {
  background: #050608;
  color: #e8ecf1;
  font-family: var(--font-sans);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

.font-mono {
  font-family: var(--font-mono);
}

::selection {
  background: rgba(79, 227, 255, 0.28);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #050608;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(#1b6b7a, #3d7bff);
  border-radius: 8px;
  border: 2px solid #050608;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #4fe3ff;
  outline-offset: 3px;
  border-radius: 4px;
}

.text-balance {
  text-wrap: balance;
}

.container-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.section-pad {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #4fe3ff;
}

.heading-glow {
  text-shadow: 0 0 40px rgba(79, 227, 255, 0.18);
}

.grid-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

.radial-fade {
  background: radial-gradient(circle at center, rgba(79, 227, 255, 0.12) 0%, transparent 70%);
}

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow-drifting glowing color auras — large, heavily blurred radial-gradient
   blobs that add depth and color behind the particle network. Screen blend
   keeps them additive-only so they never muddy text contrast. */
.ambient-aura {
  position: fixed;
  z-index: 44;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  filter: blur(100px);
  will-change: transform;
}

.ambient-aura-1 {
  top: -14vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(79, 227, 255, 0.55) 0%, rgba(79, 227, 255, 0) 70%);
  animation: auraDrift1 32s ease-in-out infinite alternate;
}

.ambient-aura-2 {
  bottom: -18vw;
  right: -12vw;
  background: radial-gradient(circle, rgba(139, 107, 255, 0.5) 0%, rgba(139, 107, 255, 0) 70%);
  animation: auraDrift2 38s ease-in-out infinite alternate;
}

.ambient-aura-3 {
  top: 38vh;
  left: 50vw;
  background: radial-gradient(circle, rgba(61, 123, 255, 0.45) 0%, rgba(61, 123, 255, 0) 70%);
  animation: auraDrift3 26s ease-in-out infinite alternate;
}

@keyframes auraDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, 8vh) scale(1.15); }
}

@keyframes auraDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-7vw, -6vh) scale(1.12); }
}

@keyframes auraDrift3 {
  0% { transform: translate(-4vw, 0) scale(0.95); }
  100% { transform: translate(4vw, 5vh) scale(1.1); }
}

@media (max-width: 768px) {
  .ambient-aura {
    width: 90vw;
    height: 90vw;
    opacity: 0.35;
    filter: blur(70px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-aura {
    animation: none !important;
  }
}

/* Ambient particle-network background — paints above normal section content
   (any element with an explicit z-index beats z-index:auto siblings) but
   below the noise overlay / nav, using a screen blend so it only brightens,
   never reduces text contrast. The hero owns its own 3D scene, so it gets a
   higher explicit z-index (see #home below) to stay clear of this layer. */
.ambient-network-canvas {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .ambient-network-canvas {
    opacity: 0.45;
  }
}

#home {
  position: relative;
  z-index: 50;
}

.glass-panel {
  background: rgba(17, 19, 24, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-glow {
  position: relative;
}
.card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(79, 227, 255, 0.5), rgba(139, 107, 255, 0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-glow:hover::before {
  opacity: 1;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tracking-widest2 {
  letter-spacing: 0.28em;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* ---------- Nav ---------- */
.nav-shell {
  transition: padding 0.5s ease;
}
.nav-inner {
  transition: padding 0.5s ease;
}

/* ---------- Custom cursor ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 90;
  border-radius: 999px;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #4fe3ff;
  box-shadow: 0 0 10px 2px rgba(79, 227, 255, 0.8);
  transform: translate3d(-50%, -50%, 0);
}
.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translate3d(-50%, -50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cursor-ring.active {
  width: 56px;
  height: 56px;
  border-color: rgba(79, 227, 255, 0.7);
  background: rgba(79, 227, 255, 0.05);
  backdrop-filter: blur(2px);
}
.cursor-ring span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #4fe3ff;
}
@media (hover: hover) and (pointer: fine) {
  body.has-fine-pointer {
    cursor: none;
  }
}

/* ---------- Magnetic buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  transition: transform 0.15s ease-out, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  border: none;
}
.btn-lg { padding: 1rem 2rem; font-size: 0.75rem; }
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.625rem; }
.btn-solid { background: #4fe3ff; color: #050608; }
.btn-solid:hover { background: #8ff1ff; }
.btn-outline { background: transparent; color: #e8ecf1; border: 1px solid rgba(255,255,255,0.2); }
.btn-outline:hover { border-color: rgba(79,227,255,0.6); color: #4fe3ff; }

/* ---------- Animations ---------- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 28s linear infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
.animate-scan { animation: scan 3s linear infinite; }

@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.animate-pulse-soft { animation: pulse-soft 1.6s ease-in-out infinite; }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0px rgba(79,227,255,0); }
  50% { box-shadow: 0 0 12px rgba(79,227,255,0.6); }
}
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Section-specific helpers ---------- */
#ai-core-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#ai-core-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.hero-scrim {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  height: 560px;
  width: min(980px, 92vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(5, 6, 8, 0.55);
  filter: blur(60px);
  pointer-events: none;
}

.tab-btn {
  position: relative;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #5b6472;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}
.tab-btn:hover { color: #9aa4b2; }
.tab-btn.active { color: #4fe3ff; }
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: #4fe3ff;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.pipeline-item.done .pipeline-badge { border-color: rgba(79,227,255,0.5); background: rgba(79,227,255,0.15); color: #4fe3ff; }
.pipeline-item.active .pipeline-badge { border-color: #4fe3ff; background: rgba(79,227,255,0.25); color: #4fe3ff; }
.pipeline-item .pipeline-badge { border: 1px solid rgba(255,255,255,0.15); color: #5b6472; }
.pipeline-item.pending .pipeline-label { color: #5b6472; }

#agent-terminal {
  scrollbar-width: none;
}
#agent-terminal::-webkit-scrollbar { display: none; }

.workflow-node {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(20,23,29,0.4);
  color: #9aa4b2;
  transition: all 0.5s ease;
}
.workflow-node.active {
  border-color: #4fe3ff;
  background: rgba(79,227,255,0.15);
  color: #4fe3ff;
  box-shadow: 0 0 20px rgba(79,227,255,0.25);
}

.project-card:hover .project-card-bg { transform: scale(1.08); opacity: 0.75; }
.project-card-bg { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease; opacity: 0.5; }
.project-card:hover .project-automation { opacity: 1; max-height: 100px; margin-top: 12px; }
.project-automation { opacity: 0; max-height: 0; overflow: hidden; transition: all 0.35s ease; }
.project-card:hover .project-tag { border-color: rgba(79,227,255,0.3); color: #4fe3ff; }

.evolution-stage { opacity: 0.25; transform: scale(0.92); transition: opacity 0.4s ease, transform 0.4s ease; }
.evolution-stage.lit { opacity: 1; transform: scale(1); }

.process-line-fill {
  transition: height 0.1s linear;
}