/* KAI Signals - Optimized Site Styles */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* CRITICAL: Prevent horizontal overflow and ensure proper mobile centering */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Ensure all containers respect viewport width */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent unwanted scrollbars on page sections */
main,
section,
.row,
.col,
[class*="col-"] {
    overflow: visible !important;
}

/* Ensure dropdowns and navigation work properly */
.navbar,
.navbar-nav,
.nav,
.nav-item,
.dropdown,
.btn-group {
    overflow: visible !important;
}

.dropdown-menu {
    overflow: visible !important;
    position: absolute !important;
    z-index: 1000 !important;
}

/* Bootstrap Dropdown Text Visibility Issues */
/* Force all dropdown menu items to have proper dark text colors */
.dropdown-menu,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item *,
.dropdown-menu a,
.dropdown-menu a *,
.dropdown-menu button,
.dropdown-menu button *,
.dropdown-menu span,
.dropdown-menu div,
.dropdown-item,
.dropdown-item *,
ul.dropdown-menu li a,
ul.dropdown-menu li a *,
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item *,
.navbar .dropdown-menu a,
.navbar .dropdown-menu a * {
    color: #1a202c !important;
    text-decoration: none !important;
}

/* Fix dropdown-header to have proper muted text visibility */
.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-header * {
    color: #6c757d !important;
}

.dropdown-menu .dropdown-header .text-muted {
    color: #6c757d !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: #38b2ac !important;
}

/* Button text colors with proper context awareness */

/* ==================================================================================
   GLOBAL FIX: Prevent background on icons in ALL buttons
   
   This rule ensures that Bootstrap Icons (bi-*) and <i> elements within buttons
   never receive background colors, preventing the "white square" artifact on hover.
   
   The !important flags ensure this takes precedence over any other CSS rules that
   might try to apply backgrounds to button children using wildcard selectors (btn *)
   ================================================================================== */
