/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');
/* Using Font Awesome 6.5.1 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;

    /* ===== Enhanced Ocean Theme Colors (Shared) ===== */
    --ocean-deep: #03045e;      /* Dark Navy - Slightly deeper */
    --ocean-primary: #0077b6;   /* Medium Blue - Main interactive color */
    --ocean-secondary: #00b4d8; /* Light Blue - Accent */
    --ocean-highlight: #48cae4; /* Bright Cyan - Hover/Active states */
    --ocean-sky: #90e0ef;       /* Sky Blue - Background tones */
    --ocean-foam: #caf0f8;      /* Very Light Blue / Cyan tint */
    --sand-light: #f8f5e7;     /* Lighter, slightly desaturated sand */
    --sand-dark: #e0d2ac;      /* Darker sand, less yellow */
    --coral-accent: #ff7b00;   /* Brighter Coral/Orange */
    --warning-red: #e63946;    /* Vibrant but not jarring red */
    --success-green: #2a9d8f;   /* Muted Teal/Green */
    --white: #ffffff;
    --off-white: #f9fcff;     /* Very slightly off-white */
    --black: #0d1117;         /* Darker, slightly blue-tinted black */
    --deep-dark: #05080f;      /* Even darker base for dark mode */

    /* ===== Light Theme Specific ===== */
    --bg-color-light: var(--off-white);
    --bg-secondary-light: var(--white);
    --bg-footer-light: #e6f7ff; /* Light blue footer */
    --text-color-light: #1f2a38; /* Slightly darker main text */
    --text-muted-light: #5f6b7a; /* More muted gray */
    --text-nav-link-light: var(--black);
    --border-light: #cce8fb; /* Softer blue border */
    --shadow-light: rgba(0, 119, 182, 0.1); /* Subtle shadow base */
    --card-bg-light: var(--white);
    --fact-bg-light: linear-gradient(140deg, color-mix(in srgb, var(--warning-red) 4%, var(--bg-secondary-light)) 0%, var(--bg-secondary-light) 60%);
    --fact-border-light: var(--warning-red);
    --hero-title-color-light: var(--ocean-deep);
    --hero-bg-gradient-light-start: color-mix(in srgb, var(--ocean-sky) 25%, var(--white)); /* More prominent start */
    --hero-bg-gradient-light-end: color-mix(in srgb, var(--ocean-foam) 35%, transparent);
    --footer-text-light: color-mix(in srgb, var(--ocean-deep) 75%, var(--black));
    --ripple-color-light: color-mix(in srgb, var(--ocean-sky) 28%, transparent);
    --card-deco-color-light: color-mix(in srgb, var(--ocean-sky) 18%, transparent);
    --card-hover-border-light: linear-gradient(110deg, var(--ocean-primary), var(--ocean-highlight));
    --glow-color-light: color-mix(in srgb, var(--ocean-highlight) 25%, transparent); /* For focus/hover glows */

    /* ===== Dark Theme Specific ===== */
    --bg-color-dark: var(--deep-dark);   /* Deep blue */
    --bg-secondary-dark: #0c1325; /* Slightly lighter deep blue */
    --bg-footer-dark: #040713; /* Even darker footer */
    --text-color-dark: #e0f2ff; /* Brighter off-white */
    --text-muted-dark: #a0b8d0; /* Lighter muted blue-gray */
    --text-nav-link-dark: var(--white);
    --border-dark: #2c3e5a;    /* Adjusted, slightly brighter border */
    --shadow-dark: rgba(0, 0, 0, 0.3); /* Darker shadow base */
    --card-bg-dark: var(--bg-secondary-dark);
    --fact-bg-dark: linear-gradient(140deg, color-mix(in srgb, var(--warning-red) 10%, var(--bg-secondary-dark)) 0%, var(--bg-secondary-dark) 65%);
    --fact-border-dark: color-mix(in srgb, var(--warning-red) 90%, var(--white));
    --hero-title-color-dark: var(--ocean-highlight);
    --hero-bg-gradient-dark-start: color-mix(in srgb, var(--ocean-primary) 18%, var(--bg-color-dark));
    --hero-bg-gradient-dark-end: color-mix(in srgb, var(--ocean-deep) 30%, transparent);
    --footer-text-dark: var(--text-muted-dark);
    --ripple-color-dark: color-mix(in srgb, var(--ocean-secondary) 20%, transparent);
    --card-deco-color-dark: color-mix(in srgb, var(--ocean-primary) 25%, transparent);
    --card-hover-border-dark: linear-gradient(110deg, var(--ocean-highlight), var(--ocean-sky));
    --glow-color-dark: color-mix(in srgb, var(--ocean-sky) 30%, transparent); /* For focus/hover glows */


    /* ===== Base Variables (Defaults to Light Theme) ===== */
    --bg-color: var(--bg-color-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-footer: var(--bg-footer-light);
    --text-color: var(--text-color-light);
    --text-muted: var(--text-muted-light);
    --text-nav-link: var(--text-nav-link-light);
    --border-color: var(--border-light);
    --card-shadow-base: 0 8px 25px var(--shadow-light);
    --card-shadow-hover: 0 20px 55px var(--shadow-light); /* Stronger hover shadow */
    --card-shadow: var(--card-shadow-base);
    --card-bg: var(--card-bg-light);
    --fact-bg: var(--fact-bg-light);
    --fact-border: var(--fact-border-light);
    --hero-title-color: var(--hero-title-color-light);
    --hero-bg-gradient-start: var(--hero-bg-gradient-light-start);
    --hero-bg-gradient-end: var(--hero-bg-gradient-light-end);
    --footer-text: var(--footer-text-light);
    --ripple-color: var(--ripple-color-light);
    --card-deco-color: var(--card-deco-color-light);
    --card-hover-border: var(--card-hover-border-light);
    --glow-color: var(--glow-color-light);

    /* ===== Gradients ===== */
    --ocean-gradient-primary: linear-gradient(110deg, var(--ocean-primary), var(--ocean-highlight));
    --ocean-gradient-secondary: linear-gradient(110deg, var(--ocean-secondary), var(--ocean-sky));
    --ocean-gradient-deep: linear-gradient(110deg, var(--ocean-deep), var(--ocean-primary));
    --ocean-gradient-subtle: linear-gradient(135deg, color-mix(in srgb, var(--ocean-sky) 15%, transparent), color-mix(in srgb, var(--ocean-foam) 20%, transparent));
    --ocean-gradient-dark: linear-gradient(110deg, color-mix(in srgb, var(--ocean-primary) 80%, black) , var(--ocean-deep)); /* Darker, richer primary hover */
    --ocean-gradient-text-light: linear-gradient(90deg, var(--ocean-deep) 0%, var(--ocean-primary) 70%, var(--ocean-secondary) 100%);
    --ocean-gradient-text-dark: linear-gradient(90deg, var(--ocean-highlight) 0%, var(--ocean-sky) 70%, var(--ocean-foam) 100%);
    --ocean-gradient-text: var(--ocean-gradient-text-light);
    --warning-gradient: linear-gradient(45deg, var(--warning-red), color-mix(in srgb, var(--coral-accent) 90%, var(--warning-red)));

    /* ===== Transitions & Animations ===== */
    --transition-speed: 0.3s;
    --transition-medium: 0.5s; /* Added medium speed */
    --transition-long: 0.8s;  /* Slightly longer for major effects */
    --transition-ease: ease-in-out;
    --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* Smooth ending */
    --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1); /* Gentle sine curve */

    /* ===== Spacing ===== */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;  /* Slightly larger */
    --spacing-sm: 0.75rem;
    --spacing-md: 1.2rem;  /* Slightly larger */
    --spacing-lg: 1.8rem;
    --spacing-xl: 2.9rem;
    --spacing-xxl: 4.7rem;
    --navbar-height: 70px; /* Will be updated by JS */

    /* ===== Border Radius ===== */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px; /* Added larger radius */
}

/* ===== Dark Mode Variables Override ===== */
body.dark {
    --bg-color: var(--bg-color-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-footer: var(--bg-footer-dark);
    --text-color: var(--text-color-dark);
    --text-muted: var(--text-muted-dark);
    --text-nav-link: var(--text-nav-link-dark);
    --border-color: var(--border-dark);
    --card-shadow-base: 0 10px 35px var(--shadow-dark); /* Enhanced dark shadow */
    --card-shadow-hover: 0 22px 65px rgba(0,0,0,0.4); /* Even stronger dark hover shadow */
    --card-shadow: var(--card-shadow-base);
    --card-bg: var(--card-bg-dark);
    --fact-bg: var(--fact-bg-dark);
    --fact-border: var(--fact-border-dark);
    --hero-title-color: var(--hero-title-color-dark);
    --hero-bg-gradient-start: var(--hero-bg-gradient-dark-start);
    --hero-bg-gradient-end: var(--hero-bg-gradient-dark-end);
    --footer-text: var(--footer-text-dark);
    --ocean-gradient-text: var(--ocean-gradient-text-dark);
    --ripple-color: var(--ripple-color-dark);
    --card-deco-color: var(--card-deco-color-dark);
    --card-hover-border: var(--card-hover-border-dark);
    --glow-color: var(--glow-color-dark);
}

/* ===== Reset and Base Styles ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16.5px;
    /* scroll-padding-top dynamically set by JS */
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.8; /* Generous line height */
    transition: background-color var(--transition-medium) var(--transition-ease),
                color var(--transition-medium) var(--transition-ease);
    overflow-x: hidden;
    position: relative;
}

/* ===== Enhanced Animated Backgrounds ===== */

/* 1. Deepest Layer: Subtle Gradient Shift */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -4; /* Deepest */
    pointer-events: none;
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--ocean-sky) 8%, var(--bg-color)) 0%,
        color-mix(in srgb, var(--ocean-foam) 10%, var(--bg-color)) 45%,
        color-mix(in srgb, var(--ocean-secondary) 9%, var(--bg-color)) 100%);
    background-size: 150% 300%; /* Wider movement potential */
    opacity: 0.65;
    animation: subtle-gradient-shift 60s var(--ease-in-out-sine) infinite alternate;
    transition: background var(--transition-long) var(--transition-ease), opacity var(--transition-long) var(--transition-ease);
    will-change: background-position, opacity;
}
body.dark::before {
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--ocean-deep) 10%, var(--bg-color-dark)) 0%,
        color-mix(in srgb, var(--ocean-primary) 15%, var(--bg-color-dark)) 45%,
        color-mix(in srgb, var(--ocean-secondary) 12%, var(--bg-color-dark)) 100%);
    opacity: 0.55;
    animation-name: subtle-gradient-shift-dark;
}
@keyframes subtle-gradient-shift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
@keyframes subtle-gradient-shift-dark {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 2. Subtle Grid Overlay */
.grid-overlay {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: -3; /* Above gradient, below ripple */
    pointer-events: none;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--border-color) 10%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--border-color) 10%, transparent) 1px, transparent 1px);
    background-size: 60px 60px; /* Adjust grid size */
    opacity: 0.5;
    transition: opacity var(--transition-medium) ease, background-image var(--transition-medium) ease;
}
body.dark .grid-overlay {
    opacity: 0.2; /* Even subtler in dark mode */
}


/* 3. Water Ripple Layer */
.water-ripple-background {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -2; /* Above grid, below bubbles */
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 40%, var(--ripple-color) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 65%, var(--ripple-color) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 15%, var(--ripple-color) 0%, transparent 35%),
        radial-gradient(ellipse at 10% 80%, var(--ripple-color) 0%, transparent 50%); /* Added one more */
    background-size: 400% 400%; /* Allows more movement */
    opacity: 0.25;
    animation: ripple-movement 70s linear infinite alternate;
    transition: background var(--transition-long) var(--transition-ease), opacity var(--transition-long) var(--transition-ease);
    mix-blend-mode: soft-light; /* Subtle blend */
    will-change: background-position;
}
body.dark .water-ripple-background {
    opacity: 0.18;
    mix-blend-mode: overlay;
}

@keyframes ripple-movement {
    0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%; }
    50%  { background-position: 70% 60%, 30% 20%, 100% 100%, 50% 0%; }
    100% { background-position: 100% 100%, 0% 0%, 100% 50%, 0% 100%; }
}

