/* General Setup */
body { font-family: 'Inter', sans-serif; background-color: #110E1B; color: #E0D8FF; overflow-x: hidden; }
.smooth-transition { transition: all 0.3s ease-in-out; }

/* Header Style on Scroll */
header { transition: background-color 0.4s ease-out, backdrop-filter 0.4s ease-out; }
header.scrolled { background-color: rgba(17, 14, 27, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Visuals & Animations */
@keyframes animated-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#home { background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(91, 33, 182, 0.4), #110E1B 100%); }
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.section-gradient { background-size: 200% 200%; background-image: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(56, 17, 109, 0.4), #110E1B 70%); animation: animated-gradient 25s ease infinite; }
#cursor-glow { position: fixed; top: 0; left: 0; width: 800px; height: 800px; background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, rgba(167, 139, 250, 0) 60%); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; transition: opacity 0.3s; }
@media (hover: none) { #cursor-glow { display: none; } }

#animated-headline span { display: inline-block; opacity: 0; transform: translateY(40px) rotate(5deg); transition: opacity 0.6s ease, transform 0.6s ease; }
#animated-headline span.visible { opacity: 1; transform: translateY(0) rotate(0); }
.reveal-item { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal-item.visible { opacity: 1; transform: translateY(0); }
.reveal-image-wow { transform: scale(0.8) rotate(-4deg); opacity: 0; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out; transition-delay: 0.25s; }
.reveal-item.visible .reveal-image-wow { transform: scale(1) rotate(0deg); opacity: 1; }
.cta-button:hover { transform: scale(1.05); }
.interactive-card:hover { transform: translateY(-8px); }

.package-card:hover {
    box-shadow: 0 0 25px 5px rgba(167, 139, 250, 0.2);
}

/* Mega Menu Styles */
.mega-menu { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.group:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.modal-overlay { transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }

/* Process Tabs */
.process-tab.active { background-color: rgba(167, 139, 250, 0.1); border-color: #a78bfa; }
.process-tab.active svg { color: #a78bfa; }
.process-content { transition: opacity 0.3s ease-in-out; }

/* Accordion */
.accordion-content { transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; }
.accordion-arrow { transition: transform 0.3s ease-in-out; }

.portal-tab-btn.active { background-color: #a78bfa; color: #110E1B; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(31, 41, 55, 0.5); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #7e22ce; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #a78bfa; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #7e22ce rgba(31, 41, 55, 0.5); }

/* Blog & Article Styles */
.prose-custom { color: #E0D8FF; }
.prose-custom h1, .prose-custom h2, .prose-custom h3, .prose-custom h4 { color: #ffffff; margin-top: 1.5em; margin-bottom: 0.5em;}
.prose-custom p, .prose-custom li { color: #c4b5fd; line-height: 1.8; }
.prose-custom strong { color: #a78bfa; }
.prose-custom a { color: #c4b5fd; text-decoration: underline; }
.prose-custom code { background-color: rgba(167, 139, 250, 0.1); color: #e9d5ff; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 6px; }
.prose-custom blockquote { border-left-color: #7e22ce; color: #c4b5fd; font-style: italic; }
.prose-custom .pull-quote { font-size: 1.5rem; font-weight: bold; color: #fff; text-align: center; margin: 2rem auto; max-width: 80%; border-top: 2px solid #7e22ce; border-bottom: 2px solid #7e22ce; padding: 1rem 0; }

/* Swiper Slider Styles */
.swiper-pagination-bullet { background-color: rgba(167, 139, 250, 0.5); width: 10px; height: 10px; transition: background-color 0.3s, width 0.3s; }
.swiper-pagination-bullet-active { background-color: #a78bfa; width: 25px; border-radius: 5px; }
.swiper-container { padding-bottom: 40px !important; }

/* Mobile-First: Flip-Card & Testimonial Fade Styles */
@media (max-width: 1023px) {
    .flip-card-container { perspective: 1000px; }
    .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }
    .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
    .flip-card-front, .flip-card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; }
    .flip-card-back { transform: rotateY(180deg); }
}

@media (max-width: 767px) {
    #menu-btn {
        position: relative;
        z-index: 60;
    }
    #animated-headline {
        font-size: 2.25rem; /* 36px */
        line-height: 2.5rem; /* 40px */
    }
    /* Logo Initial State (Mobile) */
    #fixed-logo-img {
        height: 40px; /* Smaller */
    }
    #fixed-logo-link {
        top: 0.5rem; /* Centered */
        left: 1rem; /* More left */
    }
    /* Logo Scrolled State (Mobile) */
    body.header-scrolled #fixed-logo-img {
        height: 36px; /* Minimally smaller */
    }
    body.header-scrolled #fixed-logo-link {
        top: 0.5rem; /* Positioned top-left */
        left: 1rem; /* Stays left */
    }

    .testimonial-item {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
    }
    .testimonial-item.active {
        opacity: 1;
        position: relative;
    }
    .testimonial-dots span {
        cursor: pointer;
        height: 10px;
        width: 10px;
        margin: 0 5px;
        background-color: rgba(167, 139, 250, 0.5);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.3s, width 0.3s;
    }
    .testimonial-dots span.active {
        background-color: #a78bfa;
        width: 25px;
        border-radius: 5px;
    }
}

/* Cookie Banner */
#cookie-banner.visible {
    transform: translateY(0);
}

/* Logo Animation & Positioning */
#fixed-logo-img {
    height: 320px;
    width: auto;
    transition: height 0.4s ease-out;
}
#fixed-logo-link {
    top: -5.5rem;
    /* The class 'left-6' is still on the HTML element, so no need to set left here */
    transition: top 0.4s ease-out;
    width: fit-content; /* Constrain link size to its content */
    height: fit-content; /* Constrain link size to its content */
}
/* Scrolled State (Desktop) */
body.header-scrolled #fixed-logo-img {
    height: 208px;
}
body.header-scrolled #fixed-logo-link {
    top: -4.25rem;
}

/* Tablet-specific Logo Adjustments */
@media (min-width: 768px) and (max-width: 1279px) {
    #fixed-logo-img {
        height: 160px; /* Smaller logo for tablets */
    }
    #fixed-logo-link {
        top: -3rem; /* Adjusted top position for smaller logo */
    }
    body.header-scrolled #fixed-logo-img {
        height: 160px; /* Keep height static on scroll */
    }
    body.header-scrolled #fixed-logo-link {
        top: -3rem; /* Keep top position static on scroll */
    }
}

/* Toggle Switch Styles */
#runtime-toggle:checked ~ .toggle-label-24 {
    color: #8b8b9b; /* A muted text color */
    transition: color 0.3s ease-in-out;
}
#runtime-toggle:not(:checked) ~ .toggle-label-6 {
    color: #8b8b9b; /* A muted text color */
    transition: color 0.3s ease-in-out;
}
#runtime-toggle:checked ~ .toggle-label-6 {
    color: #E0D8FF; /* The bright text color */
}
#runtime-toggle:not(:checked) ~ .toggle-label-24 {
    color: #E0D8FF; /* The bright text color */
}
.toggle-label-24, .toggle-label-6 {
    transition: color 0.3s ease-in-out;
}