.btn i,
.btn i::before,
.btn i::after,
.btn .bi,
.btn [class^="bi-"],
.btn [class*=" bi-"],
[class^="btn"] i,
[class^="btn"] i::before,
[class^="btn"] i::after,
[class^="btn"] .bi,
[class^="btn"] [class^="bi-"],
[class^="btn"] [class*=" bi-"],
[class*=" btn"] i,
[class*=" btn"] i::before,
[class*=" btn"] i::after,
[class*=" btn"] .bi,
[class*=" btn"] [class^="bi-"],
[class*=" btn"] [class*=" bi-"] {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Default button text - dark for most buttons */
.btn {
    color: #1a202c !important;
}

/* Solid color buttons should ALWAYS have white text */
.btn-primary,
.btn-primary *,
.btn-secondary,
.btn-secondary *,
.btn-success,
.btn-success *,
.btn-danger,
.btn-danger *,
.btn-warning,
.btn-warning *,
.btn-info,
.btn-info *,
.btn-dark,
.btn-dark * {
    color: #ffffff !important;
}

/* Light colored buttons should have dark text */
.btn-light,
.btn-light * {
    color: #1a202c !important;
}

/* Outline buttons on light backgrounds should have colored text */
.btn-outline-primary {
    color: #1a365d !important;
}

.btn-outline-secondary {
    color: #6b7280 !important;
}

.btn-outline-success {
    color: #38a169 !important;
}

.btn-outline-danger {
    color: #e53e3e !important;
}

.btn-outline-warning {
    color: #d69e2e !important;
}

.btn-outline-info {
    color: #3182ce !important;
}

.btn-outline-dark {
    color: #1a202c !important;
}

/* Outline light buttons on dark backgrounds (like hero sections) */
.hero-section .btn-outline-light,
.hero-section .btn-outline-light *,
.navbar .btn-outline-light,
.navbar .btn-outline-light *,
.navbar .nav-link.btn-outline-light,
.navbar .nav-link.btn-outline-light *,
.footer-gradient .btn-outline-light,
.footer-gradient .btn-outline-light *,
[class*="gradient"] .btn-outline-light,
[class*="gradient"] .btn-outline-light * {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Outline light buttons when hovered on dark backgrounds */
.hero-section .btn-outline-light:hover,
.navbar .btn-outline-light:hover,
.navbar .nav-link.btn-outline-light:hover,
.footer-gradient .btn-outline-light:hover,
[class*="gradient"] .btn-outline-light:hover {
    background-color: white !important;
    color: #1a365d !important;
    text-decoration: none !important;
}

/* Outline light buttons when active, focused, or dropdown is shown on dark backgrounds */
.hero-section .btn-outline-light:active,
.hero-section .btn-outline-light:focus,
.hero-section .btn-outline-light.active,
.hero-section .btn-outline-light.show,
.navbar .btn-outline-light:active,
.navbar .btn-outline-light:focus,
.navbar .btn-outline-light.active,
.navbar .btn-outline-light.show,
.navbar .nav-link.btn-outline-light:active,
.navbar .nav-link.btn-outline-light:focus,
.navbar .nav-link.btn-outline-light.active,
.navbar .nav-link.btn-outline-light.show,
.footer-gradient .btn-outline-light:active,
.footer-gradient .btn-outline-light:focus,
.footer-gradient .btn-outline-light.active,
.footer-gradient .btn-outline-light.show,
[class*="gradient"] .btn-outline-light:active,
[class*="gradient"] .btn-outline-light:focus,
[class*="gradient"] .btn-outline-light.active,
[class*="gradient"] .btn-outline-light.show {
    background-color: white !important;
    color: #1a365d !important;
    border-color: white !important;
    text-decoration: none !important;
}

/* Ensure icons remain visible on hover with proper color */
.hero-section .btn-outline-light:hover i,
.hero-section .btn-outline-light:active i,
.hero-section .btn-outline-light:focus i,
.hero-section .btn-outline-light.active i,
.hero-section .btn-outline-light.show i,
.navbar .btn-outline-light:hover i,
.navbar .btn-outline-light:active i,
.navbar .btn-outline-light:focus i,
.navbar .btn-outline-light.active i,
.navbar .btn-outline-light.show i,
.navbar .nav-link.btn-outline-light:hover i,
.navbar .nav-link.btn-outline-light:active i,
.navbar .nav-link.btn-outline-light:focus i,
.navbar .nav-link.btn-outline-light.active i,
.navbar .nav-link.btn-outline-light.show i,
.footer-gradient .btn-outline-light:hover i,
.footer-gradient .btn-outline-light:active i,
.footer-gradient .btn-outline-light:focus i,
.footer-gradient .btn-outline-light.active i,
.footer-gradient .btn-outline-light.show i,
[class*="gradient"] .btn-outline-light:hover i,
[class*="gradient"] .btn-outline-light:active i,
[class*="gradient"] .btn-outline-light:focus i,
[class*="gradient"] .btn-outline-light.active i,
[class*="gradient"] .btn-outline-light.show i,
.hero-section .btn-outline-light:hover [class^="bi-"],
.hero-section .btn-outline-light:active [class^="bi-"],
.hero-section .btn-outline-light:focus [class^="bi-"],
.hero-section .btn-outline-light.active [class^="bi-"],
.hero-section .btn-outline-light.show [class^="bi-"],
.navbar .btn-outline-light:hover [class^="bi-"],
.navbar .btn-outline-light:active [class^="bi-"],
.navbar .btn-outline-light:focus [class^="bi-"],
.navbar .btn-outline-light.active [class^="bi-"],
.navbar .btn-outline-light.show [class^="bi-"],
.navbar .nav-link.btn-outline-light:hover [class^="bi-"],
.navbar .nav-link.btn-outline-light:active [class^="bi-"],
.navbar .nav-link.btn-outline-light:focus [class^="bi-"],
.navbar .nav-link.btn-outline-light.active [class^="bi-"],
.navbar .nav-link.btn-outline-light.show [class^="bi-"],
.footer-gradient .btn-outline-light:hover [class^="bi-"],
.footer-gradient .btn-outline-light:active [class^="bi-"],
.footer-gradient .btn-outline-light:focus [class^="bi-"],
.footer-gradient .btn-outline-light.active [class^="bi-"],
.footer-gradient .btn-outline-light.show [class^="bi-"],
[class*="gradient"] .btn-outline-light:hover [class^="bi-"],
[class*="gradient"] .btn-outline-light:active [class^="bi-"],
[class*="gradient"] .btn-outline-light:focus [class^="bi-"],
[class*="gradient"] .btn-outline-light.active [class^="bi-"],
[class*="gradient"] .btn-outline-light.show [class^="bi-"],
.hero-section .btn-outline-light:hover [class*=" bi-"],
.hero-section .btn-outline-light:active [class*=" bi-"],
.hero-section .btn-outline-light:focus [class*=" bi-"],
.hero-section .btn-outline-light.active [class*=" bi-"],
.hero-section .btn-outline-light.show [class*=" bi-"],
.navbar .btn-outline-light:hover [class*=" bi-"],
.navbar .btn-outline-light:active [class*=" bi-"],
.navbar .btn-outline-light:focus [class*=" bi-"],
.navbar .btn-outline-light.active [class*=" bi-"],
.navbar .btn-outline-light.show [class*=" bi-"],
.navbar .nav-link.btn-outline-light:hover [class*=" bi-"],
.navbar .nav-link.btn-outline-light:active [class*=" bi-"],
.navbar .nav-link.btn-outline-light:focus [class*=" bi-"],
.navbar .nav-link.btn-outline-light.active [class*=" bi-"],
.navbar .nav-link.btn-outline-light.show [class*=" bi-"],
.footer-gradient .btn-outline-light:hover [class*=" bi-"],
.footer-gradient .btn-outline-light:active [class*=" bi-"],
.footer-gradient .btn-outline-light:focus [class*=" bi-"],
.footer-gradient .btn-outline-light.active [class*=" bi-"],
.footer-gradient .btn-outline-light.show [class*=" bi-"],
[class*="gradient"] .btn-outline-light:hover [class*=" bi-"],
[class*="gradient"] .btn-outline-light:active [class*=" bi-"],
[class*="gradient"] .btn-outline-light:focus [class*=" bi-"],
[class*="gradient"] .btn-outline-light.active [class*=" bi-"],
[class*="gradient"] .btn-outline-light.show [class*=" bi-"] {
    color: #1a365d !important;
}

/* Ensure text and child elements (except icons) also get dark color on hover */
.hero-section .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.hero-section .btn-outline-light:active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.hero-section .btn-outline-light:focus *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.hero-section .btn-outline-light.active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.hero-section .btn-outline-light.show *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .btn-outline-light:active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .btn-outline-light:focus *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .btn-outline-light.active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .btn-outline-light.show *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .nav-link.btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .nav-link.btn-outline-light:active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .nav-link.btn-outline-light:focus *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .nav-link.btn-outline-light.active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.navbar .nav-link.btn-outline-light.show *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.footer-gradient .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.footer-gradient .btn-outline-light:active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.footer-gradient .btn-outline-light:focus *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.footer-gradient .btn-outline-light.active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.footer-gradient .btn-outline-light.show *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
[class*="gradient"] .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
[class*="gradient"] .btn-outline-light:active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
[class*="gradient"] .btn-outline-light:focus *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
[class*="gradient"] .btn-outline-light.active *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
[class*="gradient"] .btn-outline-light.show *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: #1a365d !important;
}

/* Outline buttons when hovered should have white text with colored background */
.btn-outline-primary:hover,
.btn-outline-primary:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-primary:hover {
    background-color: #1a365d !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-secondary:hover {
    background-color: #6b7280 !important;
}

.btn-outline-success:hover,
.btn-outline-success:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-success:hover {
    background-color: #38a169 !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-danger:hover {
    background-color: #e53e3e !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-warning:hover {
    background-color: #d69e2e !important;
}

.btn-outline-info:hover,
.btn-outline-info:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-info:hover {
    background-color: #3182ce !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: white !important;
}

.btn-outline-dark:hover {
    background-color: #1a202c !important;
}

/* Buttons with gradient backgrounds should have white text */
.cta-button,
.cta-button *,
button[class*="gradient"],
button[class*="gradient"] *,
.btn[class*="gradient"],
.btn[class*="gradient"] * {
    color: #ffffff !important;
}

/* CSS Custom Properties - Simplified and Consolidated */
:root {
    --kai-primary: #1a365d;
    --kai-secondary: #38b2ac;
    --kai-accent: #4299e1;
    --kai-success: #38a169;
    --kai-warning: #d69e2e;
    --kai-danger: #e53e3e;
    --kai-info: #3182ce;
    --kai-light: #f7fafc;
    --kai-dark: #1a202c;
    
    /* Simplified gradients */
    --kai-gradient-primary: linear-gradient(135deg, #1a365d 0%, #38b2ac 100%);
    --kai-gradient-secondary: linear-gradient(135deg, #38b2ac 0%, #4299e1 100%);
    --kai-gradient-hero: linear-gradient(135deg, #1a365d 0%, #2c5282 25%, #38b2ac 100%);
    --kai-gradient-orange: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
    --kai-gradient-blue: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    --kai-gradient-green: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    --kai-gradient-red: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    
    /* Standardized shadows */
    --kai-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --kai-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --kai-shadow-strong: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    --kai-border-radius: 0.75rem;
    --kai-transition: all 0.1s ease;
    
    /* Text colors for light backgrounds */
    --text-primary-light: #1a202c;
    --text-secondary-light: #4a5568;
    --text-muted-light: #718096;
    
    /* Text colors for dark backgrounds */
    --text-primary-dark: #ffffff;
    --text-secondary-dark: rgba(255, 255, 255, 0.9);
    --text-muted-dark: rgba(255, 255, 255, 0.7);
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--text-primary-light);
    background: var(--kai-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography - Simplified with proper contrast */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary-light);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary-light);
}

/* Improved text color system with proper contrast */
.text-muted {
    color: var(--text-muted-light) !important;
}

/* Override text colors on dark backgrounds */
.hero-section,
.hero-section *,
.navbar,
.navbar *,
.footer-gradient,
.footer-gradient *,
.dashboard-header,
.dashboard-header *,
.bg-primary,
.bg-primary *,
.bg-dark,
.bg-dark *,
[class*="gradient"],
.cta-hero-section,
.cta-hero-section *,
.blog-hero-section,
.blog-hero-section * {
    color: var(--text-primary-dark) !important;
}

.hero-section .text-muted,
.navbar .text-muted,
.footer-gradient .text-muted,
.dashboard-header .text-muted,
.bg-primary .text-muted,
.bg-dark .text-muted,
[class*="gradient"] .text-muted,
.cta-hero-section .text-muted,
.blog-hero-section .text-muted {
    color: var(--text-muted-dark) !important;
}

/* Ensure proper contrast on hero sections */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section span,
.hero-section div:not(.btn):not(.badge),
.cta-hero-section h1,
.cta-hero-section h2,
.cta-hero-section h3,
.cta-hero-section h4,
.cta-hero-section h5,
.cta-hero-section h6,
.cta-hero-section p,
.cta-hero-section span,
.cta-hero-section div:not(.btn):not(.badge),
.blog-hero-section h1,
.blog-hero-section h2,
.blog-hero-section h3,
.blog-hero-section h4,
.blog-hero-section h5,
.blog-hero-section h6,
.blog-hero-section p,
.blog-hero-section span,
.blog-hero-section div:not(.btn):not(.badge) {
    color: var(--text-primary-dark) !important;
}

/* Dashboard header text colors */
.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3,
.dashboard-header h4,
.dashboard-header h5,
.dashboard-header h6,
.dashboard-header p,
.dashboard-header span {
    color: var(--text-primary-dark) !important;
}

a {
    color: var(--kai-secondary);
    text-decoration: none;
    transition: var(--kai-transition);
}

a:hover {
    color: var(--kai-primary);
}

/* Links on dark backgrounds */
.hero-section a,
.navbar a,
.footer-gradient a,
.dashboard-header a,
.bg-primary a,
.bg-dark a,
[class*="gradient"] a,
.cta-hero-section a,
.blog-hero-section a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-section a:hover,
.navbar a:hover,
.footer-gradient a:hover,
.dashboard-header a:hover,
.bg-primary a:hover,
.bg-dark a:hover,
[class*="gradient"] a:hover,
.cta-hero-section a:hover,
.blog-hero-section a:hover {
    color: white !important;
}

/* Utility Classes - Consolidated */
.text-gradient-primary {
    background: var(--kai-gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-gradient-secondary {
    background: var(--kai-gradient-secondary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.bg-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.shadow-soft { box-shadow: var(--kai-shadow); }
.shadow-soft-lg { box-shadow: var(--kai-shadow-lg); }
.shadow-strong { box-shadow: var(--kai-shadow-strong); }

.hover-lift {
    transition: var(--kai-transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--kai-shadow-lg);
}

/* Page Layout Classes */
.page-standard {
    padding-top: calc(var(--kai-navbar-height, 72px) + 2rem);
}

.page-with-hero,
.homepage-body {
    padding-top: 0; /* Hero sections handle their own spacing */
}

/* Remove top padding when main contains hero section to eliminate white space */
.page-with-hero main:has(.hero-section),
.homepage-body main:has(.hero-section) {
    padding-top: 0;
}

/* Alternative for browsers that don't support :has() */
main .hero-section:first-child {
    margin-top: 0;
}

.min-vh-75 { min-height: 75vh; }
.fw-900 { font-weight: 900; }

/* Responsive page-standard spacing */
@media (max-width: 991.98px) {
    .page-standard {
        padding-top: calc(var(--kai-navbar-height, 72px) + 1.5rem);
    }
}

@media (max-width: 575.98px) {
    .page-standard {
        padding-top: calc(var(--kai-navbar-height, 72px) + 1rem);
    }
}

/* Layout-specific Styles - Accessible and Consistent */
.footer-gradient {
    background: var(--kai-gradient-primary);
}

/* Footer Logo Styling */
.footer-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    max-height: 60px;
    display: block;
}

.newsletter-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.newsletter-input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

.toast-notifications-container {
    z-index: 1060;
    margin-top: 80px;
}

/* Dashboard Components - Accessible and Consistent */
.dashboard-header {
    background: var(--kai-gradient-primary);
    color: var(--text-primary-dark) !important;
}

.dashboard-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: var(--kai-transition);
}

.stat-icon:hover {
    transform: scale(1.1);
}

/* Stat Icon Variants */
.stat-icon-primary {
    background: var(--kai-gradient-primary);
}

.stat-icon-secondary {
    background: var(--kai-gradient-secondary);
}

.stat-icon-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon-orange {
    background: var(--kai-gradient-orange);
}

.stat-icon-blue {
    background: var(--kai-gradient-blue);
}

.stat-icon-green {
    background: var(--kai-gradient-green);
}

.stat-icon-red {
    background: var(--kai-gradient-red);
}

.stat-icon-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-icon-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.empty-state-icon {
    font-size: 3rem !important;
}

.empty-state-icon-medium {
    font-size: 2rem !important;
}

.activity-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
}

.small-text {
    font-size: 0.75rem;
}

.dashboard-stat-card {
    transition: var(--kai-transition);
}

.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kai-shadow-lg);
}

/* Hero Image Styles */
.hero-image {
    max-height: 500px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}

/* Section Badges */
.section-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Feature Icons - for feature cards */
.feature-card .feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.2));
    border-radius: 16px;
    color: #3b82f6;
    font-size: 2rem;
    box-shadow: var(--kai-shadow-lg);
}

/* Feature Cards */
.feature-card {
    transition: all var(--kai-transition);
    border-radius: 16px;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Floating Elements */
.floating-element {
    position: absolute;
}

.floating-element-top {
    top: 10%;
    right: 10%;
}

.floating-element-bottom {
    bottom: 20%;
    left: 10%;
}

.floating-badge {
    padding: 0.75rem 1rem;
    border-radius: 2rem;
    box-shadow: var(--kai-shadow-lg);
    animation: pulse 2s infinite;
    color: white;
}

.floating-badge-success {
    background: var(--kai-success);
}

.floating-badge-info {
    background: var(--kai-info);
}

.floating-badge-delayed {
    animation-delay: 1s;
}

/* Step Numbers */
.step-number {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--kai-shadow-lg);
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.2));
}

.step-number-primary {
    background: var(--kai-primary);
}

.step-number-secondary {
    background: var(--kai-secondary);
}

.step-number-success {
    background: var(--kai-success);
}

/* Step Connectors */
.step-connector-horizontal {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 100px;
    height: 2px;
    background: var(--kai-gradient-secondary);
    margin-left: 20px;
}

