:root {
    /* Colors */
    --color-primary: #10B981;
    --color-secondary: #0694A6;
    --color-background: #F0FDF4;
    --color-footer-bg: #042F2E;
    --color-button: #10B981;
    --color-text-light: #F0FDF4; /* For dark backgrounds like footer */
    --color-section-1: #F0FDF4;
    --color-section-2: #ECFDF5;
    --color-section-3: #D1FAE5;
    --color-section-4: #A7F3D0;
    --color-section-5: #6EE7B7;

    /* Typography */
    --font-family-base: 'Inter', sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;

    /* Spacing (Tailwind-like scale for consistency) */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* Border Radius */
    --border-radius-base: 0.5rem; /* rounded-lg */
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-base: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */

    /* Transitions */
    --transition-duration: 300ms;
    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #374151; /* A dark gray for good readability */
    background-color: var(--color-background);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    color: #111827; /* Darker text for headings */
    line-height: 1.2;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; } /* text-5xl, extra-bold */
h2 { font-size: 2.25rem; font-weight: 700; } /* text-4xl, bold */
h3 { font-size: 1.875rem; font-weight: 700; } /* text-3xl, bold */
h4 { font-size: 1.5rem; font-weight: 600; } /* text-2xl, semi-bold */
h5 { font-size: 1.25rem; font-weight: 600; } /* text-xl, semi-bold */
h6 { font-size: 1.125rem; font-weight: 600; } /* text-lg, semi-bold */

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing-function);
}

a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

ul, ol {
    margin-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

li {
    margin-bottom: var(--spacing-sm);
}

/* Utility Classes (complementing Tailwind, for custom components) */
.container {
    max-width: 1280px; /* Tailwind's max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.section-padding {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
}

/* Component: Button (custom styling based on design_preferences) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #10B981, #0694A6); /* from-emerald-500 to-teal-600 */
    color: white;
    font-weight: 700; /* font-bold */
    padding: var(--spacing-lg) var(--spacing-2xl); /* py-3 px-8 */
    border-radius: var(--border-radius-full); /* rounded-full */
    border: none;
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing-function);
    transform: translateZ(0); /* Force hardware acceleration */
    box-shadow: var(--shadow-base);
}

.btn-primary:hover {
    background-image: linear-gradient(to right, #0694A6, #10B981); /* hover:from-teal-600 hover:to-emerald-500 */
    transform: scale(1.05); /* hover:scale-105 */
    box-shadow: var(--shadow-hover);
}

.btn-primary:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Component: Hero Section */
.hero-section {
    background-image: linear-gradient(to bottom right, #34D399, #20B2AA); /* from-emerald-400 to-teal-500 */
    color: var(--color-text-light);
    padding: var(--spacing-3xl) var(--spacing-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Organic shapes for visual interest */
    border-bottom-left-radius: 30% 10%;
    border-bottom-right-radius: 70% 20%;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: float1 10s infinite ease-in-out;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: float2 12s infinite ease-in-out;
    z-index: 0;
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

@keyframes float1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, 30px) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, -25px) rotate(-10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}


/* Component: Card (Glassmorphism inspired) */
.card {
    background-color: rgba(255, 255, 255, 0.8); /* bg-white/80 */
    backdrop-filter: blur(12px) saturate(180%); /* backdrop-blur-lg, added saturate for more vibrancy */
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: var(--border-radius-base); /* rounded-xl */
    box-shadow: var(--shadow-base); /* shadow-lg */
    padding: var(--spacing-xl); /* p-6 */
    transition: all var(--transition-duration) var(--transition-timing-function);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border for glass effect */
}

.card:hover {
    box-shadow: var(--shadow-hover); /* hover:shadow-xl */
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Component: Input Fields (Glassmorphism inspired) */
.input-field {
    background-color: rgba(255, 255, 255, 0.7); /* bg-white/70 */
    backdrop-filter: blur(8px); /* backdrop-blur-sm */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-section-3); /* border border-emerald-300 */
    border-radius: var(--border-radius-base); /* rounded-md */
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
    color: #374151;
    transition: all var(--transition-duration) var(--transition-timing-function);
}

.input-field::placeholder {
    color: #6B7280; /* placeholder-gray-500 */
    opacity: 0.8;
}

.input-field:focus {
    outline: none;
    border-color: transparent; /* Remove default border */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5); /* focus:ring-2 focus:ring-emerald-500 */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less translucent on focus */
}

/* Section Backgrounds */
.section-bg-1 { background-color: var(--color-section-1); }
.section-bg-2 { background-color: var(--color-section-2); }
.section-bg-3 { background-color: var(--color-section-3); }
.section-bg-4 { background-color: var(--color-section-4); }
.section-bg-5 { background-color: var(--color-section-5); }

/* Footer */
.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
    text-align: center;
    border-top: 5px solid var(--color-primary); /* A strong accent */
}

.footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Alpine.js specific transitions (for x-show, x-if) */
/* Basic fade for elements with x-transition */
[x-transition] {
    transition: opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);
}

[x-transition:enter] {
    opacity: 0;
    transform: translateY(10px);
}

[x-transition:enter-start] {
    opacity: 0;
    transform: translateY(10px);
}

[x-transition:enter-end] {
    opacity: 1;
    transform: translateY(0);
}

[x-transition:leave] {
    opacity: 1;
    transform: translateY(0);
}

[x-transition:leave-start] {
    opacity: 1;
    transform: translateY(0);
}

[x-transition:leave-end] {
    opacity: 0;
    transform: translateY(10px);
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) { /* lg breakpoint */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
}

@media (max-width: 768px) { /* md breakpoint */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    .btn-primary {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: 0.9rem;
    }
    .section-padding {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
}

@media (max-width: 640px) { /* sm breakpoint */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    p { font-size: 0.95rem; }
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}<ctrl63>


/* 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;
    }
}