/* ============================================================
   Landing page — reuses design tokens from dashboard.css
   (colors, fonts, radii) so the marketing site and the app
   inside always look like the same product.
   ============================================================ */

.landing-body{ overflow-x: hidden; }

/* ---------- Top nav ---------- */
.landing-nav{
  position: sticky; top:0; z-index:100;
  background: rgba(10,14,19,0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.landing-nav-inner{
  max-width: 1180px; margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.landing-nav-links{ display:flex; gap:28px; }
.landing-nav-links a{ color: var(--text-dim); font-size:14px; font-weight:600; }
.landing-nav-links a:hover{ color: var(--text); }
.landing-nav-actions{ display:flex; align-items:center; gap:12px; }

@media (max-width: 720px){ .landing-nav-links{ display:none; } }

/* ---------- Buttons ---------- */
.landing-btn-primary, .landing-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 20px; border-radius:9px; font-weight:700; font-size:13.5px;
  transition: transform .12s ease, filter .15s ease, background .12s ease;
}
.landing-btn-primary{
  background: linear-gradient(135deg, var(--teal), #1a9d90);
  color:#04231f;
  box-shadow: 0 10px 24px -12px rgba(45,217,199,0.5);
}
.landing-btn-primary:hover{ filter:brightness(1.08); }
.landing-btn-primary:active{ transform: scale(0.97); }
.landing-btn-ghost{
  background: transparent; border:1px solid var(--border); color: var(--text);
}
.landing-btn-ghost:hover{ background: var(--card-hover); }
.landing-btn-lg{ padding:14px 28px; font-size:15px; border-radius:11px; }

/* ---------- Hero ---------- */
.landing-hero{
  padding: 90px 24px 70px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(45,217,199,0.10), transparent 60%),
    radial-gradient(700px 400px at 10% 0%, rgba(240,169,59,0.05), transparent 55%);
  text-align:center;
}
.landing-hero-inner{ max-width: 720px; margin:0 auto; }
.landing-hero h1{
  font-family: var(--font-display); font-weight:800; font-size:48px; line-height:1.1;
  margin:0 0 18px; letter-spacing:-1px;
}
.landing-hero-sub{ color: var(--text-dim); font-size:17px; line-height:1.6; margin:0 0 32px; }
.landing-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.landing-hero-note{ color: var(--text-faint); font-size:12.5px; margin-top:16px; }

@media (max-width: 600px){
  .landing-hero{ padding:60px 20px 50px; }
  .landing-hero h1{ font-size:34px; }
}

/* ---------- Generic section ---------- */
.landing-section{ max-width: 1100px; margin:0 auto; padding: 70px 24px; }
.landing-section-alt{ background: var(--bg-elevated); max-width:none; }
.landing-section-alt > *{ max-width: 1100px; margin-left:auto; margin-right:auto; }
.landing-section-title{
  font-family: var(--font-display); font-weight:700; font-size:30px;
  text-align:center; margin: 0 0 8px;
}
.landing-section-sub{ text-align:center; color: var(--text-dim); font-size:14.5px; margin: 0 0 44px; }

/* ---------- Feature grid ---------- */
.landing-feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 900px){ .landing-feature-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .landing-feature-grid{ grid-template-columns: 1fr; } }

.landing-feature-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform .15s ease, border-color .15s ease;
}
.landing-feature-card:hover{ transform: translateY(-3px); border-color:#2a3644; }
.landing-feature-ico{ font-size:30px; margin-bottom:14px; }
.landing-feature-card h3{ font-size:16px; margin: 0 0 8px; }
.landing-feature-card p{ color: var(--text-dim); font-size:13.5px; line-height:1.6; margin:0; }

/* ---------- Security grid ---------- */
.landing-security-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px;
  max-width: 900px; margin: 0 auto;
}
@media (max-width: 700px){ .landing-security-grid{ grid-template-columns: 1fr; } }
.landing-security-item{ display:flex; gap:14px; align-items:flex-start; }
.landing-security-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background: var(--green-dim); color: var(--green);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.landing-security-item b{ font-size:14px; }
.landing-security-item p{ color: var(--text-dim); font-size:13px; margin:4px 0 0; line-height:1.5; }

/* ---------- Testimonials ---------- */
.landing-testimonial-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 900px){ .landing-testimonial-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .landing-testimonial-grid{ grid-template-columns: 1fr; } }

.landing-testimonial-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
}
.landing-testimonial-stars{ color: var(--amber); font-size:15px; margin-bottom:12px; letter-spacing:2px; }
.landing-testimonial-quote{ font-size:14px; line-height:1.6; color: var(--text); margin:0 0 18px; }
.landing-testimonial-author{ display:flex; align-items:center; gap:10px; }
.landing-testimonial-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.landing-testimonial-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background: var(--teal-dim); color: var(--teal); font-weight:700; font-size:14px;
}
.landing-testimonial-name{ font-size:13px; font-weight:700; }
.landing-testimonial-role{ font-size:11.5px; color: var(--text-faint); }
.landing-testimonial-disclaimer{ text-align:center; color: var(--text-faint); font-size:11.5px; margin-top:30px; }

/* ---------- CTA band ---------- */
.landing-cta{
  text-align:center; padding: 70px 24px;
  background: linear-gradient(160deg, rgba(45,217,199,0.08), transparent);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.landing-cta h2{ font-family: var(--font-display); font-size:28px; margin:0 0 24px; }

/* ---------- Footer ---------- */
.landing-footer{ padding: 40px 24px; }
.landing-footer-inner{
  max-width: 1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.landing-footer-brand{ display:flex; align-items:center; gap:10px; }
.landing-footer-links{ display:flex; gap:22px; }
.landing-footer-links a{ color: var(--text-dim); font-size:13px; }
.landing-footer-links a:hover{ color: var(--text); }
.landing-footer-copy{ color: var(--text-faint); font-size:12px; }

/* ---------- Legal pages ---------- */
.legal-page{ max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
.legal-page h1{ font-family: var(--font-display); font-size:32px; margin: 0 0 8px; }
.legal-page .legal-updated{ color: var(--text-faint); font-size:12.5px; margin-bottom:36px; }
.legal-page h2{ font-family: var(--font-display); font-size:18px; margin: 34px 0 12px; }
.legal-page p, .legal-page li{ color: var(--text-dim); font-size:14px; line-height:1.7; }
.legal-page ul{ padding-left:20px; }
.legal-page a{ color: var(--teal); }