/* landing.css — below-fold landing sections on index.php (how-it-works, blog-preview, faq, cta)
 * Single dark theme — body background is #0a0820 from auth.css (matches hero + footer).
 * Tokens: accent #818cf8/#a78bfa, text #fff/#e2e8f0/rgba(255,255,255,.55), border rgba(255,255,255,.08) */

/* ── Base Section ──────────────────────────────────────────── */
.lp-section{position:relative;z-index:1;padding:72px 24px;border-top:1px solid rgba(255,255,255,.08)}
.lp-container{max-width:1040px;margin:0 auto}
.lp-section-center{text-align:center}
.lp-section-center .lp-section-sub{margin-left:auto;margin-right:auto}
.lp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#818cf8;margin-bottom:10px}
.lp-section-title{font-size:clamp(22px,4vw,30px);font-weight:700;color:#fff;line-height:1.25;margin-bottom:10px}
.lp-section-sub{font-size:15px;color:rgba(255,255,255,.55);max-width:580px;line-height:1.65;margin-bottom:44px}

/* ── How It Works ──────────────────────────────────────────── */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 22px}
.lp-step-num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;margin-bottom:16px}
.lp-step h3{font-size:15px;font-weight:600;color:#e2e8f0;margin-bottom:8px}
.lp-step p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.65}
.lp-step a{color:#818cf8;text-decoration:underline}
.lp-step code{background:rgba(99,102,241,.18);color:#a5b4fc;border-radius:4px;padding:1px 6px;font-size:.9em}

/* ── Blog Preview ──────────────────────────────────────────── */
.lp-blog-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.lp-blog-all-link{font-size:13px;font-weight:600;color:#818cf8;text-decoration:none;white-space:nowrap;padding-bottom:2px;border-bottom:1px solid rgba(129,140,248,.4);transition:color .2s,border-color .2s}
.lp-blog-all-link:hover{color:#a5b4fc;border-bottom-color:#a5b4fc}
.lp-blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-blog-card{display:flex;flex-direction:column;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.lp-blog-card:hover{border-color:rgba(99,102,241,.5);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lp-blog-thumb{aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.05)}
.lp-blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lp-blog-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.lp-blog-body h3{font-size:14px;font-weight:600;color:#e2e8f0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.lp-blog-body p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;flex:1}
.lp-blog-date{font-size:12px;color:rgba(255,255,255,.4);margin-top:auto}

/* ── FAQ ───────────────────────────────────────────────────── */
.lp-faq{display:flex;flex-direction:column;gap:8px;margin-top:4px;text-align:left}
.lp-faq-item{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.05);overflow:hidden}
.lp-faq-item summary{padding:18px 20px;font-size:14px;font-weight:600;color:#e2e8f0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:'+';font-size:20px;font-weight:300;color:#818cf8;flex-shrink:0;transition:transform .2s}
.lp-faq-item[open]>summary::after{transform:rotate(45deg)}
.lp-faq-body{padding:16px 20px 18px;font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;border-top:1px solid rgba(255,255,255,.08)}
.lp-faq-body a{color:#818cf8;text-decoration:underline}

/* ── Final CTA ─────────────────────────────────────────────── */
.lp-cta{background:linear-gradient(135deg,#0f172a,#1e1b4b);border-top:1px solid rgba(99,102,241,.2);padding:72px 24px;text-align:center;position:relative;z-index:1}
.lp-cta h2{font-size:clamp(20px,3.5vw,28px);font-weight:700;color:#e2e8f0;margin-bottom:10px}
.lp-cta p{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:28px;max-width:460px;margin-left:auto;margin-right:auto}
.lp-cta-btn{display:inline-block;padding:15px 36px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:15px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s;font-family:inherit;box-shadow:0 4px 20px rgba(99,102,241,.35)}
.lp-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.5)}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px){
  .lp-blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .lp-section{padding:48px 16px}
  .lp-steps{grid-template-columns:1fr}
  .lp-blog-grid{grid-template-columns:1fr}
  .lp-cta{padding:48px 16px}
}