/* ==========================================================================
   Leedi Landing Page — thin CSS layer
   The page markup keeps the approved inline styles from the Claude Design
   export verbatim. This file adds ONLY what inline styles cannot express:
     1. Foundational reset (fonts + box-sizing, matching the design runtime)
     2. Hover states (were `style-hover` in the source)
     3. Keyframes (copied as-is from the source <style>)
     4. Responsive behaviour (the source is desktop-only, no media queries)
   ========================================================================== */

/* ---- 1. Foundation (from source <style> + border-box reset) ------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FAFAFC; }
body {
  font-family: 'Inter', sans-serif;
  color: #0F1222;
  -webkit-font-smoothing: antialiased;
}
a { color: #6C4CF1; text-decoration: none; }
a:hover { color: #B14BF4; }
img { max-width: 100%; }

/* ---- 2. Hover states ----------------------------------------------------
   Inline styles win on specificity, so hover overrides need !important. */
.nav-link:hover        { color: #0F1222 !important; }
.btn-solid:hover       { background: #5A3BD8 !important; }
.btn-ghost-dark:hover  { background: rgba(250,250,252,.14) !important; }
.btn-outline:hover     { border-color: #6C4CF1 !important; color: #6C4CF1 !important; }
.footer-link:hover     { color: #FAFAFC !important; }

.btn-hero:hover  { box-shadow: 0 10px 40px rgba(177,75,244,.6) !important; }
.btn-step:hover  { box-shadow: 0 10px 40px rgba(177,75,244,.55) !important; }
.btn-final:hover { box-shadow: 0 12px 48px rgba(255,107,138,.5) !important; }

.feature-card {
  transition: box-shadow .25s ease, transform .25s ease;
}
.feature-card:hover {
  box-shadow: 0 14px 36px rgba(108,76,241,.13) !important;
  transform: translateY(-3px) !important;
}

/* ---- 3. Keyframes (verbatim from source) -------------------------------- */
@keyframes leedi-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes leedi-pulse { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes leedi-pop   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 4. FAQ accordion (single-open, first open on load) ----------------- */
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }

/* ---- 5. Responsive ------------------------------------------------------
   Source uses fixed desktop grids with no media queries. These classes are
   attached to the grid containers / nav only; everything else stays inline. */

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grid     { grid-template-columns: 1fr !important; gap: 48px !important; }
  .solution-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .steps-grid    { grid-template-columns: 1fr !important; }
}

/* Phone ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .nav-inner   { flex-wrap: wrap !important; gap: 12px !important; }
  .nav-links   { gap: 16px !important; font-size: 14px !important; }
  .nav-cta     { order: 3; }

  .hero-h1     { font-size: 40px !important; }
  .section-h2  { font-size: 30px !important; }
  .cta-h2      { font-size: 34px !important; }

  .pains-grid    { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr !important; }

  /* Comparison table: let it scroll horizontally instead of squashing.
     The container has inline `overflow: hidden` (for the rounded corners),
     so the horizontal-scroll override must beat inline specificity. */
  .compare-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-grid   { min-width: 560px; }

  .footer-inner { justify-content: center !important; text-align: center; }
}