/* ========================================
   WORTI ERP - Custom Styles
   ======================================== */

/* Base Styles */
:root {
    --primary-600: #006699;
    --primary-700: #004d73;
    --secondary-600: #006699;
    --accent-500: #ff9f43;
    /* Odoo-style highlight accent */
    --gray-900: #111827;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
}

/* Global Soft UI Foundation */
div,
section,
article,
nav,
aside,
main {
    border-radius: 12px;
}

button,
input,
select,
textarea,
.btn,
.form-control {
    border-radius: 8px !important;
}

.sidebar,
.topbar,
.page-header {
    border-radius: 16px !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #030712;
    --bg-surface: #0f172a;
    --bg-slate: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-outer: rgba(148, 163, 184, 0.12);
    --border-inner: rgba(148, 163, 184, 0.08);
}

/* Global Dark Mode Text Adaptation */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.bi):not(.logo span),
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body {
    background: var(--bg-app);
    background-image: radial-gradient(1200px 600px at 10% -10%, rgba(14, 165, 233, 0.1), transparent 70%),
        radial-gradient(900px 500px at 90% 0%, rgba(30, 41, 59, 0.2), transparent 60%),
        linear-gradient(180deg, #030712 0%, #0f172a 100%);
    color: var(--text-main);
}

/* All Divs / Containers Dark Mode Safety */
html[data-theme="dark"] div:not([class*="bg-"]):not([class*="primary"]):not([class*="secondary"]),
html[data-theme="dark"] section:not([class*="bg-"]) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"] {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-gray-50\/50,
html[data-theme="dark"] .bg-slate-50\/50 {
    background-color: var(--bg-slate) !important;
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-100 {
    background-color: #111827 !important;
}

html[data-theme="dark"] .bg-primary-50,
html[data-theme="dark"] .bg-secondary-50,
html[data-theme="dark"] .bg-accent-100,
html[data-theme="dark"] .bg-primary-100,
html[data-theme="dark"] .bg-secondary-100 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-900 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-200 {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"] .border-primary-100,
html[data-theme="dark"] .border-secondary-100 {
    border-color: rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .shadow-soft,
html[data-theme="dark"] .shadow-card,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .bg-gradient-to-br,
html[data-theme="dark"] .bg-gradient-to-tr,
html[data-theme="dark"] .bg-gradient-to-r,
html[data-theme="dark"] .bg-gradient-to-l,
html[data-theme="dark"] .bg-gradient-to-bl,
html[data-theme="dark"] .bg-gradient-to-tl {
    filter: brightness(0.8) saturate(0.9);
}

html[data-theme="dark"] .btn-primary {
    box-shadow: 0 8px 20px rgba(0, 102, 153, 0.35);
}

html[data-theme="dark"] .btn-secondary {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
    background: rgba(30, 41, 59, 1) !important;
}

html[data-theme="dark"] .soft-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95)) !important;
}

html[data-theme="dark"] .secteur-card,
html[data-theme="dark"] .sector-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.9)) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"] .secteur-card .bg-red-50,
html[data-theme="dark"] .secteur-card .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}

html[data-theme="dark"] .secteur-card .bg-orange-50,
html[data-theme="dark"] .secteur-card .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.18) !important;
}

html[data-theme="dark"] .secteur-card .bg-blue-50,
html[data-theme="dark"] .secteur-card .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .secteur-card .bg-green-50,
html[data-theme="dark"] .secteur-card .bg-green-100,
html[data-theme="dark"] .secteur-card .bg-emerald-50,
html[data-theme="dark"] .secteur-card .bg-emerald-100 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}

html[data-theme="dark"] .secteur-card .bg-purple-50,
html[data-theme="dark"] .secteur-card .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.18) !important;
}

html[data-theme="dark"] .secteur-card .bg-gray-50,
html[data-theme="dark"] .secteur-card .bg-gray-100,
html[data-theme="dark"] .module-card .bg-blue-50,
html[data-theme="dark"] .module-card .bg-emerald-50,
html[data-theme="dark"] .module-card .bg-orange-50,
html[data-theme="dark"] .module-card .bg-purple-50 {
    background-color: rgba(148, 163, 184, 0.16) !important;
}

/* Individual module colors for dark mode */
html[data-theme="dark"] .module-card .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .module-card .bg-emerald-50 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}

html[data-theme="dark"] .module-card .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.18) !important;
}

html[data-theme="dark"] .module-card .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.18) !important;
}

html[data-theme="dark"] .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .bg-white\/30 {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .text-gray-400 {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .soft-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.9)) !important;
}

