/* ============================================================
   VIBRANT THEME — bright green→yellow SaaS layer over style.css
   Surfaces are light-mode only; motion applies to both themes.
   ============================================================ */
:root {
  --v-green: #10b981;
  --v-green-2: #16a34a;
  --v-green-deep: #047857;
  --v-yellow: #facc15;
  --v-yellow-2: #eab308;
  --v-gold-text: #a16207;
  --v-ink: #0b1f17;
  --v-muted: #4b5f55;
  --v-card-shadow: 0 12px 32px -14px rgba(16, 185, 129, .35);
  --v-card-shadow-hover: 0 22px 48px -16px rgba(16, 185, 129, .45);
  --v-grad: linear-gradient(135deg, #10b981 0%, #22c55e 45%, #facc15 100%);
  --v-grad-btn: linear-gradient(135deg, #10b981 0%, #16a34a 100%);
  --v-grad-yellow: linear-gradient(135deg, #fde047 0%, #facc15 55%, #eab308 100%);
  --v-radius: 20px;
}

/* ---------- Typography ---------- */
.hero-title, .section-title, .page-hero h1, .cta-inner h2 { font-weight: 800; letter-spacing: -0.03em; }
.hero-title { font-size: clamp(40px, 6vw, 74px); line-height: 1.04; }
.section-title { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.12; }
.page-hero h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; }
[data-theme="light"] .hero-title, [data-theme="light"] .section-title, [data-theme="light"] .page-hero h1 { color: var(--v-ink); }

.gradient-text, [data-theme="light"] .gradient-text {
  background: linear-gradient(90deg, #059669 0%, #16a34a 30%, #ca8a04 60%, #059669 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: v-shine-text 7s linear infinite;
}
@keyframes v-shine-text { to { background-position: -250% 0; } }

/* ---------- Header: glass bar ---------- */
[data-theme="light"] .header {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(16, 185, 129, .12);
  box-shadow: none;
}
[data-theme="light"] .header.scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 8px 30px -18px rgba(11, 31, 23, .35); }
.nav-link { border-radius: 999px; font-weight: 600; transition: background .25s, color .25s; }
[data-theme="light"] .nav-link.active, [data-theme="light"] .nav-link:hover { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(250,204,21,.18)); color: var(--v-green-deep); }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; font-weight: 700; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn:hover::after { left: 140%; }
.btn-primary { background: var(--v-grad-btn); box-shadow: 0 10px 24px -10px rgba(16, 185, 129, .7); }
.btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(16, 185, 129, .8); }
.btn-download, .btn-download:hover { background: var(--v-grad-yellow); color: #1c1917; box-shadow: 0 10px 24px -10px rgba(234, 179, 8, .75); }
[data-theme="light"] .btn-outline { border-color: var(--v-yellow-2); color: #713f12; background: rgba(254, 249, 195, .45); }
[data-theme="light"] .btn-outline:hover { background: var(--v-yellow); border-color: var(--v-yellow); color: #1c1917; }

/* ---------- Hero: animated mesh ---------- */
[data-theme="light"] .hero {
  background:
    radial-gradient(60% 60% at 12% 18%, rgba(16, 185, 129, .28) 0%, transparent 60%),
    radial-gradient(50% 55% at 88% 12%, rgba(250, 204, 21, .38) 0%, transparent 62%),
    radial-gradient(55% 60% at 70% 92%, rgba(34, 197, 94, .25) 0%, transparent 60%),
    radial-gradient(45% 50% at 20% 95%, rgba(253, 224, 71, .30) 0%, transparent 60%),
    #f7fff9;
  background-size: 140% 140%;
  animation: v-mesh 18s ease-in-out infinite alternate;
}
@keyframes v-mesh {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
  100% { background-position: 30% 20%, 70% 30%, 60% 80%, 30% 70%, 0 0; }
}
.hero .grid-overlay { opacity: .35; }
.hero-badge, [data-theme="light"] .hero-badge {
  background: #ffffff; border: 1px solid rgba(234, 179, 8, .45); color: #713f12;
  box-shadow: 0 8px 22px -12px rgba(234, 179, 8, .8);
}
.hero-visual { animation: v-float 7s ease-in-out infinite; }
.float-badge { animation: v-bob 5s ease-in-out infinite; }
.float-badge.fb2 { animation-delay: -1.6s; }
.float-badge.fb3 { animation-delay: -3.2s; }
@keyframes v-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes v-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }
[data-theme="light"] .hero-stats .stat-num { background: var(--v-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Marquee strip ---------- */
.v-marquee { position: relative; padding: 26px 0; background: #ffffff; border-top: 1px solid rgba(16,185,129,.1); border-bottom: 1px solid rgba(16,185,129,.1); overflow: hidden; }
.v-marquee-label { text-align: center; font: 700 12px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); margin-bottom: 14px; }
.v-marquee-row { display: flex; width: max-content; gap: 14px; animation: v-scroll 38s linear infinite; }
.v-marquee-row.v-reverse { animation-direction: reverse; animation-duration: 44s; margin-top: 12px; }
.v-marquee:hover .v-marquee-row { animation-play-state: paused; }
.v-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #f7fff9; border: 1px solid rgba(16,185,129,.18); font-weight: 600; color: var(--v-ink); white-space: nowrap; }
.v-chip i { color: var(--v-green); }
.v-chip.v-yellow { background: #fefce8; border-color: rgba(234,179,8,.35); }
.v-chip.v-yellow i { color: var(--v-yellow-2); }
.v-marquee::before, .v-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; }
.v-marquee::before { left: 0; background: linear-gradient(90deg, #ffffff, transparent); }
.v-marquee::after { right: 0; background: linear-gradient(-90deg, #ffffff, transparent); }
@keyframes v-scroll { to { transform: translateX(-50%); } }
[data-theme="dark"] .v-marquee { background: #0a1628; border-color: #1e3a5f; }
[data-theme="dark"] .v-chip { background: #111f35; border-color: #1e3a5f; color: #e2e8f0; }
[data-theme="dark"] .v-marquee::before { background: linear-gradient(90deg, #0a1628, transparent); }
[data-theme="dark"] .v-marquee::after { background: linear-gradient(-90deg, #0a1628, transparent); }

/* ---------- Section badges ---------- */
.section-badge, .page-hero-badge, [data-theme="light"] .section-badge, [data-theme="light"] .page-hero-badge {
  background: #ffffff; color: var(--v-green-deep); border: 1px solid transparent;
  background-image: linear-gradient(#ffffff, #ffffff), var(--v-grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 6px 18px -10px rgba(16, 185, 129, .6);
}

/* ---------- Cards ---------- */
[data-theme="light"] :is(.feature-card, .step, .pack-home-card, .testi-card, .sup-card, .blog-card, .blog-post-card, .faq-item, .download-box, .cta-box, .rss-panel, .sidebar-widget:not([style]), .inner-toc) {
  background-color: #ffffff;
  border: 1px solid rgba(16, 185, 129, .14);
  border-radius: var(--v-radius);
  box-shadow: var(--v-card-shadow);
}
:is(.feature-card, .step, .pack-home-card, .sup-card, .blog-card, .blog-post-card) {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
  transform: perspective(900px) rotateX(var(--v-rx, 0deg)) rotateY(var(--v-ry, 0deg)) translateY(var(--v-lift, 0px));
}
:is(.feature-card, .step, .pack-home-card, .sup-card, .blog-card, .blog-post-card):hover { --v-lift: -6px; }
[data-theme="light"] :is(.feature-card, .step, .pack-home-card, .sup-card, .blog-card, .blog-post-card):hover {
  box-shadow: var(--v-card-shadow-hover); border-color: rgba(234, 179, 8, .55);
}

/* Colourful icon bubbles */
:is(.feature-icon, .step-icon, .sup-icon, .download-icon) {
  background: var(--v-grad) !important; color: #ffffff !important; border-radius: 18px;
  box-shadow: 0 10px 22px -10px rgba(16, 185, 129, .8);
}
:is(.feature-card, .step, .sup-card):nth-child(3n+2) :is(.feature-icon, .step-icon, .sup-icon) { background: var(--v-grad-yellow) !important; color: #1c1917 !important; box-shadow: 0 10px 22px -10px rgba(234, 179, 8, .85); }
:is(.feature-card, .step, .sup-card):nth-child(3n) :is(.feature-icon, .step-icon, .sup-icon) { background: linear-gradient(135deg, #059669, #10b981 60%, #84cc16) !important; }
:is(.feature-icon, .step-icon, .sup-icon) i { color: inherit !important; }

/* ---------- Section surfaces ---------- */
[data-theme="light"] .features, [data-theme="light"] .comparison, [data-theme="light"] .blog-section, [data-theme="light"] .faq { background: #ffffff; }
[data-theme="light"] .how-it-works, [data-theme="light"] .support-section, [data-theme="light"] .tutorial-section {
  background: radial-gradient(60% 80% at 0% 0%, rgba(16,185,129,.10), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(250,204,21,.14), transparent 60%), #f7fff9;
}
[data-theme="light"] .final-cta .cta-box {
  background: radial-gradient(55% 90% at 100% 0%, rgba(250, 204, 21, .55), transparent 62%), linear-gradient(135deg, #047857 0%, #059669 45%, #10b981 100%);
  border: 0; color: #ffffff;
  box-shadow: 0 30px 60px -28px rgba(16, 185, 129, .8);
}
[data-theme="light"] .final-cta .cta-box :is(h2, p, .cta-note, .cta-note span, .cta-note i) { color: #ffffff; -webkit-text-fill-color: #ffffff; }
[data-theme="light"] .final-cta .cta-box .btn-white { background: #ffffff; color: var(--v-green-deep); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
[data-theme="light"] .final-cta .cta-box .btn-white :is(span, i) { color: var(--v-green-deep); -webkit-text-fill-color: var(--v-green-deep); }
[data-theme="light"] .final-cta .cta-box .btn-ghost-white { color: #ffffff; border-color: rgba(255,255,255,.7); }
[data-theme="light"] .page-hero {
  background: radial-gradient(55% 80% at 10% 10%, rgba(16,185,129,.22), transparent 60%), radial-gradient(50% 80% at 90% 20%, rgba(250,204,21,.30), transparent 62%), #f7fff9;
}

/* ---------- Scroll progress + reveal ---------- */
.v-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 2000; transform-origin: 0 50%; transform: scaleX(0); background: var(--v-grad); pointer-events: none; }
.v-js .v-reveal { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--v-delay, 0ms); }
.v-js .v-reveal.v-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gradient-text, [data-theme="light"] .hero, .hero-visual, .float-badge, .v-marquee-row { animation: none !important; }
  .btn::after { display: none; }
  .v-js .v-reveal { opacity: 1; transform: none; transition: none; }
  :is(.feature-card, .step, .pack-home-card, .sup-card, .blog-card, .blog-post-card) { transition: none; transform: none; }
}

/* Testimonial carousel cards slide in sideways; fading each one in on intersection left blank gaps. */
.testi-track .testi-card.fade-up { opacity: 1; transform: none; }
[data-theme="light"] .hmb-btn.btn-download { background: var(--v-grad-yellow); color: #1c1917; border-color: transparent; }
[data-theme="light"] .hmb-btn.btn-primary { background: var(--v-grad-btn); }
.v-marquee-label { position: relative; z-index: 2; padding: 0 16px; }