/* 4. Floating Bubbles Layer - Enhanced Look */
.floating-bubbles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1; /* Above ripple, below content */
    pointer-events: none;
}

.floating-bubbles span {
    position: absolute;
    bottom: -80px; /* Start further below */
    width: 20px; /* Default size */
    height: 20px;
    background-color: color-mix(in srgb, var(--ocean-highlight) 30%, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: rise 20s infinite ease-in; /* Default duration */
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--white) 30%, transparent), /* Inner highlight */
                0 0 12px 3px color-mix(in srgb, var(--ocean-highlight) 15%, transparent); /* Outer glow */
    backdrop-filter: blur(1px); /* Slight blur */
    will-change: transform, opacity;
}

/* Variations in bubbles */
.floating-bubbles span:nth-child(1) { left: 12%; animation-duration: 23s; width: 12px; height: 12px; animation-timing-function: linear; }
.floating-bubbles span:nth-child(2) { left: 22%; animation-duration: 18s; animation-delay: 2.5s; width: 28px; height: 28px; background-color: color-mix(in srgb, var(--ocean-sky) 30%, transparent); box-shadow: inset 0 0 12px color-mix(in srgb, var(--white) 25%, transparent), 0 0 15px 4px color-mix(in srgb, var(--ocean-sky) 20%, transparent); }
.floating-bubbles span:nth-child(3) { left: 38%; animation-duration: 28s; animation-delay: 5.2s; width: 18px; height: 18px; animation-timing-function: ease-out; }
.floating-bubbles span:nth-child(4) { left: 53%; animation-duration: 20s; animation-delay: 1.5s; width: 14px; height: 14px; }
.floating-bubbles span:nth-child(5) { left: 68%; animation-duration: 25s; animation-delay: 4.1s; width: 22px; height: 22px; background-color: color-mix(in srgb, var(--ocean-foam) 35%, transparent); box-shadow: inset 0 0 8px color-mix(in srgb, var(--white) 35%, transparent), 0 0 10px 2px color-mix(in srgb, var(--ocean-foam) 15%, transparent); }
.floating-bubbles span:nth-child(6) { left: 82%; animation-duration: 17s; animation-delay: 6.3s; width: 25px; height: 25px; animation-timing-function: var(--ease-in-out-sine); }
.floating-bubbles span:nth-child(7) { left: 92%; animation-duration: 31s; animation-delay: 3.8s; width: 16px; height: 16px; }
.floating-bubbles span:nth-child(8) { left: 7%; animation-duration: 21s; animation-delay: 7.5s; width: 10px; height: 10px; animation-timing-function: linear; }
.floating-bubbles span:nth-child(9) { left: 28%; animation-duration: 24s; animation-delay: 9.1s; width: 19px; height: 19px; }
.floating-bubbles span:nth-child(10){ left: 78%; animation-duration: 26s; animation-delay: 8.4s; width: 21px; height: 21px; background-color: color-mix(in srgb, var(--ocean-secondary) 28%, transparent); box-shadow: inset 0 0 11px color-mix(in srgb, var(--white) 28%, transparent), 0 0 14px 3px color-mix(in srgb, var(--ocean-secondary) 18%, transparent); }

/* Dark mode bubble appearance */
body.dark .floating-bubbles span {
     background-color: color-mix(in srgb, var(--ocean-highlight) 22%, transparent);
     box-shadow: inset 0 0 10px color-mix(in srgb, var(--ocean-sky) 15%, transparent),
                 0 0 12px 3px color-mix(in srgb, var(--ocean-highlight) 12%, transparent);
}
body.dark .floating-bubbles span:nth-child(2) { background-color: color-mix(in srgb, var(--ocean-secondary) 20%, transparent); box-shadow: inset 0 0 12px color-mix(in srgb, var(--ocean-foam) 10%, transparent), 0 0 15px 4px color-mix(in srgb, var(--ocean-secondary) 15%, transparent); }
body.dark .floating-bubbles span:nth-child(5) { background-color: color-mix(in srgb, var(--ocean-primary) 18%, transparent); box-shadow: inset 0 0 8px color-mix(in srgb, var(--ocean-sky) 18%, transparent), 0 0 10px 2px color-mix(in srgb, var(--ocean-primary) 12%, transparent); }

/* Enhanced rise animation */
@keyframes rise {
    0% {
        transform: translateY(0) translateX(0) scale(0.8) rotate(-10deg);
        opacity: 0;
    }
    15% {
        opacity: 0.5; /* Fade in a bit slower */
        transform: scale(1) rotate(5deg); /* Start rising straight */
    }
    50% {
        transform: translateY(-55vh) translateX(25px) scale(1.15) rotate(-15deg); /* More dynamic mid-journey */
        opacity: 0.8;
    }
    85% {
         opacity: 0.3; /* Fade out phase */
         transform: translateY(-90vh) translateX(-15px) scale(1) rotate(10deg);
    }
    100% {
        transform: translateY(-120vh) translateX(10px) scale(0.8) rotate(-5deg); /* Go well beyond screen */
        opacity: 0;
    }
}


/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-bottom: var(--spacing-md);
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-color); /* Fallback */
    letter-spacing: -0.7px; /* Slightly tighter */
}

h1 { font-size: clamp(3rem, 7vw, 4.8rem); text-shadow: 1px 2px 5px rgba(0,0,0,0.1); } /* More presence */
h2 { font-size: clamp(2.4rem, 5.5vw, 3.5rem); margin-bottom: var(--spacing-xl); }
h3 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); color: var(--ocean-primary); font-weight: 600; }
h4 { font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--ocean-primary); font-weight: 600; }
h5 { font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 600; }
h6 { font-size: clamp(1rem, 2.2vw, 1.1rem); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); }

body.dark h1 { text-shadow: 1px 2px 8px rgba(0, 119, 182, 0.2); }
body.dark h3 { color: var(--ocean-highlight); }
body.dark h4 { color: var(--ocean-highlight); }
body.dark h5 { color: var(--ocean-secondary); }

/* Enhanced Gradient Text Styling */
.ocean-gradient-text {
    background: var(--ocean-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Use transparent, not fallback */
    -webkit-text-fill-color: transparent; /* Required for Safari */
    background-size: 300% auto; /* Larger size for smoother flow */
    animation: gradient-flow 10s var(--ease-in-out-sine) infinite;
}
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body.dark .ocean-gradient-text {
    color: transparent; /* Ensure dark mode respects gradient */
     -webkit-text-fill-color: transparent;
}

p {
    margin-bottom: var(--spacing-lg);
    max-width: 70ch; /* Slightly wider max */
    font-size: 1.1rem; /* Increased base p size */
    color: var(--text-muted);
    line-height: 1.85; /* More leading */
}
body.dark p { color: var(--text-muted-dark); }

a {
    color: var(--ocean-primary);
    text-decoration: none;
    font-weight: 500;
    position: relative; /* For pseudo-element underline */
    transition: color var(--transition-speed) var(--transition-ease),
                opacity var(--transition-speed) var(--transition-ease);
}
a:not(.btn):not(.nav-link):not(.social-icon):not(.logo) { /* Selective underline */
     text-decoration: underline;
     text-decoration-color: color-mix(in srgb, var(--ocean-secondary) 40%, transparent);
     text-underline-offset: 4px;
     text-decoration-thickness: 1px;
     transition: text-decoration-color var(--transition-speed) ease;
}

a:hover, a:focus {
    color: var(--ocean-highlight);
    opacity: 0.9;
    outline: none;
}
a:hover:not(.btn):not(.nav-link):not(.social-icon):not(.logo) {
    text-decoration-color: var(--ocean-highlight);
}

body.dark a { color: var(--ocean-highlight); }
body.dark a:not(.btn):not(.nav-link):not(.social-icon):not(.logo) {
    text-decoration-color: color-mix(in srgb, var(--ocean-secondary) 50%, transparent);
}
body.dark a:hover, body.dark a:focus {
    color: var(--ocean-sky);
}
body.dark a:hover:not(.btn):not(.nav-link):not(.social-icon):not(.logo) {
    text-decoration-color: var(--ocean-sky);
}


ul { list-style: none; }

/* Base list style for cards etc. */
.card ul:not(.key-points-list), .fact-block ul, .solution-content ul:not(.key-points-list), .our-approach-detail ul:not(.key-points-list), .core-principles ul:not(.key-points-list) {
    margin-top: var(--spacing-md);
    padding-left: 0;
}
.card ul li:not(.key-points-list li), .fact-block ul li, .solution-content ul li:not(.key-points-list li), .our-approach-detail ul li:not(.key-points-list li), .core-principles ul li:not(.key-points-list li) {
    position: relative;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
    font-size: 1.05rem; /* Slightly larger list items */
    line-height: 1.7;
    color: var(--text-muted); /* Inherit muted color */
}
.card ul li::before, .fact-block ul li::before, .solution-content ul li::before, .our-approach-detail ul li::before, .core-principles ul li::before {
    content: "\f0da"; /* fa-chevron-right - Cleaner */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.2em; /* Adjust alignment */
    color: var(--ocean-secondary);
    transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-medium) var(--ease-out-cubic);
    font-size: 1.15em;
    opacity: 0.8;
}
body.dark .card ul li::before, body.dark .fact-block ul li::before, body.dark .solution-content ul li::before, body.dark .our-approach-detail ul li::before, body.dark .core-principles ul li::before {
     color: var(--ocean-highlight);
}
/* Hover effect for list items */
.card ul li:hover::before, .fact-block ul li:hover::before, .solution-content ul li:hover::before, .our-approach-detail ul li:hover::before, .core-principles ul li:hover::before {
    transform: translateX(6px) scale(1.2) rotate(5deg);
    color: var(--ocean-primary); /* Brighter */
    opacity: 1;
}
body.dark .card ul li:hover::before, body.dark .fact-block ul li:hover::before, body.dark .solution-content ul li:hover::before, body.dark .our-approach-detail ul li:hover::before, body.dark .core-principles ul li:hover::before {
    color: var(--ocean-sky);
}
.fact-block ul li { color: var(--text-color); } /* Make fact text standard color */
.fact-block ul li::before { content: "\f058"; color: var(--warning-red); font-weight: 400;} /* fa-circle-check solid - different look */
.fact-block ul li:hover::before { color: var(--warning-red); transform: translateX(6px) scale(1.2) rotate(5deg); opacity: 1; }

.solution-content ul.key-points-list li::before,
.our-approach-detail ul.key-points-list li::before,
.core-principles ul.key-points-list li::before { content: none; } /* Confirm removal */

/* Key Points List Styling (with inline icons) - Enhanced */
.key-points-list {
    margin-top: var(--spacing-lg);
    padding-left: 0;
}
.key-points-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-color); /* Key points text not muted */
}
.key-points-list li i {
    color: var(--ocean-primary);
    font-size: 1.4em; /* Slightly larger icon */
    width: 1.6em; /* Provide ample space */
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.15em;
    transition: transform var(--transition-medium) var(--ease-out-cubic), color var(--transition-speed) ease;
}
.key-points-list li:hover i {
    transform: scale(1.2) rotate(-10deg);
    color: var(--ocean-highlight);
}
body.dark .key-points-list li i { color: var(--ocean-highlight); }
body.dark .key-points-list li:hover i { color: var(--ocean-sky); }

strong { font-weight: 700; }
.highlight {
    color: var(--ocean-primary);
    font-weight: 700;
    background: linear-gradient(to top, color-mix(in srgb, var(--ocean-sky) 25%, transparent) 0%, color-mix(in srgb, var(--ocean-sky) 15%, transparent) 100%);
    padding: 0.1em 0.3em;
    margin: -0.1em -0.3em;
    border-radius: var(--border-radius-sm);
    box-decoration-break: clone; /* Handle line breaks nicely */
    -webkit-box-decoration-break: clone;
}
body.dark .highlight {
    color: var(--ocean-highlight);
    background: linear-gradient(to top, color-mix(in srgb, var(--ocean-secondary) 30%, transparent) 0%, color-mix(in srgb, var(--ocean-secondary) 20%, transparent) 100%);
}
.urgent-call .highlight, .fact-block .highlight {
    color: var(--warning-red);
    font-weight: 700;
    background: linear-gradient(to top, color-mix(in srgb, var(--warning-red) 15%, transparent) 0%, color-mix(in srgb, var(--warning-red) 10%, transparent) 100%);
    text-shadow: 1px 1px 3px color-mix(in srgb, var(--warning-red) 20%, transparent);
}
.hero-title .highlight-invisible {
    color: var(--warning-red);
    font-weight: 700;
    text-shadow: 1px 1px 6px color-mix(in srgb, var(--warning-red) 50%, transparent);
    position: relative; /* For pseudo-element pulse */
    animation: pulse-glow-layered 3.5s infinite alternate;
}
/**
 * Option 3: Layered text-shadow for a potentially richer glow effect.
 */
