/*
Theme Name: Emboldened v15.0
Theme URI: https://emboldened.co.uk
Author: Fuse-X Limited
Author URI: https://emboldened.co.uk
Description: A modern, accessible PDF software solution landing page with seamless section transitions and progressive accessibility features.
Version: 15
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emboldened
Tags: landing-page, accessibility, dark-mode, modern, gradient
*/
/* Import Poppins font family for consistent typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Force theme isolation - hide any plugin/builder headers and footers */
body.emboldened-body > header:not([class*="py-4"]),
body.emboldened-body > footer:not([class*="bg-black"]),
.elementor-location-header,
.elementor-location-footer,
#et-main-area > header:first-child,
#et-main-area > footer:last-child {
    display: none !important;
}

/* ==============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================== */

/* Dark theme variables (default) */
:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(148, 163, 184, 0.4);
    --nav-bg: rgba(30, 41, 59, 0.7);
    --nav-border: rgba(255, 255, 255, 0.1);
    --input-bg: #1e293b;
    --input-border: #475569;
    --modal-bg: #1e293b;
    --modal-backdrop: rgba(0, 0, 0, 0.8);
}

/* Light theme variables - activated when body has 'light' class */
body.light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-tertiary: #334155;
    --text-muted: #475569;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(148, 163, 184, 0.6);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --nav-border: rgba(0, 0, 0, 0.05);
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --modal-bg: #ffffff;
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    
    /* Vertical gradient background for light mode */
    background: linear-gradient(to bottom, 
        #d3e3fd 0%,      /* Hawkes blue at top */
        #e0ebf8 15%,     /* Lighter hawkes blue */
        #eff3f5 30%,     /* Very light blue-gray */
        #f5f5f0 40%,     /* Smoky whitish */
        #f0f8f4 50%,     /* Very light mint tint */
        #e8f5ed 65%,     /* Subtle light mint */
        #e0f2e9 75%,     /* Light mint green (testimonials) */
        #eef7f2 85%,     /* Back to very light mint */
        #f0f5f5 92%,     /* Smoky whitish */
        #f8fafa 100%     /* Light whitish at bottom */
    );
    background-attachment: scroll;
}

/* =================================================
   FIX: Make "Turn dense..." white in dark mode,
        black in light mode (no gradient rendering)
   ================================================= */

.animated-gradient-text {
  /* Dark mode (default) */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  /* Ensure no gradient/clipping logic affects the color */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  /* No animation needed for solid color */
  animation: none !important;
}

body.light .animated-gradient-text {
  /* Light mode */
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* If you still want animation-play-state logic in future,
   keep these harmless rules (they won't animate while animation:none) */
.reveal-item .animated-gradient-text {
  animation-play-state: paused;
}

/* IMPORTANT: Your reveal system uses .visible (not .is-visible) */
.reveal-item.visible .animated-gradient-text {
  animation-play-state: running;
}

@keyframes embGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient-text {
    animation: none !important;
  }
}

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==============================================
   BUTTON COMPONENTS
   ============================================== */

/* Primary action button with gradient and hover effects */
.btn-action {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.4);
    color: #ffffff !important;
}
.btn-action:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.6);
    filter: brightness(1.1);
}
body.light .btn-action {
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.3);
}

/* Secondary button with glassmorphism effect */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: var(--border-hover);
}
body.light .btn-secondary {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}
body.light .btn-secondary:hover {
    background: var(--bg-card-hover);
}

/* ==============================================
   NAVIGATION COMPONENTS
   ============================================== */

/* Floating navigation island with glassmorphism */
.nav-island {
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    border-radius: 9999px;
    backdrop-filter: blur(16px);
    padding: 0.5rem 1.5rem;
    box-shadow: 0 10px 15px -3px var(--shadow-color);
    pointer-events: auto;
    transition: all 0.3s ease;
}
.nav-island a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.nav-island a:hover {
    color: var(--text-primary);
}

