/* =====================================================================
   LMS B2B — Marketing v3 colour layer
   Drops on top of marketing-v3.css to add colour, depth, and visual
   interest while keeping the same structure / mobile breakpoints.
   ===================================================================== */

:root {
  /* Per-category accent palette */
  --m3-cat-indigo:  #6366f1;
  --m3-cat-rose:    #f43f5e;
  --m3-cat-amber:   #f59e0b;
  --m3-cat-cyan:    #06b6d4;
  --m3-cat-emerald: #10b981;
  --m3-cat-violet:  #8b5cf6;

  /* Soft background tints for sections */
  --m3-bg-tint-1: #f8faff;   /* indigo-tinted off-white */
  --m3-bg-tint-2: #fef9f7;   /* peach-tinted off-white  */
}

/* ─────────── HERO: gradient mesh + floating shapes ─────────── */
.m3-hero {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(244,63,94,.08),  transparent 60%),
    radial-gradient(ellipse 70% 60% at 60% 90%, rgba(6,182,212,.08),  transparent 60%),
    var(--m3-bg);
}

/* Floating accent shapes scattered behind the hero. Pure CSS, no JS. */
.m3-hero::before, .m3-hero::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(40px); opacity: .55;
}
.m3-hero::before {
  width: 18rem; height: 18rem; top: 10%; left: -4rem;
  background: radial-gradient(circle, rgba(99,102,241,.55), transparent 70%);
  animation: m3-bob1 14s ease-in-out infinite;
}
.m3-hero::after {
  width: 14rem; height: 14rem; bottom: 6%; right: -2rem;
  background: radial-gradient(circle, rgba(244,63,94,.45),  transparent 70%);
  animation: m3-bob2 18s ease-in-out infinite;
}
@keyframes m3-bob1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes m3-bob2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,40px); } }
@media (prefers-reduced-motion: reduce) {
  .m3-hero::before, .m3-hero::after { animation: none; }
}

/* Hero tag pill — coloured */
.m3-tag {
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(244,63,94,.08));
  border-color: rgba(99,102,241,.25);
  color: #4338ca;
}
.m3-tag-dot { background: var(--m3-cat-emerald); }

/* Headline — gradient on the accent span (already applied), but bump
   the contrast by widening the gradient and adding a subtle text shadow. */
.m3-hero-title .m3-accent {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Primary button — gradient instead of flat dark */
.m3-btn--primary {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
}
.m3-btn--primary:hover {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  box-shadow: 0 12px 28px rgba(99,102,241,.35);
}

/* ─────────── PRODUCT PREVIEW MOCK ─────────── */
.m3-preview {
  background:
    linear-gradient(180deg, #fff, var(--m3-bg-tint-1));
  border-color: rgba(99,102,241,.18);
  box-shadow:
    0 30px 60px rgba(15,23,42,.10),
    0 0 0 1px rgba(99,102,241,.05);
  transform: perspective(1200px) rotateX(2deg);
  transform-origin: 50% 0%;
}
.m3-preview-stat {
  background: #fff;
  border-color: rgba(99,102,241,.18);
  position: relative; overflow: hidden;
}
.m3-preview-stat::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(99,102,241,.06), transparent 50%);
}
.m3-preview-stat:nth-child(2)::before { background: linear-gradient(135deg, rgba(244,63,94,.06), transparent 50%); }
.m3-preview-stat:nth-child(3)::before { background: linear-gradient(135deg, rgba(6,182,212,.06), transparent 50%); }
.m3-preview-card {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.04));
}
.m3-preview-card:nth-child(2) { background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(245,158,11,.04)); }
.m3-preview-card:nth-child(3) { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(6,182,212,.04)); }
.m3-preview-card:nth-child(5) { background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(244,63,94,.04)); }
.m3-preview-card:nth-child(6) { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(99,102,241,.04)); }