/* Performance Cards */
.performance-stat-card {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow);
}

.performance-history-card {
    background: white;
    padding: 2rem;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow-lg);
}

/* Avatar Components */
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 1rem;
}

.avatar-primary {
    background: var(--kai-primary);
}

.avatar-success {
    background: var(--kai-success);
}

.avatar-info {
    background: var(--kai-info);
}

/* Benefit Icons */
.benefit-icon {
    border-radius: 50%;
    padding: 0.5rem;
}

.benefit-icon-primary {
    background: rgba(26, 54, 93, 0.1);
}

.benefit-icon-success {
    background: rgba(56, 161, 105, 0.1);
}

.benefit-icon-info {
    background: rgba(49, 130, 206, 0.1);
}

.benefit-icon-warning {
    background: rgba(214, 158, 46, 0.1);
}

/* Telegram Page Specific Styles */
.telegram-icon-container {
    background: rgba(26, 54, 93, 0.1);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.telegram-icon-large {
    font-size: 2.5rem;
}

/* Blog Page Specific Styles */
.blog-hero-section {
    background: var(--kai-gradient-primary);
    padding: 4rem 0 2rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.blog-header-content {
    position: relative;
    z-index: 1;
}

.blog-post-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: white !important;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.meta-item {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.meta-item i {
    opacity: 0.8;
}

/* Article Content Styles */
.blog-article {
    background: white;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow-lg);
    padding: 3rem;
    margin-bottom: 2rem;
}

.article-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
}

.article-content h1 {
    color: #2c3e50;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.article-content h2 {
    color: #2c3e50;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e9ecef;
}

.article-content h3 {
    color: #495057;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content h4 {
    color: #6b7280;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.article-content blockquote {
    background: #f8f9fa;
    border-left: 4px solid var(--kai-secondary);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: #495057;
    border-radius: 0 8px 8px 0;
}

.article-content code {
    background: #f1f3f4;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #e53e3e;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.article-content pre {
    background: #1a202c;
    color: #f7fafc;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.article-content pre code {
    background: none;
    color: #333;
    padding: 0;
    border-radius: 0;
    font-size: 0.9rem;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.article-content th,
.article-content td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
}

.article-content th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.article-content strong {
    font-weight: 600;
    color: #2c3e50;
}

.article-content em {
    font-style: italic;
    color: #495057;
}

.article-content a {
    color: var(--kai-secondary);
    text-decoration: none;
}

.article-content a:hover {
    color: var(--kai-primary);
    text-decoration: underline;
}

/* Analytics-specific styling */
.article-content .risk-disclaimer {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    color: #856404;
}

/* Article Footer */
.article-footer {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
    margin-top: 3rem;
}

.article-sharing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
}

.share-btn-twitter:hover {
    background-color: #1da1f2;
    border-color: #1da1f2;
    color: white;
}

.share-btn-linkedin:hover {
    background-color: #0077b5;
    border-color: #0077b5;
    color: white;
}

/* Blog Sidebar */
.blog-sidebar {
    position: sticky;
    top: calc(var(--kai-navbar-height) + 2rem);
}

.sidebar-widget {
    background: white;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow);
    overflow: hidden;
}

.widget-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.widget-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--kai-primary);
}

.widget-body {
    padding: 1.5rem;
}

.post-info-list {
    margin: 0;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    color: var(--kai-secondary);
    opacity: 0.8;
}

.info-text {
    color: var(--text-secondary-light);
}

/* CTA Section */
.cta-hero-section {
    background: var(--kai-gradient-hero);
    position: relative;
    overflow: hidden;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Pricing Cards Row */
.pricing-cards-row {
    margin-top: 2rem;
}

/* Alert Components with Improved Accessibility */
.alert-icon-large {
    font-size: 1.5rem;
}

.alert-icon-medium {
    font-size: 1.25rem;
}

/* Timeline Components - Accessible and Responsive */
.timeline {
    position: relative;
    padding-left: 0;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    width: 2px;
    height: calc(100% + 1rem);
    background: #dee2e6;
    z-index: 0;
}

.timeline-marker {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    min-width: 40px; /* Prevent shrinking on small screens */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 2px solid white; /* Better contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: var(--kai-transition);
}

.timeline-marker:hover {
    transform: scale(1.1);
}

/* Responsive timeline adjustments */
@media (max-width: 576px) {
    .timeline-marker {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.875rem;
    }
    
    .timeline-item:not(:last-child)::after {
        left: 15px;
    }
    
    .dashboard-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
    }
    
    .empty-state-icon {
        font-size: 2.5rem !important;
    }
    
    .empty-state-icon-medium {
        font-size: 1.75rem !important;
    }
    
    .alert-icon-large {
        font-size: 1.25rem;
    }

    .floating-element-top {
        top: 5%;
        right: 5%;
    }
    
    .floating-element-bottom {
        bottom: 15%;
        left: 5%;
    }
    
    .floating-badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .step-connector-horizontal {
        display: none;
    }

    .cta-features {
        flex-direction: column;
        gap: 1rem;
    }

    .telegram-icon-container {
        width: 60px;
        height: 60px;
    }
    
    .telegram-icon-large {
        font-size: 2rem;
    }

    /* Blog responsive styles */
    .blog-hero-section {
        padding: 3rem 0 1.5rem;
    }
    
    .blog-post-title {
        font-size: 2.5rem;
    }
    
    .blog-post-meta {
        flex-direction: column;
        gap: 1rem;
    }
    
    .blog-article {
        padding: 2rem 1.5rem;
    }
    
    .article-content {
        font-size: 1rem;
    }
    
    .article-content h1 {
        font-size: 1.75rem;
    }
    
    .article-content h2 {
        font-size: 1.5rem;
    }
    
    .article-content h3 {
        font-size: 1.25rem;
    }
    
    .article-sharing {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .blog-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

/* Navigation - Simplified */
.navbar {
    background: var(--kai-gradient-primary) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--kai-transition);
    box-shadow: var(--kai-shadow);
    height: auto;
    min-height: var(--kai-navbar-height);
    padding: 0.4rem 0;
}

.navbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: white !important;
    transition: var(--kai-transition);
    padding: 0.25rem 0;
    flex-shrink: 1;
    max-width: calc(100% - 60px); /* Leave space for hamburger */
}

.navbar-brand:hover {
    opacity: 0.9;
}

/* Responsive logo sizing - Desktop */
.navbar-brand img {
    max-width: 100%;
    width: auto;
    height: 48px;
    max-height: 48px;
    display: block;
    transition: opacity 0.3s ease;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    padding: 0.3rem 0.8rem !important;
    border-radius: 0.5rem;
    transition: var(--kai-transition);
    margin: 0 0.25rem;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar-nav .nav-link i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* Notification Badge - Optimized */
#mainNotificationCount {
    background: #dc3545 !important;
    color: white !important;
    font-size: 0.7rem !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
    top: 0px !important;
    right: 10px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid white !important;
    position: absolute !important;
}

/* Dropdown Menus - FIXED */
.dropdown-menu {
    background: white;
    border: none;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    color: var(--text-primary-light) !important;
    transition: var(--kai-transition);
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background: rgba(56, 178, 172, 0.1);
    color: var(--kai-secondary) !important;
    transform: translateX(4px);
}

.dropdown-item i {
    width: 18px;
    margin-right: 0.625rem;
    font-size: 0.9rem;
}

/* Button Styles - Simplified */
.btn {
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--kai-border-radius);
    border: none;
    transition: var(--kai-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--kai-shadow-lg);
}

.btn-primary {
    background: var(--kai-gradient-primary);
    color: white !important;
    box-shadow: var(--kai-shadow);
}

.btn-primary:hover {
    background: var(--kai-gradient-secondary);
    color: white !important;
}

.btn-outline-primary {
    border: 2px solid var(--kai-primary);
    color: var(--kai-primary) !important;
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--kai-primary);
    color: white !important;
    border-color: var(--kai-primary);
}

.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white !important;
    background: transparent;
}