/* ==============================================
   CARD & PANEL COMPONENTS
   ============================================== */

/* Glassmorphism panel for forms and content sections */
.ghost-panel {
    background: var(--glass-bg);
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 40px -20px var(--shadow-color);
    padding: 2rem 2.5rem;
    transition: all 0.3s ease;
}

/* ==============================================
   HERO SECTION COMPONENTS
   ============================================== */

/* 3D perspective container for the curved monitor display */
.curved-monitor-container {
    perspective: 2500px;
    padding: 20px;
    transform: scale(1.2);
    margin: 40px 0;
}
.curved-monitor {
    transform: rotateX(5deg) rotateY(0deg);
    transform-style: preserve-3d;
    border-radius: 32px;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.7),
        inset 0 0 60px rgba(0,0,0,0.6),
        0 0 100px rgba(127, 29, 58, 0.2);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.15);
    background: linear-gradient(to bottom, #1e1b4b 0%, #0f0a2e 100%);
    transition: all 0.3s ease;
}
body.light .curved-monitor {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0,0,0,0.1);
    background: linear-gradient(to bottom, #F6F9FB 0%, #F2F6F9 100%);
}

/* Keep roadmap numbers white in light mode */
body.light .roadmap-number {
    color: #ffffff !important;
}

/* Hide dark mode only elements in light mode */
body.light .dark-mode-only {
    display: none !important;
}

/* Gradient overlay for monitor edges */
.curved-monitor::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        to right,
        rgba(127, 29, 58, 0.3) 0%,
        transparent 15%,
        transparent 85%,
        rgba(127, 29, 58, 0.3) 100%
    );
    border-radius: 32px;
    pointer-events: none;
    z-index: 1;
}

/* Hide monitor gradient overlays in light mode */
body.light .curved-monitor::before {
    display: none;
}
.curved-monitor::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.0) 70%
    );
    pointer-events: none;
    z-index: 10;
}

/* ==============================================
   PRICING SECTION COMPONENTS
   ============================================== */

/* Interactive pricing card with selection state */
.pricing-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
}
.pricing-card[data-selected="true"] {
    border-color: #f59e0b;
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 20px 40px -5px rgba(245, 158, 11, 0.25);
    z-index: 10;
}
body.light .pricing-card[data-selected="true"] {
    box-shadow: 0 20px 40px -5px rgba(245, 158, 11, 0.2);
}
.pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: #f59e0b;
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}
.pricing-card[data-selected="true"]::before {
    transform: scaleX(1);
}

