/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

html, body {
    width: 100%;
    scroll-behavior: smooth;
}

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

@keyframes wave-bob-1 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
@keyframes wave-bob-2 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}
@keyframes wave-bob-3 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

@keyframes floatEcosystem {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-12px) translateX(6px); }
    100% { transform: translateY(12px) translateX(-6px); }
}

/* SCOPED FOR ODOO: Avoid conflicting with Odoo's global :root */
.bitoze-wrapper[data-bs-theme="dark"],
.bitoze-wrapper:not([data-bs-theme="light"]) {
    /* Bitoze Digital Aurora Dark Theme */
    --bs-body-bg: #0b1326;
    --bs-body-color: #dae2fd;
    --bitoze-primary: #48ddbd;
    --bitoze-primary-rgb: 72, 221, 189;
    --bs-secondary: #adc6ff;

    /* Layout specific */
    --surface: #0b1326;
    --surface-container-low: #131b2e;
    --surface-container: #171f33;
    --surface-container-high: #222a3d;
    --surface-container-highest: #2d3449;
    --surface-variant: #2d3449;

    --on-surface: #dae2fd;
    --on-surface-variant: #c2c6d6;

    --primary-container: #00a389;
    --outline: #8c909f;
    --outline-variant: #424754;

    --glass-bg: rgba(45, 52, 73, 0.4);
    --glass-border: rgba(66, 71, 84, 0.2);
}

.bitoze-wrapper[data-bs-theme="light"] {
    --bs-body-bg: #f8fafc;
    --bs-body-color: #0f172a;
    --bitoze-primary: #0ea5e9;
    --bitoze-primary-rgb: 14, 165, 233;
    --bs-secondary: #8b5cf6;

    --surface: #ffffff;
    --surface-container-low: #f8fafc;
    --surface-container: #f1f5f9;
    --surface-container-high: #e2e8f0;
    --surface-container-highest: #cbd5e1;
    --surface-variant: #e2e8f0;

    --on-surface: #0f172a;
    --on-surface-variant: #475569;

    --primary-container: #bae6fd;
    --outline: #cbd5e1;
    --outline-variant: #e2e8f0;

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.05);
}

.bitoze-wrapper {
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
    background-color: var(--surface);
    color: var(--on-surface);
    position: relative;
    min-height: 100vh;
}

.bitoze-wrapper h1,
.bitoze-wrapper h2,
.bitoze-wrapper h3,
.bitoze-wrapper h4,
.bitoze-wrapper h5,
.bitoze-wrapper h6,
.bitoze-wrapper .display-font,
.bitoze-wrapper .font-headline {
    font-family: 'Playfair Display', serif;
    color: var(--on-surface) !important;
}

/* Base custom classes inside wrapper */
.bitoze-wrapper .bg-surface { background-color: var(--surface); }
.bitoze-wrapper .bg-surface-container { background-color: var(--surface-container); }
.bitoze-wrapper .bg-surface-container-low { background-color: var(--surface-container-low); }

.bitoze-wrapper .text-on-surface { color: var(--on-surface) !important; }
.bitoze-wrapper .text-on-surface-variant { color: var(--on-surface-variant) !important; }

.bitoze-wrapper .border-outline-variant { border: 1px solid var(--outline-variant); }

/* Bitoze Primary Utility Overrides */
.bitoze-wrapper .text-primary,
.bitoze-wrapper a.text-primary:hover,
.bitoze-wrapper a.text-primary:focus { color: rgba(var(--bitoze-primary-rgb), 1) !important; }
.bitoze-wrapper .bg-primary { background-color: rgba(var(--bitoze-primary-rgb), 1) !important; }
.bitoze-wrapper .border-primary { border-color: rgba(var(--bitoze-primary-rgb), 1) !important; }

