:root {
  --bg-1: #05060a; /* near-black */
  --bg-2: #0b0f14; /* charcoal */
  --accent: #06b6d4; /* cyan-400 */
  --accent-2: #7c3aed; /* violet */
  --muted: #94a3b8; /* slate-400 */
  --card: rgba(255, 255, 255, 0.03);

  --chat--color--primary: #3b82f6; /* Tailwind blue-500 */
  --chat--color--primary-shade-50: #2563eb; /* Tailwind blue-600 */
  --chat--color--primary--shade-100: #1d4ed8; /* Tailwind blue-700 */
  --chat--color--secondary: #a855f7; /* Tailwind purple-500 */
  --chat--color-secondary-shade-50: #9333ea; /* Tailwind purple-600 */
  --chat--color-white: #ffffff;
  --chat--color-light: #e5e7eb; /* Tailwind gray-200 */
  --chat--color-light-shade-50: #d1d5db; /* Tailwind gray-300 */
  --chat--color-light-shade-100: #9ca3af; /* Tailwind gray-400 */
  --chat--color-medium: #4b5563; /* Tailwind gray-600 */
  --chat--color-dark: #0a0a0a; /* Matches current background in dark mode */
  --chat--color-disabled: #71717a; /* Tailwind gray-500 */
  --chat--color-typing: #52525b; /* Tailwind gray-600 */

  --chat--spacing: 1rem;
  --chat--border-radius: 0.5rem; /* Rounded-lg equivalent */
  --chat--transition-duration: 0.2s;

  --chat--window--width: 400px;
  --chat--window--height: 600px;

  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: #1f2937; /* Tailwind gray-800 */
  --chat--header--color: var(--chat--color-white);
  --chat--header--border-top: none;
  --chat--header--border-bottom: 1px solid var(--chat--color-medium);
  --chat--heading--font-size: 1.5em;
  --chat--subtitle--font-size: 0.9em;
  --chat--subtitle--line-height: 1.6;

  --chat--textarea--height: 50px;

  --chat--message--font-size: 0.95rem;
  --chat--message--padding: 0.75rem 1rem;
  --chat--message--border-radius: 0.75rem;
  --chat--message-line-height: 1.6;
  --chat--message--bot--background: #1f2937; /* Tailwind gray-800 */
  --chat--message--bot--color: var(--chat--color-light);
  --chat--message--bot--border: none;
  --chat--message--user--background: var(--chat--color--primary);
  --chat--message--user--color: var(--chat--color-white);
  --chat--message--user--border: none;
  --chat--message--pre--background: #374151; /* Tailwind gray-700 for code blocks */

  --chat--toggle--background: linear-gradient(
    to right,
    #3b82f6,
    #a855f7
  ); /* Blue to purple gradient */
  --chat--toggle--hover--background: linear-gradient(
    to right,
    #2563eb,
    #9333ea
  );
  --chat--toggle--active--background: linear-gradient(
    to right,
    #1d4ed8,
    #8b2cda
  );
  --chat--toggle--color: var(--chat--color-white);
  --chat--toggle--size: 56px;
}

/* Global body */
html,
body {
  height: 100%;
}
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: #e6eef8;
}

/* Containers */
.container {
  max-width: 1200px;
}

/* Hero */
#hero.hero-bg {
  background-image: linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.55),
      rgba(2, 6, 23, 0.65)
    ),
    url("https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=2920&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}
#hero .hero-panel {
  position: relative;
  z-index: 2;
}
#hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 10, 0.6),
    rgba(11, 15, 20, 0.7)
  );
}
#hero .hero-badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 22px rgba(6, 182, 212, 0.12);
}
#hero h1 {
  color: #fff;
  line-height: 1.02;
}
#hero p.lead {
  color: rgba(226, 238, 248, 0.9);
}

/* Primary CTA */
.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white;
  padding: 12px 24px;
  border-radius: 9999px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.12);
}
.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(226, 238, 248, 0.95);
  padding: 10px 20px;
  border-radius: 9999px;
}