.btn-outline-light:hover {
    background: white;
    color: var(--kai-primary) !important;
    border-color: white;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.rounded-pill {
    border-radius: 50rem !important;
}

/* Card Components - Simplified */
.card {
    border: none;
    border-radius: var(--kai-border-radius);
    box-shadow: var(--kai-shadow);
    transition: var(--kai-transition);
    background: white;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--kai-shadow-lg);
    transform: translateY(-2px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    color: var(--kai-primary);
    padding: 1.25rem 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

/* Modern Pricing Cards - Streamlined */
.pricing-card {
    background: white;
    border-radius: 24px;
    transition: var(--kai-transition);
    overflow: visible;
    position: relative;
    border: 1px solid #e2e8f0;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.12);
}

.pricing-card.featured {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid var(--kai-primary);
    position: relative;
    box-shadow: 0 20px 40px rgba(56, 178, 172, 0.15);
    transform: scale(1.05);
    z-index: 2;
}

/* Remove the problematic ::before pseudo-element */
.pricing-card.featured::before {
    display: none;
}

.plan-header {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary-light);
    margin-bottom: 0.5rem;
}

.pricing-card.featured .plan-name {
    background: var(--kai-gradient-secondary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price-display {
    margin-bottom: 1.5rem;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--kai-primary);
}

.pricing-card.featured .price-amount {
    background: var(--kai-gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price-period {
    font-size: 1.125rem;
    color: var(--text-muted-light);
    font-weight: 500;
    margin-left: 0.5rem;
}

/* Make price-period white only in hero sections or on colored backgrounds */
.hero-section .price-period,
.pricing-card.featured .price-period {
    color: var(--text-muted-dark) !important;
}

.popular-badge {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.popular-badge .badge {
    background: var(--kai-gradient-secondary);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 25px rgba(56, 178, 172, 0.3);
    border: 3px solid white;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.features-list {
    padding: 0 2rem 1.5rem;
    flex-grow: 1;
}

.features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
    transition: var(--kai-transition);
}

.features-list li:last-child {
    border-bottom: none;
}

.feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
    color: white;
}

.pricing-card.featured .feature-icon {
    background: var(--kai-gradient-secondary);
}

.feature-text {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary-light);
    font-size: 1rem;
    line-height: 1.5;
}

.plan-cta {
    padding: 1.5rem 2rem 2rem;
    text-align: center;
    flex-shrink: 0;
    margin-top: auto;
}

.cta-button {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 16px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    transition: var(--kai-transition);
    border: none;
    background: var(--kai-gradient-primary);
    color: white !important;
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.3);
    text-decoration: none;
}

.pricing-card.featured .cta-button {
    background: var(--kai-gradient-secondary);
    box-shadow: 0 8px 25px rgba(56, 178, 172, 0.4);
    transform: scale(1.02);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(26, 54, 93, 0.4);
    color: white !important;
}

.pricing-card.featured .cta-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 35px rgba(56, 178, 172, 0.5);
    color: white !important;
}

/* Hero Section - Fixed contrast */
.hero-section {
    background: var(--kai-gradient-hero);
    padding: 6rem 0 4rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* Ensure all hero section text is white */
.hero-section,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section span:not(.badge),
.hero-section .lead {
    color: white !important;
}

.hero-section .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Form Components */
.form-control {
    border: 2px solid #e2e8f0;
    border-radius: var(--kai-border-radius);
    padding: 0.75rem 1rem;
    transition: var(--kai-transition);
    font-weight: 500;
    background: white;
    color: var(--text-primary-light) !important;
}

.form-control:focus {
    border-color: var(--kai-secondary);
    box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.1);
    background: white;
    color: var(--text-primary-light) !important;
}

.form-label {
    font-weight: 600;
    color: var(--kai-primary) !important;
    margin-bottom: 0.5rem;
}

/* Alert Components */
.alert {
    border: none;
    border-radius: var(--kai-border-radius);
    padding: 1rem 1.5rem;
    font-weight: 500;
    border-left: 4px solid;
}

.alert-success {
    background: rgba(56, 161, 105, 0.1);
    color: var(--kai-success);
    border-left-color: var(--kai-success);
}

.alert-danger {
    background: rgba(229, 62, 62, 0.1);
    color: var(--kai-danger);
    border-left-color: var(--kai-danger);
}

.alert-warning {
    background: rgba(214, 158, 46, 0.1);
    color: var(--kai-warning);
    border-left-color: var(--kai-warning);
}

.alert-info {
    background: rgba(49, 130, 206, 0.1);
    color: var(--kai-info);
    border-left-color: var(--kai-info);
}

/* Badge Components */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Animation Classes - Simplified */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* COMPREHENSIVE RESPONSIVE DESIGN */

/* Universal mobile overflow prevention */
@media (max-width: 768px) {
    /* Prevent any content from extending beyond viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure images and media stay within bounds */
    img, 
    video, 
    iframe, 
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Prevent text from causing overflow */
    pre, 
    code {
        overflow-x: auto;
        word-wrap: break-word;
    }
}

/* Mobile Navigation Enhancements */
.mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: fadeIn 0.3s ease forwards;
}

/* Touch feedback for better mobile UX */
.touch-active {
    transform: scale(0.98);
    opacity: 0.8;
    transition: all 0.1s ease;
}

/* Enhanced navbar for mobile */
.navbar {
    transition: transform 0.3s ease;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Mobile menu scroll indicators */
@media (max-width: 992px) {
    .navbar-collapse::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
        display: block;
        z-index: 1;
    }
    
    .navbar-collapse::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to top, rgba(255,255,255,0.2), transparent);
        display: block;
        z-index: 1;
    }
}

/* Viewport height fix for mobile browsers */
.min-vh-100 {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Large screens (desktops) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-section {
        padding: 8rem 0 6rem;
    }
    
    .display-3 {
        font-size: 3.5rem !important;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .pricing-card {
        margin-bottom: 2rem;
        margin-top: 2rem;
    }
    
    .price-amount {
        font-size: 3rem;
    }
    
    .hero-section {
        padding: 6rem 0 4rem;
    }
    
    .display-3 {
        font-size: 3rem !important;
    }
}

/* Tablets (landscape) */
@media (max-width: 992px) {
    /* ============================================
       TABLET TEXT ALIGNMENT (Landscape)
       Center-align text for tablet devices
       ============================================ */
    
    /* Center all main content text on tablets */
    main,
    section,
    .container,
    .row > div {
        text-align: center !important;
    }
    
    /* Center headings */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    /* Center paragraphs and lead text */
    p, .lead {
        text-align: center !important;
    }
    
    /* Center hero sections */
    .hero-section,
    .hero-content {
        text-align: center !important;
    }
    
    /* Center CTA sections */
    .cta-section,
    .cta-hero-section,
    .blog-cta-section,
    .pricing-cta-section,
    .early-access-cta-section,
    .about-cta-section {
        text-align: center !important;
    }
    
    /* Center cards */
    .card,
    .card-header,
    .card-body {
        text-align: center !important;
    }
    
    /* Center pricing cards */
    .pricing-card,
    .plan-header,
    .features-list {
        text-align: center !important;
    }
    
    /* Exceptions - Keep left-aligned for specific elements */
    .navbar,
    .navbar-nav,
    .dropdown-menu,
    .dropdown-item,
    form,
    form label,
    .form-label,
    input,
    textarea,
    select,
    .table,
    code,
    pre {
        text-align: left !important;
    }
    
    /* Navbar improvements for tablet/mobile */
    .navbar-collapse {
        width: 100%;
        margin-top: 0.75rem;
    }
    
    /* Apply scrolling only when menu is open */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Custom scrollbar for mobile menu */
    .navbar-collapse::-webkit-scrollbar {
        width: 6px;
    }
    
    .navbar-collapse::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }
    
    .navbar-collapse::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }
    
    .navbar-collapse::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    .navbar-nav {
        width: 100%;
        padding: 0.5rem 0;
        margin-top: 0.5rem;
    }
    
    /* Keep white text for nav links on mobile */
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: white !important;
        background: rgba(255, 255, 255, 0.1);
    }
    
    /* Enhanced nav-links for better touch targets */
    .navbar-nav .nav-link {
        padding: 0.875rem 1rem !important;
        border-radius: 0.5rem;
        margin: 0.25rem 0;
        transition: all 0.3s ease;
        font-size: 1rem;
        min-height: 44px; /* WCAG 2.1 minimum touch target */
        display: flex;
        align-items: center;
    }
    
    .navbar-nav .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(5px);
    }
    
    /* Hero section adjustments */
    .hero-section {
        padding: 5rem 0 3rem;
        text-align: center;
    }
    
    .hero-content {
        margin-bottom: 3rem;
    }
    
    .display-3 {
        font-size: 2.5rem !important;
    }
    
    .lead {
        font-size: 1.1rem;
    }
    
    /* Stats row improvements */
    .hero-section .row.text-center.mb-4 .col-4 {
        margin-bottom: 1rem;
    }
    
    /* Button improvements */
    .d-flex.flex-column.flex-md-row {
        flex-direction: column !important;
        align-items: center;
    }
    
    .d-flex.flex-column.flex-md-row .btn {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.75rem;
    }
    
    /* Trust indicators */
    .d-flex.align-items-center.gap-4 {
        flex-direction: column;
        gap: 1rem !important;
        text-align: center;
    }
    
    /* Footer adjustments */
    .footer-gradient .row {
        text-align: center;
    }
    
    .footer-gradient .col-lg-2,
    .footer-gradient .col-lg-4 {
        margin-bottom: 2rem;
    }
    
    /* Footer logo sizing for tablet */
    .footer-logo {
        max-width: 200px;
        max-height: 50px;
    }
    
    /* Card spacing */
    .card {
        margin-bottom: 2rem;
    }
}