/* Buttons Overrides */
.bitoze-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--bitoze-primary), var(--primary-container));
    border: none;
    color: #000;
}
.bitoze-wrapper[data-bs-theme="light"] .btn-primary { color: #fff; }
.bitoze-wrapper .btn-primary:hover {
    box-shadow: 0 0 15px rgba(var(--bitoze-primary-rgb), 0.5);
    transform: translateY(-1px);
}

.bitoze-wrapper .btn-outline-primary {
    color: var(--bitoze-primary);
    border-color: var(--bitoze-primary);
}
.bitoze-wrapper .btn-outline-primary:hover {
    color: #000;
    background-color: var(--bitoze-primary);
    border-color: var(--bitoze-primary);
}
.bitoze-wrapper[data-bs-theme="light"] .btn-outline-primary:hover {
    color: #fff;
}
.bitoze-wrapper .btn-outline-light.custom-outline {
    border-color: var(--outline-variant);
    color: var(--on-surface);
}
.bitoze-wrapper .btn-outline-light.custom-outline:hover {
    background-color: var(--surface-container-high);
    color: var(--on-surface);
}

/* Animations from Design */
.bitoze-wrapper .spectrum-text {
    background: linear-gradient(to right, #4DE1C1, #3B82F6, #A855F7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bitoze-wrapper[data-bs-theme="light"] .spectrum-text {
    background: linear-gradient(to right, #0ea5e9, #8b5cf6, #d946ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bitoze-wrapper .spectrum-gradient {
    background: linear-gradient(to right, #4DE1C1, #3B82F6, #A855F7) !important;
}

.bitoze-wrapper[data-bs-theme="light"] .spectrum-gradient {
    background: linear-gradient(to right, #0ea5e9, #8b5cf6, #d946ef) !important;
}

/* Glassmorphism */
.bitoze-wrapper .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bitoze-wrapper .glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.bitoze-wrapper .glass-nav {
    border-bottom: 1px solid var(--glass-border);
}

.bitoze-wrapper .glass-nav::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* Navbar Link Styles */
.bitoze-wrapper .navbar-nav .nav-link {
    position: relative;
    color: var(--on-surface-variant);
    transition: color 0.2s ease;
    padding-bottom: 4px;
}

.bitoze-wrapper .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--bitoze-primary);
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bitoze-wrapper .navbar-nav .nav-link:hover {
    color: var(--bitoze-primary);
}

.bitoze-wrapper .navbar-nav .nav-link:hover::before {
    transform: translateX(-50%) scaleX(1);
}

/* Active nav link */
.bitoze-wrapper .nav-link-active {
    color: var(--bitoze-primary) !important;
}

.bitoze-wrapper .nav-link-active::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* Light mode: active and hover link colours */
.bitoze-wrapper[data-bs-theme="light"] .navbar-nav .nav-link {
    color: #475569;
}
.bitoze-wrapper[data-bs-theme="light"] .navbar-nav .nav-link:hover {
    color: #0ea5e9;
}
.bitoze-wrapper[data-bs-theme="light"] .nav-link-active {
    color: #0ea5e9 !important;
}

/* Aurora Backgrounds */
.bitoze-wrapper .hero-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; overflow: hidden;
}

.bitoze-wrapper .aurora-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: blur(100px);
    opacity: 0.3;
    mix-blend-mode: screen;
}

.bitoze-wrapper[data-bs-theme="light"] .aurora-layer {
    opacity: 0.1;
    mix-blend-mode: multiply;
}

.bitoze-wrapper .nebula-aura {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 225, 193, 0.4) 0%, rgba(59, 130, 246, 0.2) 40%, transparent 70%);
    filter: blur(80px);
    animation: nebula-float 20s ease-in-out infinite;
}

.bitoze-wrapper .nebula-aura-2 {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(59, 130, 246, 0.2) 40%, transparent 70%);
    animation-duration: 25s;
    animation-delay: -5s;
    left: auto;
    right: 0;
}

@keyframes nebula-float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33% { transform: translate(10%, -10%) scale(1.1); opacity: 0.25; }
    66% { transform: translate(-5%, 5%) scale(0.9); opacity: 0.2; }
}