@keyframes pulse-glow-layered {
  0% {
    text-shadow:
      /* Inner, brighter glow */
      0 0 4px color-mix(in srgb, var(--warning-red) 60%, transparent),
      /* Outer, softer glow */
      0 0 8px color-mix(in srgb, var(--warning-red) 30%, transparent);
  }
  50% {
    text-shadow:
      0 0 8px color-mix(in srgb, var(--warning-red) 85%, transparent),
      0 0 20px color-mix(in srgb, var(--warning-red) 50%, transparent);
  }
  100% {
     text-shadow:
      0 0 4px color-mix(in srgb, var(--warning-red) 60%, transparent),
      0 0 8px color-mix(in srgb, var(--warning-red) 30%, transparent);
  }
}

/* --- How to use it: --- */

.my-element {
  animation: pulse-glow-layered 2s ease-in-out infinite;
}


.subtle-text {
    font-size: 0.95em;
    color: var(--text-muted);
    display: block;
    line-height: 1.55;
}
.focus-note { /* Kept style, seems useful */
    display: inline;
    font-style: italic;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95em;
}
body.dark .focus-note { color: var(--text-muted-dark); }
.focus-note::before { content: "["; margin-right: 2px; opacity: 0.7;}
.focus-note::after { content: "]"; margin-left: 2px; opacity: 0.7;}


/* ===== Layout ===== */
/* ===== Layout ===== */
.container {
    width: 100%;
    /* CHANGE THIS VALUE: Reduced from 1250px to make content narrower */
    max-width: 1100px;
    margin: 0 auto; /* This keeps it centered */
    padding: 0 var(--spacing-lg); /* Keep internal padding */
    }
    .navbar .nav-content.container {
    /* Remove horizontal padding added by .container */
    padding-left: 1;
    padding-right: 1;

    /* Remove auto margins used for centering by .container */
    margin-left: 0;
    margin-right: 0;

    /* Remove the max-width constraint from .container */
    max-width: none;

    /* Ensure it still behaves correctly flex-wise */
    width: 100%; /* Takes full width of parent */
}

.section {
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden; /* Keep for dividers, effects */
}
.section-alt {
    background-color: var(--bg-secondary);
    /* Using border images for potential gradient borders if desired */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-medium) var(--transition-ease), border-color var(--transition-medium) var(--transition-ease);
    position: relative;
    z-index: 0; /* To contain pseudo-elements */
}
/* Alt section texture - finer dot pattern */
.section-alt::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(color-mix(in srgb, var(--border-color) 30%, transparent) 0.7px, transparent 0.7px);
    background-size: 10px 10px; /* Smaller dots */
    opacity: 0.3;
    pointer-events: none;
    z-index: -1; /* Behind content */
    transition: opacity var(--transition-medium) ease, background-image var(--transition-medium) ease;
    mix-blend-mode: overlay; /* Experiment with blend modes */
}
body.dark .section-alt { background-color: var(--bg-secondary-dark); }
body.dark .section-alt::before { opacity: 0.15; mix-blend-mode: soft-light; }


.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    padding-bottom: var(--spacing-lg); /* Increased padding */
}
/* More futuristic underline */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Slightly lower */
    left: 50%;
    transform: translateX(-50%) scaleX(0); /* Start hidden */
    transform-origin: center;
    width: 100px; /* Wider base */
    height: 5px;
    background: var(--ocean-gradient-primary);
    border-radius: 3px;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--ocean-primary) 40%, transparent);
    transition: transform 0.7s var(--ease-out-cubic);
    animation: underline-reveal 0.7s var(--ease-out-cubic) 0.3s forwards; /* Reveal on load/scroll */
}
/* Add animation triggered by JS (Intersection Observer) */
.section-title.fade-in-visible::after {
    transform: translateX(-50%) scaleX(1);
}
/* Subtle pulse for revealed underline */
@keyframes underline-pulse {
    0%, 100% { box-shadow: 0 3px 12px color-mix(in srgb, var(--ocean-primary) 40%, transparent); transform: translateX(-50%) scale(1.0); opacity: 1; }
    50% { box-shadow: 0 4px 18px color-mix(in srgb, var(--ocean-highlight) 50%, transparent); transform: translateX(-50%) scale(1.05); opacity: 0.9; }
}
.section-title.fade-in-visible::after {
     animation: underline-pulse 3s infinite alternate var(--ease-in-out-sine) 1s; /* Start pulse after reveal */
}

body.dark .section-title::after {
    box-shadow: 0 3px 15px color-mix(in srgb, var(--ocean-highlight) 45%, transparent);
    background: var(--card-hover-border-dark); /* Match dark card hover */
}
body.dark @keyframes underline-pulse {
    0%, 100% { box-shadow: 0 3px 15px color-mix(in srgb, var(--ocean-highlight) 45%, transparent); transform: translateX(-50%) scale(1.0); opacity: 1; }
    50% { box-shadow: 0 4px 20px color-mix(in srgb, var(--ocean-sky) 55%, transparent); transform: translateX(-50%) scale(1.05); opacity: 0.9; }
}


.subsection-title {
    margin-top: var(--spacing-xxl);
    margin-bottom: var(--spacing-lg);
    border-left: 8px solid var(--ocean-primary); /* Thicker border */
    padding-left: var(--spacing-lg); /* More padding */
    color: var(--ocean-primary);
    font-size: clamp(1.8rem, 4vw, 2.4rem); /* Slightly larger */
    font-weight: 700;
    position: relative;
}
body.dark .subsection-title {
     color: var(--ocean-highlight);
     border-left-color: var(--ocean-highlight);
}
/* Animate border on scroll */
.subsection-title::before {
    content: '';
    position: absolute;
    left: -8px; top: 0; height: 0; width: 8px;
    background-color: var(--ocean-highlight);
    transition: height 0.6s var(--ease-out-cubic);
}
body.dark .subsection-title::before { background-color: var(--ocean-sky); }

.subsection-title.fade-in-visible::before {
    height: 100%;
}

.centered-title { /* More futuristic centered look */
    border-left: none;
    padding-left: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg); /* Wider gap */
    position: relative;
}
.centered-title::before, .centered-title::after {
    content: '';
    height: 2px;
    flex-grow: 1; /* Allow lines to grow */
    max-width: 80px; /* Limit width */
    background: linear-gradient(to right, transparent, var(--ocean-secondary), transparent);
    opacity: 0.4;
}
body.dark .centered-title::before, body.dark .centered-title::after {
     background: linear-gradient(to right, transparent, var(--ocean-primary), transparent);
}


.lead {
    font-size: 1.3rem; /* Larger lead */
    color: var(--text-muted);
    line-height: 1.9;
    margin-bottom: var(--spacing-xl);
    letter-spacing: 0.2px; /* Slight spacing */
}
.centered-lead {
    text-align: center;
    max-width: 75ch; /* Wider lead */
    margin-left: auto;
    margin-right: auto;
}
.centered-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Main Section Visibility Control - Smoother transition */
.main-section {
    display: none;
    opacity: 0;
    animation: sectionFadeIn 0.8s var(--ease-out-cubic) forwards; /* Slower, smoother fade */
}
.main-section.active-section {
    display: block;
}
@keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ===== Navbar - Enhanced ===== */
.navbar {
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    background-color: color-mix(in srgb, var(--bg-secondary) 80%, transparent); /* Slightly less opaque */
    backdrop-filter: blur(25px); /* Stronger blur */
    -webkit-backdrop-filter: blur(25px);
    padding: 0;
    min-height: 65px;
    height: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent); /* Subtler border */
    z-index: 1000;
    transition: background-color var(--transition-medium) var(--transition-ease),
                border-color var(--transition-medium) var(--transition-ease),
                box-shadow var(--transition-medium) var(--transition-ease),
                transform var(--transition-medium) ease; /* Add transform transition */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06); /* Adjusted shadow */
    /* Consider adding slight transform on scroll down if desired */
}
/* Style for scrolled navbar */
.navbar.scrolled {
     box-shadow: 0 10px 40px rgba(0, 119, 182, 0.08);
     background-color: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
}
body.dark .navbar {
    background-color: color-mix(in srgb, var(--bg-secondary-dark) 80%, transparent);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
    border-bottom-color: color-mix(in srgb, var(--border-dark) 40%, transparent);
}
body.dark .navbar.scrolled {
     box-shadow: 0 10px 45px rgba(0, 0, 0, 0.35);
     background-color: color-mix(in srgb, var(--bg-secondary-dark) 88%, transparent);
}


.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navbar-height);
    min-height: 65px;
    transition: height var(--transition-medium) ease; /* Smooth height change */
}
.logo {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 1.9rem); /* Responsive font size */
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-medium) ease;
    transform-origin: left center;
}
.logo .ocean-icon {
    font-size: 1.25em;
    line-height: 1;
    display: inline-block;
    color: var(--ocean-primary);
    transition: color var(--transition-speed) var(--transition-ease), transform 0.6s var(--ease-out-cubic);
    animation: gentle-bob 4.5s var(--ease-in-out-sine) infinite alternate;
    transform-origin: bottom center;
}
body.dark .logo .ocean-icon { color: var(--ocean-highlight); }

@keyframes gentle-bob {
    0% { transform: translateY(0) rotate(-4deg) scale(1); }
    50% { transform: translateY(-6px) rotate(5deg) scale(1.05); } /* Slightly more pronounced */
    100% { transform: translateY(0px) rotate(-4deg) scale(1); }
}
.logo:hover, .logo:focus-visible {
    color: var(--ocean-primary);
    text-decoration: none;
    transform: scale(1.04);
}
.logo:hover .ocean-icon {
    transform: scale(1.2) rotate(10deg) translateY(-3px);
}
body.dark .logo:hover, body.dark .logo:focus-visible { color: var(--ocean-highlight); }

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}
.nav-links .nav-link {
    color: var(--text-nav-link);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-sm); /* Increased padding */
    position: relative;
    transition: color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) ease;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
/* Updated hover effect: background expansion */
.nav-links .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ocean-gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-medium) var(--ease-out-cubic);
}
/* Active link style */
.nav-links .nav-link.active::before {
    transform: scaleX(1);
}
/* Hover/Focus style - background fill */
.nav-links .nav-link:hover, .nav-links .nav-link:focus-visible {
    color: var(--ocean-primary);
    background-color: color-mix(in srgb, var(--ocean-primary) 8%, transparent);
    text-decoration: none;
}
.nav-links .nav-link:hover::before, .nav-links .nav-link:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left; /* Ensure animation comes from left */
}

body.dark .nav-links .nav-link:hover, body.dark .nav-links .nav-link:focus-visible {
    color: var(--ocean-highlight);
    background-color: color-mix(in srgb, var(--ocean-highlight) 12%, transparent);
}
body.dark .nav-links .nav-link::before {
     background: linear-gradient(110deg, var(--ocean-highlight), var(--ocean-sky));
}
body.dark .nav-links .nav-link.active {
    color: var(--ocean-highlight); /* Ensure active text color in dark mode */
}


/* Keep dashboard link distinct */
.nav-dashboard-link {
    font-weight: 600;
    color: var(--white);
    background: var(--ocean-gradient-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed) var(--transition-ease);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--ocean-primary) 35%, transparent);
    border: 1px solid transparent;
    letter-spacing: 0.5px;
}
.nav-dashboard-link i { transition: transform var(--transition-medium) ease; }
.nav-dashboard-link .external-icon { font-size: 0.85em; opacity: 0.85; }

.nav-dashboard-link:hover, .nav-dashboard-link:focus-visible {
    transform: translateY(-4px) scale(1.05); /* Enhanced hover */
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ocean-highlight) 40%, transparent);
    color: var(--white);
    opacity: 1;
    background: var(--ocean-gradient-dark); /* Use darker hover gradient */
}
.nav-dashboard-link:hover i:not(.external-icon) { transform: rotate(-12deg) scale(1.12); }
/* No ::before pseudo-element for this button */
.nav-dashboard-link::before { display: none; }