/* Annual/monthly toggle switch */
.toggle-switch { width: 4rem; height: 2rem; position: relative; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background-color: var(--bg-tertiary); transition: .4s; border-radius: 9999px; }
.slider:before { position: absolute; content: ""; height: 1.6rem; width: 1.6rem; left: 0.2rem; bottom: 0.2rem; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #f59e0b; }
input:checked + .slider:before { transform: translateX(2rem); }

/* ==============================================
   ANIMATION UTILITIES
   ============================================== */

/* Scroll-triggered reveal animation for elements */
.reveal-item {
    opacity: 0 !important;
    transform: translateY(30px) scale(0.95) !important;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.reveal-item.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* ==============================================
   SECTION BACKGROUND BLENDS
   Each section uses gradients to create smooth color transitions
   ============================================== */

/* Hero section: burgundy to navy gradient */
.blend-hero {
    background: linear-gradient(to bottom, #260813 0%, #4a1022 50%, #1a0d1f 80%, #0f1629 100%);
}
body.light .blend-hero {
    background: transparent;
}

/* Pricing section: blend from hero into early adopters */
.blend-plugin {
    background: linear-gradient(to bottom, #0f1629 0%, #111827 50%, #0d1420 100%);
}
body.light .blend-plugin {
    background: transparent;
}

/* Browser Extension section: flipped gradient to blend into FAQ */
.blend-browser-extension {
    background: linear-gradient(to bottom, #111827 0%, #0f1629 50%, #0d1420 100%);
}
body.light .blend-browser-extension {
    background: transparent;
}

/* Early adopters section: blend from pricing into features */
.blend-partners {
    background: linear-gradient(to bottom, #0d1420 0%, #1a0d1f 40%, #260813 70%, #1e1020 100%);
}
body.light .blend-partners {
    background: transparent;
}

.blend-features {
    background: linear-gradient(to bottom, #1e1020 0%, #1a0d1f 50%, #14141f 100%);
}
body.light .blend-features {
    background: transparent;
}

.blend-lived {
    background: linear-gradient(to bottom, #111827 0%, #260813 100%);
}
body.light .blend-lived {
    background: transparent;
}

.blend-roadmap {
    background: linear-gradient(to bottom, #14141f 0%, #1a0d1f 50%, #1e1020 100%);
}
body.light .blend-roadmap {
    background: transparent;
}

.blend-testimonials {
    background: linear-gradient(to bottom, #1e1020 0%, #14141f 50%, #111827 100%);
}
body.light .blend-testimonials {
    background: transparent;
}

.blend-faq {
    background: linear-gradient(to bottom, #111827 0%, #0f1629 50%, #0d1420 100%);
}
body.light .blend-faq {
    background: transparent;
}

.stack-section {
    position: relative;
    overflow: visible;
    z-index: 10;
}

.modal-backdrop {
    position: fixed; inset: 0;
    background-color: var(--modal-backdrop);
    backdrop-filter: blur(5px);
    display: none; justify-content: center; align-items: center; z-index: 2000;
    transition: background-color 0.3s ease;
}

/* ==============================================
   EXPANDABLE CONTENT COMPONENTS
   ============================================== */

/* Collapsible content section for cards and FAQs */
.expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, padding-top 0.3s ease-out;
    opacity: 0;
}
.expanded .expand-content {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
}
.expanded svg.chevron {
    transform: rotate(180deg);
}

/* ==============================================
   FEATURE CARDS
   Interactive cards with 3D transforms and expand states
   ============================================== */

.feature-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease, opacity 0.4s ease, filter 0.4s ease, background-color 0.3s ease;
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

body.light .feature-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}
.feature-card:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg) scale(1.02);
    box-shadow: 0 25px 50px -12px var(--shadow-color);
    border-color: rgba(127, 29, 58, 0.5);
}
.feature-card.expanded {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1.08) translateY(-40px);
    box-shadow: 0 45px 90px -20px var(--shadow-color);
    border-color: #f59e0b;
    z-index: 40;
}
.feature-card.dimmed {
    opacity: 0.6;
    transform: scale(0.97);
    filter: blur(0.3px);
    z-index: 0;
}
/* ==============================
   FEATURE ROW EXPANSION (CARD + VIDEO)
   ============================== */

.feature-row .feature-card,
.feature-row .feature-video {
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease, opacity 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

.feature-row.expanded .feature-card,
.feature-row.expanded .feature-video {
  transform: scale(1.02) translateY(-8px);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 28px 70px -30px rgba(0,0,0,0.65);
  z-index: 20;
}

/* Optional: subtle zoom inside video */
.feature-row .feature-video .feature-video-inner {
  transition: transform 0.45s ease;
}
.feature-row.expanded .feature-video .feature-video-inner {
  transform: scale(1.03);
}

/* Dim non-active rows */
.feature-card.dimmed,
.feature-video.dimmed {
  opacity: 0.65;
  filter: blur(0.2px);
}

/* IMPORTANT: Reduce your existing card expansion "jump" so spacing stays premium */
.feature-card.expanded {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1.05) translateY(-16px);
}

/* Mobile: expand by content (no translate/scale that can feel clipped) */
@media (max-width: 768px) {
  .feature-row.expanded .feature-card,
  .feature-row.expanded .feature-video,
  .feature-card.expanded {
    transform: none !important;
  }

  /* Give expanded card a clearer state on mobile */
  .feature-card.expanded {
    border-color: rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 18px 50px -30px rgba(0,0,0,0.55) !important;
  }

  /* Ensure the accordion has room to open */
  .expanded .expand-content {
    max-height: 900px;
  }

  /* Ensure all videos are visible and properly sized on mobile */
  video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Ensure curved monitor container is visible on mobile */
  .curved-monitor-container {
    display: block !important;
    width: 100% !important;
  }

  .curved-monitor {
    display: flex !important;
    width: 100% !important;
  }

  /* Ensure feature videos show on mobile */
  .feature-video,
  .feature-video-inner {
    display: block !important;
    width: 100% !important;
  }
}


/* ==============================================
   TESTIMONIALS CAROUSEL
   Horizontal scrolling carousel with snap points
   ============================================== */

.testimonial-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.testimonial-container::-webkit-scrollbar { display: none; }
.testimonial-card {
    flex: 0 0 90%;
    scroll-snap-align: center;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 2);
    position: relative;
    z-index: 2;
    margin-bottom: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

body.light .testimonial-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 calc(33.333% - 1.0rem);
    }
}
.testimonial-card[data-is-active="true"] {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    z-index: 10;
}
.testimonial-card.expanded {
    transform: scale(1.12) translateY(-25px);
    box-shadow: 0 45px 90px -20px var(--shadow-color);
    border-color: #f59e0b;
    z-index: 40;
}
.testimonial-card.dimmed {
    opacity: 0.6;
    transform: scale(0.96);
    filter: blur(0.2px);
    z-index: 0;
}

/* ==============================================
   FAQ ACCORDION
   Expandable question/answer items
   ============================================== */

.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.faq-item.expanded .faq-answer {
    max-height: 300px;
    opacity: 1;
    margin-top: 0.75rem;
}

/* ==============================================
   LIGHT MODE OVERRIDES
   Theme-aware overrides for Tailwind utility classes
   ============================================== */

/* Text color overrides for light mode */
body.light .text-white,
body.light .text-gray-100,
body.light .text-gray-200 { color: var(--text-primary) !important; }
body.light .text-gray-300 { color: var(--text-secondary) !important; }
body.light .text-gray-400 { color: var(--text-tertiary) !important; }
body.light .text-gray-500 { color: var(--text-muted) !important; }

/* Change yellow/gold accent to green in light mode for better contrast */
body.light .text-action-400 { color: #15803d !important; }
body.light .text-action-500 { color: #16a34a !important; }
body.light .hover\:text-action-400:hover { color: #15803d !important; }
body.light .hover\:text-action-500:hover { color: #16a34a !important; }
body.light .border-action-500 { border-color: #16a34a !important; }
body.light .group:hover .group-hover\:text-action-400 { color: #15803d !important; }

body.light .bg-gray-800,
body.light .bg-gray-900,
body.light .bg-slate-800,
body.light .bg-slate-900 { background-color: var(--bg-card) !important; }
body.light .bg-gray-700 { background-color: var(--bg-card-hover) !important; }

body.light .border-gray-600,
body.light .border-gray-700,
body.light .border-gray-800 { border-color: var(--border-color) !important; }

body.light .hover\:bg-gray-700:hover { background-color: var(--bg-card-hover) !important; }

/* Input fields */
input, textarea, select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}
input::placeholder, textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Labels and form text in light mode */
body.light label {
    color: var(--text-secondary) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

/* Mobile menu */
#mobile-menu {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.3s ease;
}
#mobile-menu a {
    color: var(--text-secondary) !important;
}
#mobile-menu a:hover {
    color: var(--text-primary) !important;
}

/* Ensure all small text and spans are readable in light mode */
body.light .text-xs,
body.light .text-sm {
    color: var(--text-secondary);
}
body.light .text-xs.text-gray-500,
body.light .text-sm.text-gray-500 {
    color: var(--text-muted) !important;
}
body.light .text-xs.text-gray-400,
body.light .text-sm.text-gray-400 {
    color: var(--text-tertiary) !important;
}
body.light .text-xs.text-gray-300,
body.light .text-sm.text-gray-300 {
    color: var(--text-secondary) !important;
}

/* Button hover states in light mode */
body.light .hover\:bg-action-500:hover {
    background-color: #16a34a !important;
}
body.light .hover\:bg-action-600:hover {
    background-color: #15803d !important;
}

/* Icon backgrounds in light mode */
body.light .bg-primary-900\/50 {
    background-color: rgba(187, 247, 208, 0.5) !important;
}

/* Stats/metrics cards */
.stats-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    transition: all 0.3s ease;
}

/* Paragraph and larger text readability */
body.light p,
body.light .text-lg,
body.light .text-xl {
    color: var(--text-secondary);
}
body.light p.text-gray-300,
body.light .text-lg.text-gray-300,
body.light .text-xl.text-gray-300 {
    color: var(--text-secondary) !important;
}
body.light .text-gray-200 {
    color: var(--text-secondary) !important;
}
body.light .text-gray-400 {
    color: var(--text-tertiary) !important;
}
body.light .text-gray-500,
body.light .text-gray-600,
body.light .text-gray-700 {
    color: var(--text-muted) !important;
}

/* FAQ items */
.faq-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    transition: all 0.3s ease;
}
.faq-item:hover {
    background: var(--bg-card-hover);
}
.faq-item.expanded svg {
    transform: rotate(180deg);
}

/* Override hardcoded dark backgrounds in light mode */
body.light .bg-gray-800,
body.light .bg-gray-900,
body.light .bg-slate-800,
body.light .bg-slate-900 { background-color: var(--bg-card) !important; }
body.light .bg-gray-900\/50 { background-color: var(--input-bg) !important; }
body.light .bg-gray-800\/60 { background-color: var(--bg-card) !important; }
body.light .bg-black\/95 { background-color: var(--bg-secondary) !important; }
body.light .bg-slate-900\/70 { background-color: rgba(255, 255, 255, 0.7) !important; }
body.light .border-white\/5,
body.light .border-white\/10 { border-color: var(--border-color) !important; }
body.light .bg-\[\#020617\],
body.light .bg-\[\#111827\] { background-color: var(--bg-secondary) !important; }
body.light .from-\[\#020617\] { --tw-gradient-from: var(--bg-primary) !important; }
body.light .to-\[\#111827\] { --tw-gradient-to: var(--bg-secondary) !important; }

/* FAQ section specific overrides */
body.light #faq {
    background: linear-gradient(to bottom, #f8fafc 0%, #e5e7eb 100%) !important;
}
body.light #faq .ghostly-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 40px rgba(22, 163, 74, 0.3) !important;
}
body.light #faq .ghostly-header:hover {
    box-shadow: 0 0 70px rgba(22, 163, 74, 0.5) !important;
}
body.light .text-indigo-400 {
    color: #16a34a !important;
}
body.light .hover\:border-indigo-500:hover {
    border-color: #16a34a !important;
}

/* Header subtext */
body.light .header-subtext {
    color: #78350f !important;
}

/* Social impact box - keep text white in light mode */
body.light .social-impact-box {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(30, 41, 59, 0.3) !important;
}
body.light .social-impact-box .text-white {
    color: #ffffff !important;
}
body.light .social-impact-box .text-action-400 {
    color: #fbbf77 !important;
}

/* Smooth theme transition */
body.transitioning-theme,
body.transitioning-theme * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Override inline style backgrounds in light mode */
body.light section[style*="background"],
body.light .bg-\[\#020617\] {
    background: transparent !important;
}

body.light #faq {
    background: transparent !important;
}

body.light .logos-row[style*="background"] {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.03), inset 0 -2px 8px rgba(0,0,0,0.02) !important;
    backdrop-filter: blur(10px) !important;
}

/* Override Tailwind gradient classes in light mode */
body.light .bg-gradient-to-b {
    background: transparent !important;
}

/* Remove all section dividers and borders in light mode */
body.light .h-px {
    display: none !important;
}

body.light section {
    border: none !important;
}

body.light .border-t,
body.light .border-b,
body.light .border-white\/10,
body.light .border-white\/5,
body.light .border-gray-700,
body.light .border-gray-800 {
    border-color: transparent !important;
}

/* Remove cube patterns and textures in light mode */
body.light section[class*="cubes"],
body.light .bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/cubes\.png\'\)\] {
    background-image: none !important;
}

/* ==============================================
   EARLY ADOPTERS LOGO ANIMATION
   Logos animate from scattered positions to center
   ============================================== */

/* Ticker animation for logos */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logos-row {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow: hidden !important;
    position: relative;
}

.logos-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);
    z-index: 1;
    pointer-events: none;
}

body.light .logos-row::before {
    background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
}

.logos-row::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
    z-index: 1;
    pointer-events: none;
}

body.light .logos-row::after {
    background: linear-gradient(to left, rgba(255,255,255,0.6), transparent);
}

.logos-row-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem;
    animation: ticker 12.75s linear infinite !important;
    will-change: transform;
    flex-shrink: 0;
}