@keyframes aurora-1 {
    0%, 100% { transform: translate(-10%, -10%) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { transform: translate(10%, 10%) scale(1.2); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes aurora-2 {
    0%, 100% { transform: translate(10%, -5%) rotate(0deg); }
    50% { transform: translate(-5%, 15%) rotate(180deg); }
}

/* Animations */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.bitoze-wrapper .animate-marquee {
    animation: marquee 30s linear infinite;
    width: max-content;
}

.bitoze-wrapper .ambient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    animation: ambient-drift 20s infinite alternate ease-in-out;
}
.bitoze-wrapper[data-bs-theme="light"] .ambient-circle {
    opacity: 0.2;
}

@keyframes ambient-drift {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(15vw, -10vh) scale(1.2); }
    50% { transform: translate(-10vw, 15vh) scale(0.9); }
    75% { transform: translate(20vw, 5vh) scale(1.4); }
    100% { transform: translate(-15vw, -15vh) scale(1); }
}

.bitoze-wrapper .animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}
.bitoze-wrapper .animate-float-slower {
    animation: float-slow 12s ease-in-out infinite reverse;
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* Initial GSAP hidden state (Desktop only) */
@media (min-width: 992px) {
    .bitoze-wrapper .gsap-reveal {
        opacity: 0;
        visibility: hidden;
    }
}

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

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

::-webkit-scrollbar-thumb {
    background: #2d3449;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4DE1C1;
}

/* Smooth Theme Transitions Only During Swap */
.bitoze-wrapper.theme-transitioning,
.bitoze-wrapper.theme-transitioning *,
.bitoze-wrapper.theme-transitioning *::before,
.bitoze-wrapper.theme-transitioning *::after {
    transition-property: background-color, border-color, color, fill, stroke !important;
    transition-duration: 1.2s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Theme Toggle Icon Animation */
#theme-icon {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s ease !important;
}

.theme-icon-animating {
    transform: scale(0.1) rotate(90deg);
    opacity: 0;
}

/* Group Hover Utilities for CTA */
.bitoze-wrapper .group:hover .group-hover-arrow {
    transform: translateX(4px);
}
.bitoze-wrapper .group:hover .group-hover-bg {
    transform: scale(1.5) translate(-10%, 10%);
    opacity: 0.5 !important;
}

/* Hide Scrollbar Utility */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Custom Accordion FAQ */
.bitoze-wrapper .custom-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--bitoze-primary);
    box-shadow: none;
}
.bitoze-wrapper .custom-accordion .accordion-button:focus {
    box-shadow: none;
}
.bitoze-wrapper[data-bs-theme="dark"] .custom-accordion .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.bitoze-wrapper[data-bs-theme="dark"] .custom-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(180deg);
}

/* Ecosystem Canvas */
.ecosystem-canvas {
    background: radial-gradient(circle at center, rgba(var(--bitoze-primary-rgb), 0.05) 0%, transparent 60%);
}

.ecosystem-node {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floatEcosystem 8s ease-in-out infinite alternate;
}

.glass-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-variant);
    border-radius: 50rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--on-surface) !important;
}

.tech-chip.dimmed {
    opacity: 0.15;
    transform: scale(0.8);
    filter: blur(2px) grayscale(100%);
    pointer-events: none;
}

.tech-chip.active {
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.15));
    border-color: rgba(255,255,255,0.4);
    z-index: 10;
}

/* Ecosystem Tabs */
.ecosystem-tabs .btn {
    border-color: var(--bs-outline-variant);
    color: #000 !important;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.ecosystem-tabs .btn:hover {
    background: #fff;
    color: #000 !important;
}

.ecosystem-tabs .btn.active {
    background: var(--bitoze-primary);
    color: #000 !important;
    border-color: var(--bitoze-primary);
    box-shadow: 0 0 15px rgba(var(--bitoze-primary-rgb), 0.4);
}

/* Footer Social Icons */
.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.footer-social-btn:hover {
    background: var(--bitoze-primary);
    border-color: var(--bitoze-primary);
    color: #fff;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(var(--bitoze-primary-rgb), 0.4);
}

/* ==========================================
   LIGHT MODE OVERRIDES
   ========================================== */

/* Scrollbar in light mode */
.bitoze-wrapper[data-bs-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.bitoze-wrapper[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
.bitoze-wrapper[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}

/* Surface utility classes for light mode */
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container-lowest {
    background-color: #f8fafc !important;
}
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container-low {
    background-color: #f1f5f9 !important;
}
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container {
    background-color: #e9eef5 !important;
}
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container-high {
    background-color: #dde3ea !important;
}
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container-highest {
    background-color: #d2d8e0 !important;
}

/* Text colours in light mode */
.bitoze-wrapper[data-bs-theme="light"] .text-on-surface {
    color: #0f172a !important;
}
.bitoze-wrapper[data-bs-theme="light"] .text-on-surface-variant {
    color: #475569 !important;
}

/* Border in light mode */
.bitoze-wrapper[data-bs-theme="light"] .border-outline-variant {
    border-color: #cbd5e1 !important;
}

/* Glass card in light: ensure text is readable */
.bitoze-wrapper[data-bs-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

/* Glass pill (Ecosystem canvas) in light mode */
.bitoze-wrapper[data-bs-theme="light"] .glass-pill {
    background: rgba(255, 255, 255, 0.85);
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Tech chip active glow in light mode - white glow is invisible; use dark shadow */
.bitoze-wrapper[data-bs-theme="light"] .tech-chip.active {
    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.4));
    border-color: rgba(14, 165, 233, 0.5);
}

/* Ecosystem canvas bg in light */
.bitoze-wrapper[data-bs-theme="light"] .ecosystem-canvas {
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.06) 0%, transparent 60%);
}