/* Theme Toggle Button - Enhanced */
.theme-toggle {
    background: transparent;
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    cursor: pointer;
    font-size: 1.3rem; /* Larger icon */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    width: 48px; /* Slightly larger */
    height: 48px;
    transition: all var(--transition-medium) var(--ease-out-cubic);
    margin-left: var(--spacing-md);
    position: relative;
    overflow: hidden;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--ocean-secondary) 20%, transparent);
    color: var(--ocean-primary);
    border-color: var(--ocean-secondary);
    transform: scale(1.1) rotate(360deg); /* Full spin */
    outline: none;
    box-shadow: 0 0 20px var(--glow-color); /* Use glow variable */
}
body.dark .theme-toggle { color: var(--text-muted-dark); border-color: var(--border-dark); }
body.dark .theme-toggle:hover, body.dark .theme-toggle:focus-visible {
     background-color: color-mix(in srgb, var(--ocean-highlight) 25%, transparent);
     color: var(--ocean-highlight);
     border-color: var(--ocean-highlight);
     box-shadow: 0 0 20px var(--glow-color-dark);
}
/* Icon transition inside */
.theme-toggle i {
    transition: transform 0.5s var(--ease-out-cubic), opacity 0.4s ease;
    position: absolute; /* Allow icons to overlap during transition */
}
/* Define specific transitions if needed based on how JS swaps icons */


/* ===== Hero Section - Enhanced ===== */
.hero {
    padding: calc(var(--spacing-xxl) + var(--navbar-height) + 2rem) 0 calc(var(--spacing-xxl) + 6rem); /* More vertical padding */
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--hero-bg-gradient-start) 15%, var(--hero-bg-gradient-end) 85%);
    min-height: 95vh; /* Slightly taller */
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}
/* More dynamic ocean overlay */
.ocean-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocean-foam) 12%, transparent) 0%,
        color-mix(in srgb, var(--ocean-sky) 8%, transparent) 40%,
        color-mix(in srgb, var(--ocean-primary) 10%, transparent) 100%
    );
    opacity: 0.15; /* Start more subtle */
    z-index: 0;
    pointer-events: none;
    animation: overlay-pulse 15s infinite alternate var(--ease-in-out-sine);
    transition: background var(--transition-long) ease, opacity var(--transition-long) ease;
    mix-blend-mode: multiply; /* Darker blend */
}
body.dark .ocean-overlay {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocean-secondary) 12%, transparent) 0%,
        color-mix(in srgb, var(--ocean-primary) 18%, transparent) 40%,
        color-mix(in srgb, var(--ocean-deep) 15%, transparent) 100%
    );
    opacity: 0.12;
    mix-blend-mode: overlay; /* Lighter blend for dark mode */
}
@keyframes overlay-pulse {
    from { opacity: 0.15; transform: scale(1); }
    to { opacity: 0.35; transform: scale(1.02); } /* Subtle scale */
}
body.dark @keyframes overlay-pulse {
     from { opacity: 0.1; transform: scale(1); }
     to { opacity: 0.25; transform: scale(1.02); }
}

.hero-content {
    display: grid;
    /* Updated grid definition for 2x2 layout */
    grid-template-columns: 1.1fr 0.9fr; /* Maintain original column ratio */
    grid-template-rows: auto auto;     /* Define two rows */
    align-items: start; /* Align items to the top of their cells */
    gap: var(--spacing-xl); /* Keep existing gap between cells */
    position: relative;
    z-index: 1;
}
.hero-title {
    margin-bottom: var(--spacing-lg);
    color: var(--hero-title-color);
    /* Ensure gradient animation is applied */
    background: var(--ocean-gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-size: 300% auto;
    animation: gradient-flow 10s var(--ease-in-out-sine) infinite;
}

.hero-subtitle {
    font-size: 1.45rem; /* Slightly larger subtitle */
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
    max-width: 58ch;
    line-height: 1.85;
}

/* Enhanced Hero Stat Block */
.hero-stat {
    /* Remove top/bottom margin, let grid gap handle spacing */
    margin: 0;
    /* Keep other styles (padding, border, background, etc.) */
    padding: var(--spacing-lg);
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, var(--ocean-sky), var(--ocean-primary)) border-box;
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-light), transparent 20%), inset 0 2px 10px color-mix(in srgb, var(--shadow-light), transparent 70%);
    transition: all var(--transition-medium) var(--ease-out-cubic);
    will-change: transform, box-shadow, background;
    /* Add align-self if needed, but align-items:start on parent might be enough */
    /* align-self: start; */ /* Optional: explicit top alignment */
}
/* Keep existing .hero-stat hover and dark mode styles */

.hero-stat:hover {
    transform: translateY(-8px) scale(1.04); /* Lift and scale */
    box-shadow: 0 16px 45px var(--shadow-light),
                inset 0 2px 15px color-mix(in srgb, var(--shadow-light), transparent 50%);
    background: linear-gradient(color-mix(in srgb, var(--card-bg) 95%, black 5%), color-mix(in srgb, var(--card-bg) 95%, black 5%)) padding-box,
                linear-gradient(135deg, var(--ocean-highlight), var(--ocean-secondary)) border-box; /* Brighter border on hover */
}
body.dark .hero-stat {
    background: linear-gradient(var(--card-bg-dark), var(--card-bg-dark)) padding-box,
                linear-gradient(135deg, var(--ocean-primary), var(--ocean-secondary)) border-box;
     box-shadow: 0 8px 25px color-mix(in srgb, var(--shadow-dark), transparent 20%),
                inset 0 2px 10px rgba(0,0,0,0.3);
}
body.dark .hero-stat:hover {
    box-shadow: 0 18px 55px var(--shadow-dark),
                inset 0 2px 15px rgba(0,0,0,0.4);
    background: linear-gradient(color-mix(in srgb, var(--card-bg-dark) 95%, black 5%), color-mix(in srgb, var(--card-bg-dark) 95%, black 5%)) padding-box,
                linear-gradient(135deg, var(--ocean-sky), var(--ocean-highlight)) border-box;
}

.hero-stat .stat-number {
    font-size: clamp(2.8rem, 5vw, 3.4rem); /* Responsive size */
    font-weight: 700;
    display: flex; /* Align icon nicely */
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    /* Apply gradient */
    background: var(--ocean-gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-family: var(--font-heading);
    line-height: 1.15;
    background-size: 300% auto;
    animation: gradient-flow 10s ease infinite 0.5s;
}
.hero-stat .stat-number i {
    /* Ensure icon takes solid color, remove text fill transparency */
    -webkit-text-fill-color: var(--warning-red);
    color: var(--warning-red);
    background: none; /* Remove gradient from icon */
    animation: pulse-warning-icon 2.5s infinite ease-in-out;
    font-size: 0.9em;
}
@keyframes pulse-warning-icon {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.hero-stat p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}
.hero-stat strong.highlight { color: var(--ocean-primary); /* Match highlight style */ }
body.dark .hero-stat strong.highlight { color: var(--ocean-highlight); }

.hero-cta-buttons {
    /* Remove top margin, let grid gap handle spacing */
    margin-top: 0;
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    /* Align buttons within their quadrant (e.g., top-start or top-center) */
    justify-content: start; /* Align buttons to the start horizontally */
    align-items: start;   /* Align buttons to the top vertically */
    align-self: start;    /* Align the container itself to the top */
    /* If you want buttons centered horizontally in Q4: */
    /* justify-content: center; */
}
.hero-cta { margin: 0; /* Base margin reset */ }

/* Hero Image Container & Animation - Enhanced */
.hero-image { text-align: center; position: relative; }
.hero-image-container {
    position: relative;
    display: inline-block;
    perspective: 1200px; /* Increase perspective */
}
.hero-stat-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-xl); /* Larger radius */
    box-shadow: 0 20px 60px var(--shadow-light);
    transition: transform var(--transition-long) var(--ease-out-cubic), /* Smoother transition */
                box-shadow var(--transition-long) var(--ease-out-cubic),
                filter var(--transition-medium) ease;
    border: 8px solid var(--bg-secondary);
    will-change: transform, box-shadow, filter;
    display: block;
    filter: brightness(1); /* Base brightness */
}
body.dark .hero-stat-image {
    box-shadow: 0 25px 70px var(--shadow-dark);
    border-color: var(--bg-secondary-dark);
}
/* Hover effect applied via JS remains, enhance base and potential hover state here */
.hero-image-container:hover .hero-stat-image {
     box-shadow: 0 30px 80px var(--shadow-light); /* Increase hover shadow */
     filter: brightness(1.05); /* Slightly brighten */
     /* Add subtle glow on hover via JS or direct style */
}
body.dark .hero-image-container:hover .hero-stat-image {
     box-shadow: 0 35px 90px var(--shadow-dark);
     filter: brightness(1.1);
}

/* Decorative elements - Subtle movement */
.hero-deco {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.15;
    color: var(--ocean-secondary);
    pointer-events: none;
    transition: transform 0.6s var(--ease-out-cubic), opacity 0.5s ease;
    will-change: transform;
}
.hero-deco.deco-1 { top: 8%; left: -6%; animation: deco-float 8s ease-in-out infinite alternate; }
.hero-deco.deco-2 { bottom: 3%; right: -10%; font-size: 1.8rem; opacity: 0.12; animation: deco-float 10s ease-in-out infinite alternate 1s; }
body.dark .hero-deco { color: var(--ocean-highlight); opacity: 0.2; }

@keyframes deco-float {
    from { transform: translate(0, 0) rotate(-5deg); }
    to { transform: translate(10px, -15px) rotate(8deg); }
}


/* ===== Wave Dividers - Refined ===== */
.wave-divider-bottom, .wave-divider-top {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    line-height: 0;
    animation: wave-undulate 12s infinite alternate var(--ease-in-out-sine);
}
.wave-divider-bottom { bottom: -1px; height: 130px; animation-delay: 0.7s; }
.wave-divider-top { top: -1px; height: 90px; transform: scaleX(-1); }

/* Ensure correct scale variable is used for animation */
:where(.wave-divider-bottom, .wave-divider-top) { --wave-scale: 1; }
.wave-divider-top { --wave-scale: -1; }

@keyframes wave-undulate {
    from { transform: translateY(0) scaleX(var(--wave-scale)); }
    to { transform: translateY(5px) scaleX(var(--wave-scale)); } /* Slightly more movement */
}

.wave-divider-bottom svg, .wave-divider-top svg {
    display: block;
    width: calc(100% + 1.5px); /* Ensure full width coverage */
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.wave-divider-bottom path, .wave-divider-top path {
    transition: fill var(--transition-medium) var(--transition-ease);
    /* Fill set by JS in `updateWaveFills` function */
}


/* ===== Cards - Enhanced Hover ===== */
.card {
    background: var(--card-bg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-medium) var(--ease-out-cubic),
                box-shadow var(--transition-medium) var(--ease-out-cubic),
                border-color var(--transition-medium) ease, /* Keep border color transition */
                background var(--transition-medium) ease;
    overflow: hidden; /* Keep for deco */
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform, box-shadow;
    z-index: 1; /* Context for pseudo elements */
}

/* Card Hover Effects */
.card::before { /* Subtle highlight sweep on hover */
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--white) 8%, transparent) 50%, transparent 100%);
    transform: skewX(-20deg);
    opacity: 0;
    transition: left var(--transition-long) var(--ease-out-cubic) 0.1s, opacity 0.4s ease;
    z-index: 2;
    pointer-events: none; /* Allow interaction below */
}
body.dark .card::before {
     background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--ocean-foam) 5%, transparent) 50%, transparent 100%);
}

.card:hover {
    
    box-shadow: var(--card-shadow-hover);
    border-color: transparent; /* Hide solid border */
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                 var(--card-hover-border) border-box;
    border-width: 2px;
    border-style: solid;
    background-clip: padding-box, border-box; /* Important for gradient border */
}
.card:hover::before { /* Activate sweep */
     left: 100%;
     opacity: 0.7;
}
body.dark .card:hover {
     box-shadow: var(--card-shadow-hover); /* Already defined in dark mode section */
     background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                 var(--card-hover-border-dark) border-box;
}