/* Tablets (portrait) and large phones */
@media (max-width: 768px) {
    /* Ensure no horizontal overflow on tablets/large mobiles */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    main {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Enhanced mobile menu scrolling */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 2rem !important;
        transition: height var(--transition-dropdown, 75ms) ease !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Ensure account dropdown is scrollable and maintains proper styling */
    .navbar-nav .dropdown-menu {
        max-height: 400px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: white !important;
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0.5rem;
        margin-top: 0.5rem !important;
        width: 100% !important;
        position: static !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Ensure all dropdown children have white background */
    .navbar-nav .dropdown-menu * {
        background-color: white !important;
    }
    
    /* Keep dark text in dropdowns */
    .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-nav .dropdown-menu li,
    .navbar-nav .dropdown-menu form,
    .navbar-nav .dropdown-menu button {
        color: #1a202c !important;
        background-color: white !important;
    }
    
    .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu button:hover {
        color: #38b2ac !important;
        background-color: #f8f9fa !important;
    }
    
    /* Ensure dropdown headers have white background */
    .navbar-nav .dropdown-menu .dropdown-header,
    .navbar-nav .dropdown-menu .dropdown-header * {
        background-color: white !important;
        color: #6c757d !important;
    }
    
    /* Ensure dropdown dividers are visible */
    .navbar-nav .dropdown-menu .dropdown-divider {
        border-top: 1px solid #e9ecef;
        margin: 0.5rem 0;
        background-color: transparent !important;
    }
    
    /* Ensure form elements in dropdown have white background */
    .navbar-nav .dropdown-menu form,
    .navbar-nav .dropdown-menu form * {
        background-color: white !important;
    }
    
    /* ============================================
       MOBILE & TABLET TEXT ALIGNMENT
       Center-align text for better mobile UX
       ============================================ */
    
    /* Center all main content text on mobile/tablet */
    main,
    section,
    .container,
    .row > div,
    .col,
    [class*="col-"] {
        text-align: center !important;
    }
    
    /* Center headings */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    /* Center paragraphs */
    p, .lead {
        text-align: center !important;
    }
    
    /* Center hero section content */
    .hero-section,
    .hero-content,
    .hero-section .container,
    .hero-section .row,
    .hero-section h1,
    .hero-section h2,
    .hero-section p,
    .hero-section .lead {
        text-align: center !important;
    }
    
    /* Center CTA sections */
    .cta-section,
    .cta-section h2,
    .cta-section .lead,
    .cta-hero-section,
    .cta-hero-section h2,
    .cta-hero-section .lead,
    .blog-cta-section,
    .blog-cta-section h2,
    .blog-cta-section .lead,
    .pricing-cta-section,
    .pricing-cta-section h2,
    .pricing-cta-section .lead,
    .early-access-cta-section,
    .early-access-cta-section h2,
    .early-access-cta-section .lead,
    .about-cta-section,
    .about-cta-section h2,
    .about-cta-section .lead {
        text-align: center !important;
    }
    
    /* Center blog content */
    .blog-hero-section,
    .blog-hero-section h1,
    .blog-hero-section p,
    .blog-post-meta,
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content p {
        text-align: center !important;
    }
    
    /* Center card content */
    .card,
    .card-header,
    .card-body,
    .card-title,
    .card-text {
        text-align: center !important;
    }
    
    /* Center pricing cards */
    .pricing-card,
    .plan-header,
    .plan-name,
    .price-display,
    .features-list,
    .plan-cta {
        text-align: center !important;
    }
    
    /* Center feature sections */
    .feature-icon-container,
    .benefit-icon-container {
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Center dashboard content */
    .dashboard-header,
    .dashboard-stat-card,
    .stat-item {
        text-align: center !important;
    }
    
    /* Center footer content */
    .footer-gradient,
    .footer-gradient .col-lg-2,
    .footer-gradient .col-lg-4,
    .footer-gradient h5,
    .footer-gradient p {
        text-align: center !important;
    }
    
    /* Center alerts and notifications */
    .alert,
    .alert-heading {
        text-align: center !important;
    }
    
    /* Center empty states */
    .empty-state,
    .empty-state p {
        text-align: center !important;
    }
    
    /* Center testimonials */
    .testimonial-card,
    .testimonial-text,
    .testimonial-author {
        text-align: center !important;
    }
    
    .testimonial-author {
        justify-content: center !important;
    }
    
    /* Center step numbers and connectors */
    .step-number,
    .step-item {
        text-align: center !important;
    }
    
    /* Exceptions - Keep left-aligned for specific elements */
    .navbar,
    .navbar-nav,
    .dropdown-menu,
    .dropdown-item,
    form label,
    .form-label,
    .form-check-label,
    .form-text,
    input,
    textarea,
    select,
    .table,
    .table th,
    .table td,
    .list-group,
    .list-group-item,
    code,
    pre {
        text-align: left !important;
    }
    
    /* Keep feature lists left-aligned within centered cards */
    .features-list ul,
    .features-list li {
        text-align: left !important;
    }
    
    /* But center the feature list container */
    .features-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Force all content containers to respect viewport width */
    .container,
    .container-fluid,
    .row {
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    /* Navbar mobile optimizations */
    .navbar {
        min-height: var(--kai-navbar-height);
        padding: 0.5rem 0;
        width: 100%;
    }
    
    .navbar .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        min-height: var(--kai-navbar-height);
    }
    
    .navbar-brand {
        font-size: 1.1rem;
        padding: 0.4rem 0;
        max-width: calc(100% - 60px);
        display: flex;
        align-items: center;
    }
    
    .navbar-brand svg {
        width: 32px;
        height: 32px;
    }
    
    .navbar-brand img {
        height: 48px;
        max-height: 48px;
        width: auto;
    }
    
    /* Enhanced toggler for better mobile UX */
    .navbar-toggler {
        padding: 0.375rem 0.5rem;
        border: none !important;
        border-radius: 0.375rem;
        box-shadow: none !important;
        margin: 0 0 0 auto;
        flex-shrink: 0;
        min-width: 48px;
        max-width: 48px;
        min-height: 48px;
        max-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        transition: background-color 0.15s ease;
    }
    
    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }
    
    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100%;
        display: block;
    }
    
    /* Navbar buttons mobile optimization */
    .navbar-nav .btn,
    .navbar-nav .nav-link.btn {
        min-height: 44px; /* WCAG 2.1 minimum touch target */
        padding: 0.75rem 1.25rem;
        margin: 0.25rem 0;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .navbar-nav .btn-outline-light {
        border-width: 2px;
    }
    
    /* Dropdown improvements for mobile */
    .dropdown-menu {
        border-radius: 0.75rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
        min-width: 200px;
    }
    
    .dropdown-item {
        padding: 0.625rem 1rem;
        border-radius: 0.375rem;
        margin-bottom: 0.125rem;
        font-size: 0.95rem;
    }
    
    /* Hero section mobile */
    .hero-section {
        padding: 4rem 0 3rem;
    }
    
    .display-3 {
        font-size: 2.25rem !important;
        line-height: 1.2;
    }
    
    .lead {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    /* Hero stats mobile layout */
    .hero-section .row.text-center.mb-4 {
        margin-bottom: 2rem !important;
    }
    
    .hero-section .col-4 {
        padding: 0.5rem;
    }
    
    .stat-item .h2 {
        font-size: 1.5rem !important;
    }
    
    .stat-item small {
        font-size: 0.75rem;
    }
    
    /* Button optimizations for touch */
    .btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 48px; /* Touch-friendly minimum */
        border-radius: 1rem;
    }
    
    .btn-lg {
        padding: 1.25rem 2rem;
        font-size: 1.1rem;
        min-height: 56px;
    }
    
    .btn-sm {
        padding: 0.75rem 1.25rem;
        min-height: 40px;
    }
    
    /* Hero image mobile */
    .hero-image-container {
        margin-top: 2rem;
    }
    
    .hero-image {
        max-height: 300px;
    }
    
    /* Floating elements mobile adjustments */
    .floating-element-top {
        top: 5%;
        right: 5%;
    }
    
    .floating-element-bottom {
        bottom: 15%;
        left: 5%;
    }
    
    .floating-badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Pricing cards mobile */
    .pricing-card {
        margin-bottom: 2rem;
        margin-top: 1rem;
    }
    
    .plan-header {
        padding: 2rem 1.5rem 1rem;
    }
    
    .features-list,
    .plan-cta {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
    
    .plan-name {
        font-size: 1.25rem;
    }
    
    /* Card improvements */
    .card-body {
        padding: 1.5rem 1.25rem;
    }
    
    /* Form improvements for mobile */
    .form-control {
        padding: 1rem;
        font-size: 1rem; /* Prevents zoom on iOS */
    }
    
    /* Notification improvements */
    #mainNotificationCount {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 0.7rem !important;
    }
    
    .toast-notifications-container {
        margin-top: 75px;
        padding: 1rem;
    }
    
    /* Footer mobile */
    .footer-gradient {
        padding: 3rem 0 2rem;
    }
    
    .footer-gradient .col-6 {
        margin-bottom: 2rem;
    }
    
    /* Footer logo sizing for mobile */
    .footer-logo {
        max-width: 180px;
        max-height: 45px;
    }
    
    .footer-gradient .newsletter-input {
        margin-bottom: 0.75rem;
    }
    
    /* Blog content mobile */
    .blog-article {
        padding: 2rem 1.5rem;
        margin: 1rem 0;
    }
    
    .article-content {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .article-content h1 {
        font-size: 1.75rem;
        margin-top: 2rem;
    }
    
    .article-content h2 {
        font-size: 1.5rem;
        margin-top: 1.75rem;
    }
    
    .article-content h3 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }
    
    /* Sidebar mobile */
    .blog-sidebar {
        position: static;
        margin-top: 2rem;
    }
    
    .widget-body {
        padding: 1.25rem;
    }
}

/* Mobile phones */
@media (max-width: 576px) {
    /* Additional mobile overflow fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Ensure main content stays within viewport */
    main {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Force all content containers to respect viewport width */
    .container,
    .container-fluid,
    .row,
    section,
    div {
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    /* Prevent any element from extending beyond viewport */
    * {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    /* ============================================
       MOBILE TEXT ALIGNMENT (Small Screens)
       Enforce center-align for all content on mobile
       ============================================ */
    
    /* Center ALL text content on mobile */
    main,
    main *:not(form):not(form *):not(.table):not(.table *):not(code):not(pre),
    section,
    .container,
    .container *:not(form):not(form *):not(.table):not(.table *),
    .row,
    .row > div,
    .col,
    [class*="col-"] {
        text-align: center !important;
    }
    
    /* Enforce center alignment for all text elements */
    h1, h2, h3, h4, h5, h6,
    p, span, div:not(form):not(form div),
    .lead, .text-muted,
    a:not(.btn):not(.nav-link):not(.dropdown-item) {
        text-align: center !important;
    }
    
    /* Center all sections */
    .hero-section,
    .hero-section *:not(form):not(form *),
    .cta-section,
    .cta-section *:not(form):not(form *),
    .about-section,
    .about-section *:not(form):not(form *),
    .features-section,
    .features-section *:not(form):not(form *),
    .testimonials-section,
    .testimonials-section *:not(form):not(form *),
    .pricing-section,
    .pricing-section *:not(form):not(form *),
    .blog-section,
    .blog-section *:not(form):not(form *),
    .dashboard-section,
    .dashboard-section *:not(form):not(form *) {
        text-align: center !important;
    }
    
    /* Center all cards */
    .card,
    .card *:not(form):not(form *):not(.table):not(.table *),
    .card-header,
    .card-body,
    .card-footer,
    .card-title,
    .card-subtitle,
    .card-text {
        text-align: center !important;
    }
    
    /* Center pricing cards */
    .pricing-card,
    .pricing-card *:not(form):not(form *),
    .plan-header,
    .plan-name,
    .price-display,
    .price-amount,
    .price-period {
        text-align: center !important;
    }
    
    /* Center feature lists but keep text aligned */
    .features-list {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .features-list ul {
        display: inline-block !important;
        text-align: left !important;
        max-width: 100% !important;
    }
    
    .features-list li {
        text-align: left !important;
    }
    
    /* Center dashboard elements */
    .dashboard-header,
    .dashboard-header *:not(form):not(form *),
    .dashboard-stat-card,
    .dashboard-stat-card *:not(form):not(form *),
    .stat-item,
    .empty-state,
    .empty-state * {
        text-align: center !important;
    }
    
    /* Center blog content */
    .blog-hero-section,
    .blog-hero-section *:not(form):not(form *),
    .blog-article,
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4 {
        text-align: center !important;
    }
    
    .article-content p {
        text-align: center !important;
    }
    
    /* Center footer */
    .footer-gradient,
    .footer-gradient *:not(form):not(form *) {
        text-align: center !important;
    }
    
    /* Center alerts */
    .alert,
    .alert * {
        text-align: center !important;
    }
    
    /* Center testimonials */
    .testimonial-card,
    .testimonial-card *,
    .testimonial-text,
    .testimonial-name,
    .testimonial-role {
        text-align: center !important;
    }
    
    .testimonial-author {
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Center step indicators */
    .step-number,
    .step-item,
    .step-item * {
        text-align: center !important;
    }
    
    /* Center buttons container */
    .btn-group,
    .d-flex.flex-column,
    .d-flex.flex-row {
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Strict exceptions - ONLY these should be left-aligned */
    .navbar,
    .navbar *,
    .navbar-nav,
    .navbar-nav *,
    .dropdown-menu,
    .dropdown-menu *,
    .dropdown-item,
    .dropdown-item *,
    form,
    form *,
    .form-control,
    .form-select,
    .form-check,
    .form-check *,
    .form-label,
    .form-text,
    .invalid-feedback,
    .valid-feedback,
    input,
    input *,
    textarea,
    textarea *,
    select,
    select *,
    .table,
    .table *,
    .table th,
    .table td,
    .list-group,
    .list-group *,
    .list-group-item,
    code,
    code *,
    pre,
    pre * {
        text-align: left !important;
    }
    
    /* Navbar ultra-mobile */
    .navbar {
        min-height: var(--kai-navbar-height);
        padding: 0.3rem 0;
        width: 100%;
    }
    
    .navbar .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        min-height: var(--kai-navbar-height);
    }
    
    .navbar-brand {
        font-size: 1rem;
        padding: 0.35rem 0;
        max-width: calc(100% - 56px);
        display: flex;
        align-items: center;
    }
    
    .navbar-brand svg {
        width: 28px;
        height: 28px;
    }
    
    .navbar-brand img {
        height: 44px;
        max-height: 44px;
        width: auto;
    }
    
    .navbar-brand .text-gradient-secondary {
        display: none; /* Hide text on very small screens */
    }
    
    /* Enhanced toggler for small mobile - WCAG compliant */
    .navbar-toggler {
        padding: 0.375rem 0.5rem;
        border-radius: 0.375rem;
        margin: 0 0 0 auto;
        min-width: 46px;
        max-width: 46px;
        min-height: 46px;
        max-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        border: none !important;
        transition: background-color 0.15s ease;
    }
    
    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }
    
    .navbar-toggler-icon {
        width: 1.4rem;
        height: 1.4rem;
        background-size: 100%;
        display: block;
    }
    
    /* Navbar buttons for small mobile */
    .navbar-nav .btn,
    .navbar-nav .nav-link.btn {
        min-height: 44px; /* WCAG 2.1 minimum touch target */
        padding: 0.75rem 1rem;
        margin: 0.25rem 0;
        width: 100%;
        font-size: 0.95rem;
    }
    
    /* Hero ultra-mobile */
    .hero-section {
        padding: 3rem 0 2rem;
    }
    
    .display-3 {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }
    
    .lead {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    /* Hero stats ultra-mobile */
    .hero-section .row.text-center.mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .stat-item .h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem;
    }
    
    .stat-item small {
        font-size: 0.7rem;
    }
    
    /* Button ultra-mobile */
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 0.75rem;
        width: 100%;
    }
    
    .btn-lg {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Trust indicators ultra-mobile */
    .d-flex.align-items-center.gap-4 {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .d-flex.align-items-center.gap-4 > div {
        flex: 1 1 45%;
        min-width: 120px;
        margin-bottom: 0.5rem;
    }
    
    /* Floating elements ultra-mobile */
    .floating-element {
        display: none; /* Hide on very small screens for better UX */
    }
    
    /* Pricing cards ultra-mobile */
    .price-amount {
        font-size: 2rem;
    }
    
    .plan-name {
        font-size: 1.125rem;
    }
    
    .plan-header {
        padding: 1.5rem 1rem 1rem;
    }
    
    .features-list,
    .plan-cta {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .feature-text {
        font-size: 0.95rem;
    }
    
    /* Navigation items mobile */
    .navbar-nav .nav-link {
        padding: 0.625rem 1rem !important;
        font-size: 0.95rem;
        margin: 0.125rem 0;
    }
    
    /* Dropdown ultra-mobile */
    .dropdown-menu {
        min-width: 220px;
        max-width: 90vw;
        padding: 0.5rem;
    }
    
    .dropdown-item {
        padding: 0.5rem 0.875rem;
        font-size: 0.9rem;
    }
    
    /* Form ultra-mobile */
    .form-control {
        padding: 0.875rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Toast ultra-mobile */
    .toast-notifications-container {
        margin-top: 70px;
        padding: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
    }
    
    .toast {
        font-size: 0.875rem;
    }
    
    /* Footer ultra-mobile */
    .footer-gradient {
        padding: 2rem 0 1.5rem;
        text-align: center;
    }
    
    .footer-gradient .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .footer-gradient .col-lg-4 {
        margin-bottom: 2rem;
    }
    
    /* Footer logo sizing for ultra-mobile */
    .footer-logo {
        max-width: 160px;
        max-height: 40px;
    }
    
    /* Blog ultra-mobile */
    .blog-article {
        padding: 1.5rem 1rem;
    }
    
    .article-content {
        font-size: 0.95rem;
    }
    
    .article-content h1 {
        font-size: 1.5rem;
    }
    
    .article-content h2 {
        font-size: 1.25rem;
    }
    
    .article-content pre {
        padding: 1rem;
        font-size: 0.8rem;
        overflow-x: auto;
    }
    
    .article-content table {
        font-size: 0.875rem;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    /* Step numbers mobile */
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .step-connector-horizontal {
        display: none; /* Hide connectors on mobile */
    }
    
    /* Performance cards mobile */
    .performance-stat-card,
    .performance-history-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Avatar mobile */
    .avatar {
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }
    
    .dashboard-avatar {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }
}

/* Accessibility Improvements */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--kai-primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 2000;
    font-weight: 600;
    transition: var(--kai-transition);
}

.skip-link:focus {
    top: 6px;
    color: white;
}

/* Focus indicators for better accessibility */
.btn:focus,
.form-control:focus,
.nav-link:focus,
.dropdown-item:focus {
    outline: 2px solid var(--kai-secondary);
    outline-offset: 2px;
}

/* Enhanced navbar toggler focus for accessibility */
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.4) !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.navbar-toggler:focus-visible {
    box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.5) !important;
    border-color: var(--kai-secondary) !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .alert {
        display: none !important;
    }
    
    .hero-section {
        background: white !important;
        color: black !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
}

/* Hero Section Button Text Visibility */

/* Ensure hero section buttons have proper text contrast using body class */
.homepage-body .hero-section .btn-light,
.homepage-body .hero-section .btn-light *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.homepage-body .cta-hero-section .btn-light,
.homepage-body .cta-hero-section .btn-light *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: #1a202c !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.homepage-body .hero-section .btn-light,
.homepage-body .cta-hero-section .btn-light {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

.homepage-body .hero-section .btn-light:hover,
.homepage-body .hero-section .btn-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.homepage-body .cta-hero-section .btn-light:hover,
.homepage-body .cta-hero-section .btn-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: #1a202c !important;
}

.homepage-body .hero-section .btn-light:hover,
.homepage-body .cta-hero-section .btn-light:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure primary buttons on hero have white text */
.homepage-body .hero-section .btn-primary,
.homepage-body .hero-section .btn-primary *,
.homepage-body .cta-hero-section .btn-primary,
.homepage-body .cta-hero-section .btn-primary *,
.homepage-body .hero-section .btn-secondary,
.homepage-body .hero-section .btn-secondary *,
.homepage-body .cta-hero-section .btn-secondary,
.homepage-body .cta-hero-section .btn-secondary * {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* Ensure outline buttons on hero sections have white text and visible borders */
.homepage-body .hero-section .btn-outline-light,
.homepage-body .hero-section .btn-outline-light *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.homepage-body .cta-hero-section .btn-outline-light,
.homepage-body .cta-hero-section .btn-outline-light *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.homepage-body .hero-section .btn-outline-light,
.homepage-body .cta-hero-section .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
}

.homepage-body .hero-section .btn-outline-light:hover,
.homepage-body .hero-section .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.homepage-body .cta-hero-section .btn-outline-light:hover,
.homepage-body .cta-hero-section .btn-outline-light:hover *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: #1a202c !important;
}

.homepage-body .hero-section .btn-outline-light:hover,
.homepage-body .cta-hero-section .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #ffffff !important;
}

/* ULTIMATE FIX: Index Page Button Text Visibility */

/* Target specific buttons by their content and positioning */
.homepage-body .hero-section .btn.btn-light[href*="Dashboard"],
.homepage-body .hero-section .btn.btn-light[href*="Register"],
.homepage-body .cta-hero-section .btn.btn-light[href*="Dashboard"],
.homepage-body .cta-hero-section .btn.btn-light[href*="EarlyAccess"] {
    color: #111827 !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.homepage-body .hero-section .btn.btn-light[href*="Dashboard"]:hover,
.homepage-body .hero-section .btn.btn-light[href*="Register"]:hover,
.homepage-body .cta-hero-section .btn.btn-light[href*="Dashboard"]:hover,
.homepage-body .cta-hero-section .btn.btn-light[href*="EarlyAccess"]:hover {
    color: #111827 !important;
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Primary button fixes for Join Early Access List */
.homepage-body .hero-section .btn.btn-primary[href*="EarlyAccess"],
.homepage-body .cta-hero-section .btn.btn-primary[href*="EarlyAccess"],
.homepage-body .hero-section .btn.btn-primary[href*="Register"],
.homepage-body .cta-hero-section .btn.btn-primary[href*="Register"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1a365d 0%, #38b2ac 100%) !important;
    border-color: transparent !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.3) !important;
}

.homepage-body .hero-section .btn.btn-primary[href*="EarlyAccess"]:hover,
.homepage-body .cta-hero-section .btn.btn-primary[href*="EarlyAccess"]:hover,
.homepage-body .hero-section .btn.btn-primary[href*="Register"]:hover,
.homepage-body .cta-hero-section .btn.btn-primary[href*="Register"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2c5282 0%, #4299e1 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.4) !important;
}

/* Force all button icons to inherit text color */
.homepage-body .hero-section .btn i,
.homepage-body .cta-hero-section .btn i {
    color: inherit !important;
}

/* Ensure proper contrast for all button text elements */
.homepage-body .hero-section .btn *:not(i):not([class^="bi-"]):not([class*=" bi-"]),
.homepage-body .cta-hero-section .btn *:not(i):not([class^="bi-"]):not([class*=" bi-"]) {
    color: inherit !important;
    text-shadow: none !important;
}

/* Responsive pricing card improvements */
@media (max-width: 768px) {
    .pricing-card.featured {
        border-width: 2px;
        box-shadow: 0 15px 30px rgba(56, 178, 172, 0.12);
        transform: scale(1.02);
    }
}

@media (max-width: 576px) {
    .pricing-card.featured {
        border-width: 2px;
        margin: 0 0.5rem;
        transform: scale(1);
    }
}

/* CTA Section - Modern Early Access Styling */
.cta-section,
.blog-cta-section,
.pricing-cta-section,
.early-access-cta-section,
.about-cta-section,
.cta-hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Modern gradient background */
    position: relative;
    overflow: hidden;
    padding: 4rem 0 !important; /* More generous padding */
}

/* ==================================================================================
   COMMON FORM VALIDATION STYLES - Reusable across all forms
   ================================================================================== */

/* Custom Checkbox Styling - Common class for all styled checkboxes */
.form-check-input.kai-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #6c757d !important;
    background-color: white !important;
    cursor: pointer;
    border-radius: 0.25rem;
}

.form-check-input.kai-checkbox:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.form-check-input.kai-checkbox:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.was-validated .form-check-input.kai-checkbox:invalid {
    border-color: #dc3545 !important;
}

/* Form Check Labels - Common styling */
.form-check-label.kai-label {
    line-height: 1.5;
    cursor: pointer;
}

/* Validation Error Container - Common class for all forms */
.kai-error-container {
    display: none !important;
}

.kai-error-container .error-icon {
    font-size: 1.25rem;
}

/* Form Control Sizing - Common large form controls */
.form-control.kai-form-control-lg,
.form-select.kai-form-control-lg {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

/* Form Labels - Common styling with icons */
.kai-form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.kai-form-label i {
    margin-right: 0.5rem;
    color: var(--kai-primary, #1a365d);
}

/* Form Section Styling - Common card layout for forms */
.kai-form-card {
    border: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

.kai-form-card .card-body {
    padding: 3rem;
}

/* Form Header - Common styling for form titles */
.kai-form-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.kai-form-header.text-center {
    flex-direction: column;
    text-align: center;
}

.kai-form-header .stat-icon {
    margin-right: 1rem;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 16px;
}

.kai-form-header.text-center .stat-icon {
    margin-right: 0;
}

/* Large stat icon for form headers */
.kai-form-header .stat-icon-large,
.stat-icon-large {
    width: 80px;
    height: 80px;
}

/* Large icon inside stat-icon container */
.kai-form-header .stat-icon i,
.stat-icon-large i {
    font-size: 2.75rem;
    color: white !important;
}

/* Icon container for payment/subscription pages */
.icon-container-large {
    width: 80px;
    height: 80px;
}

.icon-container-large i {
    font-size: 2.5rem;
}

.kai-form-header h3 {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.kai-form-header p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Responsive Form Adjustments */
/* Tablet: Medium size for stat-icon-large */
@media (max-width: 992px) and (min-width: 769px) {
    .kai-form-header .stat-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 14px;
    }
    
    .kai-form-header .stat-icon i {
        font-size: 2.25rem !important;
    }
    
    .stat-icon-large {
        width: 70px !important;
        height: 70px !important;
    }
    
    .kai-form-header .stat-icon-large i,
    .stat-icon-large i {
        font-size: 2.25rem !important;
    }
}

@media (max-width: 768px) {
    .kai-form-card .card-body {
        padding: 2rem;
    }
    
    .form-control.kai-form-control-lg,
    .form-select.kai-form-control-lg {
        font-size: 0.95rem;
        padding: 0.625rem 0.875rem;
    }
}

@media (max-width: 576px) {
    .kai-form-card .card-body {
        padding: 1.5rem;
    }
}

/* ==================================================================================
   Legacy Support - Backward compatibility for existing forms
   These IDs can be removed once all forms are migrated to use .kai-* classes
   ================================================================================== */

/* Error Container - Specific ID support (backward compatibility) */
#error-container {
    display: none !important;
}

#error-container .bi-exclamation-circle-fill {
    font-size: 1.25rem;
}

/* Legacy checkbox IDs - These now inherit from .kai-checkbox class applied in HTML
   No additional styling needed as they use the common .kai-checkbox class */

.cta-section::before,
.blog-cta-section::before,
.pricing-cta-section::before,
.early-access-cta-section::before,
.about-cta-section::before,
.cta-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.8) 0%, rgba(56, 178, 172, 0.8) 100%);
    z-index: 1;
}

/* Add decorative elements */
.cta-section::after,
.blog-cta-section::after,
.pricing-cta-section::after,
.early-access-cta-section::after,
.about-cta-section::after,
.cta-hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-20px) translateX(10px); }
}