/* Accordion chevron in light mode — keep dark so it's visible */
.bitoze-wrapper[data-bs-theme="light"] .custom-accordion .accordion-button::after {
    filter: none;
}
.bitoze-wrapper[data-bs-theme="light"] .custom-accordion .accordion-button {
    background-color: transparent;
    color: #0f172a;
}
.bitoze-wrapper[data-bs-theme="light"] .custom-accordion .accordion-item {
    background-color: transparent;
    border-color: #e2e8f0;
}
.bitoze-wrapper[data-bs-theme="light"] .custom-accordion .accordion-body {
    color: #475569;
}

/* Footer social icons in light - ensure dark icon colour */
.bitoze-wrapper[data-bs-theme="light"] .footer-social-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: #cbd5e1;
    color: #334155;
}

/* Glass nav in light */
.bitoze-wrapper[data-bs-theme="light"] .glass-nav {
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.bitoze-wrapper[data-bs-theme="light"] .glass-nav::before {
    background: rgba(255, 255, 255, 0.85);
}

/* Fix desktop offcanvas background bleed */
@media (min-width: 992px) {
    .bitoze-wrapper .navbar-expand-lg .offcanvas {
        background-color: transparent !important;
        border: none !important;
    }
}

/* Make FAQ Section transparent in Light mode for clean visual flow */
.bitoze-wrapper[data-bs-theme="light"] .faq-section {
    background-color: transparent !important;
}

/* Navbar links in light */
.bitoze-wrapper[data-bs-theme="light"] .navbar-nav .nav-link {
    color: #334155;
}
.bitoze-wrapper[data-bs-theme="light"] .navbar-nav .nav-link:hover,
.bitoze-wrapper[data-bs-theme="light"] .navbar-nav .nav-link.active {
    color: #0ea5e9;
}

/* Footer pop-out contact bar in light */
.bitoze-wrapper[data-bs-theme="light"] .glass-card.bg-surface-container {
    background: rgba(255,255,255,0.95) !important;
}

/* Form controls in light mode */
.bitoze-wrapper[data-bs-theme="light"] .form-control,
.bitoze-wrapper[data-bs-theme="light"] .form-select {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.bitoze-wrapper[data-bs-theme="light"] .form-control:focus,
.bitoze-wrapper[data-bs-theme="light"] .form-select:focus {
    background-color: #fff;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
    color: #0f172a;
}
.bitoze-wrapper[data-bs-theme="light"] .form-control::placeholder {
    color: #94a3b8;
}

/* Testimonial cards in light */
.bitoze-wrapper[data-bs-theme="light"] .bg-surface-container.rounded-4 {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Footer background in light */
.bitoze-wrapper[data-bs-theme="light"] .bitoze-footer {
    background-color: #f1f5f9 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.05) !important;
}

/* ==========================================
   FOOTER LINK HOVER ANIMATIONS
   ========================================== */

.bitoze-wrapper .bitoze-footer ul a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color 0.25s ease, gap 0.25s ease, padding-left 0.25s ease;
    padding-left: 0;
}

.bitoze-wrapper .bitoze-footer ul a::before {
    content: '→';
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: var(--bitoze-primary);
    margin-right: 0;
    position: absolute;
    left: -16px;
}

.bitoze-wrapper .bitoze-footer ul a:hover {
    color: var(--bitoze-primary) !important;
    padding-left: 18px;
}

.bitoze-wrapper .bitoze-footer ul a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   DROPDOWN MENU STYLES
   ========================================== */

.bitoze-wrapper .dropdown-menu {
    background: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    min-width: 220px;
    margin-top: 15px;
    /* Overriding default bs display to allow css transitions */
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top center;
}

/* Invisible bridge so mouse doesn't fall into the margin gap and close the menu */
.bitoze-wrapper .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

/* For both click (bs adds .show) and hover */
.bitoze-wrapper .dropdown-menu.show,
.bitoze-wrapper .nav-item.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bitoze-wrapper .dropdown-item {
    color: var(--on-surface-variant) !important; /* Force override */
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.bitoze-wrapper .dropdown-item:last-child {
    margin-bottom: 0;
}

.bitoze-wrapper .dropdown-item:hover,
.bitoze-wrapper .dropdown-item:focus {
    background-color: rgba(var(--bitoze-primary-rgb), 0.1);
    color: var(--bitoze-primary) !important;
    transform: translateX(6px);
}

/* Light mode specific dropdown styling */
.bitoze-wrapper[data-bs-theme="light"] .dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.bitoze-wrapper[data-bs-theme="light"] .dropdown-item {
    color: #475569 !important;
}

.bitoze-wrapper[data-bs-theme="light"] .dropdown-item:hover,
.bitoze-wrapper[data-bs-theme="light"] .dropdown-item:focus {
    background-color: rgba(14, 165, 233, 0.08);
    color: #0ea5e9 !important;
}

/* ==========================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================== */

@media (max-width: 991.98px) {
    /* Remove hover underline effect entirely on mobile */
    .bitoze-wrapper .navbar-nav .nav-link::before {
        display: none !important;
    }

    /* Navbar list dropdown */
    .bitoze-wrapper .navbar-nav .dropdown-menu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-top: 0;
        padding-left: 1rem;
        transform: none !important;
        transition: none !important; /* Fix distortion during collapse trigger */
        min-width: 100%;
        
        /* Reset to standard Bootstrap accordion structure for mobile so it doesn't take up layout space */
        display: none; /* Hidden by default */
        visibility: visible;
        opacity: 1;
        position: static;
    }
    
    /* When clicked, Bootstrap JS adds .show */
    .bitoze-wrapper .navbar-nav .dropdown-menu.show {
        display: block;
    }
    
    .bitoze-wrapper .navbar-nav .dropdown-menu::before {
        display: none;
    }

    /* Adjust padding for inline visual flow */
    .bitoze-wrapper .navbar-nav .dropdown-item {
        padding: 0.5rem 1rem;
    }

    /* Fixed alignment for User Account Dropdown so it doesn't push viewport width out */
    .bitoze-wrapper .d-flex .dropdown-menu-end {
        position: absolute;
        right: 0;
        left: auto;
        transform-origin: top right;
        max-width: 90vw;
    }
}

@media (max-width: 767.98px) {
    /* Scale down large heading typography */
    .bitoze-wrapper .display-1 { font-size: 3.5rem !important; }
    .bitoze-wrapper .display-2 { font-size: 3rem !important; }
    .bitoze-wrapper .display-3 { font-size: 2.25rem !important; }
    .bitoze-wrapper .display-4 { font-size: 2rem !important; }
    .bitoze-wrapper .display-5 { font-size: 1.75rem !important; }
    .bitoze-wrapper .display-6 { font-size: 1.5rem !important; }

    /* Scale down standard font sizes */
    .bitoze-wrapper .fs-1 { font-size: 2rem !important; }
    .bitoze-wrapper .fs-2 { font-size: 1.75rem !important; }
    .bitoze-wrapper .fs-3 { font-size: 1.5rem !important; }
    .bitoze-wrapper .fs-4 { font-size: 1.25rem !important; }
    .bitoze-wrapper .fs-5 { font-size: 1rem !important; }
    
    /* Optimize Buttons for mobile */
    .bitoze-wrapper .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .bitoze-wrapper .hero-cta {
        width: 100%;
    }
    .bitoze-wrapper .hero-cta .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Reduce vertical spacing & padding gaps tightly */
    .bitoze-wrapper .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .bitoze-wrapper .pt-5 { padding-top: 2.5rem !important; }
    .bitoze-wrapper .pb-5 { padding-bottom: 2.5rem !important; }
    .bitoze-wrapper .my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
    .bitoze-wrapper .mb-5 { margin-bottom: 2.5rem !important; }
    
    /* Gutter adjustments */
    .bitoze-wrapper .gy-5 { --bs-gutter-y: 2.5rem; }

    /* Shrink the inner padding inside glass-cards visually */
    .bitoze-wrapper .glass-card {
        padding: 1.5rem !important;
    }

    /* Ambient Circles - Scale down massively so they don't break layout visual scale */
    .bitoze-wrapper .ambient-circle {
        transform: scale(0.6);
    }
}

/* ==========================================
   OFFCANVAS FIXES
   ========================================== */
.bitoze-wrapper[data-bs-theme="dark"] .offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.bitoze-wrapper[data-bs-theme="light"] .offcanvas .btn-close {
    filter: none;
    opacity: 0.8;
}

.bitoze-wrapper .offcanvas-body .navbar-nav .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.1rem;
}

/* Fix stacking context bug where backdrop-filter traps the offcanvas below the body backdrop */
.offcanvas-backdrop {
    z-index: 1020 !important; /* Puts backdrop below the 1030 fixed-top navbar */
}