/* Cards */
.card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.card .icon-wrap {
  background: linear-gradient(
    180deg,
    rgba(6, 182, 212, 0.06),
    rgba(124, 58, 237, 0.04)
  );
}

/* Accent circle used on service icon backgrounds */
.accent-circle {
  background: rgba(6, 182, 212, 0.07);
  color: var(--accent);
}
.accent-circle-hover:hover {
  background: rgba(6, 182, 212, 0.12);
}

/* Highlighted service */
.card-highlight {
  border: 1px solid rgba(6, 182, 212, 0.14);
  box-shadow: 0 18px 40px rgba(6, 182, 212, 0.05);
  transform: translateY(-6px);
}
.badge-small {
  display: inline-block;
  font-size: 0.75rem;
  padding: 4px 8px;
  background: rgba(6, 182, 212, 0.08);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 600;
}

/* AI section */
#ai-automation {
  background: linear-gradient(
    180deg,
    rgba(7, 19, 48, 0.95),
    rgba(2, 6, 23, 0.95)
  );
  color: #cfe7ff;
}
#ai-automation .feature {
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.03);
  color: #e6eef8;
}
/* Unified dark section backgrounds (leave #hero untouched) */
#about,
#services,
#ai-automation,
#contact,
footer {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

/* AI section: full viewport and prominent feature tiles */
#ai-automation {
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #cfe7ff;
}
#ai-automation .container {
  width: 100%;
  max-width: 1200px;
}
#ai-automation .feature {
  border-radius: 12px;
  padding: 36px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #e6eef8;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (max-width: 768px) {
  #ai-automation .feature {
    min-height: 220px;
  }
}

/* Footer tweaks */
footer {
  background: transparent;
  color: rgba(226, 238, 248, 0.65);
}

/* Responsive small tweaks */
@media (max-width: 768px) {
  #hero h1 {
    font-size: 2rem;
  }
}

/* Utility: subtle float animation */
.float-up {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.float-up.is-visible {
  transform: translateY(-6px);
}

/* Modern form styles */
.form-modern {
  background: linear-gradient(
    180deg,
    rgba(7, 19, 48, 0.95),
    rgba(2, 6, 23, 0.9)
  );
  padding: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.6);
}
.form-field {
  position: relative;
  padding-top: 0;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 14px 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6eef8;
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
}
.form-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(226, 238, 248, 0.9);
  font-size: 0.95rem;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  box-shadow: 0 8px 28px rgba(6, 182, 212, 0.14);
  border-color: rgba(6, 182, 212, 0.36);
}
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.privacy {
  font-size: 0.9rem;
  color: rgba(226, 238, 248, 0.9);
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.14);
  display: none;
}
.toast.show {
  display: block;
}
.btn-loading {
  opacity: 0.8;
  transform: scale(0.995);
}

/* Hero entrance animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  opacity: 0;

  /* Theme: lighter dark variant for better contrast (applies when body has .theme-dark) */
  .theme-dark {
    --bg-1: #0b1220; /* deep navy but lighter than near-black */
    --bg-2: #0f1724; /* slate-900 */
    --accent: #06b6d4; /* cyan-400 */
    --accent-2: #7c3aed; /* violet */
    --muted: #94a3b8; /* slate-400 */
    --card: rgba(255, 255, 255, 0.03);
    --text-color: #e6eef8; /* light text */
    --muted-text: #94a3b8;
  }
  will-change: opacity, transform;
  /* Slightly longer duration and a smoother easing curve for more natural motion */
  animation: fade-in-up 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.animate-delay-100 {
  animation-delay: 0.1s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
.animate-delay-300 {
  animation-delay: 0.3s;
}
.animate-delay-400 {
  animation-delay: 0.4s;
}
.animate-delay-500 {
  animation-delay: 0.5s;
}
.animate-delay-600 {
  animation-delay: 0.6s;
}
.animate-delay-700 {
  animation-delay: 0.7s;
}
.animate-delay-800 {
  animation-delay: 0.8s;
}
.animate-delay-900 {
  animation-delay: 0.9s;
}
.animate-delay-1000 {
  animation-delay: 1s;
}