html[data-theme="dark"] .soft-card {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"] .pricing-card {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-theme="dark"] .pricing-card .text-gray-900 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .pricing-card .text-gray-600,
html[data-theme="dark"] .pricing-card .text-gray-700 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .faq-card {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"] .soft-cta {
    filter: saturate(0.85) brightness(0.85);
}

/* --- Components Dark Mode Adaptation --- */
html[data-theme="dark"] .bento-glass,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .glass-card {
    background: rgba(30, 41, 59, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .module-card,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .testimonial-card {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .mesh-bg {
    background-color: #030712 !important;
    background-image:
        radial-gradient(at 0% 0%, rgba(0, 102, 153, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 102, 153, 0.1) 0px, transparent 50%) !important;
}

html[data-theme="dark"] .hero-img-frame {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .hero-img-frame::before {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, transparent 60%) !important;
}

/* --- Surface Design System (Global) --- */
.hero-surface {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(0, 128, 191, 0.12), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(0, 102, 153, 0.12), transparent 55%),
        radial-gradient(700px 400px at 20% 80%, rgba(14, 145, 233, 0.12), transparent 60%),
        linear-gradient(120deg, #f8fbff 0%, #ffffff 55%, #f4f9ff 100%);
}

.section-surface {
    background:
        radial-gradient(800px 400px at 10% 0%, rgba(0, 128, 191, 0.06), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(0, 102, 153, 0.05), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.section-surface-alt {
    background:
        radial-gradient(900px 420px at 0% 50%, rgba(0, 128, 191, 0.04), transparent 60%),
        radial-gradient(700px 360px at 100% 10%, rgba(0, 102, 153, 0.04), transparent 55%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

/* --- Surface Dark Mode Adaptation --- */
html[data-theme="dark"] .hero-surface {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(14, 165, 233, .1), transparent 70%),
        radial-gradient(900px 500px at 90% 0%, rgba(30, 41, 59, .4), transparent 60%),
        radial-gradient(700px 400px at 20% 80%, rgba(15, 23, 42, .6), transparent 60%),
        linear-gradient(120deg, #020617 0%, #0f172a 55%, #020617 100%) !important;
}

html[data-theme="dark"] .section-surface {
    background: radial-gradient(800px 400px at 10% 0%, rgba(14, 165, 233, .08), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(30, 41, 59, .12), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #030712 100%) !important;
}

html[data-theme="dark"] .section-surface-alt {
    background: radial-gradient(900px 420px at 0% 50%, rgba(56, 189, 248, .1), transparent 60%),
        radial-gradient(700px 360px at 100% 10%, rgba(30, 41, 59, .15), transparent 55%),
        linear-gradient(180deg, #030712 0%, #0f172a 100%) !important;
}

html[data-theme="dark"] .hero-grid {
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) !important;
}

/* --- End Surface Adaptation --- */

/* --- End Components Adaptation --- */

/* Dark overrides for index-erp page */
html[data-theme="dark"] .wortis-app-bar {
    background: linear-gradient(90deg, #0b1220 0%, #0f172a 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .wortis-card {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Generic Dashboard Components for Dark Mode - Premium */
html[data-theme="dark"] .card,
html[data-theme="dark"] .wortis-card {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .sidebar {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border-right-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .sidebar-nav a {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active {
    background: rgba(14, 145, 233, 0.1) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.1) !important;
}

html[data-theme="dark"] .main-content {
    background-color: #0b1220 !important;
}

html[data-theme="dark"] .page-header h1 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .status-badge {
    border: 1px solid currentColor;
}

html[data-theme="dark"] .data-table th {
    background-color: #111827 !important;
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] .data-table td {
    border-bottom-color: rgba(148, 163, 184, 0.1) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .data-table tr:hover {
    background: rgba(30, 41, 59, 0.5) !important;
}

html[data-theme="dark"] .form-control {
    background-color: #111827 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #f8fafc !important;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* --- Phone Input Component --- */
.phone-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.phone-indicator {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f1f5f9;
    background: #ffffff;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    z-index: 10;
    transition: all 0.3s ease;
}

.phone-dial-select {
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    z-index: 2;
}

.phone-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.phone-input-wrapper:focus-within .phone-indicator {
    border-right-color: #3b82f6;
    background-color: #f8fafc;
}

html[data-theme="dark"] .phone-indicator {
    background-color: #1e293b;
    border-right-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .phone-input-wrapper:focus-within .phone-indicator {
    background-color: #0f172a;
    border-right-color: #3b82f6;
}

html[data-theme="dark"] .phone-dial-select {
    color: #f8fafc !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Theme Toggle (global) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.theme-toggle i {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #334155;
}

.theme-toggle .icon-moon {
    display: none;
}

.theme-toggle--compact {
    width: 36px;
    height: 36px;
}

.theme-toggle--floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .theme-toggle i {
    color: #e2e8f0;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

/* Staggered Animation Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-600 {
    animation-delay: 600ms;
}

.delay-700 {
    animation-delay: 700ms;
}

.delay-800 {
    animation-delay: 800ms;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

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

/* --- Glassmorphism & Cards (Global) --- */
.stats-card {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 102, 153, .08), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

html[data-theme="dark"] .stats-card {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.bento-glass {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
    transition: box-shadow .35s ease, transform .35s ease;
}

html[data-theme="dark"] .bento-glass {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
}

.module-card {
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 1.25rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    cursor: pointer;
}

html[data-theme="dark"] .module-card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.module-card:hover {
    border-color: transparent;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
    transform: translateY(-4px);
}

html[data-theme="dark"] .module-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4) !important;
    border-color: var(--primary-600) !important;
}

/* App Category Pills */
.module-pill {
    transition: all 0.2s ease;
    background: white;
    border-color: #f1f5f9;
    color: #475569;
}

html[data-theme="dark"] .module-pill {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

.module-pill.active {
    background: var(--primary-600);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 102, 153, 0.2);
}

/* App Card (Mosaic) */
.app-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 1.5rem;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

html[data-theme="dark"] .app-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.05);
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 102, 153, 0.1);
    border-color: #006699;
}

html[data-theme="dark"] .app-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-600);
}

.app-card i {
    width: 56px;
    height: 56px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
}

html[data-theme="dark"] .app-card i {
    background: #1e293b;
}

.app-card:hover i {
    transform: scale(1.1) rotate(3deg);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .glass-premium {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Modern Odoo (V18) Design System --- */

.section-white {
    background-color: #ffffff;
}

.section-slate {
    background-color: #f8fafc;
}

html[data-theme="dark"] .section-white {
    background-color: var(--bg-surface) !important;
}

html[data-theme="dark"] .section-slate {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(56, 189, 248, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
}

/* Doodle System */
.doodle-underline {
    position: relative;
    display: inline-block;
}

.doodle-underline::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,5 Q25,0 50,5 T100,5" fill="none" stroke="%23006699" stroke-width="2" stroke-linecap="round"/></svg>');
    background-size: 100% 100%;
    opacity: 0.6;
    z-index: -1;
}

.doodle-circle {
    position: relative;
    padding: 0 4px;
}

.doodle-circle::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--accent-500);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    opacity: 0.6;
    z-index: -1;
    transform: rotate(-2deg);
}

/* Browser Frame Overlay */
.browser-frame {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
}

.browser-header {
    background: #f1f5f9;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.5;
}

.dot-red {
    background: #ff5f57;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #28c840;
}

/* Typography Overrides (Discreet & Business-focused) */
.text-odoo-h1 {
    font-size: clamp(1.4rem, 2.5vw, 1.75rem) !important;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.text-odoo-h2 {
    font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.stat-number {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    font-weight: 900;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-top: 0.5rem;
}

/* Modern Card */
.modern-card {
    background: white;
    border-radius: 24px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

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

html[data-theme="dark"] .modern-card {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Animated Gradient Text */
.animate-gradient-text {
    background: linear-gradient(to right, #006699, #38bdf8, #006699);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-text 3s linear infinite;
}

@keyframes gradient-text {
    to {
        background-position: 200% center;
    }
}

/* 3D Perspective & Hero Effects */
.perspective-container {
    perspective: 1000px;
}

.hero-3d-card {
    transform: rotateX(5deg) scale(0.98);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.hero-3d-card:hover {
    transform: rotateX(0deg) scale(1.02);
}

/* Bento Grid Modern */
.bento-card {
    position: relative;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-theme="dark"] .bento-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1);
}

/* Fluid Entrance Animation - Unified with JS */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.reveal-in,
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Section Padding */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* Hide scrollbar but keep scroll functional */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Container */
.container-custom {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Button Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 102, 153, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 102, 153, 0.4);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    background: white;
    color: #374151;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--primary-300);
    background: #eff6ff;
    color: var(--primary-600);
}

/* Form Styles */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(0, 102, 153, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

/* Card Styles */
.card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Icon Container */
.icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

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

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
}

/* Navigation Active State */
.nav-link {
    position: relative;
    color: #4b5563;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-600);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-600);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu Animation */
.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.mobile-menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--primary-700), var(--secondary-700));
}

/* Selection Color */
::selection {
    background: rgba(0, 102, 153, 0.2);
    color: var(--gray-900);
}

/* Focus Ring */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 153, 0.3);
}

/* Background Patterns */
.bg-pattern {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(0, 102, 153, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 102, 153, 0.05) 0%, transparent 50%);
}

/* Hero Background */
.hero-bg {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #eef2ff 100%);
}

/* Gradient Border */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 1rem;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Price Card Popular */
.popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 102, 153, 0.4);
}

/* Stats Counter Animation */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Floating Elements */
.floating-element {
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(2) {
    animation-delay: -2s;
}

.floating-element:nth-child(3) {
    animation-delay: -4s;
}

/* Testimonial Card */
.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 60px;
    font-family: Georgia, serif;
    color: rgba(0, 102, 153, 0.1);
    line-height: 1;
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Typography */
@media (max-width: 640px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }
}

/* Stats Counters (Odoo-style) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.stat-label {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

/* Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}

@keyframes countUp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Testimonial Carousel (LWS-inspired) */
.testimonial-carousel {
    overflow: hidden;
    position: relative;
}

.testimonial-slide {
    display: none;
    padding: 2rem;
}

.testimonial-slide.active {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
    font-style: italic;
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 1rem;
    position: relative;
}

.testimonial-content::before {
    content: '"';
    font-size: 2.5rem;
    font-family: serif;
    color: #e5e7eb;
    position: absolute;
    left: -20px;
    top: -10px;
}

.testimonial-author {
    font-weight: 600;
    color: var(--gray-900);
}

/* Trust Badges (LWS-style) */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.trust-badge:hover {
    transform: translateY(-4px);
}

.trust-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.trust-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-900);
    text-align: center;
}

/* Modules Dock */
.module-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.module-dock-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--primary-600);
    color: #fff;
    border: 1px solid rgba(0, 102, 153, 0.08);
    box-shadow: 0 12px 28px rgba(0, 102, 153, 0.18);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease, border-color 0.25s ease;
}

.module-dock-item:hover .module-dock-icon {
    background: #fff;
    color: var(--primary-600);
    border-color: rgba(0, 102, 153, 0.16);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.module-dock-item span {
    transition: color 0.25s ease;
}

.module-dock-item:hover span {
    color: var(--primary-600) !important;
}

/* Hero Trust Logos */
.hero-partner-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.35rem;
}

.hero-partner-badge {
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -0.35rem;
    padding: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.hero-partner-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.96;
}

.hero-partner-badge--count {
    padding: 0;
    background: #111827;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .hero-partner-badge {
        width: 2.45rem;
        height: 2.45rem;
        padding: 0.38rem;
    }
}

html[data-theme="dark"] .hero-partner-badge {
    border-color: #020617;
    background: #0f172a;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .hero-partner-badge img {
    opacity: 0.94;
}

html[data-theme="dark"] .hero-partner-badge--count {
    background: #e2e8f0;
    color: #0f172a;
}

/* Partner Logos */
.partner-showcase {
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.1rem;
    border-radius: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
        radial-gradient(circle at top center, rgba(0, 102, 153, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.86) 100%);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.05);
}

.partner-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.partner-logo-tile {
    min-height: 108px;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.partner-logo-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 102, 153, 0.12);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.partner-logo {
    width: auto;
    max-width: 100%;
    max-height: clamp(46px, 7vw, 64px);
    height: auto;
    object-fit: contain;
    opacity: 0.92;
    transition: opacity 0.25s ease;
}

.partner-logo-tile:hover .partner-logo {
    opacity: 1;
}

.partner-logo-note {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: center;
    color: #9ca3af;
}

@media (min-width: 768px) {
    .partner-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .module-dock-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .partner-logo-tile {
        min-height: 92px;
        padding: 0.7rem 0.8rem;
    }

    .partner-logo {
        max-height: 48px;
    }
}

html[data-theme="dark"] .partner-showcase {
    background:
        radial-gradient(circle at top center, rgba(14, 165, 233, 0.1), transparent 58%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.72) 100%);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: none;
}

