/* Kayzen Law Tech — Landing Page Styles (Modern Counsel) */

html { scroll-padding-top: 5rem; scroll-behavior: smooth; overscroll-behavior: none; }
body { -webkit-font-smoothing: antialiased; background: #0A0F1A; overscroll-behavior: none; }

.font-500 { font-weight: 500; }

/* ---------- Fluid-ink background scrim (keeps text readable) ---------- */
.bg-scrim {
  background: radial-gradient(125% 95% at 50% 32%,
    rgba(10, 15, 26, 0.30) 0%,
    rgba(10, 15, 26, 0.58) 65%,
    rgba(10, 15, 26, 0.72) 100%);
}

/* Brand accent text — single solid accent */
.text-accent {
  color: #60A5FA;
}

/* Nav scrolled state */
#nav.scrolled {
  background: rgba(10, 15, 26, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6);
}

/* ---------- Feature cards ---------- */
.feature-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.75rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.feature-card:hover {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.05);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #60A5FA;
  margin-bottom: 1.25rem;
}
.feature-title { font-size: 1.05rem; font-weight: 600; color: #fff; }
.feature-desc { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: #94a3b8; }

/* ---------- Steps ---------- */
.step { position: relative; text-align: center; }
.step-num {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0F1626;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: #60A5FA;
}
.step-title { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 600; color: #fff; }
.step-desc { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: #94a3b8; }

/* ---------- Report type cards ---------- */
.rt-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rt-card:hover { border-color: rgba(59, 130, 246, 0.35); }
.rt-card .material-symbols-outlined { font-size: 26px; color: #60A5FA; }
.rt-title { margin-top: 0.9rem; font-size: 1rem; font-weight: 600; color: #fff; }
.rt-desc { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.55; color: #94a3b8; }
.rt-card.featured {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.08);
}

/* ---------- Security cards ---------- */
.sec-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
}
.sec-card .material-symbols-outlined { font-size: 28px; }
.sec-title { margin-top: 1rem; font-size: 1rem; font-weight: 600; color: #fff; }
.sec-desc { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.55; color: #94a3b8; }

/* ---------- Form ---------- */
.form-label { display: block; font-size: 0.8rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.4rem; }
.form-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* !important beats @tailwindcss/forms base (white bg + dark text) */
  background-color: rgba(255, 255, 255, 0.04) !important;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #3B82F6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input::placeholder { color: #64748b; -webkit-text-fill-color: #64748b; opacity: 1; }
.form-input:focus {
  outline: none;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
/* Chrome/Safari autofill: keep dark field + white text */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #0f1626 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Language toggle ---------- */
.lang-btn { color: #94a3b8; }
.lang-btn:hover { color: #fff; }
.lang-btn.active { background: #3B82F6; color: #fff; }

/* ---------- Keyboard focus visibility (a11y) ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Language swap crossfade (masks reflow/flicker) ---------- */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}