/* ─────────── TRUST STRIP ─────────── */
.m3-strip {
  background:
    linear-gradient(90deg, rgba(99,102,241,.04), rgba(6,182,212,.04));
}
.m3-strip-label {
  background: linear-gradient(135deg, var(--m3-cat-indigo), var(--m3-cat-rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─────────── STATS ─────────── */
.m3-stat-num {
  background: linear-gradient(135deg, #6366f1, #ec4899, #06b6d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m3-stats-row .m3-stat:nth-child(2) .m3-stat-num {
  background: linear-gradient(135deg, #f43f5e, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
}
.m3-stats-row .m3-stat:nth-child(3) .m3-stat-num {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  -webkit-background-clip: text; background-clip: text;
}
.m3-stats-row .m3-stat:nth-child(4) .m3-stat-num {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text; background-clip: text;
}

/* ─────────── EYEBROWS ─────────── */
.m3-eyebrow {
  background: linear-gradient(135deg, var(--m3-cat-indigo), var(--m3-cat-rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Headline accent — stronger gradient */
.m3-section-title .m3-accent {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─────────── USE CASES — coloured icons + tinted mocks ─────────── */
.m3-uses {
  background:
    linear-gradient(180deg, transparent 0%, var(--m3-bg-soft) 30%, var(--m3-bg-soft) 70%, transparent 100%);
}
.m3-use:nth-child(1) .m3-use-icon { background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(99,102,241,.06)); color: #4338ca; }
.m3-use:nth-child(2) .m3-use-icon { background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(244,63,94,.06)); color: #be123c; }
.m3-use:nth-child(3) .m3-use-icon { background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.06)); color: #b45309; }
.m3-use:nth-child(4) .m3-use-icon { background: linear-gradient(135deg, rgba(6,182,212,.18), rgba(6,182,212,.06)); color: #0e7490; }

.m3-use-mock {
  border-color: rgba(99,102,241,.12);
  box-shadow:
    0 30px 60px rgba(15,23,42,.10),
    0 0 0 1px rgba(99,102,241,.04);
}
.m3-use:nth-child(1) .m3-use-mock { background: linear-gradient(135deg, #fff, #eef2ff); }
.m3-use:nth-child(2) .m3-use-mock { background: linear-gradient(135deg, #fff, #fff1f2); }
.m3-use:nth-child(3) .m3-use-mock { background: linear-gradient(135deg, #fff, #fffbeb); }
.m3-use:nth-child(4) .m3-use-mock { background: linear-gradient(135deg, #fff, #ecfeff); }

.m3-use:nth-child(1) .m3-mock-bg { color: rgba(99,102,241,.10); }
.m3-use:nth-child(2) .m3-mock-bg { color: rgba(244,63,94,.10); }
.m3-use:nth-child(3) .m3-mock-bg { color: rgba(245,158,11,.10); }
.m3-use:nth-child(4) .m3-mock-bg { color: rgba(6,182,212,.10); }

.m3-use:nth-child(1) .m3-mock-grid > div { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(99,102,241,.04)); border-color: rgba(99,102,241,.18); }
.m3-use:nth-child(2) .m3-mock-grid > div { background: linear-gradient(135deg, rgba(244,63,94,.12), rgba(244,63,94,.04));  border-color: rgba(244,63,94,.18); }
.m3-use:nth-child(3) .m3-mock-grid > div { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.04)); border-color: rgba(245,158,11,.18); }
.m3-use:nth-child(4) .m3-mock-grid > div { background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(6,182,212,.04));  border-color: rgba(6,182,212,.18); }

/* ─────────── FEATURES — per-category colour ─────────── */
.m3-feat-block {
  position: relative;
  padding-top: 1.5rem;
}
.m3-feat-bullet {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: .25rem;
}

.m3-feat-block[data-cat="indigo"]  { --m3-cat: var(--m3-cat-indigo);  }
.m3-feat-block[data-cat="rose"]    { --m3-cat: var(--m3-cat-rose);    }
.m3-feat-block[data-cat="amber"]   { --m3-cat: var(--m3-cat-amber);   }
.m3-feat-block[data-cat="cyan"]    { --m3-cat: var(--m3-cat-cyan);    }
.m3-feat-block[data-cat="emerald"] { --m3-cat: var(--m3-cat-emerald); }
.m3-feat-block[data-cat="violet"]  { --m3-cat: var(--m3-cat-violet);  }

.m3-feat-block .m3-feat-bullet { background: var(--m3-cat); box-shadow: 0 0 0 4px color-mix(in oklab, var(--m3-cat) 18%, transparent); }
.m3-feat-block .m3-feat-count {
  background: color-mix(in oklab, var(--m3-cat) 12%, white);
  border-color: color-mix(in oklab, var(--m3-cat) 25%, white);
  color: color-mix(in oklab, var(--m3-cat) 60%, black);
}
.m3-feat-block .m3-feat-icon {
  background: color-mix(in oklab, var(--m3-cat) 14%, white);
  color: var(--m3-cat);
}
.m3-feat-block .m3-feat:hover {
  border-color: color-mix(in oklab, var(--m3-cat) 35%, white);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--m3-cat) 18%, transparent);
}

/* Subtle gradient on the very top edge of each card on hover */
.m3-feat {
  position: relative;
}
.m3-feat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--m3-cat, var(--m3-accent)), transparent);
  opacity: 0; transition: opacity .25s;
}
.m3-feat:hover::before { opacity: 1; }

/* Browser fallback for color-mix (older Safari) — solid colour swap */
@supports not (color: color-mix(in oklab, red, blue)) {
  .m3-feat-block[data-cat="indigo"]  .m3-feat-icon { background: rgba(99,102,241,.14);  color: #4338ca; }
  .m3-feat-block[data-cat="rose"]    .m3-feat-icon { background: rgba(244,63,94,.14);   color: #be123c; }
  .m3-feat-block[data-cat="amber"]   .m3-feat-icon { background: rgba(245,158,11,.14);  color: #b45309; }
  .m3-feat-block[data-cat="cyan"]    .m3-feat-icon { background: rgba(6,182,212,.14);   color: #0e7490; }
  .m3-feat-block[data-cat="emerald"] .m3-feat-icon { background: rgba(16,185,129,.14);  color: #047857; }
  .m3-feat-block[data-cat="violet"]  .m3-feat-icon { background: rgba(139,92,246,.14);  color: #6d28d9; }

  .m3-feat-block[data-cat="indigo"]  .m3-feat-count { background: rgba(99,102,241,.12);  color: #4338ca; border-color: rgba(99,102,241,.22); }
  .m3-feat-block[data-cat="rose"]    .m3-feat-count { background: rgba(244,63,94,.12);   color: #be123c; border-color: rgba(244,63,94,.22); }
  .m3-feat-block[data-cat="amber"]   .m3-feat-count { background: rgba(245,158,11,.12);  color: #b45309; border-color: rgba(245,158,11,.22); }
  .m3-feat-block[data-cat="cyan"]    .m3-feat-count { background: rgba(6,182,212,.12);   color: #0e7490; border-color: rgba(6,182,212,.22); }
  .m3-feat-block[data-cat="emerald"] .m3-feat-count { background: rgba(16,185,129,.12);  color: #047857; border-color: rgba(16,185,129,.22); }
  .m3-feat-block[data-cat="violet"]  .m3-feat-count { background: rgba(139,92,246,.12);  color: #6d28d9; border-color: rgba(139,92,246,.22); }

  .m3-feat-block[data-cat="indigo"]  .m3-feat:hover { border-color: rgba(99,102,241,.4); }
  .m3-feat-block[data-cat="rose"]    .m3-feat:hover { border-color: rgba(244,63,94,.4); }
  .m3-feat-block[data-cat="amber"]   .m3-feat:hover { border-color: rgba(245,158,11,.4); }
  .m3-feat-block[data-cat="cyan"]    .m3-feat:hover { border-color: rgba(6,182,212,.4); }
  .m3-feat-block[data-cat="emerald"] .m3-feat:hover { border-color: rgba(16,185,129,.4); }
  .m3-feat-block[data-cat="violet"]  .m3-feat:hover { border-color: rgba(139,92,246,.4); }
}

/* ─────────── HOW IT WORKS ─────────── */
.m3-how { background: linear-gradient(180deg, var(--m3-bg-tint-2) 0%, var(--m3-bg-soft) 100%); }
.m3-steps li {
  position: relative; overflow: hidden;
}
.m3-steps li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
}
.m3-steps li:nth-child(1)::before { background: linear-gradient(90deg, var(--m3-cat-indigo), var(--m3-cat-rose)); }
.m3-steps li:nth-child(2)::before { background: linear-gradient(90deg, var(--m3-cat-rose),   var(--m3-cat-amber)); }
.m3-steps li:nth-child(3)::before { background: linear-gradient(90deg, var(--m3-cat-amber),  var(--m3-cat-cyan)); }
.m3-step-n {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1rem;
}

/* ─────────── PRICING ─────────── */
.m3-plan {
  position: relative; overflow: hidden;
}
.m3-plan::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--m3-cat-cyan), var(--m3-cat-indigo));
  opacity: .35; transition: opacity .25s;
}
.m3-plan:hover::before { opacity: 1; }

.m3-plan.is-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899, #06b6d4) border-box;
  box-shadow: 0 30px 60px rgba(99,102,241,.20);
}
.m3-plan.is-featured::before { display: none; }
.m3-plan.is-featured .m3-plan-flag {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
}
.m3-plan.is-featured .m3-plan-amt-monthly,
.m3-plan.is-featured .m3-plan-amt-yearly {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.m3-cycle-btn em { background: linear-gradient(135deg, #10b981, #06b6d4); }
.m3-cycle-btn.is-active { color: var(--m3-cat-indigo); }

.m3-plan-feat i { color: var(--m3-cat-indigo); }
.m3-plan-feat li:hover i { color: var(--m3-cat-rose); }

/* ─────────── ADDONS ─────────── */
.m3-addon-tab.is-active {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-color: transparent;
}
.m3-addon[data-reveal] { transition: transform .25s, border-color .25s, background .25s; }
.m3-addon-pane[data-pane="storage"] .m3-addon:hover { border-color: var(--m3-cat-cyan);    background: linear-gradient(135deg, #fff, #ecfeff); }
.m3-addon-pane[data-pane="seats"]   .m3-addon:hover { border-color: var(--m3-cat-amber);   background: linear-gradient(135deg, #fff, #fffbeb); }
.m3-addon-pane[data-pane="feature"] .m3-addon:hover { border-color: var(--m3-cat-rose);    background: linear-gradient(135deg, #fff, #fff1f2); }

/* ─────────── BLOG ─────────── */
.m3-blog { background: linear-gradient(180deg, var(--m3-bg-soft) 0%, var(--m3-bg-tint-1) 100%); }
.m3-blog-card { position: relative; overflow: hidden; }
.m3-blog-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--m3-cat-indigo), transparent);
  transform: scaleX(0); transition: transform .3s;
  transform-origin: 0 50%;
}
.m3-blog-card:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.m3-blog-img--ph {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(244,63,94,.12), rgba(6,182,212,.12));
  color: var(--m3-cat-indigo);
}

/* ─────────── FAQ ─────────── */
.m3-faq-item[open] {
  border-color: var(--m3-cat-indigo);
  box-shadow: 0 8px 24px rgba(99,102,241,.10);
}
.m3-faq-item summary:hover { color: var(--m3-cat-indigo); }
.m3-faq-item[open] summary { color: var(--m3-cat-indigo); }
.m3-faq-item[open] .m3-faq-ic { color: var(--m3-cat-rose); }

/* ─────────── CTA ─────────── */
.m3-cta-card {
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.45), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(244,63,94,.40),  transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(6,182,212,.25),  transparent 60%),
    linear-gradient(135deg, #0b1220 0%, #1e1b4b 100%);
}
.m3-cta-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 50%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 50%, transparent 80%);
  opacity: .5;
}
.m3-cta-card .m3-accent {
  background: linear-gradient(135deg, #a5b4fc, #f9a8d4, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
}
.m3-cta-card .m3-btn--primary {
  background: linear-gradient(135deg, #fff, #f1f5f9);
  color: #0b1220;
}
.m3-cta-card .m3-btn--primary:hover {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  box-shadow: 0 12px 32px rgba(99,102,241,.45);
}

/* ─────────── PROGRESS BAR ─────────── */
.m3-progress > span {
  background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4);
  box-shadow: 0 0 8px rgba(99,102,241,.45);
}

/* ─────────── SECTION DIVIDER ACCENT ─────────── */
/* Small floating shape behind section heads for visual rhythm */
.m3-features { position: relative; overflow: hidden; }
.m3-features::before {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 24rem; height: 24rem; border-radius: 50%;
  top: 6rem; right: -8rem;
  background: radial-gradient(circle, rgba(99,102,241,.06), transparent 65%);
  filter: blur(20px);
}
.m3-features::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 20rem; height: 20rem; border-radius: 50%;
  bottom: 8rem; left: -6rem;
  background: radial-gradient(circle, rgba(244,63,94,.06), transparent 65%);
  filter: blur(20px);
}
.m3-features > .container { position: relative; z-index: 1; }