/* Marketing landing page only (/) -- deliberately a separate light theme
   from the dark dashboard/panel (style.css). Loaded in addition to
   style.css, not instead of it -- .landing-* classes only apply inside
   the landing page's own wrapper, so they never bleed into /panel or
   /owner. */

.landing {
  --l-bg: #fbfbfe;
  --l-surface: #ffffff;
  --l-border: #e6e6f0;
  --l-text: #1c1c2b;
  --l-muted: #62627a;
  --l-accent: #5865f2;
  --l-accent2: #23a55a;
  --l-accent3: #eb459e;
  color-scheme: light;
  background: var(--l-bg);
  color: var(--l-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.landing a { color: inherit; }

.landing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.landing-logo { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--l-text); display: flex; align-items: center; gap: 0.5rem; }
.landing-logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--l-accent); display: inline-block; }
.landing-header-links { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9rem; }
.landing-header-links .muted { color: var(--l-muted); }
.landing-header-links a:not(.landing-btn) { text-decoration: none; color: var(--l-muted); font-weight: 600; }
.landing-header-links a:not(.landing-btn):hover { color: var(--l-text); }

.landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--l-accent);
  color: white !important;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.landing-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(88, 101, 242, 0.45); }
.landing-btn.secondary {
  background: var(--l-surface);
  color: var(--l-text) !important;
  border: 1.5px solid var(--l-border);
  box-shadow: none;
}
.landing-btn.secondary:hover { border-color: var(--l-accent); }

/* Hero */
.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 2rem 5rem;
  text-align: center;
}
.landing-hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* The blobs are large and positioned near the container's edges, so a
     hard overflow:hidden clip made them look flatly cut off, especially
     at the bottom. Fading the container itself out before the edge
     (rather than trying to fade each individual blob) softens that
     transition without changing the hero's layout/height. */
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.landing-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: landing-float 14s ease-in-out infinite;
}
.landing-blob.b1 { width: 420px; height: 420px; background: var(--l-accent); top: -120px; left: -100px; animation-delay: 0s; }
.landing-blob.b2 { width: 360px; height: 360px; background: var(--l-accent3); top: 40px; right: -80px; animation-delay: -4s; }
.landing-blob.b3 { width: 320px; height: 320px; background: var(--l-accent2); bottom: -140px; left: 30%; animation-delay: -8s; }

@keyframes landing-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 25px) scale(0.97); }
}

.landing-hero-content { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(35, 165, 90, 0.12);
  color: #158a48;
  border: 1px solid rgba(35, 165, 90, 0.3);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.landing-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #23a55a; animation: landing-pulse 1.6s ease-in-out infinite; }
@keyframes landing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.landing-hero h1 { font-size: 3rem; line-height: 1.1; margin: 0 0 1.1rem; letter-spacing: -0.02em; }
.landing-hero h1 .accent { color: var(--l-accent); }
.landing-hero p.lead { font-size: 1.15rem; color: var(--l-muted); max-width: 620px; margin: 0 auto 2.25rem; line-height: 1.6; }

.landing-hero-ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.landing-hero-note { font-size: 0.82rem; color: var(--l-muted); }

/* Sections */
.landing-section { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2rem; }
.landing-section-header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.landing-section-header h2 { font-size: 2rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.landing-section-header p { color: var(--l-muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.landing-eyebrow { color: var(--l-accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 0.5rem; }

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.landing-feature-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 16px;
  padding: 1.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.landing-feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(28, 28, 43, 0.08); }
.landing-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
}
.landing-feature-icon.c1 { background: linear-gradient(135deg, #5865f2, #7289f2); }
.landing-feature-icon.c2 { background: linear-gradient(135deg, #23a55a, #3ba55d); }
.landing-feature-icon.c3 { background: linear-gradient(135deg, #eb459e, #f0729f); }
.landing-feature-icon.c4 { background: linear-gradient(135deg, #f0b232, #faa61a); }
.landing-feature-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.landing-feature-card p { margin: 0; color: var(--l-muted); font-size: 0.9rem; line-height: 1.55; }

.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  counter-reset: landing-step;
}
.landing-step { position: relative; padding-left: 3rem; }
.landing-step::before {
  counter-increment: landing-step;
  content: counter(landing-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--l-accent);
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.landing-step h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.landing-step p { margin: 0; color: var(--l-muted); font-size: 0.88rem; line-height: 1.55; }

.landing-cta-band {
  background: linear-gradient(135deg, #5865f2, #7289f2 60%, #eb459e);
  border-radius: 24px;
  padding: 3rem 2rem;
  text-align: center;
  color: white;
  max-width: 1080px;
  margin: 1rem auto 4rem;
}
.landing-cta-band h2 { margin: 0 0 0.75rem; font-size: 1.8rem; }
.landing-cta-band p { margin: 0 0 1.75rem; opacity: 0.92; }
.landing-cta-band .landing-btn { background: white; color: var(--l-accent) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.landing-cta-band .landing-btn:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); }

.landing-footer {
  border-top: 1px solid var(--l-border);
  padding: 2rem;
  text-align: center;
  color: var(--l-muted);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .landing-hero h1 { font-size: 2.1rem; }
  .landing-header { flex-direction: column; gap: 0.75rem; }
}

/* Privacy / Terms pages -- plain prose, no hero */
.landing-article { max-width: 720px; margin: 0 auto; padding: 3rem 2rem 5rem; line-height: 1.65; }
.landing-article h1 { font-size: 2.1rem; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.landing-article .landing-updated { color: var(--l-muted); font-size: 0.85rem; margin-bottom: 2.5rem; }
.landing-article h2 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
.landing-article p, .landing-article li { color: var(--l-muted); font-size: 0.96rem; }
.landing-article ul { padding-left: 1.25rem; }
.landing-article li { margin-bottom: 0.4rem; }
.landing-article a { color: var(--l-accent); font-weight: 600; text-decoration: none; }
.landing-article a:hover { text-decoration: underline; }
.landing-article strong { color: var(--l-text); }