/* Anivo overhaul: cybernetic Discord command center */
:root {
  --cyber-bg: #02040a;
  --cyber-panel: rgba(5, 12, 24, 0.86);
  --cyber-line: rgba(98, 255, 210, 0.22);
  --cyber-green: #62ffd2;
  --cyber-lime: #d7ff65;
  --cyber-violet: #8b5cf6;
  --cyber-red: #ff4d6d;
}

body {
  background:
    linear-gradient(90deg, rgba(98,255,210,0.035) 1px, transparent 1px),
    linear-gradient(rgba(98,255,210,0.035) 1px, transparent 1px),
    radial-gradient(circle at 70% 8%, rgba(139, 92, 246, 0.28), transparent 26rem),
    radial-gradient(circle at 20% 78%, rgba(98, 255, 210, 0.16), transparent 22rem),
    var(--cyber-bg);
  background-size: 46px 46px, 46px 46px, auto, auto, auto;
}

.navbar {
  top: 0;
  left: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--cyber-line);
  border-radius: 0;
  background: rgba(2, 4, 10, 0.86);
  box-shadow: 0 0 44px rgba(98, 255, 210, 0.08);
  transform: none;
  backdrop-filter: blur(16px);
}

.nav-logo,
.logo-text {
  color: var(--cyber-green);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .container {
  min-height: 100vh;
  align-items: center;
  padding-top: 8rem;
}

.hero-content {
  position: relative;
  padding-left: clamp(0rem, 3vw, 2rem);
  border-left: 2px solid var(--cyber-green);
}

.hero-badge {
  border: 1px solid var(--cyber-line);
  border-radius: 0;
  background: rgba(98, 255, 210, 0.08);
  color: var(--cyber-lime);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-title {
  color: #f8fffb;
  font-family: var(--font-mono);
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(98, 255, 210, 0.18);
}

.gradient-text {
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-lime), #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-description {
  max-width: 680px;
  color: rgba(229, 255, 248, 0.72);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.btn {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-primary {
  color: #00110c;
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-lime));
  box-shadow: 0 0 30px rgba(98, 255, 210, 0.22);
}

.btn-secondary,
.category-btn,
.demo-tab {
  border: 1px solid var(--cyber-line);
  color: var(--cyber-green);
  background: rgba(98,255,210,0.04);
}

.chat-window {
  border: 1px solid var(--cyber-line);
  border-radius: 0;
  background: var(--cyber-panel);
  box-shadow: 0 0 0 1px rgba(98,255,210,0.05), 0 30px 100px rgba(0,0,0,0.48);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}

.feature-card,
.hosting-card,
.command-panel,
.demo-container {
  border: 1px solid rgba(98, 255, 210, 0.18);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(98,255,210,0.06), rgba(139,92,246,0.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 24px 80px rgba(0,0,0,0.34);
}

.feature-card:hover,
.hosting-card:hover {
  border-color: var(--cyber-green);
  transform: translate(-4px, -6px);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cyber-lime);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .navbar { top: 0; width: 100%; border-radius: 0; }
  .hero .container { padding-top: 7rem; }
  .hero-content { border-left: 0; }
  .chat-window { clip-path: none; }
}

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