/* Card decorative element */
.card-deco {
    position: absolute;
    bottom: 10px; /* Changed position */
    right: 15px;
    font-size: 5rem; /* Larger */
    color: var(--card-deco-color);
    opacity: 0.4;
    z-index: 0; /* Behind content */
    transform: rotate(10deg);
    transition: transform var(--transition-long) var(--ease-out-cubic), opacity var(--transition-medium) ease, color var(--transition-medium) ease;
    pointer-events: none;
    will-change: transform, opacity;
}
.card:hover .card-deco {
    transform: rotate(-8deg) scale(1.15) translate(5px, -5px); /* More movement */
    opacity: 0.6;
    color: var(--ocean-primary);
}
body.dark .card:hover .card-deco {
    color: var(--ocean-highlight);
}

/* Ensure card content stays above deco */
.card > *:not(.card-deco) {
    position: relative;
    z-index: 1;
}

/* ===== Why Data Matters Grid - Enhanced ===== */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly larger min */
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
    align-items: stretch;
}
.impact-card {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    /* Card styles inherited */
}
.impact-card-icon {
    font-size: 3.2rem;
    margin-bottom: var(--spacing-lg);
    display: inline-block;
    position: relative;
    color: var(--ocean-primary);
    transition: transform var(--transition-medium) var(--ease-out-cubic), color 0.3s ease;
}
body.dark .impact-card-icon { color: var(--ocean-highlight); }
.impact-card:hover .impact-card-icon {
    transform: scale(1.2) rotate(-8deg);
    color: var(--ocean-highlight); /* Change color on hover */
}
body.dark .impact-card:hover .impact-card-icon {
    color: var(--ocean-sky);
}

.impact-card-icon::after { /* Background glow/shape */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ocean-sky) 15%, transparent) 40%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    transition: transform 0.4s var(--ease-out-cubic), background 0.4s ease, opacity 0.4s ease;
    opacity: 0.6;
}
.impact-card:hover .impact-card-icon::after {
    transform: translate(-50%, -50%) scale(1.3);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ocean-highlight) 20%, transparent) 40%, transparent 70%);
    opacity: 0.8;
}
body.dark .impact-card-icon::after { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ocean-primary) 18%, transparent) 40%, transparent 70%); opacity: 0.5;}
body.dark .impact-card:hover .impact-card-icon::after { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ocean-highlight) 25%, transparent) 40%, transparent 70%); opacity: 0.7; }

.impact-card h4 {
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
    font-size: 1.6rem; /* Larger headings */
}
.impact-card p {
    font-size: 1rem; /* Adjusted size */
    max-width: 42ch;
    margin-left: auto; margin-right: auto;
    flex-grow: 1; /* Pushes elements below */
    color: var(--text-muted);
}


/* ===== Quote Block - Refined ===== */
.quote-block {
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    position: relative;
    background: var(--ocean-gradient-secondary);
    color: color-mix(in srgb, var(--ocean-deep) 90%, var(--black));
    border: none;
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-xl); /* Added margin */
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ocean-secondary) 30%, transparent);
    /* Inherits card base styles */
}
body.dark .quote-block {
    background: linear-gradient(110deg, var(--ocean-primary), var(--ocean-secondary));
    color: var(--text-color-dark);
     box-shadow: 0 12px 35px color-mix(in srgb, var(--ocean-primary) 40%, transparent);
}
.quote-icon {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    font-size: 3.5rem; /* Larger icon */
    opacity: 0.15; /* More subtle */
    color: inherit;
    transform: rotate(-10deg);
}
.quote-block blockquote {
    font-size: clamp(1.4rem, 2.5vw, 1.6rem); /* Responsive size */
    font-style: italic;
    font-weight: 500;
    line-height: 1.7; /* Improved readability */
    margin-bottom: var(--spacing-lg); /* More space below */
    max-width: 55ch;
    margin-left: auto; margin-right: auto;
    position: relative;
    z-index: 1;
}
.quote-block cite {
    font-style: normal;
    font-weight: 700;
    font-family: var(--font-heading);
    display: block;
    margin-top: var(--spacing-md);
    font-size: 1.05rem;
    opacity: 0.85;
    letter-spacing: 0.5px;
}


/* ===== Fact Block - More Impact ===== */
.fact-block {
    margin-top: var(--spacing-xxl); /* More space above */
    margin-bottom: var(--spacing-xxl);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    background: var(--fact-bg);
    border: 1px solid var(--fact-border);
    box-shadow: 0 15px 45px var(--shadow-light);
    border-left: 12px solid var(--fact-border); /* Thicker accent border */
    position: relative;
    overflow: hidden;
     /* Inherits base card styles but overrides */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Custom transition */
}
.fact-block:hover {
    transform: scale(1.02); /* Subtle scale on hover */
    box-shadow: 0 20px 60px color-mix(in srgb, var(--warning-red) 15%, var(--shadow-light));
}
body.dark .fact-block {
     box-shadow: 0 18px 50px var(--shadow-dark);
     border: 1px solid var(--fact-border);
     border-left: 12px solid var(--fact-border);
}
body.dark .fact-block:hover {
     box-shadow: 0 22px 65px color-mix(in srgb, var(--warning-red) 20%, var(--shadow-dark));
}
.fact-block::after { /* Warning Icon */
    content: "\f071"; /* fa-triangle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-lg);
    font-size: 6rem;
    color: var(--fact-border);
    opacity: 0.07; /* Subtler */
    z-index: 0;
    transform: rotate(-12deg);
    transition: opacity var(--transition-medium) ease, transform 0.6s ease;
}
.fact-block:hover::after {
    transform: rotate(-5deg) scale(1.1);
    opacity: 0.1;
}
body.dark .fact-block::after { opacity: 0.1; }
body.dark .fact-block:hover::after { opacity: 0.15; }

.fact-block h3 {
    font-size: clamp(1.8rem, 4vw, 2.2rem); /* Responsive */
    color: var(--warning-red);
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.fact-block h3 i { font-size: 1.3em; line-height: 1; animation: pulse-warning-icon 2.5s infinite ease-in-out; } /* Use same pulse */

.fact-block ul { position: relative; z-index: 1; }
.fact-block li {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
    font-size: 1.15rem; /* Slightly larger fact text */
    line-height: 1.8;
    color: var(--text-color); /* Not muted */
}
.fact-block li::before { top: 0.2em; font-size: 1.2em; }
.fact-block li a { /* Source link styling */
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: var(--spacing-sm);
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    word-break: break-word;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    opacity: 0.8;
}
.fact-block li a:hover { color: var(--ocean-primary); text-decoration-color: var(--ocean-primary); text-decoration-style: solid; opacity: 1; }
body.dark .fact-block li a:hover { color: var(--ocean-highlight); text-decoration-color: var(--ocean-highlight);}

.urgent-call {
    margin-top: var(--spacing-xl);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    color: var(--warning-red);
    padding-top: var(--spacing-lg);
    border-top: 2px dashed color-mix(in srgb, var(--warning-red) 40%, transparent);
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 4px color-mix(in srgb, var(--warning-red) 20%, transparent);
}

/* ===== Wildlife Impact Section & Gallery ===== */
.wildlife-impact-section {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl) 0;
    border-top: 1px dashed var(--border-color); /* Keep separator */
}
.heartbreak-quote {
    font-style: italic;
    font-size: 1.2rem; /* Slightly smaller */
    color: var(--text-muted);
    max-width: 65ch; /* Wider quote */
    margin-left: auto; margin-right: auto; /* Center align */
    margin-bottom: var(--spacing-xl);
    text-align: center; /* Ensure centered text */
}
body.dark .heartbreak-quote { color: var(--text-muted-dark); }

.wildlife-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /* Slightly wider min */
    gap: var(--spacing-xl); /* Wider gap */
    margin-top: var(--spacing-lg);
}
.wildlife-item {
    padding: var(--spacing-sm); /* Keep padding */
    text-align: center;
    /* Uses base card styling */
}
.wildlife-item img {
    width: 100%;
    height: 280px; /* Taller images */
    object-fit: cover;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-medium) ease, box-shadow var(--transition-medium) ease, filter 0.3s ease;
    filter: saturate(0.8) brightness(0.95); /* Slightly desaturate/darken initially */
}
.wildlife-item:hover img {
    transform: scale(1.06);
    box-shadow: 0 10px 25px var(--shadow-light);
    filter: saturate(1) brightness(1); /* Restore color on hover */
}
body.dark .wildlife-item:hover img {
    box-shadow: 0 12px 30px var(--shadow-dark);
    filter: saturate(1.1) brightness(1.05); /* Enhance dark mode image on hover */
}
.wildlife-item figcaption {
    font-size: 0.95rem; /* Slightly larger caption */
    color: var(--text-muted);
    font-style: italic;
    padding: 0 var(--spacing-sm);
    line-height: 1.5; /* Add line height */
}


/* ===== Ocean Visual Divider - Enhanced Animations ===== */
.ocean-visual-divider {
    text-align: center;
    margin: var(--spacing-xxl) auto 0;
    font-size: 3rem; /* Larger base size */
    color: var(--ocean-secondary);
    opacity: 0.75;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}
body.dark .ocean-visual-divider { color: var(--ocean-highlight); }
.ocean-visual-divider i {
    transition: transform 0.5s var(--ease-out-cubic), color 0.3s ease; /* Smoother transition */
}
.ocean-visual-divider i:hover {
    transform: scale(1.25) rotate(8deg) translateY(-5px); /* Enhanced hover */
    color: var(--ocean-primary);
}
body.dark .ocean-visual-divider i:hover { color: var(--ocean-sky); }

/* Refined swimming animations */
.ocean-visual-divider .fa-shrimp { animation: swim-gentle 7s var(--ease-in-out-sine) infinite alternate; font-size: 0.9em;}
.ocean-visual-divider .fa-whale { animation: swim-gentle 9s var(--ease-in-out-sine) infinite alternate 0.5s; font-size: 1.25em; }
.ocean-visual-divider .fa-fish { animation: swim-gentle 6s var(--ease-in-out-sine) infinite alternate 0.2s; font-size: 1em;}
.ocean-visual-divider .fa-water { font-size: 1.1em; opacity: 0.8; animation: water-pulse 3s ease-in-out infinite alternate; }

@keyframes swim-gentle { /* Smoother swimming */
    0% { transform: translateY(0) translateX(0) rotate(-4deg) scaleX(1); }
    50% { transform: translateY(-10px) translateX(8px) rotate(5deg) scaleX(1.02); }
    100% { transform: translateY(0px) translateX(0) rotate(-4deg) scaleX(1); }
}
@keyframes water-pulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.05); opacity: 0.9; }
}


/* ===== Detection Challenge Section - Card Wrapper ===== */
.challenge-wrapper {
    /* The wrapper itself IS the card now */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0; /* Remove grid gap, use item padding/border */
    padding: 0; /* Remove wrapper padding */
    margin-top: var(--spacing-xl);
    background-color: var(--card-bg); /* Apply card background */
    border-radius: var(--border-radius-lg); /* Apply card radius */
    border: 1px solid var(--border-color); /* Apply card border */
    box-shadow: var(--card-shadow); /* Apply card shadow */
    overflow: hidden; /* Contain items */
    position: relative;
    /* Ensure it inherits card hover potential if desired, though complex with grid */
    transition: box-shadow var(--transition-medium) ease;
}
/* Optionally add hover to wrapper, but simple item hover might be better */
/* .challenge-wrapper:hover { box-shadow: var(--card-shadow-hover); } */

.challenge-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg); /* Padding within item */
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-speed) ease; /* Add hover transition */
    background-color: transparent; /* Base transparent */
}
/* Add subtle hover background to list items */
.challenge-item:hover {
     background-color: color-mix(in srgb, var(--ocean-foam) 30%, transparent);
}
body.dark .challenge-item:hover {
      background-color: color-mix(in srgb, var(--ocean-primary) 8%, transparent);
}
/* Remove border from last item */
.challenge-wrapper > .challenge-item:last-child {
    border-bottom: none;
}
/* Specific grid borders if needed (e.g., right border on first col in 2-col layout) */
@media (min-width: 620px) { /* Example breakpoint where it might go 2-col */
     .challenge-wrapper { grid-template-columns: 1fr 1fr;}
     .challenge-item:nth-child(odd) { border-right: 1px solid var(--border-color); }
     .challenge-item:nth-last-child(-n+2) { border-bottom: none; } /* Removes bottom border on last row */
     /* Adjust last child odd border */
      .challenge-item:nth-child(odd):last-child { border-right: none;}
}


