/* XIVG Custom Styles */

/* Grid background pattern */
.bg-grid {
  background-image: 
    linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Terminal styling */
.terminal {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
}
.terminal-header {
  background: #1a1a1a;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.terminal-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.terminal-body {
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #a3a3a3;
}
.terminal-body .prompt { color: #10b981; }
.terminal-body .cmd { color: #e5e5e5; }
.terminal-body .output { color: #737373; }
.terminal-body .success { color: #10b981; }
.terminal-body .highlight { color: #34d399; }

/* Accent glow */
.glow-sm { text-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
.border-glow { box-shadow: 0 0 20px rgba(16, 185, 129, 0.08); }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 500px; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* Mobile menu */
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 300px; opacity: 1; }

/* Pricing card hover */
.pricing-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(16, 185, 129, 0.1); }

/* Pulse animation for CTA */
@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
.cta-pulse { animation: subtle-pulse 3s infinite; }

/* Step connector line */
.step-connector { position: relative; }
.step-connector::after {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(100% + 8px);
  width: calc(100% - 48px);
  height: 1px;
  background: linear-gradient(90deg, #10b981, transparent);
}

/* Form focus states */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}