html[data-theme="dark"] .partner-logo-tile {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: none;
}

html[data-theme="dark"] .partner-logo-note {
    color: #94a3b8;
}

html[data-theme="dark"] #review-modal-box {
    background: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] #review-modal-box input,
html[data-theme="dark"] #review-modal-box textarea {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] #review-modal-box input::placeholder,
html[data-theme="dark"] #review-modal-box textarea::placeholder {
    color: #94a3b8 !important;
}

/* Video Hero Background */
.video-hero {
    position: relative;
    overflow: hidden;
}

.video-hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

/* Module Screenshot */
.module-screenshot {
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}

/* ========================================
   INDEX PAGE — DARK MODE OVERRIDES
   ======================================== */

/* Hero section backgrounds */
html[data-theme="dark"] .hero-surface {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.08), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(14, 116, 144, 0.08), transparent 55%),
        radial-gradient(700px 400px at 20% 80%, rgba(59, 130, 246, 0.08), transparent 60%),
        linear-gradient(120deg, #0b1220 0%, #0f172a 55%, #0b1220 100%);
}

html[data-theme="dark"] .hero-grid {
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
    mask-image: radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.8), transparent 70%);
}

html[data-theme="dark"] .orb {
    opacity: 0.4;
}

/* Section backgrounds */
html[data-theme="dark"] .section-surface {
    background:
        radial-gradient(800px 400px at 10% 0%, rgba(56, 189, 248, 0.08), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(14, 116, 144, 0.08), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
}

html[data-theme="dark"] .section-surface-alt {
    background:
        radial-gradient(900px 420px at 0% 50%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(700px 360px at 100% 10%, rgba(14, 116, 144, 0.08), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

/* Stats bar (bg-gray-900 in light mode should stay dark but get a subtle border) */
html[data-theme="dark"] section.bg-gray-900 {
    background-color: #060d1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dashboard hero mockup */
html[data-theme="dark"] .shine {
    background-color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] .shine::after {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.35;
}

html[data-theme="dark"] .bg-gray-50\/80 {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

html[data-theme="dark"] .bg-gray-50\/30 {
    background-color: rgba(15, 23, 42, 0.55) !important;
}

html[data-theme="dark"] .border-gray-50 {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* Avantages / Modules cards */
html[data-theme="dark"] .card-hover {
    background-color: #0f172a;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .card-hover:hover {
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55) !important;
}

/* Icon chip backgrounds in cards */
html[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.12) !important;
}

html[data-theme="dark"] .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.13) !important;
}

html[data-theme="dark"] .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.13) !important;
}

html[data-theme="dark"] .bg-pink-50 {
    background-color: rgba(236, 72, 153, 0.12) !important;
}

html[data-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

html[data-theme="dark"] .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

html[data-theme="dark"] .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.13) !important;
}