.challenge-icon {
    font-size: 2.6rem;
    color: var(--ocean-primary);
    margin-top: var(--spacing-xs);
    flex-shrink: 0;
    width: 55px; /* Ensure consistent width */
    text-align: center;
    transition: transform var(--transition-medium) var(--ease-out-cubic);
}
.challenge-item:hover .challenge-icon {
    transform: scale(1.15) rotate(5deg); /* Enhanced hover */
}
body.dark .challenge-icon { color: var(--ocean-highlight); }

.challenge-text h4 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}
.challenge-text p {
    font-size: 0.95rem; /* Slightly larger */
    margin-bottom: 0;
    line-height: 1.7; /* Improved */
    color: var(--text-muted);
}

/* ===== About Section Specifics ===== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
    align-items: stretch;
}
.about-card {
    padding: var(--spacing-xl);
    text-align: center;
    /* Inherits base card style */
}
.about-icon {
    font-size: 3.5rem; /* Larger icon */
    margin-bottom: var(--spacing-lg);
    color: var(--ocean-primary);
    display: inline-block;
    transition: transform var(--transition-medium) var(--ease-out-cubic), filter 0.3s ease;
    filter: drop-shadow(3px 3px 8px var(--shadow-light));
}
.about-card:hover .about-icon {
    transform: scale(1.15) rotate(8deg);
    filter: drop-shadow(5px 5px 15px color-mix(in srgb, var(--ocean-primary) 50%, transparent));
}
body.dark .about-icon {
    color: var(--ocean-highlight);
    filter: drop-shadow(3px 3px 10px var(--shadow-dark));
}
body.dark .about-card:hover .about-icon {
     filter: drop-shadow(5px 5px 18px color-mix(in srgb, var(--ocean-highlight) 40%, transparent));
}
.about-card h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1.65rem;
    color: var(--text-color);
}
.about-card p {
    font-size: 1.05rem;
    max-width: 48ch;
    margin-left: auto; margin-right: auto;
    flex-grow: 1;
    color: var(--text-muted);
}

/* ===== Our Approach / Solutions Steps ===== */
.solution-step { /* This is a card */
    margin-bottom: var(--spacing-xl);
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--spacing-xxl);
    align-items: center;
    padding: var(--spacing-xl); /* Apply card padding */
    /* Base card styles applied (border, radius, shadow, hover) */
}
/* Alternate layout */
.solution-step:nth-child(even) {
    grid-template-columns: 1.2fr 0.8fr;
}
.solution-step:nth-child(even) .solution-image { order: 2; }
.solution-step:nth-child(even) .solution-content { order: 1; text-align: right; /* Align text right */ } /* Text align adjustment */
/* Adjust lists in even steps */
.solution-step:nth-child(even) .solution-content ul { padding-left: 0; text-align: left; /* Reset text-align for list */}
.solution-step:nth-child(even) .solution-content ul li { padding-left: var(--spacing-xl); }
.solution-step:nth-child(even) .solution-content ul li::before { left: 0; }


.solution-image { text-align: center; }
.solution-image img {
    width: 100%;
    max-width: 480px; /* Larger max size */
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-lg);
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 10px 30px var(--shadow-light));
    transition: transform var(--transition-long) var(--ease-out-cubic), filter var(--transition-long) var(--ease-out-cubic);
    will-change: transform, filter;
    border: 1px solid var(--border-color); /* Add subtle border */
}
.solution-step:hover .solution-image img {
    transform: scale(1.08) rotate(-2deg); /* More scale and slight rotation */
    filter: drop-shadow(0 18px 50px var(--shadow-light));
}
body.dark .solution-image img { filter: drop-shadow(0 10px 35px var(--shadow-dark)); border-color: var(--border-dark); }
body.dark .solution-step:hover .solution-image img { filter: drop-shadow(0 18px 55px var(--shadow-dark)); }


.solution-content { padding: 0; }
.solution-content h3 {
    font-size: clamp(2.1rem, 5vw, 2.9rem); /* Increased size */
    color: var(--ocean-primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: flex-start; /* Default left alignment */
}
/* Justify right for even items */
.solution-step:nth-child(even) .solution-content h3 { justify-content: flex-end; }

body.dark .solution-content h3 { color: var(--ocean-highlight); }
.solution-content h3 i { font-size: 1.2em; line-height: 1;}
.solution-content > p { /* Lead paragraph in solution */
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 65ch;
    line-height: 1.8;
}


/* ===== Workflow & Team / Principles Details Cards ===== */
.our-approach-detail, .core-principles {
     margin: var(--spacing-xl) 0;
     padding: var(--spacing-xl);
     /* Inherit base card styles */
}
.our-approach-detail h4, .core-principles h4 {
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.7rem; /* Slightly larger */
    color: var(--text-color); /* Use standard text color */
}
.our-approach-detail h4 i, .core-principles h4 i {
    font-size: 1.5em;
    color: var(--ocean-primary);
    transition: transform 0.4s ease;
}
.our-approach-detail:hover h4 i, .core-principles:hover h4 i {
    transform: rotate(-10deg) scale(1.1);
}
body.dark .our-approach-detail h4 i, body.dark .core-principles h4 i { color: var(--ocean-highlight); }

.team-tech-info {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px dashed var(--border-color);
}
.team-tech-info h5 {
    margin-bottom: var(--spacing-md);
    color: var(--ocean-secondary); /* Use accent color */
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
body.dark .team-tech-info h5 { color: var(--ocean-highlight); }
.team-tech-info p {
    font-size: 1rem; /* Larger text */
    color: var(--text-muted);
    margin-bottom: var(--spacing-md); /* Increased spacing */
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md); /* Wider gap */
}
.team-tech-info p i.fab, .team-tech-info p i.fas {
     font-size: 1.4em; /* Larger icons */
     vertical-align: middle;
     width: 25px;
     text-align: center;
     color: var(--ocean-primary);
     transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; /* Added transform */
     opacity: 0.8;
}
.team-tech-info p:hover i.fab, .team-tech-info p:hover i.fas {
     color: var(--ocean-highlight);
     transform: scale(1.1);
     opacity: 1;
}
/* Keep specific tech colors */
.tech-icon-gcp { color: #4285F4 !important; }
.tech-icon-cf { color: #F38020 !important; }
.tech-icon-py { color: #FFD43B !important; } /* Python Yellow */

body.dark .team-tech-info p i { color: var(--ocean-secondary); }
body.dark .team-tech-info p:hover i { color: var(--ocean-sky); }
body.dark .tech-icon-py { color: #3776AB !important; } /* Python Blue for dark contrast */


/* ===== Contact Section - Enhanced Styling ===== */
.contact-heading { margin-top: var(--spacing-xxl); }
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    align-items: stretch;
}
.contact-info-box, .contact-form-box {
    padding: var(--spacing-xl);
    /* Inherit base card styles */
}

.contact-info-box h4 { margin-bottom: var(--spacing-lg); font-size: 1.7rem; }
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl); /* Increased spacing */
    font-size: 1rem;
}
.contact-item i {
    color: var(--ocean-primary);
    font-size: 1.8rem; /* Larger icon */
    margin-top: 0.15em;
    width: 35px; /* Increased width */
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.contact-item:hover i { transform: scale(1.15); }
body.dark .contact-item i { color: var(--ocean-highlight); }

.contact-item div span { /* Contact Item Label */
    display: block;
    font-weight: 700; /* Bolder */
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
    font-size: 1.1rem; /* Larger label */
    font-family: var(--font-heading); /* Use heading font */
}
.contact-item div p, .contact-item div a {
    color: var(--text-muted);
    margin: 0;
    font-size: 1rem; /* Slightly larger text */
    line-height: 1.7;
}
.contact-item div a {
     color: var(--ocean-primary);
     font-weight: 500;
     /* Uses base 'a' hover style */
}
body.dark .contact-item div a { color: var(--ocean-highlight); }

.follow-heading {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md); /* More space below */
    color: var(--text-muted);
    font-weight: 700; /* Bolder */
    text-transform: uppercase;
    letter-spacing: 1px; /* Wider */
    font-size: 1rem; /* Larger */
}
.social-links-contact {
    display: flex;
    gap: var(--spacing-xl); /* Wider gap */
}
.social-links-contact a { /* Uses base .social-icon styles from footer */
    color: var(--text-muted);
    font-size: 2.4rem;
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-medium) var(--transition-ease);
}
.social-links-contact a:hover, .social-links-contact a:focus-visible {
    color: var(--ocean-primary);
    transform: translateY(-6px) scale(1.2) rotate(5deg); /* Add rotation */
}
body.dark .social-links-contact a { color: var(--text-muted-dark); }
body.dark .social-links-contact a:hover, body.dark .social-links-contact a:focus-visible { color: var(--ocean-highlight); }

.contact-form-box h4 { margin-bottom: var(--spacing-lg); font-size: 1.7rem; }
.form-group { margin-bottom: var(--spacing-lg); position: relative; /* For potential icon addons */}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-muted);
}
.form-control {
    width: 100%;
    padding: 1.1rem 1.5rem; /* Increased padding */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); /* Match card radius */
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                background-color var(--transition-speed) var(--transition-ease);
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    appearance: none; /* Better base style */
    -webkit-appearance: none;
}
body.dark .form-control { background-color: var(--bg-secondary-dark); }

.form-control:focus { /* Enhanced focus */
    border-color: var(--ocean-primary);
    outline: none;
    box-shadow: 0 0 0 4px var(--glow-color); /* Use glow variable */
    background-color: var(--bg-secondary);
}
body.dark .form-control:focus {
     border-color: var(--ocean-highlight);
     box-shadow: 0 0 0 4px var(--glow-color-dark);
     background-color: var(--bg-color-dark);
}
.form-control::placeholder { color: var(--text-muted); opacity: 0.6; font-style: italic; }
textarea.form-control { resize: vertical; min-height: 160px; }

/* Form Status Message - More Prominent */
.form-status {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: 1.05rem;
    font-weight: 600; /* Bolder */
    display: none; /* Hidden by default */
    align-items: center;
    gap: var(--spacing-md);
    border: 1px solid transparent;
    transition: opacity 0.5s ease-in-out, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    text-align: left; /* Ensure text is aligned left */
}
.form-status i { font-size: 1.5em; line-height: 1; flex-shrink: 0; /* Prevent shrinking */}

.form-status.success {
    background-color: color-mix(in srgb, var(--success-green) 18%, transparent);
    color: color-mix(in srgb, var(--success-green) 95%, black);
    border-color: color-mix(in srgb, var(--success-green) 50%, transparent);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--success-green) 20%, transparent);
}
.form-status.success i { color: var(--success-green); }
body.dark .form-status.success {
    background-color: color-mix(in srgb, var(--success-green) 30%, var(--bg-secondary-dark));
    color: var(--text-color-dark);
    border-color: color-mix(in srgb, var(--success-green) 60%, transparent);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--success-green) 25%, transparent);
}

.form-status.error {
    background-color: color-mix(in srgb, var(--warning-red) 15%, transparent);
    color: var(--warning-red);
    border-color: color-mix(in srgb, var(--warning-red) 45%, transparent);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--warning-red) 20%, transparent);
}
.form-status.error i { color: var(--warning-red); }
body.dark .form-status.error {
    background-color: color-mix(in srgb, var(--warning-red) 25%, var(--bg-secondary-dark));
    border-color: color-mix(in srgb, var(--warning-red) 55%, transparent);
     box-shadow: 0 4px 15px color-mix(in srgb, var(--warning-red) 25%, transparent);
}


/* ===== Projects Section - Enhanced Card Styling ===== */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Kept size */
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
    align-items: stretch;
}
.project-card { /* Inherits base card styles */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xs);
    gap: var(--spacing-md);
}
.project-header h3 {
    margin-bottom: 0;
    color: var(--ocean-deep);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-md); /* Increased gap */
    line-height: 1.2; /* Tighten slightly */
}
body.dark .project-header h3 { color: var(--ocean-highlight); }
.project-header h3 i { font-size: 1.2em; line-height: 1; transition: transform 0.3s ease; } /* Icon next to title */
.project-card:hover .project-header h3 i { transform: rotate(-5deg); }

