/* Shared styles for every page — extracted from index.html so all pages stay in sync. */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: #0B1020;
  color: #F5F7FB;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk', sans-serif; }

/* ── Hero gradient ── */
.hero-bg {
  background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(59,110,246,0.18) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 20% 80%, rgba(106,160,255,0.08) 0%, transparent 60%),
              #0B1020;
}

/* ── Starfield ── */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.star {
  position: absolute;
  border-radius: 50%;
  background: #CBD5E1;
  animation: twinkle var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--lo, 0.15); }
  50%       { opacity: var(--hi, 0.6); }
}

/* ── Orbital ring ── */
.orbital {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(59,110,246,0.12);
  animation: orbitSpin 60s linear infinite;
  pointer-events: none;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

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

/* ── Card hover ── */
.service-card {
  background: #121A2E;
  border: 1px solid rgba(59,110,246,0.12);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.service-card:hover {
  border-color: rgba(59,110,246,0.4);
  box-shadow: 0 0 24px 4px rgba(59,110,246,0.12);
  transform: translateY(-3px);
}

/* ── Nav ── */
#nav { backdrop-filter: blur(12px); }

/* ── Mobile menu ── */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#mobile-menu.open { max-height: 400px; }

/* ── Accordion ── */
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-body.open { max-height: 500px; }

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid #6AA0FF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Glow button ── */
.btn-primary {
  background: #3B6EF6;
  color: #F5F7FB;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-primary:hover {
  background: #6AA0FF;
  box-shadow: 0 0 20px 6px rgba(59,110,246,0.3);
  transform: translateY(-1px);
}

/* ── Form ── */
.form-input {
  background: #1A2540;
  border: 1px solid rgba(59,110,246,0.2);
  color: #F5F7FB;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: #8B97AD; }
.form-input:focus {
  border-color: #3B6EF6;
  box-shadow: 0 0 0 3px rgba(59,110,246,0.15);
  outline: none;
}

/* Divider gradient */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,110,246,0.25), transparent);
}

/* ── Responsive video embed ── */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #121A2E;
  border: 1px solid rgba(59,110,246,0.15);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #080D1C;
}

/* ── Example workflow strip ("Here's one running") ── */
.flow-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  background: #121A2E;
  border: 1px solid rgba(59,110,246,0.12);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 3.25rem;
}
.flow-step::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #6AA0FF;
  background: rgba(59,110,246,0.12);
  border: 1px solid rgba(59,110,246,0.3);
}
.flow-when {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3B6EF6;
  margin-bottom: 0.35rem;
}
.flow-step h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #F5F7FB;
  margin: 0 0 0.35rem;
}
.flow-step p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #8B97AD;
  margin: 0;
}
/* Mobile: vertical connector line between stacked steps */
.flow-step + .flow-step::after {
  content: '';
  position: absolute;
  left: 1.78rem;
  top: -1rem;
  height: 1rem;
  width: 1px;
  background: rgba(59,110,246,0.35);
}
@media (min-width: 1024px) {
  .flow-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .flow-step {
    padding: 3.2rem 1.1rem 1.25rem 1.1rem;
  }
  .flow-step::before { left: 1.1rem; top: 1.1rem; }
  /* Desktop: horizontal arrow connector */
  .flow-step + .flow-step::after {
    left: -1.25rem;
    top: 1.9rem;
    width: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(59,110,246,0.35), rgba(59,110,246,0.6));
  }
  .flow-step + .flow-step .flow-when::before {
    content: '';
    position: absolute;
    left: -0.35rem;
    top: 1.72rem;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 1px solid rgba(59,110,246,0.7);
    border-top: 1px solid rgba(59,110,246,0.7);
    transform: rotate(45deg);
  }
}

/* Sample message the customer receives */
.flow-message {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) {
  .flow-message { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; }
}
.flow-message-label {
  font-size: 0.8rem;
  color: #8B97AD;
  line-height: 1.55;
}
.flow-message-label strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #F5F7FB;
  margin-bottom: 0.25rem;
}
.flow-bubble {
  position: relative;
  background: #1A2540;
  border: 1px solid rgba(59,110,246,0.25);
  border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
  padding: 1rem 1.15rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #F5F7FB;
  box-shadow: 0 0 24px 4px rgba(59,110,246,0.08);
}
.flow-bubble-meta {
  display: block;
  font-size: 0.7rem;
  color: #8B97AD;
  margin-top: 0.6rem;
}

/* "This form is a workflow" note */
.form-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(59,110,246,0.08);
  border: 1px solid rgba(59,110,246,0.2);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8B97AD;
}
.form-note strong { color: #F5F7FB; font-weight: 600; }
.form-note .dot {
  flex-shrink: 0;
  margin-top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #3B6EF6;
  box-shadow: 0 0 8px 2px rgba(59,110,246,0.6);
}