/**
 * Xeora Homepage — Glassmorphism Dark Overlay v4.2.0
 *
 * Sovrascrive i colori dei 7 file CSS esistenti per il dark theme.
 * Mantiene layout, animazioni, font, dimensioni — cambia solo colori/background.
 *
 * @package Xeora
 * @subpackage Assets/CSS
 * @since 4.2.0
 */

/* ═══════════════════════════════════════════════════
   BASE — sfondo dark + ambient orbs
   ═══════════════════════════════════════════════════ */

.xeora-homepage-body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
    color: #fff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Ambient orbs */
.xeora-homepage-body::before,
.xeora-homepage-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}
.xeora-homepage-body::before {
    width: 500px; height: 500px;
    background: #667eea;
    top: -120px; left: -100px;
}
.xeora-homepage-body::after {
    width: 400px; height: 400px;
    background: #764ba2;
    bottom: -80px; right: -80px;
}

.xeora-homepage-wrapper {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════
   HERO — split sides con glass overlay
   ═══════════════════════════════════════════════════ */

.xeora-hero-split {
    min-height: 100vh;
}

.xeora-split-side {
    backdrop-filter: blur(4px);
}

.xeora-split-business {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%) !important;
}

.xeora-split-customer {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.5) 0%, rgba(245, 87, 108, 0.5) 100%) !important;
}

.xeora-split-title,
.xeora-split-desc,
.xeora-split-features li {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.xeora-split-divider {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%) !important;
}

.xeora-split-logo {
    color: rgba(255,255,255,0.6) !important;
}