html[data-theme="dark"] .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.12) !important;
}

/* Testimonials / reviews */
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] [class*="review-card"],
html[data-theme="dark"] [class*="testimonial"] {
    background-color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

/* CTA Section */
html[data-theme="dark"] [class*="bg-primary-600"],
html[data-theme="dark"] [class*="bg-primary-700"] {
    filter: brightness(0.85) saturate(0.9);
}

/* White button / "Espace Client" style in dark */
html[data-theme="dark"] a.bg-white,
html[data-theme="dark"] button.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Trust strip avatars */
html[data-theme="dark"] .bg-gray-200 {
    background-color: #334155 !important;
}

html[data-theme="dark"] .bg-gray-300 {
    background-color: #475569 !important;
}

html[data-theme="dark"] .bg-gray-400 {
    background-color: #64748b !important;
}

/* Download dropdown portal */
html[data-theme="dark"] #download-dropdown {
    background-color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #e2e8f0;
}

html[data-theme="dark"] #download-dropdown a,
html[data-theme="dark"] #download-dropdown div {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #download-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #download-dropdown .text-gray-400 {
    color: #64748b !important;
}

html[data-theme="dark"] #download-dropdown .border-gray-100 {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] #download-dropdown .font-medium {
    color: #f1f5f9 !important;
}