/* Force animation to work even before reveal */
.logos-row.visible .logos-row-inner,
.logos-row .logos-row-inner {
    animation: ticker 12.75s linear infinite !important;
}

/* Ensure logos are visible and animating even during reveal */
.logos-row.reveal-item {
    opacity: 1 !important;
}

.logos-row.reveal-item .logos-row-inner {
    animation: ticker 15s linear infinite !important;
}

.logos-row:hover .logos-row-inner {
    animation-play-state: paused;
}

.logo-item {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    transition: transform 0.3s ease;
}

.logo-item img {
    object-fit: contain;
    width: auto;
    max-width: 100%;
}

.logo-item:hover {
    transform: scale(1.05);
}

/* Mobile menu animation states */
#mobile-menu {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#mobile-menu.menu-hidden {
    opacity: 0;
    transform: translateY(-20px);
}

#mobile-menu.menu-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .logos-row {
        gap: 1.5rem;
    }
    .logos-row-inner {
        gap: 1.5rem;
    }
}

/* Force ticker to work on desktop - override any conflicting styles */
@media (min-width: 769px) {
    .logos-row {
        display: flex !important;
        flex-direction: row !important;
        overflow: hidden !important;
    }
    
    .logos-row-inner {
        display: flex !important;
        flex-direction: row !important;
        animation: ticker 15s linear infinite !important;
    }
    
    .logo-item {
        display: inline-flex !important;
        flex-direction: row !important;
    }
}

/* ==============================================
   KEYFRAME ANIMATIONS
   ============================================== */

/* Arrow slide animation for payment button hover */
#continue-payment-btn svg {
    transition: transform 0.3s ease;
}
#continue-payment-btn:hover svg {
    animation: arrowSlide 0.6s ease-in-out infinite;
}
@keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* FAQ accordion styles */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding-top 0.5s ease;
    padding-top: 0;
}

.faq-item svg {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.faq-item.active svg {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    padding-top: 1rem;
}

.ghostly-header {
    display: inline-block;
    background-color: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(100, 116, 139, 0.3);
    box-shadow: 0 0 40px rgba(109, 40, 217, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 50;
    transform: translateY(-50%);
    margin-top: -2rem;
    margin-bottom: 2rem;
}

.ghostly-header:hover {
    box-shadow: 0 0 70px rgba(109, 40, 217, 0.6);
}