/* General body styles */
body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Modal styles */
.modal { display: none; }
.modal.active { display: flex; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Banner styles */
.hero-section {
    position: relative;
    height: 600px; /* Fixed height for the banner */
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out; /* Transition for background image */
    overflow: hidden;
    display: flex; /* Added to help center content vertically */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally (if text-center on child is not enough) */
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.45); /* Slightly darker overlay for better text contrast */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    /* Tailwind's text-center class on this div in HTML will handle horizontal text alignment.
       Vertical alignment is now handled by flexbox on .hero-section.
       Padding on .hero-content can be adjusted if needed, but the fixed height
       on .hero-section is the primary driver for the banner's dimensions.
       The py-20 md:py-32 classes on the <header> in HTML can be removed or reduced
       as height is now fixed. */
}

/* Banner Text Animation */
.banner-text {
    opacity: 0;
    transform: translateY(20px);
    /* Transition applied when 'text-animated' class is added/removed by JS */
    /* Delays can be added inline via style attribute if needed for staggering */
}
.banner-text.text-animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Staggering animation for banner elements */
#heroHeadline.text-animated {
    transition-delay: 0.1s;
}
#heroSubhead.text-animated {
    transition-delay: 0.3s;
}
#heroFreeTrialButton.banner-text.text-animated { /* Ensure button also uses this system */
    transition-delay: 0.5s;
}


/* FAQ Accordion Arrow Rotation */
#faq details[open] > summary svg { transform: rotate(180deg); }
#faq details summary svg { transition: transform 0.3s ease-in-out; }

/* Scroll Animation Styles (for sections below the hero) */
.scroll-animate {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
.scroll-animate[data-animation="fadeInUp"],
.scroll-animate:not([data-animation]) {
    transform: translateY(30px);
}
.scroll-animate[data-animation="fadeInUp"].animated,
.scroll-animate:not([data-animation]).animated {
    opacity: 1;
    transform: translateY(0);
}
.scroll-animate[data-animation="fadeIn"] {
    transform: translateY(0);
}
.scroll-animate[data-animation="fadeIn"].animated {
    opacity: 1;
}
.scroll-animate[data-animation="slideLeft"] {
    transform: translateX(-50px);
}
.scroll-animate[data-animation="slideLeft"].animated {
    opacity: 1;
    transform: translateX(0);
}
.scroll-animate[data-animation="slideRight"] {
    transform: translateX(50px);
}
.scroll-animate[data-animation="slideRight"].animated {
    opacity: 1;
    transform: translateX(0);
}
.scroll-animate.animated {
    opacity: 1;
}