/* Hero badge pill */
html[data-theme="dark"] .bg-primary-50 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

html[data-theme="dark"] .text-primary-700 {
    color: #38bdf8 !important;
}

/* Scrollbar for dark mode */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0b1220;
}

/* ---- Secteurs "Adapté à votre activité" cards ---- */
html[data-theme="dark"] [class*="from-red-50"],
html[data-theme="dark"] [class*="from-orange-50"],
html[data-theme="dark"] [class*="from-blue-50"],
html[data-theme="dark"] [class*="from-green-50"],
html[data-theme="dark"] [class*="from-purple-50"],
html[data-theme="dark"] [class*="from-yellow-50"],
html[data-theme="dark"] [class*="from-pink-50"],
html[data-theme="dark"] [class*="from-indigo-50"],
html[data-theme="dark"] [class*="from-teal-50"] {
    background: #0f172a !important;
}

html[data-theme="dark"] .border-red-100 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}

html[data-theme="dark"] .border-orange-100 {
    border-color: rgba(249, 115, 22, 0.25) !important;
}

html[data-theme="dark"] .border-blue-100 {
    border-color: rgba(59, 130, 246, 0.25) !important;
}

html[data-theme="dark"] .border-green-100 {
    border-color: rgba(34, 197, 94, 0.25) !important;
}

html[data-theme="dark"] .border-purple-100 {
    border-color: rgba(168, 85, 247, 0.25) !important;
}

html[data-theme="dark"] .border-yellow-100 {
    border-color: rgba(234, 179, 8, 0.25) !important;
}

html[data-theme="dark"] .border-pink-100 {
    border-color: rgba(236, 72, 153, 0.25) !important;
}

html[data-theme="dark"] .border-indigo-100 {
    border-color: rgba(99, 102, 241, 0.25) !important;
}

html[data-theme="dark"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}

html[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.18) !important;
}

html[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}

html[data-theme="dark"] .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.18) !important;
}

html[data-theme="dark"] .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.18) !important;
}

html[data-theme="dark"] .bg-pink-100 {
    background-color: rgba(236, 72, 153, 0.18) !important;
}

html[data-theme="dark"] .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.18) !important;
}

/* Sector heading badge (bg-gray-100) */
html[data-theme="dark"] .bg-gray-100 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

/* Green testimonials badge */
html[data-theme="dark"] .bg-green-100.text-green-700 {
    background-color: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .text-green-700 {
    color: #4ade80 !important;
}


/* Checkout & License Wizard Utilities */
.checkout-grid {
    display: grid;
    gap: 1rem;
}

.checkout-grid.two {
    grid-template-columns: repeat(1, 1fr);
}

.checkout-grid.three {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    .checkout-grid.two {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .checkout-grid.three {
        grid-template-columns: repeat(3, 1fr);
    }
}

.checkout-section {
    margin-top: 2rem;
    animation: fadeIn 0.4s ease-out;
}

.checkout-section-head {
    margin-bottom: 1.25rem;
}

.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.checkout-section-title i {
    color: #0b78c2;
    font-size: 1.1rem;
}

.checkout-section-sub {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #64748b;
}

.checkout-note {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}

.checkout-note i {
    color: #3b82f6;
    margin-top: 0.2rem;
}

.checkout-muted-card {
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
}

.checkout-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.checkout-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Dark mode support for checkout */
html[data-theme="dark"] .checkout-section-title {
    color: #f1f5f9;
}

html[data-theme="dark"] .checkout-note {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

html[data-theme="dark"] .checkout-muted-card {
    background: rgba(30, 41, 59, 0.3);
    border-color: rgba(148, 163, 184, 0.1);
}

/* === Assistant Maximize Mode === */
.chat-maximized {
    width: 90vw !important;
    max-width: 1000px !important;
    height: 85vh !important;
    max-height: 85vh !important;
    bottom: 2rem !important;
    right: 5vw !important;
    border-radius: 2.5rem !important;
    z-index: 120 !important;
}

.chat-maximized .assistant-messages,
.chat-maximized #demo-ai-messages,
.chat-maximized #client-chat-shell {
    height: calc(85vh - 160px) !important;
    max-height: none !important;
}

@media (max-width: 640px) {
    .chat-maximized {
        width: 96vw !important;
        right: 2vw !important;
        bottom: 1rem !important;
        height: 90vh !important;
    }
}

.chat-maximized #client-chat-messages {
    height: calc(85vh - 160px) !important;
    max-height: none !important;
}

/* --- Bubble Background Effect (Orbs) --- */
.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    z-index: -1;
    /* Always behind content */
    pointer-events: none;
    will-change: transform;
    animation: floaty 14s ease-in-out infinite;
    opacity: 0.6;
    /* Default subtle opacity */
}