/* Pulsanti split — glass */
.xeora-btn-split {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

.xeora-btn-split:hover {
    background: rgba(255,255,255,0.22) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════ */

.xeora-badge {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   SECTIONS — titoli chiari
   ═══════════════════════════════════════════════════ */

.xeora-section-title {
    color: #fff !important;
}

.xeora-section-subtitle {
    color: rgba(255,255,255,0.55) !important;
}

/* ═══════════════════════════════════════════════════
   CUSTOMER BENEFITS — glass cards
   ═══════════════════════════════════════════════════ */

.xeora-customer-benefits {
    background: transparent !important;
}

.xeora-customer-card {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.xeora-customer-card:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

.xeora-customer-card h3 {
    color: #fff !important;
}

.xeora-customer-card p {
    color: rgba(255,255,255,0.5) !important;
}

/* Journey */
.xeora-customer-journey {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
}

.xeora-journey-title {
    color: #fff !important;
}

.xeora-journey-number {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

.xeora-journey-step h4 {
    color: #fff !important;
}

.xeora-journey-step p {
    color: rgba(255,255,255,0.7) !important;
}

.xeora-journey-arrow {
    color: rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════════════════
   BUSINESS FEATURES / MODULES — glass cards
   ═══════════════════════════════════════════════════ */

.xeora-business-features {
    background: transparent !important;
}

.xeora-module-card {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.xeora-module-card:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

.xeora-module-card h3 {
    color: #fff !important;
}

.xeora-module-card li {
    color: rgba(255,255,255,0.55) !important;
}

.xeora-module-card li::before {
    color: #b8cc0b !important;
}

/* Icon container */
.xeora-module-icon {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════
   INTEGRATIONS — glass
   ═══════════════════════════════════════════════════ */

.xeora-integrations {
    background: transparent !important;
}

.xeora-integration-logo {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

.xeora-integration-logo:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
}

/* ═══════════════════════════════════════════════════
   USE CASES — glass
   ═══════════════════════════════════════════════════ */

.xeora-use-cases {
    background: transparent !important;
}

.xeora-use-case {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

.xeora-use-case:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
}

.xeora-use-case h3 {
    color: #fff !important;
}

.xeora-use-case p {
    color: rgba(255,255,255,0.5) !important;
}

.xeora-use-case-icon {
    filter: brightness(1.2);
}

/* ═══════════════════════════════════════════════════
   STATS — glass su dark
   ═══════════════════════════════════════════════════ */

.xeora-stats {
    background: transparent !important;
}

.xeora-stats .xeora-section-title {
    color: #fff !important;
}

.xeora-stat-card {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.xeora-stat-card:hover {
    background: rgba(255,255,255,0.12) !important;
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

.xeora-stat-number {
    color: #b8cc0b !important;
}

.xeora-stat-label {
    color: rgba(255,255,255,0.7) !important;
}

/* ═══════════════════════════════════════════════════
   FAQ — glass accordion
   ═══════════════════════════════════════════════════ */

.xeora-faq {
    background: transparent !important;
}

.xeora-faq-item {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

.xeora-faq-item:hover {
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 4px 20px rgba(184, 204, 11, 0.12) !important;
}

.xeora-faq-question {
    background: transparent !important;
    color: #fff !important;
}

.xeora-faq-question:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #fff !important;
}

.xeora-faq-icon {
    color: rgba(255,255,255,0.5) !important;
}

.xeora-faq-item.active .xeora-faq-icon {
    color: #b8cc0b !important;
}

.xeora-faq-answer p {
    color: rgba(255,255,255,0.55) !important;
}

/* FAQ CTA box */
.xeora-faq-cta {
    background: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

.xeora-btn-faq {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

.xeora-btn-faq:hover {
    background: rgba(255,255,255,0.22) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════
   CTA FINALE — glass su dark
   ═══════════════════════════════════════════════════ */

.xeora-cta {
    background: transparent !important;
}

.xeora-cta::before {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(102,126,234,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118,75,162,0.15) 0%, transparent 50%) !important;
}

.xeora-cta-title {
    color: #fff !important;
}

.xeora-cta-subtitle {
    color: rgba(255,255,255,0.65) !important;
}

.xeora-btn-cta-primary {
    background: #b8cc0b !important;
    color: #0f0c29 !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(184, 204, 11, 0.3) !important;
}

.xeora-btn-cta-primary:hover {
    box-shadow: 0 12px 40px rgba(184, 204, 11, 0.4) !important;
    background: #c4d60a !important;
    color: #0f0c29 !important;
}

.xeora-btn-cta-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.xeora-btn-cta-secondary:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* ═══════════════════════════════════════════════════
   FOOTER — glass dark
   ═══════════════════════════════════════════════════ */

.xeora-footer {
    background: rgba(0,0,0,0.3) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.xeora-footer-brand h3 {
    color: #fff !important;
}

.xeora-footer-brand p {
    color: rgba(255,255,255,0.45) !important;
}

.xeora-footer-social a {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.6) !important;
}

.xeora-footer-social a:hover {
    background: rgba(184, 204, 11, 0.2) !important;
    color: #fff !important;
}

.xeora-footer-column h4 {
    color: rgba(255,255,255,0.7) !important;
}

.xeora-footer-column a {
    color: rgba(255,255,255,0.4) !important;
}

.xeora-footer-column a:hover {
    color: #fff !important;
}

.xeora-footer-bottom {
    border-top-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════════════════
   HERO MAIN (se usato al posto dello split)
   ═══════════════════════════════════════════════════ */

.xeora-hero-main {
    background: transparent !important;
}

.xeora-hero-main .xeora-hero-gradient {
    background: linear-gradient(135deg, rgba(102,126,234,0.3) 0%, rgba(118,75,162,0.3) 100%) !important;
}

.xeora-hero-main .xeora-hero-pattern {
    opacity: 0.05 !important;
}

.xeora-hero-main .xeora-hero-title,
.xeora-hero-main .xeora-hero-subtitle {
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.xeora-hero-main .xeora-hero-badge {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.xeora-hero-main .xeora-trust-item {
    color: rgba(255,255,255,0.6) !important;
}

.xeora-hero-main .xeora-trust-item i {
    color: #b8cc0b !important;
}

.xeora-hero-main .xeora-btn-hero-primary {
    background: #b8cc0b !important;
    color: #fff !important;
    box-shadow: 0 8px 30px rgba(184, 204, 11, 0.3) !important;
}

.xeora-hero-main .xeora-btn-hero-primary:hover {
    box-shadow: 0 12px 40px rgba(184, 204, 11, 0.4) !important;
}

/* ═══════════════════════════════════════════════════
   SCROLL INDICATOR
   ═══════════════════════════════════════════════════ */

.xeora-scroll-indicator a {
    color: rgba(255,255,255,0.4) !important;
}

.xeora-scroll-indicator a:hover {
    color: rgba(255,255,255,0.7) !important;
}

/* ═══════════════════════════════════════════════════
   TENANTS SHOWCASE (sezione case studies)
   ═══════════════════════════════════════════════════ */

.xeora-tenants {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════
   PACKAGES SHOWCASE
   ═══════════════════════════════════════════════════ */

.xeora-packages {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — mantieni solo colori
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .xeora-split-side {
        min-height: 60vh !important;
    }
}

/* Mobile: disable orbs + prevent pinch-out */
@media (max-width: 768px) {
    .xeora-homepage-body::before,
    .xeora-homepage-body::after {
        content: none !important;
    }
    html {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        overflow-x: hidden;
    }
    body {
        overflow-x: hidden;
    }
}