.cta-section .container,
.blog-cta-section .container,
.pricing-cta-section .container,
.early-access-cta-section .container,
.about-cta-section .container,
.cta-hero-section .container {
    position: relative;
    z-index: 2;
}

.cta-section h2,
.blog-cta-section h2,
.pricing-cta-section h2,
.early-access-cta-section h2,
.about-cta-section h2,
.cta-hero-section h2 {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cta-section .lead,
.blog-cta-section .lead,
.pricing-cta-section .lead,
.early-access-cta-section .lead,
.about-cta-section .lead,
.cta-hero-section .lead {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.125rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 2.5rem !important;
}

.cta-section .btn-light,
.blog-cta-section .btn-light,
.pricing-cta-section .btn-light,
.early-access-cta-section .btn-light,
.about-cta-section .btn-light,
.cta-hero-section .btn-light {
    background: #ffffff;
    color: #1a365d !important;
    border: none;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    margin: 0 0.75rem 1rem 0.75rem;
}

/* Ensure icons are visible in CTA section light buttons */
.cta-section .btn-light i,
.cta-section .btn-light [class^="bi-"],
.cta-section .btn-light [class*=" bi-"],
.blog-cta-section .btn-light i,
.blog-cta-section .btn-light [class^="bi-"],
.blog-cta-section .btn-light [class*=" bi-"],
.pricing-cta-section .btn-light i,
.pricing-cta-section .btn-light [class^="bi-"],
.pricing-cta-section .btn-light [class*=" bi-"],
.early-access-cta-section .btn-light i,
.early-access-cta-section .btn-light [class^="bi-"],
.early-access-cta-section .btn-light [class*=" bi-"],
.about-cta-section .btn-light i,
.about-cta-section .btn-light [class^="bi-"],
.about-cta-section .btn-light [class*=" bi-"],
.cta-hero-section .btn-light i,
.cta-hero-section .btn-light [class^="bi-"],
.cta-hero-section .btn-light [class*=" bi-"] {
    color: #1a365d !important;
    opacity: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    font-size: inherit !important;
    vertical-align: middle !important;
}

.cta-section .btn-light:hover,
.blog-cta-section .btn-light:hover,
.pricing-cta-section .btn-light:hover,
.early-access-cta-section .btn-light:hover,
.about-cta-section .btn-light:hover,
.cta-hero-section .btn-light:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: #1a365d !important;
}