.project-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ocean-primary);
    margin-bottom: var(--spacing-md);
    font-style: italic; /* Add italic */
    opacity: 0.9;
}
body.dark .project-subtitle { color: var(--ocean-secondary); }

.project-status {
    font-size: 0.85rem; /* Slightly larger status */
    font-weight: 700;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background: var(--ocean-gradient-secondary);
    color: color-mix(in srgb, var(--ocean-deep) 85%, black);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover .project-status {
     transform: scale(1.05);
     box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}
.project-status i { font-size: 1em; line-height: 1; }

/* Future Concept Styling - More Distinct */
.future-concept { filter: grayscale(30%) opacity(0.8); transition: filter 0.4s ease; }
.future-concept:hover { filter: grayscale(0%) opacity(1); }
.future-concept .project-header h3 { color: var(--text-muted); }
body.dark .future-concept .project-header h3 { color: var(--text-muted-dark); }
.future-concept .project-subtitle { color: var(--text-muted); }
.future-concept .project-status {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-muted);
    box-shadow: none;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 40%, transparent);
}
body.dark .future-concept .project-status {
    background: color-mix(in srgb, var(--text-muted-dark) 20%, transparent);
    color: var(--text-muted-dark);
     border: 1px dashed color-mix(in srgb, var(--text-muted-dark) 40%, transparent);
}


.project-card > p:not(.project-subtitle) { /* Project description */
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    flex-grow: 1; /* Important */
    line-height: 1.7;
}

.project-details {
    margin-top: auto; /* Pushes to bottom */
    padding-top: var(--spacing-lg);
    border-top: 1px dashed var(--border-color);
}
.project-details h4 { /* "Key Components" etc. */
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
/* Phase Mini Styling - More polished */
.phase-mini {
    border-left: 5px solid var(--ocean-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: color-mix(in srgb, var(--ocean-foam) 30%, transparent);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    transition: background-color var(--transition-speed) ease,
                border-left-color var(--transition-speed) ease,
                transform 0.3s ease;
    position: relative;
    overflow: hidden; /* For highlight */
}
.phase-mini::after { /* Subtle highlight effect */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 0px;
    background-color: color-mix(in srgb, var(--ocean-highlight) 30%, transparent);
    transition: width 0.4s ease;
}
.project-card:hover .phase-mini:hover::after { width: 5px; } /* Active highlight on hover */


body.dark .phase-mini {
    background-color: color-mix(in srgb, var(--ocean-primary) 12%, transparent);
    border-left-color: var(--ocean-highlight);
}
body.dark .phase-mini::after { background-color: color-mix(in srgb, var(--ocean-sky) 30%, transparent); }


.project-card:hover .phase-mini:hover {
     background-color: color-mix(in srgb, var(--ocean-foam) 50%, transparent);
     border-left-color: var(--ocean-primary);
     transform: translateX(5px); /* Slight indent on hover */
}
body.dark .project-card:hover .phase-mini:hover {
    background-color: color-mix(in srgb, var(--ocean-primary) 20%, transparent);
    border-left-color: var(--ocean-sky);
}


.phase-mini h5 {
    margin-bottom: var(--spacing-xs);
    color: var(--ocean-primary);
    font-size: 1.05rem; /* Larger */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
body.dark .phase-mini h5 { color: var(--ocean-highlight); }
.phase-mini h5 i { font-size: 0.95em; opacity: 0.7; line-height: 1; }
.phase-mini p {
    font-size: 0.95rem; /* Slightly larger */
    margin-bottom: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Keep Project CTA button distinct */
.project-cta {
    margin-top: var(--spacing-lg);
    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
    align-self: flex-start; /* Keep aligned left */
}
.project-cta i.fa-external-link-alt { font-size: 0.9em; margin-left: var(--spacing-xs); } /* Adjust icon slightly */

/* Tech Icons - More visual interest */
.tech-icons {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent); /* More subtle */
    text-align: right;
    font-size: 1.5rem; /* Larger icons */
    color: var(--text-muted);
    opacity: 0.5;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    transition: opacity 0.4s ease;
}
.project-card:hover .tech-icons { opacity: 0.8; } /* Increase opacity on card hover */
.tech-icons i { margin-left: 0; transition: color 0.3s ease, transform 0.3s ease; }
.project-card .tech-icons i:hover { /* Individual icon hover */
    color: var(--ocean-primary);
    transform: scale(1.2);
    opacity: 1; /* Ensure full opacity on direct hover */
}
body.dark .project-card .tech-icons i:hover { color: var(--ocean-highlight); }

/* ===== Blog & Reports Section - Cleaner Cards ===== */
.blog-reports-section {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl);
    /* Inherit base card styling for the whole block */
}
.blog-reports-section .subsection-title {
    margin-top: 0;
    text-align: center;
    border-left: none;
    padding-left: 0;
    justify-content: center;
}
.blog-reports-section > p { /* Lead paragraph */
    text-align: center;
    max-width: 70ch;
    margin-left: auto; margin-right: auto;
    margin-bottom: var(--spacing-xl);
}

.blog-reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Larger min */
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}
.blog-report-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: color-mix(in srgb, var(--bg-secondary) 80%, var(--bg-color) 20%); /* Blend secondary/main bg */
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-speed) ease, transform var(--transition-medium) ease, box-shadow var(--transition-medium) ease;
    position: relative; /* For hover effects */
    overflow: hidden;
}
.blog-report-item::before { /* Subtle gradient highlight */
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--ocean-gradient-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s var(--ease-out-cubic);
}
.blog-report-item:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 20px var(--shadow-light);
}
.blog-report-item:hover::before { transform: scaleY(1); }

body.dark .blog-report-item {
     background-color: color-mix(in srgb, var(--bg-secondary-dark) 80%, var(--bg-color-dark) 20%);
}
body.dark .blog-report-item:hover {
    background-color: var(--bg-secondary-dark);
    box-shadow: 0 8px 25px var(--shadow-dark);
}
body.dark .blog-report-item::before { background: var(--card-hover-border-dark); }


.blog-report-item .item-icon {
    font-size: 2.2rem; /* Slightly larger icon */
    color: var(--ocean-secondary);
    margin-top: var(--spacing-xs);
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.3s ease;
}
.blog-report-item:hover .item-icon { transform: scale(1.1); }
body.dark .blog-report-item .item-icon { color: var(--ocean-highlight); }

.blog-report-item .item-content h5 {
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
    font-size: 1.15rem; /* Larger heading */
    font-weight: 700;
}
.blog-report-item .item-content p { /* Description */
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    line-height: 1.65;
}
.blog-report-item .item-content .date {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: var(--spacing-sm); /* More space above date */
}
.read-more-link { /* Inherits base 'a' styling */
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ocean-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm); /* Add space above */
}
.read-more-link i { transition: transform 0.3s ease; }
.read-more-link:hover i { transform: translateX(5px); }
body.dark .read-more-link { color: var(--ocean-highlight); }


/* ===== Collaboration Call / Join Us ===== */
.join-us {
    text-align: center;
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--ocean-gradient-deep); /* Use deeper gradient */
    color: #fff;
    border-radius: var(--border-radius-xl); /* Larger radius */
    box-shadow: 0 15px 40px rgba(3, 4, 94, 0.35); /* Slightly stronger */
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.join-us::before { /* Subtler wave texture, improved SVG */
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M0,32L48,58.7C96,85,192,139,288,149.3C384,160,480,128,576,112C672,96,768,96,864,106.7C960,117,1056,139,1152,149.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    opacity: 0.7; /* Adjusted opacity */
    z-index: -1;
    animation: wave-slow-shift 30s linear infinite alternate;
}
@keyframes wave-slow-shift {
    from { transform: translateX(-8%); }
    to { transform: translateX(8%); }
}

.join-us h3 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 2.5rem); /* Responsive */
    margin-bottom: var(--spacing-md);
    position: relative; z-index: 1;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
.join-us h3 i { margin-right: var(--spacing-md); }
.join-us p {
    color: rgba(255, 255, 255, 0.9); /* Slightly less bright */
    margin-bottom: var(--spacing-lg);
    max-width: 70ch;
    margin-left: auto; margin-right: auto;
    font-size: 1.2rem;
    line-height: 1.8;
    position: relative; z-index: 1;
}
.join-us .btn.join-us-btn {
    background-color: var(--ocean-highlight); /* Brighter button */
    color: var(--ocean-deep);
    border: 2px solid var(--ocean-highlight);
    font-size: 1.2rem;
    padding: 1rem 2.8rem; /* More padding */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    position: relative; z-index: 1;
    font-weight: 700;
}
.join-us .btn.join-us-btn:hover {
    background-color: var(--ocean-foam);
    color: var(--ocean-deep);
    border-color: var(--ocean-foam);
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* ===== Buttons - Enhanced ===== */
.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: var(--spacing-sm);
    padding: 1rem 2.2rem; /* Slightly larger padding */
    background: var(--ocean-gradient-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-weight: 700; /* Bolder */
    transition: all var(--transition-speed) var(--ease-out-cubic); /* Smoother easing */
    border: none;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-heading);
    letter-spacing: 0.7px; /* Wider spacing */
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ocean-primary) 40%, transparent);
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    z-index: 1;
    will-change: transform, box-shadow, background;
}
.btn i { line-height: 1; position: relative; z-index: 2; transition: transform 0.3s ease; }
.btn span { position: relative; z-index: 2; }

/* Enhanced Shine Effect */
.btn::before {
    content: '';
    position: absolute;
    top: -20%; /* Start higher */
    left: -120%;
    width: 70%;
    height: 140%; /* Taller shine */
    background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 80%);
    transform: skewX(-25deg);
    transition: left var(--transition-medium) var(--ease-in-out-sine); /* Smoother sine */
    z-index: 1;
    opacity: 0.8; /* More visible */
}
.btn:hover::before { left: 120%; } /* Full traverse */

.btn:hover, .btn:focus-visible {
    background: var(--ocean-gradient-dark); /* Darker, richer gradient on hover */
    transform: translateY(-6px) scale(1.04); /* More lift */
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ocean-deep) 45%, transparent);
    color: #fff;
    text-decoration: none;
    outline: none;
}
.btn:hover i { transform: rotate(-5deg); }

.btn:active {
     transform: translateY(-3px) scale(0.99); /* Subtler active state */
     box-shadow: 0 5px 15px color-mix(in srgb, var(--ocean-deep) 35%, transparent);
     filter: brightness(0.95); /* Slightly dim */
}

.btn:disabled, .btn:disabled:hover {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.5;
    filter: grayscale(50%);
}
.btn:disabled::before { display: none; }

/* Secondary Button */
.btn-secondary {
    background: transparent;
    color: var(--ocean-primary);
    border: 2px solid var(--ocean-secondary);
    box-shadow: none;
}
.btn-secondary::before { display: none; }

.btn-secondary:hover, .btn-secondary:focus-visible {
    background-color: color-mix(in srgb, var(--ocean-foam) 60%, transparent); /* Use theme color mix */
    border-color: var(--ocean-primary);
    color: var(--ocean-primary);
    transform: translateY(-5px); /* Consistent lift */
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ocean-primary) 15%, transparent);
}
body.dark .btn-secondary {
    color: var(--ocean-highlight);
    border-color: var(--ocean-secondary);
    background: transparent;
}
body.dark .btn-secondary:hover, body.dark .btn-secondary:focus-visible {
    background-color: color-mix(in srgb, var(--ocean-highlight) 15%, transparent);
    border-color: var(--ocean-highlight);
    color: var(--ocean-highlight);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--ocean-highlight) 18%, transparent);
}

