:root {
    --primary-color: #202C39;
    --secondary-color: #00AEEF;
    --background-color: #0A192F;
    --footer-bg-color: #1A202C;
    --button-color: #00AEEF;
    --section-bg-1: #0E213D;
    --section-bg-2: #132D56;
    --section-bg-3: #17386B;
    --section-bg-4: #0A192F;
    --text-light: #E0E0E0;
    --text-dark: #A0A0A0;
    --accent-glow: 0 0 15px var(--secondary-color), 0 0 30px var(--secondary-color);
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --spacing-unit: 1rem;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-light);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: 3.5rem; font-weight: 700; }
h2 { font-size: 2.8rem; font-weight: 600; }
h3 { font-size: 2.2rem; font-weight: 600; }
h4 { font-size: 1.8rem; font-weight: 500; }
h5 { font-size: 1.4rem; font-weight: 500; }
h6 { font-size: 1.1rem; font-weight: 400; }

p {
    margin-bottom: 1em;
    font-size: 1.1rem;
    color: var(--text-dark);
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
    text-shadow: 0 0 5px var(--secondary-color);
}

ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1em;
    color: var(--text-dark);
}

li {
    margin-bottom: 0.5em;
}

strong {
    color: var(--text-light);
    font-weight: 600;
}

/* Layout & Structure */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

section:nth-of-type(odd) {
    background-color: var(--section-bg-1);
}

section:nth-of-type(even) {
    background-color: var(--section-bg-2);
}

/* Specific Section Backgrounds */
.hero-section {
    background-color: var(--background-color);
    padding: 8rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Subtle geometric pattern */
    background-image: radial-gradient(circle at top left, rgba(0,174,239,0.1) 1px, transparent 1px),
                      radial-gradient(circle at bottom right, rgba(0,174,239,0.1) 1px, transparent 1px);
    background-size: 80px 80px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(0,174,239,0.05) 0%, transparent 70%);
    opacity: 0.3;
    animation: rotateBackground 20s linear infinite;
    z-index: 0;
}

@keyframes rotateBackground {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--background-color);
    background-color: var(--button-color);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.4);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn:hover {
    background-color: #00c0ff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 174, 239, 0.6), var(--accent-glow);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 174, 239, 0.3);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: all 0.7s ease-out;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.btn-secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    box-shadow: none;
    padding: 0.9rem 2.4rem;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--background-color);
    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3);
    transform: translateY(-3px);
}

/* Cards */
.card {
    background-color: var(--primary-color);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    margin-bottom: var(--spacing-unit);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 174, 239, 0.1);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), var(--accent-glow);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,174,239,0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-light);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--section-bg-1);
    border: 1px solid rgba(0, 174, 239, 0.2);
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Footer */
footer {
    background-color: var(--footer-bg-color);
    color: var(--text-dark);
    padding: 3rem 0;
    text-align: center;
    border-top: 1px solid rgba(0, 174, 239, 0.1);
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Utility Classes (for Alpine.js transitions) */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
    transition: all 0.5s ease;
}
.slide-up-enter-from, .slide-up-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

/* Geometric shapes and accents */
.shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px; /* Adjust height as needed */
}

.shape-divider .shape-fill {
    fill: var(--section-bg-2); /* Or any other relevant background color */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.7rem; }
    p { font-size: 1rem; }

    section {
        padding: 4rem 0;
    }

    .btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    p { font-size: 0.9rem; }

    .container {
        padding: 0 0.8rem;
    }

    .hero-section {
        padding: 6rem 0;
    }
}

/* Tailwind Integration Notes:
   This CSS is designed to complement Tailwind CSS.
   It provides custom styles for base elements, unique components (btn, card),
   and global styles (body, typography) that might not be directly covered
   by standard Tailwind utility classes or require more specific design.
   For example, you would use Tailwind for grid layouts, flexbox, margin/padding
   utilities, while this CSS handles the aesthetic details like custom buttons,
   card styles, and overall theme colors/fonts.
*/


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}