@keyframes floaty {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(30px, -30px, 0) scale(1.1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.orb-slow {
    animation-duration: 22s;
}

.orb-fast {
    animation-duration: 9s;
}

/* ============================================================
   RESPONSIVE GRID SYSTEM — Mobile First Breakpoints
   ============================================================ */

/* ── Extra Small Phones (< 400px) ─────────────────────────── */
@media (max-width: 399px) {

    /* Hero section */
    .min-h-screen {
        min-height: 100svh;
    }

    section.relative.min-h-screen {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    /* Ecosystem app dock: 3 cols → 2 cols on tiny screens */
    .grid.grid-cols-3.sm\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Avantages & Platform cards: 2 cols → 1 col on tiny */
    .grid.grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Stats bar: 2 cols → 1 col */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Sectors: 1 col */
    .grid.sm\:grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Modules page app-grid */
    #app-grid.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Hero title */
    .text-odoo-h1 {
        font-size: 1.3rem !important;
    }

    .text-odoo-h2 {
        font-size: 1.1rem !important;
    }

    /* App dock icons */
    .w-16.h-16 {
        width: 40px !important;
        height: 40px !important;
    }

    .w-16.h-16 i {
        font-size: 1rem !important;
    }

    /* App cards padding */
    .app-card {
        padding: 0.75rem 0.5rem !important;
    }

    .app-card i {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }

    /* Browser frame — hide on very small */
    .browser-frame {
        border-radius: 8px;
    }

    /* Flex CTA buttons — stack */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ── Small Phones (400px – 639px) ─────────────────────────── */
@media (min-width: 400px) and (max-width: 639px) {

    /* Ecosystem dock: keep 3 cols but compact */
    .grid.grid-cols-3.sm\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }

    .grid.grid-cols-3.sm\:grid-cols-4.lg\:grid-cols-6 .w-16.h-16 {
        width: 44px !important;
        height: 44px !important;
    }

    .grid.grid-cols-3.sm\:grid-cols-4.lg\:grid-cols-6 .w-16.h-16 i {
        font-size: 1.1rem !important;
    }

    /* Avantages cards: keep 2 cols but compact padding */
    .grid.grid-cols-2.lg\:grid-cols-4>div {
        padding: 0.875rem !important;
    }

    /* Stats row: 2 cols */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    /* Sectors: 1 col still */
    .grid.sm\:grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Modules page: 3 cols */
    #app-grid.grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.625rem !important;
    }

    /* App cards compact */
    .app-card {
        padding: 0.875rem 0.625rem !important;
    }

    .app-card i {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.4rem !important;
    }
}

/* ── General Mobile (< 640px) — shared overrides ──────────── */
@media (max-width: 639px) {

    /* Remove side margin on ecosystem section */
    section#modules.rounded-3xl.mx-4 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    /* Section padding reduction */
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Hero section */
    .pt-32 {
        padding-top: 5.5rem !important;
    }

    .pb-20 {
        padding-bottom: 2.5rem !important;
    }

    .mb-20 {
        margin-bottom: 2rem !important;
    }

    /* Trust bar avatars */
    .w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
    }

    /* Stat numbers */
    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 0.625rem !important;
    }

    /* Testimonials track: pause on mobile, single row */
    .testimonials-track {
        overflow: hidden;
    }

    .testimonials-row.row-2 {
        display: none !important;
    }

    /* Module details grid: stack vertically */
    .detail-section .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Fix order on mobile detail sections */
    .detail-section .order-2.lg\:order-1 {
        order: 1 !important;
    }

    .detail-section .order-1.lg\:order-2 {
        order: 2 !important;
    }

    .detail-section img {
        border-radius: 1rem !important;
    }

    /* Section headers */
    .text-center.mb-14 {
        margin-bottom: 2rem !important;
    }

    .text-center.mb-10 {
        margin-bottom: 1.5rem !important;
    }

    /* Platform pills: allow scroll */
    .flex.gap-3.overflow-x-auto {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    /* Category nav in modules */
    .category-nav-sticky .min-w-\[600px\] {
        min-width: 560px !important;
    }

    .module-pill {
        padding: 0.4rem 0.875rem !important;
        font-size: 0.7rem !important;
    }

    /* Download dropdown position fix */
    #download-dropdown {
        width: 88vw !important;
        max-width: 280px !important;
    }

    /* Lightbox */
    #lightbox img {
        max-width: 96%;
        max-height: 80%;
    }

    #lightbox .close-btn {
        font-size: 28px;
        top: 12px;
        right: 16px;
    }
}