/* ===== Footer ===== */
.footer {
    background-color: var(--bg-footer);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-xxl);
    text-align: center;
    position: relative;
    transition: background-color var(--transition-medium) var(--transition-ease),
                border-color var(--transition-medium) var(--transition-ease);
    overflow: hidden; /* Contain waves */
}
body.dark .footer { background-color: var(--bg-footer-dark); }

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg); /* Wider gap */
    position: relative;
    z-index: 6; /* Above top wave */
}
.footer-logo {
     font-family: var(--font-heading);
     font-size: 1.8rem; /* Slightly larger */
     font-weight: 700;
     color: var(--text-color);
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     margin-bottom: var(--spacing-xs);
     transition: transform 0.3s ease;
}
.footer-logo:hover { transform: scale(1.05); }
.footer-logo .ocean-icon { /* Use same bobbing as header */
    color: var(--ocean-primary);
    font-size: 1.3em;
    animation: gentle-bob 4.5s var(--ease-in-out-sine) infinite alternate 0.5s;
}
body.dark .footer-logo .ocean-icon { color: var(--ocean-highlight); }

.footer-tagline h5 {
    color: var(--ocean-primary);
    font-weight: 600; /* Slightly less bold */
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.6px;
    opacity: 0.9;
}
body.dark .footer-tagline h5 { color: var(--ocean-secondary); }

.footer-socials {
    display: flex;
    gap: var(--spacing-xl);
    margin: var(--spacing-md) 0;
}
.social-icon { /* Base class for social links */
    color: var(--text-muted);
    font-size: 2.2rem; /* Larger icons */
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-medium) var(--ease-out-cubic);
}
.social-icon:hover, .social-icon:focus-visible {
    color: var(--ocean-primary);
    transform: translateY(-8px) scale(1.25) rotate(10deg); /* More dynamic hover */
}
body.dark .social-icon { color: var(--text-muted-dark); }
body.dark .social-icon:hover, body.dark .social-icon:focus-visible { color: var(--ocean-highlight); }

.footer-copy p {
    color: var(--footer-text);
    font-size: 0.95rem; /* Slightly larger copy */
    margin: 0;
}
.footer-copy p.subtle-text { line-height: 1.5; } /* Keep extra notes */

/* ===== Icons Helper Classes ===== */
/* Retained for potential specific use, but colors applied more contextually now */
.icon-primary { color: var(--ocean-primary); }
.icon-secondary { color: var(--ocean-secondary); }
.icon-accent { color: var(--ocean-deep); }
.icon-highlight { color: var(--ocean-highlight); }
.icon-warning { color: var(--warning-red); }
body.dark .icon-primary { color: var(--ocean-highlight); }
body.dark .icon-secondary { color: var(--ocean-sky); }
body.dark .icon-accent { color: var(--ocean-secondary); }
body.dark .icon-highlight { color: var(--ocean-sky); }


/* ===== Animation Helpers ===== */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; } /* Slightly larger pulse */
}
.pulse { animation: pulse 2.5s var(--ease-in-out-sine) infinite; }

/* Enhanced Fade-in Animation */
.fade-in-init {
    opacity: 0;
    transform: translateY(30px) scale(0.97); /* Start slightly smaller */
    transition: opacity var(--transition-long) var(--ease-out-cubic),
                transform var(--transition-long) var(--ease-out-cubic);
    will-change: opacity, transform;
}
.fade-in-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Staggered delays - Adjusted timings */
.impact-grid .fade-in-init:nth-child(1) { transition-delay: 0.15s; }
.impact-grid .fade-in-init:nth-child(2) { transition-delay: 0.3s; }
.impact-grid .fade-in-init:nth-child(3) { transition-delay: 0.45s; }
.impact-grid .fade-in-init:nth-child(4) { transition-delay: 0.6s; }
/* Apply to more grids */
.about-grid .fade-in-init:nth-child(1) { transition-delay: 0.1s; }
.about-grid .fade-in-init:nth-child(2) { transition-delay: 0.25s; }
.about-grid .fade-in-init:nth-child(3) { transition-delay: 0.4s; }
.project-grid .fade-in-init:nth-child(odd) { transition-delay: 0.2s; }
.project-grid .fade-in-init:nth-child(even) { transition-delay: 0.4s; }

.wildlife-gallery .fade-in-init { transition-delay: calc(0.1s * var(--stagger-index, 1)); } /* JS can set --stagger-index */

.solution-step.fade-in-init { transition-delay: 0.25s; }


/* ===== Accessibility - Enhanced Focus Styles ===== */
/* Generic fallback (though more specific styles preferred) */
*:focus {
    outline: none; /* Remove default */
}
:focus-visible { /* High-contrast outline for keyboard navigation */
    outline: 3px solid var(--ocean-highlight);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 0 5px var(--glow-color); /* Use glow for focus */
}
body.dark :focus-visible {
    outline-color: var(--ocean-sky);
    box-shadow: 0 0 0 5px var(--glow-color-dark);
}

/* Remove generic outline for elements with custom focus */
.btn:focus-visible,
.nav-link:focus-visible,
.logo:focus-visible,
.theme-toggle:focus-visible,
.form-control:focus-visible,
.social-icon:focus-visible,
.read-more-link:focus-visible,
.nav-dashboard-link:focus-visible {
    outline: none;
     /* Box-shadow handled by element-specific :focus-visible styles */
}
/* Keep individual focus styles defined earlier (e.g., form-control:focus) for :focus pseudo-class */


.sr-only { /* Screen reader only class */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border-width: 0;
}

/* ===== Responsive Adjustments - Kept Existing Structure ===== */
/* Generally retain existing breakpoints and major layout changes,
   focus was on enhancing styles within those structures. */
@media (max-width: 1024px) {
    html { font-size: 16px; }
    .hero-content { gap: var(--spacing-xl); }
    .solution-step, .solution-step:nth-child(even) { gap: var(--spacing-xl); }
     /* Adjust project grid min size */
     .project-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

@media (max-width: 992px) {
    .hero { min-height: auto; padding: calc(var(--spacing-xl) + var(--navbar-height) + 1rem) 0 calc(var(--spacing-xl) + 4rem); } /* Adjust padding */
    .hero-content {
        grid-template-columns: 1fr; /* Stack everything into a single column */
        text-align: center;
        gap: var(--spacing-xl); /* Keep consistent gap */
        /* Remove specific order properties as they don't apply to 2x2 structure */
    }
    .hero-text {
        order: 2; /* Text below image */
     }
      /* Ensure elements have margin when stacked */
     .hero-image {
        order: 1; /* Image first on mobile if desired */
        margin-bottom: var(--spacing-xl);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
     }
    .hero-subtitle { max-width: 60ch; margin-left: auto; margin-right: auto; }
    .hero-stat {
        order: 3; /* Stat below text */
         margin: var(--spacing-xl) auto 0 auto; /* Add top margin when stacked, center horizontally */
         text-align: center;
         max-width: 500px;
        /* Reset hover border gradients */
        background: var(--card-bg);
         border: 1px solid var(--border-color);
         border-top: 5px solid var(--ocean-primary); /* Keep accent top border */
    }
    .hero-stat:hover {
          background: var(--card-bg);
         border-color: var(--border-color);
         transform: translateY(-5px);
         box-shadow: var(--card-shadow-base);
    }
body.dark .hero-stat { border-top-color: var(--ocean-highlight); border-color: var(--border-dark);}

    .hero-cta-buttons { order: 4; /* Buttons last */
        justify-content: center; /* Center buttons horizontally when stacked */
        margin-top: var(--spacing-xl); /* Add top margin */ }

    .solution-step,
    .solution-step:nth-child(even) {
        grid-template-columns: 1fr;
        text-align: center;
    }
     /* Reset text align for even steps on mobile */
     .solution-step:nth-child(even) .solution-content { text-align: center; }
     .solution-step:nth-child(even) .solution-content h3 { justify-content: center; }
     .solution-step:nth-child(even) .solution-content ul { text-align: center; }

    .solution-step .solution-image,
    .solution-step:nth-child(even) .solution-image {
        order: 1;
        margin-bottom: var(--spacing-lg);
        max-width: 400px;
    }
     .solution-step .solution-content,
     .solution-step:nth-child(even) .solution-content { order: 2; }
    .solution-content > p { margin-left: auto; margin-right: auto; }
    .solution-content h3 { justify-content: center; }

    .contact-wrapper { grid-template-columns: 1fr; gap: var(--spacing-xl); }
}

@media (max-width: 768px) {
    html { font-size: 15.5px; }
    :root { --navbar-height: auto; } /* Let navbar wrap */
     .navbar {
         height: auto;
         min-height: 65px;
         padding: var(--spacing-sm) 0;
         padding-left: 0;
    	padding-right: 0;
     }
     .hero-stat { max-width: 90%; }
     .hero-cta-buttons { margin-top: var(--spacing-lg); } /* Slightly reduce margin */
     /* Retain the flex-wrap logic for navbar from original code */
     .nav-content {
         height: auto;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: var(--spacing-sm) 0;
         padding-left: 0;
   	 padding-right: 0;
     }
     .container { padding: 0 var(--spacing-md); }
     .nav-content .container { 
     padding-left: 0;
     padding-right: 0;
     .navbar .nav-content.container {
    /* Remove horizontal padding added by .container */
    padding-left: 0;
    padding-right: 0;

    /* Remove auto margins used for centering by .container */
    margin-left: 0;
    margin-right: 0;

    /* Remove the max-width constraint from .container */
    max-width: none;

    /* Ensure it still behaves correctly flex-wise */
    width: 100%; /* Takes full width of parent */
}

     }

     .logo { width: auto; flex-grow: 0; margin-right: auto; }
     .theme-toggle { order: 2; margin-left: var(--spacing-md); }
     .nav-links {
        order: 3; width: 100%;
        justify-content: center;
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
        gap: var(--spacing-md);
        flex-wrap: wrap;
    }
     .nav-dashboard-link {
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: 0.95rem;
     }


    h1 { font-size: clamp(2.5rem, 8vw, 3.8rem); }
    h2 { font-size: clamp(2rem, 6vw, 2.9rem); }

    .section { padding: var(--spacing-xl) 0; }
    .fact-block { padding: var(--spacing-lg); }
    .fact-block li { font-size: 1.1rem; } /* Slightly adjust fact text size */
    .impact-grid, .challenge-wrapper, .wildlife-gallery, .project-grid, .blog-reports-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
     /* Remove grid borders for challenge items on mobile */
      .challenge-item:nth-child(odd) { border-right: none; }
      .challenge-wrapper > .challenge-item:not(:last-child) { border-bottom: 1px solid var(--border-color); } /* Restore bottom borders */
      .challenge-wrapper > .challenge-item:last-child { border-bottom: none;} /* Ensure last one has no bottom border */


    .wildlife-item img { height: 220px; } /* Adjust gallery image height */

    .footer { margin-top: var(--spacing-xl); }

    .wave-divider-bottom { height: 90px; } /* Adjust wave height */
    .wave-divider-top { height: 70px; }
}

@media (max-width: 576px) {
    html { font-size: 15px; }
    .container { 
    padding: 0 var(--spacing-md); 
    .navbar .nav-content.container {
    /* Remove horizontal padding added by .container */
    padding-left: 0;
    padding-right: 0;

    /* Remove auto margins used for centering by .container */
    margin-left: 0;
    margin-right: 0;

    /* Remove the max-width constraint from .container */
    max-width: none;

    /* Ensure it still behaves correctly flex-wise */
    width: 100%; /* Takes full width of parent */
}

    }
    

     /* Account for wrapped navbar height potentially being larger */
    html { scroll-padding-top: 140px; /* Adjust static padding if dynamic update is tricky */}

    .hero { padding-top: calc(var(--spacing-lg) + 100px); /* Approx height, fine-tune */ }
    .hero-subtitle { font-size: 1.25rem; }
    .hero-stat .stat-number { font-size: 2.8rem; }

    .btn { padding: 0.9rem 1.8rem; font-size: 1rem; }
    .hero-cta-buttons {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        gap: var(--spacing-md);
     }
    .hero-cta {
         width: 90%; /* Make buttons take more width */
         max-width: 350px;
    }

    .footer-socials { gap: var(--spacing-lg); }
    .social-icon { font-size: 2rem; }

    .fact-block h3 { font-size: 1.8rem; }
    .fact-block::after { font-size: 4rem; opacity: 0.06; }

    .quote-block blockquote { font-size: 1.25rem; }

    .nav-links .nav-link { padding: var(--spacing-sm) var(--spacing-xs); }
    .project-grid { grid-template-columns: 1fr; } /* Force single column early */
}