/* ── Google Fonts loaded via <link> in HTML ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Background grid ─────────────────────────────────────────────── */
.bg-grid-pattern {
  background-image:
    linear-gradient(rgba(29,184,164,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,184,164,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Navbar ──────────────────────────────────────────────────────── */
#navbar { background: transparent; }
#navbar.scrolled {
  background: rgba(10, 22, 40, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(26, 58, 92, 0.6);
  box-shadow: 0 1px 20px rgba(0,0,0,0.3);
}
#navbar.menu-open { background: rgba(10, 22, 40, 0.98); }
#mobileMenu { display: none; }
#mobileMenu.open { display: flex; }

/* Hamburger → X */
#navbar.menu-open .menu-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#navbar.menu-open .menu-bar:nth-child(2) { opacity: 0; }
#navbar.menu-open .menu-bar:nth-child(3) { width: 24px; transform: translateY(-8px) rotate(-45deg); }

/* ── Scroll reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* fade-up (default alias) */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

/* fade from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* fade from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* zoom in */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-zoom.visible { opacity: 1; transform: scale(1); }

/* stagger children — parent is the observer target */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.13s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.21s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.29s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.37s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.53s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.61s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 0.69s; opacity: 1; transform: translateY(0); }

/* stat counter glow pulse on reveal */
@keyframes statGlow {
  0%   { text-shadow: 0 0 0px rgba(29,184,164,0); }
  50%  { text-shadow: 0 0 18px rgba(29,184,164,0.6); }
  100% { text-shadow: 0 0 4px rgba(29,184,164,0.2); }
}
.stat-number.counted { animation: statGlow 0.9s ease forwards; }

/* pipeline connector line draw */
@keyframes lineDraw {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.pipeline-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s;
}
.pipeline-line.visible { transform: scaleX(1); }

/* ── Check icon ─────────────────────────────────────────────────── */
.check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(29,184,164,0.15);
}
.check-icon::after {
  content: '';
  display: block; width: 6px; height: 4px;
  border-left: 1.5px solid #1DB8A4; border-bottom: 1.5px solid #1DB8A4;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

/* ── Screenshot wrapper ─────────────────────────────────────────── */
.screenshot-wrap {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.screenshot-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 48px rgba(29,184,164,0.08);
}

/* Fixed-height image frame — all screenshots render at the same height */
.screenshot-frame {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  background: #0D2B4E;
}
.screenshot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Full-width screenshot gets more vertical room */
.screenshot-full .screenshot-frame {
  height: 480px;
}

/* ── Feature + team card hover ──────────────────────────────────── */
.feature-card:hover,
.team-card:hover {
  box-shadow: 0 8px 40px rgba(29,184,164,0.07);
}

/* ── Agent card hover lift ───────────────────────────────────────── */
.agent-card { transition: transform 0.3s ease; }
.agent-card:hover { transform: translateY(-5px); }

/* ── Autofill fix ────────────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0A1628 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #ffffff;
}

/* ── Select arrow ────────────────────────────────────────────────── */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231DB8A4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
select option { background: #0D2B4E; color: #ffffff; }

/* ── Form messages ───────────────────────────────────────────────── */
#formMsg.success {
  background: rgba(29,184,164,0.10);
  border: 1px solid rgba(29,184,164,0.35);
  color: #1DB8A4;
}
#formMsg.error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}
#submitBtn:disabled { opacity: 0.65; cursor: not-allowed; }

/* ── Lightbox ────────────────────────────────────────────────────── */
#lightbox { animation: fadeIn 0.2s ease; }
#lightbox img { box-shadow: 0 24px 80px rgba(0,0,0,0.6); }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #1A3A5C; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1DB8A4; }

/* ── Focus ring ─────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid #1DB8A4; outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up, .reveal-left, .reveal-right, .reveal-zoom,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .pipeline-line { transform: scaleX(1); transition: none; }
  .animate-flame, .animate-fade-up, .animate-fade-in { animation: none !important; opacity: 1 !important; }
  .animate-bounce { animation: none; }
  .agent-card, .screenshot-wrap { transition: none; }
}

@media (max-width: 640px) {
  h1 { word-break: break-word; }
}