/*
  Lovable-inspired marketing theme
  Scope: marketing pages rendered via marketing_shell (body has .landing).
  Goal: match layout/components from https://nexosstudioss.lovable.app without copying assets.
*/

body.landing{
  --lv-bg: #070711;
  --lv-surface: rgba(255,255,255,.05);
  --lv-surface-2: rgba(255,255,255,.07);
  --lv-border: rgba(255,255,255,.10);
  --lv-text: rgba(255,255,255,.92);
  --lv-muted: rgba(255,255,255,.70);
  --lv-dim: rgba(255,255,255,.55);

  --lv-purple: #9d4edd;
  --lv-purple-2: #7b2cbf;
  --lv-purple-3: #5a189a;

  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(157,78,221,.22), transparent 55%),
    radial-gradient(1000px 600px at 85% 5%, rgba(90,24,154,.18), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(123,44,191,.12), transparent 60%),
    var(--lv-bg);
}

/* Header (override a bit) */
body.landing .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7,7,17,.60);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.landing .site-header .inner{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

body.landing .site-header nav a{
  opacity: .85;
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
body.landing .site-header nav a:hover{
  opacity: 1;
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
body.landing .site-header nav a.active{
  opacity: 1;
  border-color: rgba(157,78,221,.32);
  background: rgba(157,78,221,.12);
  color: rgba(234,217,255,.95);
}

/* Buttons - keep existing .btn but tweak tone for landing */
body.landing .btn{
  border-radius: 12px;
  box-shadow: none;
}
body.landing .btn.secondary{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

/* Layout helpers */
.lv-container{ width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.lv-section{ padding: 34px 0; }
.lv-section .lv-title{ margin:0; font-size: 20px; letter-spacing: -0.01em; }
.lv-section .lv-sub{ margin: 8px 0 0; color: var(--lv-muted); font-size: 14px; line-height: 1.6; }

/* Hero */
.lv-hero{ padding: 54px 0 26px; }
.lv-hero .lv-kicker{
  display:inline-flex; align-items:center; gap: 8px;
  border: 1px solid rgba(157,78,221,.22);
  background: rgba(157,78,221,.10);
  color: rgba(234,217,255,.96);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
}
.lv-hero h1{
  margin: 12px 0 10px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.lv-hero p{ margin: 0 0 18px; color: var(--lv-muted); max-width: 70ch; line-height: 1.65; }
.lv-hero .lv-cta{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Feature cards */
.lv-features{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.lv-feature{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 16px;
  padding: 16px;
}
.lv-feature .ic{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(157,78,221,.28);
  background: rgba(157,78,221,.12);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  margin-bottom: 10px;
  color: rgba(234,217,255,.95);
}
.lv-feature h3{ margin: 0 0 6px; font-size: 15px; }
.lv-feature p{ margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.5; }

/* Plugins grid */
.lv-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }

.lv-plugin{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 18px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.lv-plugin .thumb{
  height: 150px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lv-plugin .thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }

.lv-plugin .body{ padding: 14px; display:flex; flex-direction: column; gap: 10px; }

.lv-badges{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; }
.lv-badge{
  display:inline-flex; align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
}
.lv-badge.featured{ border-color: rgba(157,78,221,.35); background: rgba(157,78,221,.12); color: rgba(234,217,255,.95); }

.lv-plugin h3{ margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.lv-plugin p{ margin: 0; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.55; }

.lv-meta{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.lv-metrics{ display:flex; gap: 10px; align-items:center; color: rgba(255,255,255,.70); font-size: 12px; font-weight: 700; }
.lv-metrics .m{ display:inline-flex; align-items:center; gap: 6px; }
.lv-metrics .dot{ width: 6px; height: 6px; border-radius: 99px; background: rgba(157,78,221,.65); }

.lv-price{ font-weight: 900; color: rgba(255,255,255,.92); }

.lv-plugin .actions{ display:flex; gap: 10px; margin-top: 8px; }

/* CTA box */
.lv-cta-box{
  border: 1px solid rgba(157,78,221,.28);
  background: radial-gradient(700px 320px at 20% 0%, rgba(157,78,221,.22), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 20px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.lv-cta-box h2{ margin:0; font-size: 18px; }
.lv-cta-box p{ margin: 6px 0 0; color: rgba(255,255,255,.70); line-height: 1.55; }

/* Generic cards (support/docs/etc.) */
.lv-card{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 18px;
  padding: 16px;
}

.lv-card h3{ margin: 0 0 6px; font-size: 16px; }
.lv-card p{ margin: 0; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.55; }

/* FAQ accordion */
.lv-faq{ margin-top: 14px; }
.lv-faq details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 12px 14px;
}
.lv-faq details + details{ margin-top: 10px; }
.lv-faq summary{
  cursor: pointer;
  font-weight: 900;
  color: rgba(255,255,255,.90);
}
.lv-faq summary::-webkit-details-marker{ display: none; }
.lv-faq details[open]{
  border-color: rgba(157,78,221,.22);
  background: rgba(157,78,221,.08);
}
.lv-faq .ans{ margin-top: 8px; color: rgba(255,255,255,.72); line-height: 1.6; font-size: 13px; }

/* Footer to look closer to reference */
body.landing .site-footer{ margin-top: 40px; }
body.landing .site-footer-inner{ width: min(1200px, calc(100% - 32px)); }
body.landing .site-footer-col a{ opacity: .85; }
body.landing .site-footer-col a:hover{ opacity: 1; text-decoration: underline; }

@media (max-width: 980px){
  .lv-features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .lv-features{ grid-template-columns: 1fr; }
  .lv-grid{ grid-template-columns: 1fr; }
  .lv-cta-box{ flex-direction: column; align-items: flex-start; }
}