/* ==========================================================================
   Landing page
   ========================================================================== */

body { background: var(--bg); }

.lp-header { position: sticky; top: 0; z-index: 100; background: rgba(247,247,251,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.lp-header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.lp-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.lp-logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-tint); }
.lp-nav { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.lp-nav a:hover { color: var(--ink); }
.lp-header-actions { display: flex; gap: 10px; }

.lp-hero { padding: 88px 0 60px; overflow: hidden; }
.lp-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.lp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-ink); display: inline-block; animation: pulse 2s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lp-hero-title { font-size: 54px; margin: 20px 0 20px; }
.lp-hero-desc { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 480px; margin-bottom: 32px; }
.lp-hero-actions { display: flex; gap: 12px; margin-bottom: 28px; }
.btn-lg { padding: 15px 26px; font-size: 15.5px; border-radius: var(--radius-md); }
.lp-hero-proof { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--faint); }
.lp-avatar-stack { display: flex; }
.lp-stack-avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.lp-stack-avatar:first-child { margin-left: 0; }

.lp-hero-visual { position: relative; }
.lp-hero-svg { width: 100%; height: auto; overflow: visible; }
.lp-hv-panel { fill: var(--surface); stroke: var(--border); }
.lp-hv-bar { }
.lp-hv-bar-a { fill: var(--border-strong); }
.lp-hv-bar-b { fill: var(--surface-alt); }
.lp-hv-typing circle { fill: var(--muted); animation: typing-bounce 1.2s ease infinite; }
.lp-hv-typing circle:nth-child(2) { animation-delay: 0.15s; }
.lp-hv-typing circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.lp-hv-dot { fill: var(--signal); }
.lp-hv-line { fill: none; stroke: var(--signal); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.8s ease-in-out infinite; }
@keyframes draw-line { 0% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
.lp-hv-frame { fill: var(--ink); }
[data-theme="dark"] .lp-hv-frame { fill: #0B0D1E; }
.lp-hv-face { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 5; stroke-linecap: round; }
.lp-hv-controls circle { fill: rgba(255,255,255,0.15); }
.lp-hv-controls-end { fill: var(--ring) !important; }
.lp-hv-badge rect { fill: rgba(255,255,255,0.12); }
.lp-hv-badge circle { fill: var(--signal); }

.lp-section { padding: 88px 0; }
.lp-section-alt { background: var(--surface); }
.lp-feature-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.lp-feature-row-reverse { grid-template-columns: 1.15fr 0.85fr; }
.lp-feature-row-reverse .lp-feature-visual { order: 2; }
.lp-icon-xl { width: 100%; max-width: 280px; height: auto; }
.lp-ic-a { fill: var(--signal-tint); }
.lp-ic-b { fill: var(--border-strong); }
.lp-ic-ring { fill: var(--ring); }
.lp-ic-ring-thin { fill: none; stroke: var(--ring); stroke-width: 3; }
.lp-ic-signal { fill: var(--signal); }
.lp-ic-check { fill: none; stroke: var(--signal-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.lp-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); display: inline-block; }
.lp-feature-copy h2 { font-size: 30px; margin-bottom: 14px; max-width: 480px; }
.lp-feature-copy p { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 460px; }
.lp-check-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-check-list li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--ink); }
.lp-check-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--signal-tint); box-shadow: inset 0 0 0 4px var(--signal); }

.lp-cta { padding: 100px 0; text-align: center; }
.lp-cta-inner h2 { font-size: 36px; margin-bottom: 12px; }
.lp-cta-inner p { color: var(--muted); font-size: 16px; margin-bottom: 28px; }

.lp-footer { border-top: 1px solid var(--border); padding: 56px 0 28px; }
.lp-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.lp-footer-brand { display: flex; flex-direction: column; gap: 8px; }
.lp-footer-tag { color: var(--faint); font-size: 13.5px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 9px; }
.lp-footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--faint); margin-bottom: 4px; }
.lp-footer-col a { font-size: 13.5px; color: var(--muted); }
.lp-footer-col a:hover { color: var(--ink); }
.lp-footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; font-size: 12.5px; color: var(--faint); }

@media (max-width: 900px) {
  .lp-nav { display: none; }
  .lp-hero { padding: 48px 0 40px; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero-title { font-size: 38px; }
  .lp-feature-row, .lp-feature-row-reverse { grid-template-columns: 1fr; gap: 32px; }
  .lp-feature-row-reverse .lp-feature-visual { order: 0; }
  .lp-icon-xl { max-width: 180px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .lp-header-inner { height: 60px; }
  .lp-footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .lp-footer-brand { grid-column: 1 / -1; }
  .lp-section { padding: 56px 0; }
  .lp-cta { padding: 60px 0; }
}

@media (max-width: 480px) {
  .lp-hero-title { font-size: 30px; margin: 14px 0 16px; }
  .lp-hero-desc { font-size: 15px; margin-bottom: 24px; }
  .lp-hero-actions { flex-direction: column; gap: 10px; width: 100%; }
  .lp-hero-actions .btn { width: 100%; text-align: center; }
  .lp-hero-proof { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lp-feature-copy h2 { font-size: 24px; }
  .lp-cta-inner h2 { font-size: 26px; }
  .lp-footer-top { grid-template-columns: 1fr; }
  .lp-header-actions .btn { padding: 8px 12px; font-size: 13px; }
}