/* LYZOO SEO landing pages: balanced violet / white / lavender colour system.
   Opt-in: applies only to pages with <body class="theme-violet"> that also load this file (currently the three sample pages:
   CRM, Website Development, Digital Marketing). It changes COLOURS ONLY (backgrounds, border colours, text colours, soft shadows
   and decorative glows). No sizes, spacing, grids or breakpoints are touched, so landing-mobile.css and the existing responsive
   rules keep working unchanged. Section roles are chosen with the lv-* classes added to each <section>. */

.theme-violet {
  /* new tokens (existing site tokens --ink, --muted, --line, --radius, --blue, --violet, --red are reused as-is) */
  --lv-primary: #6842F5;
  --lv-deep: #32166F;
  --lv-lavender: #F5F4FF;
  --lv-soft: #EDE8FF;
  --lv-pink: #D633C6;
  --lv-pink-deep: #B02AA6;
  --lv-border: #E3DCFF;
  --lv-border-strong: rgba(104, 66, 245, .32);
  --lv-text: #474f66;
  --lv-primary-ink: #4A27B8; /* violet for small text on tinted/glow backgrounds */
  --lv-grad-deep: linear-gradient(135deg, var(--lv-deep), var(--lv-primary));
  --lv-card-shadow: 0 8px 24px rgba(50, 22, 111, .07);
}

/* ---------- Hero: lavender gradient + soft violet glow (alignment, spacing, text, CTAs unchanged) ---------- */
.theme-violet .crm-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(104, 66, 245, .24), transparent 34%),
    radial-gradient(circle at 10% 82%, rgba(214, 51, 198, .12), transparent 30%),
    linear-gradient(135deg, #F5F4FF 0%, #EDE8FF 55%, #F8F6FF 100%);
}
.theme-violet .crm-hero .lead,
.theme-violet .lp-hero .lp-lead { color: var(--lv-text); }
.theme-violet .lp-hero .lp-eyebrow { color: var(--lv-primary-ink); }
/* body text that sits over the soft violet glows: slightly darker than --muted to stay above 4.5:1 */
.theme-violet .crm-about p,
.theme-violet .crm-section-heading > p,
.theme-violet .crm-pricing-card p { color: var(--lv-text); }