.cta-section .btn-outline-light,
.blog-cta-section .btn-outline-light,
.pricing-cta-section .btn-outline-light,
.early-access-cta-section .btn-outline-light,
.about-cta-section .btn-outline-light,
.cta-hero-section .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #ffffff !important;
    background: transparent;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    margin: 0 0.75rem 1rem 0.75rem;
}

.cta-section .btn-outline-light:hover,
.blog-cta-section .btn-outline-light:hover,
.pricing-cta-section .btn-outline-light:hover,
.early-access-cta-section .btn-outline-light:hover,
.about-cta-section .btn-outline-light:hover,
.cta-hero-section .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

/* Add responsive adjustments for CTA sections */
@media (max-width: 768px) {
    .cta-section,
    .blog-cta-section,
    .pricing-cta-section,
    .early-access-cta-section,
    .about-cta-section,
    .cta-hero-section {
        padding: 3rem 0 !important;
    }
    
    .cta-section .btn-light,
    .blog-cta-section .btn-light,
    .pricing-cta-section .btn-light,
    .early-access-cta-section .btn-light,
    .about-cta-section .btn-light,
    .cta-hero-section .btn-light,
    .cta-section .btn-outline-light,
    .blog-cta-section .btn-outline-light,
    .pricing-cta-section .btn-outline-light,
    .early-access-cta-section .btn-outline-light,
    .about-cta-section .btn-outline-light,
    .cta-hero-section .btn-outline-light {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Country Code Selector Styling */
.country-code-select {
    max-width: 130px;
    min-width: 130px;
    flex: 0 0 auto;
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background-image: none !important;
    padding-right: 1.5rem;
}

/* Ensure input-group inputs maintain proper styling and match other form inputs */
.input-group > .form-control {
    border-radius: 0.375rem;
}

.input-group > .form-select:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Global Hero Section Improvements */
.hero-section {
    min-height: 80vh !important; /* Consistent smaller height across all pages */
}

@media (max-width: 991px) {
    .hero-section {
        min-height: 70vh !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 60vh !important;
    }
}

/* Testimonials Section Styling - Updated */
.testimonial-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.testimonial-rating {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    font-style: normal;
    quotes: none;
}

.testimonial-text::before,
.testimonial-text::after {
    content: none !important;
    display: none !important;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
}

.testimonial-avatar-sarah {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.testimonial-avatar-michael {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.testimonial-avatar-alexandra {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.testimonial-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #2d3748;
    margin-bottom: 0.1rem;
}

.testimonial-role {
    font-size: 0.85rem;
    color: #718096;
    font-weight: 400;
}

/* Responsive testimonials */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 1.25rem;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
    
    .testimonial-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.8rem;
    }
}

/* ============================================
   Enhanced Pricing Page Styles
   ============================================ */

/* Pricing Toggle */
.pricing-toggle {
    display: inline-flex;
    padding: 0.25rem;
    background: #f8f9fa;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pricing-toggle .btn {
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pricing-toggle .btn-check:checked + .btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Premium Card Styling */
.pricing-card-featured {
    animation: pulse-border 2s ease-in-out infinite;
}

.pricing-section .col-lg-5,
.pricing-section .col-md-6 {
    position: relative;
    overflow: visible !important;
}

.pricing-section {
    position: relative;
    overflow: visible !important;
    padding-top: 1rem;
}



/* Premium card wrapper - add top margin for badge space on desktop */
.premium-card-wrapper {
    margin-top: 2rem;
    transition: transform 0.3s ease;
}

/* Badge wrapper - positioned on top border of card */
.badge-wrapper {
    top: 0;
    left: 0;
    z-index: 10;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Premium badge styling */
.premium-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-size: 0.9rem;
}

/* Premium card scale effect - removed to prevent badge position issues */
.premium-card-scale {
    transform: none;
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
    }
}

.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Comparison Table Styling */
.comparison-table-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
}

/* Responsive pricing cards */
@media (max-width: 991px) {
    .pricing-section .col-lg-5 {
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Remove scale transform on mobile for premium cards */
    .premium-card-scale {
        transform: none !important;
    }
    
    /* Reduce margin on tablet */
    .premium-card-wrapper {
        margin-top: 1.5rem !important;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 767px) {
    /* Full width cards on mobile */
    .pricing-section .col-lg-5,
    .pricing-section .col-md-6 {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow: visible !important;
    }
    
    /* Ensure pricing section doesn't clip badge */
    .pricing-section {
        overflow: visible !important;
        padding-top: 3rem !important;
        margin-top: 1rem !important;
    }
    
    /* Ensure row container doesn't clip */
    .pricing-section.row {
        overflow: visible !important;
    }
    
    /* Remove scale effect completely on mobile */
    .premium-card-scale {
        transform: none !important;
    }
    
    /* Ensure badge wrapper is visible on mobile */
    .premium-card-wrapper {
        overflow: visible !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Keep badge centered on border line */
    .badge-wrapper {
        transform: translateY(-50%) !important;
        overflow: visible !important;
        z-index: 1000 !important;
        top: 0 !important;
    }
    
    /* Smaller badge on mobile */
    .position-absolute .badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }
    
    /* Make normal card borders more visible on mobile */
    .pricing-section .card:not(.pricing-card-featured) {
        border: 1px solid rgba(0, 0, 0, 0.125) !important;
    }
    
    /* Adjust card header padding */
    .card-header {
        padding: 1rem !important;
    }
    
    /* Smaller icon on mobile */
    .card-header .display-4 {
        font-size: 2.5rem !important;
    }
    
    /* Adjust heading size */
    .card-header .h3 {
        font-size: 1.25rem !important;
    }
    
    /* Smaller price display on mobile */
    .card-body .display-4 {
        font-size: 2rem !important;
    }
    
    /* Reduce spacing between cards */
    .pricing-section .g-4 {
        gap: 1.5rem !important;
    }
    
    /* Adjust premium card border */
    .pricing-card-featured.border-3 {
        border-width: 2px !important;
    }
    
    /* Adjust button size on mobile */
    .card-body .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* Extra small screens - iPhone and similar */
@media (max-width: 575px) {
    /* Even more compact on very small screens */
    .pricing-section .col-lg-5,
    .pricing-section .col-md-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        overflow: visible !important;
    }
    
    /* Ensure badge is visible on iPhone */
    .pricing-section {
        padding-top: 2rem !important;
        margin-top: 0.5rem !important;
        overflow: visible !important;
    }
    
    /* No extra margin - badge sits on border */
    .premium-card-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }
    
    /* Keep badge perfectly centered on border */
    .badge-wrapper {
        transform: translateY(-50%) !important;
        top: 0 !important;
    }
    
    /* Reduce card body padding */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Smaller badge text */
    .position-absolute .badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        white-space: nowrap !important;
    }
    
    /* Ensure badge container is visible */
    .badge-wrapper {
        z-index: 1000 !important;
        overflow: visible !important;
    }
    
    /* Compact pricing display */
    .card-body .display-4 {
        font-size: 1.75rem !important;
    }
    
    /* Smaller feature list icons */
    .card-body .bi-check-circle-fill {
        font-size: 1rem;
    }
    
    /* Adjust telegram channel badge */
    .bg-light.rounded-pill {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem !important;
    }
}

/* Hover effects - disable on touch devices */
@media (hover: hover) {
    .pricing-section .card:hover {
        transform: translateY(-5px);
        transition: all 0.3s ease;
    }

    /* Move entire wrapper (card + badge together) on hover */
    .premium-card-wrapper:hover {
        transform: translateY(-5px);
    }
    
    .premium-card-wrapper:hover .card {
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3) !important;
    }
}

