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

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    color: #1E3A8A;
    overflow-x: hidden;
}

.cloud-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(191,219,254,0.6) 0%, rgba(219,234,254,0.3) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: floatCloud linear infinite;
}

@keyframes floatCloud {
    0% {
        transform: translateX(-200px) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(calc(100vw + 200px)) translateY(-30px);
        opacity: 0;
    }
}

@keyframes fadeCloud {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.6; }
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes floatY2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(3deg); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(59,130,246,0.3); }
    50% { box-shadow: 0 0 40px rgba(59,130,246,0.5); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

.hero-gradient {
    background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 30%, #DBEAFE 60%, #FFFFFF 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(191, 219, 254, 0.3);
}

.glass-dark {
    background: rgba(30, 58, 138, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.btn-primary {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #2563EB;
    border: 1px solid #BFDBFE;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #EFF6FF;
    border-color: #60A5FA;
    transform: translateY(-2px);
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.navbar-scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(59, 130, 246, 0.1);
}

.parallax-element {
    will-change: transform;
}

.feature-icon {
    background: linear-gradient(135deg, #DBEAFE, #93C5FD);
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, #60A5FA, #2563EB);
    transform: scale(1.1) rotate(5deg);
}

.plan-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.plan-card:hover::before {
    left: 100%;
}

.plan-featured {
    border-color: #3B82F6;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.2);
}

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

.float-anim-2 {
    animation: floatY2 8s ease-in-out infinite;
}

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

.text-gradient {
    background: linear-gradient(135deg, #2563EB, #60A5FA, #2563EB);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.5; }
}

.sidebar-link {
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: #3B82F6;
    border-radius: 0 3px 3px 0;
    transition: height 0.3s ease;
}

.sidebar-link.active::before {
    height: 60%;
}

.sidebar-link.active {
    background: #EFF6FF;
    color: #2563EB;
}

.sidebar-link:hover {
    background: #F8FAFC;
}

.mobile-nav-item {
    transition: all 0.2s ease;
}

.mobile-nav-item.active {
    color: #2563EB;
}

.mobile-nav-item.active i {
    transform: scale(1.2);
}

.tab-active {
    color: #2563EB;
    border-bottom: 2px solid #3B82F6;
}

.input-modern {
    transition: all 0.3s ease;
    border: 1.5px solid #DBEAFE;
    background: #F8FAFC;
}

.input-modern:focus {
    border-color: #3B82F6;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-active { background: #DCFCE7; color: #15803D; }
.status-pending { background: #FEF3C7; color: #B45309; }
.status-confirmed { background: #DBEAFE; color: #1D4ED8; }
.status-cancelled { background: #FEE2E2; color: #B91C1C; }
.status-completed { background: #E0E7FF; color: #4338CA; }
.status-suspended { background: #FEE2E2; color: #B91C1C; }
.status-inactive { background: #F1F5F9; color: #64748B; }

.calendar-day {
    transition: all 0.2s ease;
    cursor: pointer;
}

.calendar-day:hover {
    transform: scale(1.05);
}

.cal-available { background: #DCFCE7; }
.cal-pending { background: #FEF3C7; }
.cal-confirmed { background: #DBEAFE; }
.cal-completed { background: #E0E7FF; }
.cal-blocked { background: #FEE2E2; }
.cal-today { border: 2px solid #3B82F6; }

.modal-overlay {
    background: rgba(30, 58, 138, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content {
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.toast {
    animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.gallery-img {
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.dropdown-menu {
    animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.skeleton {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

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

.chart-bar {
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #93C5FD;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #60A5FA;
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

body.dark {
    background: #0B1120;
    color: #93C5FD;
}

body.dark .bg-white { background: #111827 !important; }
body.dark .bg-cloudblue-50 { background: #0F172A !important; }
body.dark .bg-cloudblue-50\/50 { background: rgba(15,23,42,0.5) !important; }
body.dark .bg-cloudblue-100 { background: #1E293B !important; }
body.dark .bg-cloudblue-100\/80 { background: rgba(30,41,59,0.8) !important; }
body.dark .bg-cloudblue-50\/30 { background: rgba(15,23,42,0.3) !important; }

body.dark .text-cloudblue-900 { color: #F1F5F9 !important; }
body.dark .text-cloudblue-800 { color: #DBEAFE !important; }
body.dark .text-cloudblue-700 { color: #93C5FD !important; }
body.dark .text-cloudblue-600 { color: #60A5FA !important; }
body.dark .text-cloudblue-500 { color: #3B82F6 !important; }
body.dark .text-cloudblue-400 { color: #60A5FA !important; }
body.dark .text-cloudblue-300 { color: #93C5FD !important; }

body.dark .border-cloudblue-100 { border-color: #1E293B !important; }
body.dark .border-cloudblue-200 { border-color: #334155 !important; }
body.dark .border-cloudblue-300 { border-color: #475569 !important; }

body.dark .bg-white\/80 { background: rgba(17,24,39,0.8) !important; }
body.dark .bg-white\/90 { background: rgba(17,24,39,0.9) !important; }
body.dark .bg-white\/70 { background: rgba(17,24,39,0.7) !important; }

body.dark .hover\:bg-cloudblue-50:hover { background: #1E293B !important; }
body.dark .hover\:bg-cloudblue-100:hover { background: #334155 !important; }
body.dark .hover\:bg-red-50:hover { background: rgba(127,29,29,0.3) !important; }
body.dark .hover\:bg-red-100:hover { background: rgba(127,29,29,0.4) !important; }
body.dark .hover\:bg-green-50:hover { background: rgba(20,83,45,0.3) !important; }
body.dark .hover\:bg-yellow-50:hover { background: rgba(113,63,18,0.3) !important; }

body.dark .bg-red-50 { background: rgba(127,29,29,0.2) !important; }
body.dark .bg-red-100 { background: rgba(127,29,29,0.3) !important; }
body.dark .bg-green-50 { background: rgba(20,83,45,0.2) !important; }
body.dark .bg-green-100 { background: rgba(20,83,45,0.3) !important; }
body.dark .bg-yellow-50 { background: rgba(113,63,18,0.2) !important; }
body.dark .bg-yellow-100 { background: rgba(113,63,18,0.3) !important; }
body.dark .bg-indigo-50 { background: rgba(49,46,129,0.2) !important; }
body.dark .bg-cloudblue-600 { background: #2563EB !important; }

body.dark .text-red-500 { color: #F87171 !important; }
body.dark .text-red-600 { color: #FCA5A5 !important; }
body.dark .text-red-700 { color: #FCA5A5 !important; }
body.dark .text-green-500 { color: #4ADE80 !important; }
body.dark .text-green-600 { color: #4ADE80 !important; }
body.dark .text-green-700 { color: #86EFAC !important; }
body.dark .text-yellow-600 { color: #FCD34D !important; }
body.dark .text-yellow-700 { color: #FBBF24 !important; }
body.dark .text-white { color: #F1F5F9 !important; }

body.dark .border-red-200 { border-color: rgba(127,29,29,0.5) !important; }
body.dark .border-red-300 { border-color: rgba(127,29,29,0.6) !important; }
body.dark .border-green-200 { border-color: rgba(20,83,45,0.5) !important; }
body.dark .border-green-300 { border-color: rgba(20,83,45,0.6) !important; }
body.dark .border-yellow-200 { border-color: rgba(113,63,18,0.5) !important; }
body.dark .border-yellow-300 { border-color: rgba(113,63,18,0.6) !important; }

body.dark .input-modern {
    border-color: #334155;
    background: #1E293B;
    color: #F1F5F9;
}

body.dark .input-modern:focus {
    border-color: #3B82F6;
    background: #0F172A;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

body.dark .glass {
    background: rgba(17,24,39,0.8);
    border-color: rgba(51,65,85,0.3);
}

body.dark .sidebar-link.active {
    background: #1E293B;
    color: #60A5FA;
}

body.dark .sidebar-link:hover {
    background: #1E293B;
}

body.dark .navbar-scrolled {
    background: rgba(17,24,39,0.9);
}

body.dark .modal-overlay {
    background: rgba(0,0,0,0.6);
}

body.dark .status-active { background: rgba(20,83,45,0.3); color: #86EFAC; }
body.dark .status-pending { background: rgba(113,63,18,0.3); color: #FCD34D; }
body.dark .status-confirmed { background: rgba(30,58,138,0.3); color: #93C5FD; }
body.dark .status-cancelled { background: rgba(127,29,29,0.3); color: #FCA5A5; }
body.dark .status-completed { background: rgba(49,46,129,0.3); color: #A5B4FC; }
body.dark .status-suspended { background: rgba(127,29,29,0.3); color: #FCA5A5; }
body.dark .status-inactive { background: rgba(51,65,85,0.3); color: #94A3B8; }

body.dark .cal-available { background: rgba(20,83,45,0.3) !important; }
body.dark .cal-pending { background: rgba(113,63,18,0.3) !important; }
body.dark .cal-confirmed { background: rgba(30,58,138,0.3) !important; }
body.dark .cal-completed { background: rgba(49,46,129,0.3) !important; }
body.dark .cal-blocked { background: rgba(127,29,29,0.3) !important; }

body.dark .bg-cloudblue-900 { background: #0B1120 !important; }
body.dark .bg-cloudblue-800 { background: #111827 !important; }
body.dark .bg-cloudblue-700 { background: #1E293B !important; }
body.dark .text-cloudblue-200 { color: #BFDBFE !important; }
body.dark .text-cloudblue-300 { color: #93C5FD !important; }
body.dark .border-cloudblue-800 { border-color: #1E293B !important; }

body.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
body.dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important; }
body.dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important; }

body.dark .bg-blue-50 { background: rgba(30,58,138,0.2) !important; }
body.dark .hover\:bg-blue-50:hover { background: rgba(30,58,138,0.3) !important; }
body.dark .text-blue-400 { color: #60A5FA !important; }
body.dark .text-blue-500 { color: #60A5FA !important; }
body.dark .text-blue-600 { color: #3B82F6 !important; }
body.dark .text-blue-700 { color: #93C5FD !important; }
body.dark .text-blue-900 { color: #F1F5F9 !important; }
body.dark .border-blue-200 { border-color: #334155 !important; }
body.dark .border-blue-500 { border-color: #3B82F6 !important; }
body.dark .bg-blue-500 { background: #3B82F6 !important; }
body.dark .from-blue-500 { --tw-gradient-from: #3B82F6 !important; }
body.dark .to-blue-300 { --tw-gradient-to: #60A5FA !important; }
body.dark .from-blue-400 { --tw-gradient-from: #60A5FA !important; }
body.dark .from-cloudblue-400 { --tw-gradient-from: #60A5FA !important; }
body.dark .to-cloudblue-700 { --tw-gradient-to: #2563EB !important; }
body.dark .from-cloudblue-500 { --tw-gradient-from: #3B82F6 !important; }
body.dark .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }
body.dark .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }
body.dark .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }
body.dark .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }

.dark-toggle {
    transition: all 0.3s ease;
}
.dark-toggle:hover {
    transform: rotate(15deg) scale(1.1);
}