/* base.css */

/* Font Family */
body, .montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* Custom Colors as CSS Variables (for flexibility) */
:root {
  --brand-blue: #007BFF;
  --brand-purple: #b300b3;
  --brand-dark-gray: #333333;
  --brand-light-gray: #F5F5F5;
  --hero-blue: #001F3F;
  --hero-purple: #b300b3;
}

/* Utility Classes for Colors (Mimicking Tailwind's approach in Bootstrap) */
.text-brand-blue {
  color: var(--brand-blue);
}
.bg-brand-blue {
  background-color: var(--brand-blue);
}
.border-brand-blue {
  border-color: var(--brand-blue);
}

.text-brand-orange {
  color: var(--brand-purple);
}
.bg-brand-purple {
  background-color: var(--brand-purple);
}
.border-brand-purple {
  border-color: var(--brand-purple);
}

.text-brand-dark-gray {
  color: var(--brand-dark-gray);
}
.bg-brand-dark-gray {
  background-color: var(--brand-dark-gray);
}
.border-brand-dark-gray {
  border-color: var(--brand-dark-gray);
}

.text-brand-light-gray {
  color: var(--brand-light-gray);
}
.bg-brand-light-gray {
  background-color: var(--brand-light-gray);
}
.border-brand-light-gray {
  border-color: var(--brand-light-gray);
}

.text-hero-blue {
  color: var(--hero-blue);
}
.bg-hero-blue {
  background-color: var(--hero-blue);
}
.border-hero-blue {
  border-color: var(--hero-blue);
}

.text-hero-purple {
  color: var(--hero-purple);
}
.bg-hero-purple {
  background-color: var(--hero-purple);
}
.border-hero-purple {
  border-color: var(--hero-purple);
}


/* Ensure body takes full height for potential full-page effects */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* --- Hero Section Styles --- */
#hero {
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Prevent content spillover */
}

/* Particle container - must cover the entire hero section */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* Behind content, above video/gradient */
}

/* Gradient Overlay - adjust colors and opacity as needed */
#hero .bg-gradient-to-br {
    /* Tailwind generates this, but defining here for clarity if needed */
    /* background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); */
    /* --tw-gradient-from: #001F3F; */
    /* --tw-gradient-to: #6A0DAD; */
    /* --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); */
    /* opacity: 0.8; */ /* Controlled by Tailwind class */
}

/* Background Video Styling */
#hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0; /* Behind everything else */
    /* opacity: 0.4; */ /* Controlled by Tailwind class */
}

/* Hero Content Container - ensure it's above other layers */
#hero > .relative.z-20 {
    position: relative; /* Ensure it respects z-index */
    z-index: 20; /* Above particles and video */
}

/* Animated Headline - Simple Fade-in Example */
/* For a complex assembly effect, JS (like GSAP) is usually required */
#animated-headline span {
    opacity: 0;
    display: inline-block; /* Needed for transform */
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Stagger the animation for each word */
#animated-headline span:nth-child(1) { animation-delay: 0.1s; }
#animated-headline span:nth-child(2) { animation-delay: 0.2s; }
#animated-headline span:nth-child(3) { animation-delay: 0.3s; }
#animated-headline span:nth-child(4) { animation-delay: 0.4s; }
#animated-headline span:nth-child(5) { animation-delay: 0.5s; }


@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsing CTA Button Animation */
#cta-button {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); /* brand-orange with alpha */
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(255, 165, 0, 0); /* Faded shadow */
    }
}




/* --- General Section Styling --- */
/* Add some top margin to content sections to account for fixed nav */
main section:first-of-type {
    /* Add padding if nav overlaps, depends on nav height */
     /* padding-top: 4rem; */ /* Adjust based on nav height (h-16 = 4rem) */
}

/* Ensure icons in features/how-it-works are centered if needed */
.icon-container {
    /* Example class for icon divs */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Add size, background etc. */
}

/* Improve readability */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}