/* ── Tablets (640px – 1023px) ─────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    /* Avantages: 2 cols */
    .grid.grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Platform features: 2 cols */
    .grid.grid-cols-2.lg\:grid-cols-4.reveal-up {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Ecosystem dock: 4 cols */
    .grid.grid-cols-3.sm\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }

    /* Sectors: 2 cols */
    .grid.sm\:grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modules page: 4 cols */
    #app-grid.grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Module details: stack on tablet */
    .detail-section .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .detail-section .order-2.lg\:order-1 {
        order: 1 !important;
    }

    .detail-section .order-1.lg\:order-2 {
        order: 2 !important;
    }
}

/* ── Apple-style touch device helpers ─────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* Disable translateY hover effects on touch — avoid stuck states */
    .module-card:hover,
    .secteur-card:hover,
    .app-card:hover,
    .bento-card:hover,
    .modern-card:hover {
        transform: none !important;
    }

    /* Keep shadow feedback on tap */
    .app-card:active {
        box-shadow: 0 8px 24px rgba(0, 102, 153, 0.18) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
   WortisERP — Mobile Overrides  (max-width: 639px)
   À coller dans le <style> de index, ou en @import
═══════════════════════════════════════════════════════════════ */

    @media (max-width: 639px) {

        /* ── 0. Base ──────────────────────────────────────────────── */
        body {
            font-size: 14px;
        }

        /* ── 1. HERO ──────────────────────────────────────────────── */

        /* Réduire la hauteur min + les paddings excessifs */
        section.min-h-screen {
            min-height: auto !important;
            padding-top: 5.5rem !important;
            /* au lieu de pt-32 */
            padding-bottom: 2.5rem !important;
        }

        /* H1 plus lisible sur petit écran */
        h1.text-odoo-h1 {
            font-size: 2rem !important;
            line-height: 1.2 !important;
            margin-bottom: 1.25rem !important;
        }

        /* Afficher le sous-titre hero sur mobile (hidden sm:block) */
        section.min-h-screen>div>p.hidden {
            display: block !important;
            font-size: 0.8rem !important;
            line-height: 1.55 !important;
            margin-bottom: 1.75rem !important;
            color: #6b7280;
            padding: 0 0.5rem;
        }

        /* Réduire l'espace sous les CTA buttons */
        .flex.flex-col.sm\:flex-row.items-center.justify-center.gap-4.mb-20 {
            margin-bottom: 1.75rem !important;
            gap: 0.625rem !important;
        }

        /* Buttons hero plus compacts */
        section.min-h-screen button,
        section.min-h-screen a[href="demo"] {
            padding: 0.8rem 1.5rem !important;
            font-size: 0.8rem !important;
            border-radius: 14px !important;
        }

        /* Browser frame : réduit et sans ombre lourde */
        .browser-frame {
            border-radius: 10px !important;
            box-shadow: 0 8px 28px rgba(0, 102, 153, .14) !important;
            max-width: 100% !important;
        }

        /* Trust bar — resserré */
        .mt-16.flex.flex-col.items-center {
            margin-top: 1.5rem !important;
            gap: 0.5rem !important;
        }

        /* ── 2. AVANTAGES ─────────────────────────────────────────── */

        section.section-slate:first-of-type {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }

        /* Section header H2 */
        h2.text-odoo-h2 {
            font-size: 1.5rem !important;
            line-height: 1.25 !important;
            margin-top: 0.75rem !important;
        }

        /* Afficher les descriptions avantages cachées */
        .grid.grid-cols-2 p.hidden,
        .grid.grid-cols-2.lg\:grid-cols-4 p.hidden {
            display: block !important;
            font-size: 0.68rem !important;
            line-height: 1.45 !important;
            color: #9ca3af;
            margin-top: 0.35rem;
        }

        /* Cards avantages plus compactes */
        .grid.grid-cols-2>div,
        .grid.grid-cols-2.lg\:grid-cols-4>div {
            padding: 0.875rem !important;
            border-radius: 14px !important;
        }

        .grid.grid-cols-2 h3 {
            font-size: 0.72rem !important;
            margin-bottom: 0.2rem !important;
        }

        /* ── 3. HYBRID / MULTIPLATFORM ────────────────────────────── */

        section.py-20.section-surface.overflow-hidden {
            padding-top: 2.25rem !important;
            padding-bottom: 2.25rem !important;
        }

        /* Platform pills — plus petites */
        .flex.gap-3.overflow-x-auto>div {
            padding: 0.5rem 0.875rem !important;
            font-size: 0.68rem !important;
            border-radius: 12px !important;
        }

        /* Afficher descriptions feature cards */
        .grid.grid-cols-2.lg\:grid-cols-4 p.text-\[11px\] {
            display: block !important;
        }

        /* ── 4. MODULES (DOCK) ────────────────────────────────────── */

        section#modules {
            padding-top: 2.25rem !important;
            padding-bottom: 2.25rem !important;
            margin-left: 0.75rem !important;
            margin-right: 0.75rem !important;
        }

        /* Grid dock : 3 colonnes resserrées */
        section#modules .grid.grid-cols-3 {
            gap: 0.875rem !important;
            margin-bottom: 1.5rem !important;
        }

        section#modules .w-16 {
            width: 3.25rem !important;
            height: 3.25rem !important;
            border-radius: 14px !important;
        }

        section#modules .text-2xl {
            font-size: 1.1rem !important;
        }

        section#modules span.text-xs {
            font-size: 0.6rem !important;
            text-align: center;
        }

        /* Bouton "Explorer les modules" */
        section#modules a.inline-flex {
            padding: 0.65rem 1.5rem !important;
            font-size: 0.78rem !important;
            border-radius: 14px !important;
        }

        /* ── 5. SECTEURS ──────────────────────────────────────────── */

        section.py-16.section-surface-alt {
            padding-top: 2.25rem !important;
            padding-bottom: 2.25rem !important;
        }

        /* Afficher descriptions secteurs cachées */
        section.py-16.section-surface-alt p.hidden {
            display: block !important;
            font-size: 0.68rem !important;
            line-height: 1.4 !important;
            color: #9ca3af;
        }

        /* Secteur cards : grille 1 col sur mobile */
        section.py-16.section-surface-alt .grid.sm\:grid-cols-2 {
            grid-template-columns: 1fr !important;
            gap: 0.625rem !important;
        }

        section.py-16.section-surface-alt .grid>div {
            padding: 1rem !important;
            border-radius: 14px !important;
        }

        /* Icône secteur */
        section.py-16.section-surface-alt .w-10.h-10 {
            width: 2.25rem !important;
            height: 2.25rem !important;
            border-radius: 10px !important;
            margin-bottom: 0.75rem !important;
        }

        section.py-16.section-surface-alt h3.text-sm {
            font-size: 0.78rem !important;
            margin-bottom: 0.25rem !important;
        }

        /* ── 6. STATS & TESTIMONIALS ──────────────────────────────── */

        section.py-16.section-slate.border-y {
            padding-top: 2.25rem !important;
            padding-bottom: 2.25rem !important;
        }

        /* Stats row : réduire l'espace sous */
        section.py-16.section-slate .grid.grid-cols-2.md\:grid-cols-4 {
            margin-bottom: 2rem !important;
            gap: 1rem !important;
        }

        /* ── 7. FINAL CTA ─────────────────────────────────────────── */

        section.py-20.section-surface.text-center {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }

        section.py-20.section-surface.text-center h2 {
            font-size: 1.7rem !important;
            line-height: 1.2 !important;
            margin-bottom: 1rem !important;
        }

        /* Afficher la description CTA sur mobile */
        section.py-20.section-surface.text-center p.hidden {
            display: block !important;
            font-size: 0.75rem !important;
            line-height: 1.5 !important;
            color: #9ca3af;
            margin-bottom: 1.25rem !important;
        }

        /* CTA buttons : colonne compacte */
        section.py-20.section-surface.text-center .flex.flex-col {
            gap: 0.875rem !important;
        }

        section.py-20.section-surface.text-center a {
            padding: 0.75rem 1.75rem !important;
            font-size: 0.8rem !important;
            border-radius: 12px !important;
        }

        /* ── 8. GLOBALS ───────────────────────────────────────────── */

        /* Réduire tous les py-16 restants */
        .py-16 {
            padding-top: 2.25rem !important;
            padding-bottom: 2.25rem !important;
        }

        .py-20 {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }

        /* Padding horizontal global */
        .px-4 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        /* Label badges "section" */
        span.text-\[10px\],
        span.uppercase.tracking-widest {
            font-size: 0.6rem !important;
            padding: 0.3rem 0.75rem !important;
        }

        /* Section header spacing */
        .text-center.mb-14 {
            margin-bottom: 1.5rem !important;
        }

        .text-center.mb-10 {
            margin-bottom: 1.25rem !important;
        }

        .mb-16 {
            margin-bottom: 2rem !important;
        }

        /* Réduire les orbs pour éviter le débordement horizontal */
        .orb {
            display: none !important;
        }

        /* ── 9. TESTIMONIALS (déjà partiellement géré) ────────────── */
        .testimonial-card {
            width: 240px !important;
            padding: 0.875rem !important;
            border-radius: 14px !important;
        }

        /* ── 10. DOWNLOAD DROPDOWN ────────────────────────────────── */
        #download-dropdown {
            width: calc(100vw - 2rem) !important;
            left: 1rem !important;
        }

    }

    /* ── Fin des overrides mobile ────────────────────────────────── */

}