.theme-violet .lp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(104, 66, 245, .22), transparent 34%),
    radial-gradient(circle at 8% 86%, rgba(214, 51, 198, .10), transparent 30%),
    linear-gradient(135deg, #EDE8FF 0%, #F5F4FF 50%, #fff 100%);
}
.theme-violet .lp-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -80px;
  border-radius: 50%;
  border: 1px solid rgba(104, 66, 245, .16);
  box-shadow: 0 0 0 60px rgba(104, 66, 245, .03), 0 0 0 120px rgba(214, 51, 198, .02);
  pointer-events: none;
}
.theme-violet .lp-hero .lp-wrap { position: relative; z-index: 1; }
/* hero CTA of the .lp-* family: same violet-to-pink language as the site's .btn-primary, dark enough end for white text */
.theme-violet .lp-hero .lp-button {
  background: linear-gradient(110deg, #5B36E8, var(--lv-primary) 50%, var(--lv-pink-deep));
  box-shadow: 0 12px 28px rgba(104, 66, 245, .28);
}

/* ---------- Section backgrounds (rhythm) ---------- */
.theme-violet .crm-about.lv-white {
  background: radial-gradient(circle at 12% 18%, rgba(104, 66, 245, .06), transparent 28%), #fff;
}
.theme-violet .crm-users.lv-white,
.theme-violet .crm-pricing.lv-white,
.theme-violet .crm-faq.lv-white,
.theme-violet .lp-section.lv-white { background: #fff; }
.theme-violet .crm-users.lv-lavender,
.theme-violet .lp-section.lv-lavender {
  background: radial-gradient(circle at 92% 12%, rgba(104, 66, 245, .07), transparent 30%), var(--lv-lavender);
}
.theme-violet .seo-depth.lv-process,
.theme-violet .lp-section.lv-process { background: var(--lv-lavender); }

/* ---------- Cards: white, violet-tinted border, violet top accent (inset: no size change), lavender hover ---------- */
.theme-violet .crm-feature-item,
.theme-violet .crm-user-point,
.theme-violet .seo-depth article,
.theme-violet .lp-card {
  background: #fff;
  border-color: var(--lv-border);
  box-shadow: inset 0 3px 0 var(--lv-primary), var(--lv-card-shadow);
}
.theme-violet .crm-feature-item:hover,
.theme-violet .crm-user-point:hover,
.theme-violet .seo-depth article:hover,
.theme-violet .lp-card:hover {
  background: var(--lv-lavender);
  border-color: var(--lv-border-strong);
  box-shadow: inset 0 3px 0 var(--lv-primary), 0 14px 32px rgba(50, 22, 111, .10);
}
.theme-violet .crm-user-point > span { color: var(--lv-primary); }
.theme-violet .crm-user-point a { color: var(--lv-primary); }
.theme-violet .crm-about .kicker,
.theme-violet .crm-about .accent-line { color: var(--lv-primary); }
.theme-violet .crm-about .accent-line { background: linear-gradient(90deg, var(--lv-primary), var(--lv-pink)); }
.theme-violet .lp-kicker { color: var(--lv-primary); }
.theme-violet .lp-panel { background: var(--lv-soft); }
.theme-violet .lp-links a { background: var(--lv-soft); color: var(--lv-deep); box-shadow: inset 0 0 0 1px var(--lv-border); }
.theme-violet .lp-links a:hover { background: var(--lv-lavender); color: var(--lv-primary); box-shadow: inset 0 0 0 1px var(--lv-border-strong); }

/* ---------- Pricing card (CRM family) ---------- */
.theme-violet .crm-pricing-card {
  background: linear-gradient(135deg, var(--lv-lavender), var(--lv-soft));
  border-color: var(--lv-border);
}

/* ---------- Benefits: deep-violet section, white heading, lavender text, light cards ---------- */
.theme-violet .lv-benefits {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 8%, rgba(214, 51, 198, .38), transparent 36%),
    radial-gradient(circle at 6% 100%, rgba(255, 255, 255, .10), transparent 32%),
    var(--lv-grad-deep);
}
.theme-violet .lv-benefits::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -110px;
  top: -150px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 54px rgba(255, 255, 255, .03);
  pointer-events: none;
}
.theme-violet .lv-benefits > .wrap,
.theme-violet .lv-benefits > .lp-wrap { position: relative; z-index: 1; }
.theme-violet .lv-benefits h2 { color: #fff; }
.theme-violet .lv-benefits .lp-kicker { color: var(--lv-lavender); }
.theme-violet .lv-benefits .crm-why-grid > div:last-child p { color: var(--lv-lavender); }
.theme-violet .lv-benefits .crm-benefit-row { border-top-color: rgba(255, 255, 255, .28); }
.theme-violet .lv-benefits .crm-benefit-row > div {
  border-color: rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .07);
}
.theme-violet .lv-benefits .crm-benefit-row strong,
.theme-violet .lv-benefits .crm-benefit-row span { color: #fff; }
/* white cards inside the benefits band keep dark text (headings inherit colour from the section, which is white) */
.theme-violet .lv-benefits .lp-card { background: #fff; color: var(--ink); }
.theme-violet .lv-benefits .lp-card:hover { background: var(--lv-lavender); }

/* ---------- FAQ ---------- */
.theme-violet .crm-faq-list details { background: #fff; border-color: var(--lv-border); }
.theme-violet .crm-faq-list details:hover,
.theme-violet .crm-faq-list details[open] {
  background: var(--lv-lavender);
  border-color: var(--lv-border-strong);
  box-shadow: 0 10px 28px rgba(50, 22, 111, .07);
}
.theme-violet .crm-faq-list summary::after { color: var(--lv-primary); }
.theme-violet .lp-faq details { border-bottom-color: var(--lv-border); }
.theme-violet .lp-faq summary::marker { color: var(--lv-primary); }
.theme-violet .lp-faq details[open] summary { color: var(--lv-primary); }

/* ---------- Final CTA: deep-violet gradient with violet/pink glow ---------- */
.theme-violet .cta .cta-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(214, 51, 198, .45), transparent 38%),
    radial-gradient(circle at 4% 100%, rgba(255, 255, 255, .12), transparent 30%),
    var(--lv-grad-deep);
}
.theme-violet .cta .cta-box::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -90px;
  top: -130px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 46px rgba(255, 255, 255, .03);
  pointer-events: none;
}
.theme-violet .cta .cta-box > * { position: relative; z-index: 1; }
.theme-violet .cta p { color: var(--lv-lavender); }
.theme-violet .cta .btn { background: #fff; color: var(--lv-deep); }

/* .lp-cta carries `background:#101828 !important` in new-seo-landing.css, so this one override needs !important */
.theme-violet .lp-section.lp-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 6%, rgba(214, 51, 198, .42), transparent 36%),
    radial-gradient(circle at 4% 100%, rgba(255, 255, 255, .10), transparent 30%),
    linear-gradient(135deg, #32166F, #6842F5) !important;
}
.theme-violet .lp-cta > .lp-wrap { position: relative; z-index: 1; }
.theme-violet .lp-cta .lp-kicker { color: var(--lv-lavender); }
.theme-violet .lp-cta p { opacity: 1; color: var(--lv-lavender); }