/* Disable hover effects on mobile */
@media (hover: none) {
    .pricing-section .card:hover {
        transform: none;
    }

    .pricing-card-featured:hover {
        transform: none;
    }
}

/* ==========================================================================
   Copy Tooltip (used across the site)
   ========================================================================== */

/* Copy Tooltip Animations */
@keyframes copyFadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes copyFadeOutUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Copy Success Tooltip */
.copy-tooltip {
    position: fixed;
    background: #198754;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
    overflow: hidden;
    max-width: 90vw;
    text-overflow: ellipsis;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #198754;
}

/* Responsive Copy Tooltip - Mobile & Tablet */
@media (max-width: 768px) {
    .copy-tooltip {
        font-size: 13px;
        padding: 6px 12px;
        max-width: 85vw;
        overflow: hidden;
    }
    
    .copy-tooltip::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #198754;
        bottom: -5px;
    }
}

@media (max-width: 480px) {
    .copy-tooltip {
        font-size: 12px;
        padding: 5px 10px;
        max-width: 80vw;
        overflow: hidden;
    }
    
    .copy-tooltip::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #198754;
        bottom: -4px;
    }
}

/* ========================================
   INVITE LINK SECTION - MODERN MINIMAL DESIGN
   Seamless input + button connection
   ======================================== */

/* Base container */
.invite-link-container {
    overflow-x: hidden;
}

/* Flexbox wrapper for input + button - no gap */
.invite-link-display-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

/* Input field - grows to fill space */
.invite-link-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #2c3e50;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    transition: all 0.2s ease;
}

.invite-link-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Telegram Join Page - Mobile Optimization */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    
    /* Alert sections - better mobile display */
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem;
        word-break: break-word;
    }
    
    .alert .btn {
        margin-top: 0.5rem;
        width: 100%;
    }
    
    /* Card spacing and padding */
    .card.mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
        overflow-x: hidden;
    }
    
    /* Hero section adjustments */
    .kai-form-header h3 {
        font-size: 1.25rem;
    }
    
    .kai-form-header p {
        font-size: 0.9rem;
    }
    
    /* Regular stat-icon in form headers - mobile size */
    .kai-form-header .stat-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 12px;
    }
    
    .kai-form-header .stat-icon i {
        font-size: 2rem !important;
    }
    
    .stat-icon-large {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Scale icon inside stat-icon-large for mobile */
    .kai-form-header .stat-icon-large i,
    .stat-icon-large i {
        font-size: 2rem !important;
    }
    
    /* Header with title and badge - Stack on mobile */
    .d-flex.justify-content-between.align-items-start {
        flex-direction: column !important;
        gap: 0.75rem;
    }
    
    /* Channel info section */
    .d-flex.justify-content-between.align-items-start > div {
        width: 100%;
    }
    
    /* Channel name - prevent overflow */
    h6.fw-bold {
        font-size: 1rem;
        word-break: break-word;
        line-height: 1.3;
    }
    
    /* Badges - wrap on mobile */
    .badge {
        font-size: 0.75rem;
        padding: 0.35em 0.65em;
        display: inline-block;
        margin-bottom: 0.25rem;
    }
    
    /* Expiration text - smaller and wrap-friendly */
    small.text-muted {
        font-size: 0.8rem;
        display: block;
        margin-top: 0.25rem;
        word-break: break-word;
    }
    
    /* "Generate All Links" header section */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .d-flex.justify-content-between.align-items-center h5 {
        width: 100%;
        margin-bottom: 0 !important;
        font-size: 1.1rem;
    }
    
    .d-flex.justify-content-between.align-items-center form {
        width: 100%;
    }
    
    .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
    }
    
    /* Invite link container - tablet sizing */
    .invite-link-container {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .invite-link-container .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.5rem !important;
    }
    
    /* Alert icon styling */
    .alert-icon-large {
        font-size: 1.5rem;
    }
    
    /* Tablet: slightly larger sizing - maintain seamless connection */
    .invite-link-display-wrapper {
        gap: 0 !important;
    }
    
    .invite-link-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
        border-radius: 0.375rem 0 0 0.375rem !important;
    }
    
    /* Button improvements */
    .btn-sm {
        font-size: 0.85rem !important;
        padding: 0.45rem 0.85rem !important;
        white-space: nowrap;
    }
    
    .btn.w-100 {
        white-space: normal;
        text-align: center;
        word-break: break-word;
    }
    
    /* Icon spacing in buttons */
    .btn i {
        margin-right: 0.35rem;
    }
    
    /* Channel description */
    p.text-muted.small {
        font-size: 0.8rem;
        margin-bottom: 0.75rem !important;
        line-height: 1.4;
    }
    
    /* Form elements - prevent zoom on iOS */
    input[type="text"] {
        font-size: 16px !important;
    }
    
    /* Invite link inputs - smaller but visible */
    .invite-link-container input[readonly] {
        font-size: 0.75rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop: Enhanced sizing and spacing */
@media (min-width: 992px) {
    .invite-link-display-wrapper {
        gap: 0 !important;
    }
    
    .invite-link-input {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        border-radius: 0.375rem 0 0 0.375rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Container tighter on very small screens */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Tighter spacing */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card.mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Hero adjustments */
    .kai-form-header h3 {
        font-size: 1.1rem;
    }
    
    .stat-icon-large {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }
    
    /* Alert sections */
    .alert {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
    
    h6.fw-bold {
        font-size: 0.95rem;
    }
    
    /* Smaller badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
        white-space: normal;
        line-height: 1.3;
    }
    
    /* Invite link container - compact for small screens */
    .invite-link-container {
        padding: 0.5rem !important;
    }
    
    .invite-link-container .form-label {
        font-size: 0.75rem;
    }
    
    /* Extra small mobile: compact sizing - maintain seamless connection */
    .invite-link-display-wrapper {
        gap: 0 !important;
    }
    
    .invite-link-input {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
        border-radius: 0.375rem 0 0 0.375rem !important;
    }
    
    /* Button text sizing */
    .btn-sm {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    
    .btn i {
        font-size: 0.9rem;
    }
    
    /* Headings */
    .d-flex.justify-content-between.align-items-center h5 {
        font-size: 1rem;
    }
}