/* ============================================
   MOMENTUM POOL SERVICES - Redesigned CSS
   Fixed Layout, Better Contrast, Cleaner Design
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ========== CSS VARIABLES ========== */
:root {
    /* Light Theme Colors */
    --primary: #0891b2;
    --primary-dark: #0e7490;
    --primary-light: #22d3ee;
    --secondary: #064e3b;

    --bg-main: #f0fdfa;
    --bg-section: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.85);

    --text-dark: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-white: #ffffff;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

    --radius: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    --transition: 0.3s ease;

    /* Water effect colors */
    --water-1: #06b6d4;
    --water-2: #0891b2;
    --water-3: #22d3ee;

    /* Layout tokens used by areas-v2 */
    --border: rgba(0, 0, 0, 0.08);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --text-main: var(--text-dark);
    --text-secondary: var(--text-muted);
}

/* Dark Disco Theme */
[data-theme="dark"] {
    --bg-main: #030712;
    --bg-section: #0f172a;
    --bg-card: rgba(15, 23, 42, 0.9);
    --bg-glass: rgba(15, 23, 42, 0.85);

    --text-dark: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;

    --primary: #06b6d4;
    --primary-light: #22d3ee;

    --neon-cyan: #00ffff;
    --neon-pink: #ff00ff;
    --neon-purple: #a855f7;

    --shadow-glow: 0 0 30px rgba(0, 255, 255, 0.3);

    /* Dark overrides for areas-v2 tokens */
    --border: rgba(255, 255, 255, 0.08);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --text-main: var(--text-dark);
    --text-secondary: var(--text-muted);
}

/* ========== RESET ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg-main);
    color: var(--text-body);
    line-height: 1.6;
    touch-action: pan-y pinch-zoom;
}

/* ========== TYPOGRAPHY ========== */
h1,
h2,
h3,
h4 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    color: var(--text-body);
}

/* ========== LAYOUT ========== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 80px 0;
}

/* ========== HEADER ========== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: var(--transition);
}

.header.scrolled {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    text-decoration: none;
}

.logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}

.nav-link {
    color: var(--text-body);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 100%;
}

/* Theme Toggle */
.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.theme-toggle:hover svg {
    color: white;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--text-body);
    transition: var(--transition);
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

[data-theme="dark"] .theme-toggle svg {
    color: var(--neon-cyan);
}

/* Mobile Menu Toggle - Hidden on Desktop */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    background: none;
    border: none;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
}

/* ========== HERO SECTION - UNIQUE UNDERWATER EFFECT ========== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Deep underwater gradient - lighter at top (surface), darker at depth */
    background: linear-gradient(180deg,
            #67e8f9 0%,
            /* Bright surface */
            #22d3ee 10%,
            #06b6d4 25%,
            #0891b2 45%,
            #0e7490 65%,
            #155e75 85%,
            #164e63 100%);
    /* Deep pool floor */
}

/* Underwater Background - Subtle depth variation */
.water-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* Depth fog at bottom */
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(21, 94, 117, 0.6) 0%, transparent 70%),
        /* Light spots from surface */
        radial-gradient(ellipse 80% 40% at 30% 20%, rgba(103, 232, 249, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 60% 35% at 70% 15%, rgba(34, 211, 238, 0.25) 0%, transparent 50%);
}

/* ===== UNDERWATER LIGHT RAYS ===== */
.light-rays {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.light-rays::before,
.light-rays::after {
    content: '';
    position: absolute;
    top: -20%;
    width: 150%;
    height: 140%;
}

.light-rays::before {
    left: -30%;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
        linear-gradient(175deg, rgba(255, 255, 255, 0.15) 0%, transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, transparent 45%);
    animation: lightRaysSway 12s ease-in-out infinite;
}

.light-rays::after {
    right: -30%;
    background:
        linear-gradient(200deg, rgba(255, 255, 255, 0.15) 0%, transparent 35%),
        linear-gradient(185deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
    animation: lightRaysSway 15s ease-in-out infinite reverse;
}

@keyframes lightRaysSway {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.8;
    }

    25% {
        transform: translateX(2%) rotate(1deg);
        opacity: 1;
    }

    50% {
        transform: translateX(-1%) rotate(-0.5deg);
        opacity: 0.9;
    }

    75% {
        transform: translateX(1%) rotate(0.5deg);
        opacity: 1;
    }
}

/* ===== RISING BUBBLES ===== */
.bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.bubble {
    position: absolute;
    bottom: -20%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.4) 40%,
            rgba(255, 255, 255, 0.1) 60%,
            transparent 100%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: bubbleRise linear infinite;
}

/* Individual bubble positioning and timing */
.bubble:nth-child(1) {
    left: 5%;
    width: 20px;
    height: 20px;
    animation-duration: 8s;
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    left: 15%;
    width: 12px;
    height: 12px;
    animation-duration: 10s;
    animation-delay: 1s;
}

.bubble:nth-child(3) {
    left: 25%;
    width: 16px;
    height: 16px;
    animation-duration: 9s;
    animation-delay: 0.5s;
}

.bubble:nth-child(4) {
    left: 35%;
    width: 24px;
    height: 24px;
    animation-duration: 11s;
    animation-delay: 2s;
}

.bubble:nth-child(5) {
    left: 45%;
    width: 10px;
    height: 10px;
    animation-duration: 7s;
    animation-delay: 1.5s;
}

.bubble:nth-child(6) {
    left: 55%;
    width: 18px;
    height: 18px;
    animation-duration: 9s;
    animation-delay: 3s;
}

.bubble:nth-child(7) {
    left: 65%;
    width: 14px;
    height: 14px;
    animation-duration: 12s;
    animation-delay: 0.8s;
}

.bubble:nth-child(8) {
    left: 75%;
    width: 22px;
    height: 22px;
    animation-duration: 8s;
    animation-delay: 2.5s;
}

.bubble:nth-child(9) {
    left: 85%;
    width: 8px;
    height: 8px;
    animation-duration: 10s;
    animation-delay: 4s;
}

.bubble:nth-child(10) {
    left: 92%;
    width: 16px;
    height: 16px;
    animation-duration: 11s;
    animation-delay: 1.2s;
}

.bubble:nth-child(11) {
    left: 10%;
    width: 6px;
    height: 6px;
    animation-duration: 6s;
    animation-delay: 3.5s;
}

.bubble:nth-child(12) {
    left: 50%;
    width: 28px;
    height: 28px;
    animation-duration: 13s;
    animation-delay: 0.3s;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    50% {
        transform: translateY(-50vh) translateX(15px) scale(1.1);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-120vh) translateX(-10px) scale(0.8);
        opacity: 0;
    }
}

/* ===== SURFACE SHIMMER ===== */
.shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    z-index: 3;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.15) 40%,
            transparent 100%);
    pointer-events: none;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 25%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 100%);
    animation: shimmerGlide 6s ease-in-out infinite;
}

@keyframes shimmerGlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

/* ===== TEXT READABILITY OVERLAY ===== */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 50%,
            rgba(0, 60, 100, 0.25) 0%,
            rgba(0, 40, 80, 0.4) 100%);
    z-index: 5;
    pointer-events: none;
}

/* ===== ANIMATED SVG WAVES AT BOTTOM ===== */
.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 6;
    overflow: hidden;
}

.waves {
    width: 100%;
    height: 100%;
    min-height: 100px;
}

.wave-parallax>use {
    animation: waveMove 20s cubic-bezier(.55, .5, .45, .5) infinite;
}

.wave-parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
    fill: rgba(255, 255, 255, 0.7);
}

.wave-parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
    fill: rgba(255, 255, 255, 0.5);
}

.wave-parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
    fill: rgba(255, 255, 255, 0.3);
}

.wave-parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 18s;
    fill: #fff;
}

@keyframes waveMove {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* ===== INTERACTIVE CLICK-TO-RIPPLE ===== */
.ripple-container {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
}

.ripple-ring {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: rippleExpand 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        border-width: 4px;
    }

    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
        border-width: 1px;
    }
}

/* ===== LIQUID DRIPPING TEXT ===== */
.drip-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    overflow: visible;
}

.water-drop {
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    background: radial-gradient(ellipse at 30% 20%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(125, 211, 252, 0.8) 40%,
            rgba(14, 165, 233, 0.6) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: translateX(-50%);
    animation: dropFall 1.2s cubic-bezier(0.55, 0, 1, 0.45) forwards;
    box-shadow:
        inset -2px -2px 4px rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(14, 165, 233, 0.3);
}

@keyframes dropFall {
    0% {
        top: -5px;
        opacity: 0;
        transform: translateX(-50%) scale(0.3);
    }

    15% {
        top: 0;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    30% {
        top: 5px;
        transform: translateX(-50%) scale(1.1, 0.9);
    }

    100% {
        top: 120px;
        opacity: 0.7;
        transform: translateX(-50%) scale(0.8, 1.3);
    }
}

.water-splash {
    position: absolute;
    top: 120px;
    width: 30px;
    height: 10px;
    transform: translateX(-50%);
    animation: splashBurst 0.4s ease-out forwards;
}

.water-splash::before,
.water-splash::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(125, 211, 252, 0.8);
    border-radius: 50%;
    animation: splashParticle 0.4s ease-out forwards;
}

.water-splash::before {
    left: 5px;
    animation-delay: 0s;
}

.water-splash::after {
    right: 5px;
    animation-delay: 0.05s;
}

@keyframes splashBurst {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes splashParticle {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-20px) scale(0.3);
        opacity: 0;
    }
}


.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 24px;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 24px;
}

.hero h1 {
    color: white;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero h1 .highlight {
    display: block;
    background: linear-gradient(135deg, #22d3ee, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: white;
    color: var(--primary-dark);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Section Buttons */
.btn-cta {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(8, 145, 178, 0.4);
}

[data-theme="dark"] .btn-cta {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

[data-theme="dark"] .btn-cta:hover {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 60px rgba(255, 0, 255, 0.3);
}

/* ========== SECTION HEADERS ========== */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header .subtitle {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: 12px;
}

[data-theme="dark"] .section-header .subtitle {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan);
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    max-width: 560px;
    margin: 0 auto;
}

/* ========== SERVICES SECTION ========== */
.services {
    background: var(--bg-section);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Premium Glassmorphic Water Cards */
.service-card {
    position: relative;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 253, 250, 0.95) 50%,
            rgba(224, 242, 254, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 28px 36px;
    text-align: center;
    border: 1px solid rgba(8, 145, 178, 0.15);
    box-shadow:
        0 4px 24px rgba(6, 182, 212, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1;
}

/* Animated water wave overlay */
.service-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg,
            rgba(6, 182, 212, 0.05) 0%,
            rgba(8, 145, 178, 0.15) 100%);
    transition: height 0.5s ease;
    z-index: -1;
}

/* Animated border glow */
.service-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg,
            rgba(6, 182, 212, 0.3),
            rgba(14, 165, 233, 0.1),
            rgba(34, 211, 238, 0.3));
    z-index: -2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(6, 182, 212, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(6, 182, 212, 0.3);
}

.service-card:hover::before {
    height: 100%;
}

.service-card:hover::after {
    opacity: 1;
}

/* Dark theme service cards */
[data-theme="dark"] .service-card {
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.9) 0%,
            rgba(30, 41, 59, 0.85) 50%,
            rgba(15, 23, 42, 0.9) 100%);
    border-color: rgba(0, 255, 255, 0.1);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .service-card::before {
    background: linear-gradient(180deg,
            rgba(0, 255, 255, 0.02) 0%,
            rgba(0, 255, 255, 0.08) 50%,
            rgba(255, 0, 255, 0.05) 100%);
}

[data-theme="dark"] .service-card::after {
    background: linear-gradient(135deg,
            rgba(0, 255, 255, 0.4),
            rgba(168, 85, 247, 0.2),
            rgba(255, 0, 255, 0.4));
}

[data-theme="dark"] .service-card:hover {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.15),
        0 0 60px rgba(255, 0, 255, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Service icon with ripple glow */
.service-icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #0891b2, #0284c7, #06b6d4);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 20px rgba(8, 145, 178, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

/* Ripple effect on hover */
.service-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: linear-gradient(135deg,
            rgba(6, 182, 212, 0.4),
            rgba(14, 165, 233, 0.2));
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease;
    z-index: -1;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow:
        0 12px 28px rgba(8, 145, 178, 0.4);
}

.service-card:hover .service-icon::before {
    opacity: 1;
    transform: scale(1.2);
    animation: iconRipple 1.5s ease-out infinite;
}

@keyframes iconRipple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

[data-theme="dark"] .service-icon {
    background: linear-gradient(135deg, #06b6d4, #a855f7, #ec4899);
    box-shadow:
        0 0 25px rgba(0, 255, 255, 0.4),
        0 0 50px rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .service-icon::before {
    background: linear-gradient(135deg,
            rgba(0, 255, 255, 0.5),
            rgba(255, 0, 255, 0.3));
}

[data-theme="dark"] .service-card:hover .service-icon::before {
    animation: neonIconRipple 1.5s ease-out infinite;
}

@keyframes neonIconRipple {
    0% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
        box-shadow: 0 0 30px rgba(0, 255, 255, 0);
    }
}

.service-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.service-card h4 {
    margin-bottom: 14px;
    font-size: 1.125rem;
    font-weight: 600;
}

.service-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}


/* ========== SERVICE AREAS V2 ========== */
.areas-v2 {
    position: relative;
    padding: 100px 0;
    overflow: clip;
    background: linear-gradient(180deg,
        var(--bg-section) 0%,
        var(--bg-main) 100%);
}

.areas-v2-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    animation: areaBgPulse 8s ease-in-out infinite;
}

@keyframes areaBgPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* HQ Hero Card */
.area-hero-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto 48px;
    border-radius: 20px;
    overflow: hidden;
}

.area-hero-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(8, 145, 178, 0.15) 0%,
        rgba(6, 182, 212, 0.08) 50%,
        rgba(34, 211, 238, 0.12) 100%);
    border-radius: 20px;
    z-index: 0;
}

.area-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.area-hero-content:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg),
        0 0 40px rgba(8, 145, 178, 0.12);
}

.area-hero-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: #fff;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.3);
}

.area-hero-text {
    flex: 1;
}

.area-hero-label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 6px;
}

.area-hero-text h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.area-hero-text p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.area-hero-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(34, 211, 238, 0.08));
    border: 1px solid rgba(8, 145, 178, 0.2);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.05em;
}

/* City Grid */
.area-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 800px;
    margin: 0 auto 40px;
}

.area-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
    cursor: default;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.area-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(8, 145, 178, 0.3);
}

.area-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.4);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.area-card:hover .area-dot {
    box-shadow: 0 0 14px rgba(8, 145, 178, 0.6);
    transform: scale(1.3);
}

.area-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

/* Extra coverage note */
.area-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: var(--shadow-xs);
}

.area-extra svg {
    flex-shrink: 0;
    color: var(--primary);
}

.area-extra span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .area-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .area-hero-content {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }

    .area-hero-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 0.7rem;
    }

    .area-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .area-card {
        padding: 12px 16px;
    }

    .area-extra {
        flex-direction: column;
        border-radius: 16px;
        text-align: center;
        padding: 16px 20px;
    }
}

/* Pool Map Container - Photorealistic Backyard Oasis */
.pool-map {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Photorealistic Pool Image Container */
.pool-oasis-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.oasis-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Animated Water Overlay Effect */
.pool-oasis-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 40% at 50% 45%,
            rgba(6, 182, 212, 0.08) 0%,
            transparent 70%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
    mix-blend-mode: overlay;
    animation: waterShimmer 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Caustic light effect layer */
.pool-oasis-image .water-caustics {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(from 0deg at 30% 40%,
            transparent 0deg,
            rgba(255, 255, 255, 0.03) 2deg,
            transparent 4deg),
        repeating-conic-gradient(from 45deg at 70% 55%,
            transparent 0deg,
            rgba(6, 182, 212, 0.04) 3deg,
            transparent 6deg);
    animation: causticMove 12s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes waterShimmer {

    0%,
    100% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.12;
    }

    25% {
        transform: translateX(2%) translateY(1%) scale(1.01);
        opacity: 0.18;
    }

    50% {
        transform: translateX(-1%) translateY(-1%) scale(1.02);
        opacity: 0.15;
    }

    75% {
        transform: translateX(-2%) translateY(2%) scale(1.01);
        opacity: 0.20;
    }
}

@keyframes causticMove {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

[data-theme="dark"] .pool-map {
    box-shadow:
        0 0 80px rgba(0, 255, 255, 0.15),
        0 25px 60px rgba(0, 0, 0, 0.5);
}

/* Dark theme overlay for photorealistic image */
[data-theme="dark"] .pool-oasis-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 30, 0.5) 0%,
            rgba(0, 30, 60, 0.4) 50%,
            rgba(0, 0, 30, 0.5) 100%);
    pointer-events: none;
}

/* Pool SVG Layer - no longer used */
.pool-svg {
    display: none;
}

/* Pool Shadow Effect */
.pool-shadow {
    opacity: 0.6;
}

/* Pool Coping (Edge) styling */
.pool-coping-path {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

/* Underwater Pool Lights */
.pool-lights circle {
    mix-blend-mode: screen;
}

/* Pool Ladder */
.pool-ladder rect {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Waterline Trim */
.pool-waterline {
    animation: waterlinePulse 3s ease-in-out infinite;
}

@keyframes waterlinePulse {

    0%,
    100% {
        opacity: 0.4;
        stroke-dashoffset: 0;
    }

    50% {
        opacity: 0.7;
        stroke-dashoffset: 12;
    }
}

/* ===== DARK THEME POOL ===== */
[data-theme="dark"] .pool-water-path {
    fill: url(#oasisWaterDark);
}

/* Dark theme lawn and patio */
[data-theme="dark"] .lawn-bg {
    fill: #1a2e1a;
}

[data-theme="dark"] .patio-area {
    fill: #1e293b;
}

[data-theme="dark"] .pool-shadow {
    fill: rgba(0, 255, 255, 0.08);
}

[data-theme="dark"] .pool-coping-path {
    fill: #334155;
    stroke: #475569;
}

[data-theme="dark"] .pool-svg {
    filter: drop-shadow(0 0 80px rgba(0, 255, 255, 0.15)) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .pool-caustics-svg ellipse {
    fill: rgba(0, 255, 255, 0.08);
}

[data-theme="dark"] .pool-lights circle {
    mix-blend-mode: normal;
}

/* Dark theme underwater lights - NEON GLOW */
[data-theme="dark"] .pool-lights circle:nth-child(1) {
    fill: rgba(0, 255, 255, 0.4);
    filter: url(#glow) drop-shadow(0 0 30px rgba(0, 255, 255, 0.6));
}

[data-theme="dark"] .pool-lights circle:nth-child(2) {
    fill: rgba(168, 85, 247, 0.4);
    filter: url(#glow) drop-shadow(0 0 30px rgba(168, 85, 247, 0.6));
}

[data-theme="dark"] .pool-lights circle:nth-child(3) {
    fill: rgba(236, 72, 153, 0.4);
    filter: url(#glow) drop-shadow(0 0 30px rgba(236, 72, 153, 0.6));
}

[data-theme="dark"] .pool-steps path {
    fill: rgba(0, 255, 255, 0.1);
    stroke: rgba(0, 255, 255, 0.25);
}

[data-theme="dark"] .pool-ladder rect {
    fill: #64748b;
    stroke: #475569;
}

[data-theme="dark"] .pool-waterline {
    stroke: rgba(0, 255, 255, 0.3);
}

[data-theme="dark"] .pool-depth {
    fill: url(#poolDepth);
    opacity: 0.5;
}

/* Dark theme landscaping */
[data-theme="dark"] .rocks-left ellipse,
[data-theme="dark"] .rocks-right ellipse {
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.1));
}

[data-theme="dark"] .palm-tree path[stroke] {
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.3));
}

[data-theme="dark"] .umbrella ellipse {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.2));
}

[data-theme="dark"] .lounge-chair rect {
    fill: #374151;
    stroke: #4b5563;
}

[data-theme="dark"] .waterfall path {
    stroke: rgba(0, 255, 255, 0.6);
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.4));
}

[data-theme="dark"] .waterfall circle {
    fill: rgba(0, 255, 255, 0.2);
}

/* ========== 3D POOL TOY FLOATS - WOW FACTOR ========== */

/* Pool Floats - Inflatable Ring Design */
.pool-float {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transform-style: preserve-3d;
    perspective: 500px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    animation: floatBob3D 4s ease-in-out infinite;
    /* Will be overridden by JS for magnetic effect */
    --float-x: 0px;
    --float-y: 0px;
}

/* 3D Inflatable Ring - Outer */
.pool-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg,
            var(--float-color-light, #ff6b6b) 0%,
            var(--float-color, #ff4757) 50%,
            var(--float-color-dark, #c0392b) 100%);
    box-shadow:
        inset 0 -8px 20px rgba(0, 0, 0, 0.3),
        inset 0 8px 20px rgba(255, 255, 255, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 5px 15px var(--float-shadow, rgba(255, 71, 87, 0.3));
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

/* 3D Inner Hole */
.pool-float::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg,
            rgba(6, 182, 212, 0.6) 0%,
            rgba(8, 145, 178, 0.8) 100%);
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.4),
        inset 0 -2px 6px rgba(255, 255, 255, 0.2);
    z-index: 1;
}

/* City name on top */
.float-city {
    position: relative;
    z-index: 10;
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transform: translateZ(20px);
}

/* Color Variations */
.pool-float:nth-child(1) {
    --float-color: #ff4757;
    --float-color-light: #ff6b6b;
    --float-color-dark: #c0392b;
    --float-shadow: rgba(255, 71, 87, 0.4);
}

.pool-float:nth-child(2) {
    --float-color: #2ed573;
    --float-color-light: #7bed9f;
    --float-color-dark: #1e8449;
    --float-shadow: rgba(46, 213, 115, 0.4);
}

.pool-float:nth-child(3) {
    --float-color: #ffa502;
    --float-color-light: #ffbe76;
    --float-color-dark: #cc8400;
    --float-shadow: rgba(255, 165, 2, 0.4);
}

.pool-float:nth-child(4) {
    --float-color: #a55eea;
    --float-color-light: #d5a6ff;
    --float-color-dark: #7c3aab;
    --float-shadow: rgba(165, 94, 234, 0.4);
}

.pool-float:nth-child(5) {
    --float-color: #ff6b81;
    --float-color-light: #ff8a9b;
    --float-color-dark: #ee5a6e;
    --float-shadow: rgba(255, 107, 129, 0.4);
}

.pool-float:nth-child(6) {
    --float-color: #1e90ff;
    --float-color-light: #74b9ff;
    --float-color-dark: #0066cc;
    --float-shadow: rgba(30, 144, 255, 0.4);
}

.pool-float:nth-child(7) {
    --float-color: #00d2d3;
    --float-color-light: #48dbfb;
    --float-color-dark: #00a3a3;
    --float-shadow: rgba(0, 210, 211, 0.4);
}

.pool-float:nth-child(8) {
    --float-color: #ff9ff3;
    --float-color-light: #ffccf9;
    --float-color-dark: #e056c7;
    --float-shadow: rgba(255, 159, 243, 0.4);
}

.pool-float:nth-child(9) {
    --float-color: #54a0ff;
    --float-color-light: #a3c9ff;
    --float-color-dark: #2e86de;
    --float-shadow: rgba(84, 160, 255, 0.4);
}

.pool-float:nth-child(10) {
    --float-color: #5f27cd;
    --float-color-light: #a78bfa;
    --float-color-dark: #4c1d95;
    --float-shadow: rgba(95, 39, 205, 0.4);
}

.pool-float:nth-child(11) {
    --float-color: #ff6348;
    --float-color-light: #ff8c69;
    --float-color-dark: #d84315;
    --float-shadow: rgba(255, 99, 72, 0.4);
}

.pool-float:nth-child(12) {
    --float-color: #26de81;
    --float-color-light: #7cf5bd;
    --float-color-dark: #1b9e5c;
    --float-shadow: rgba(38, 222, 129, 0.4);
}

.pool-float:nth-child(13) {
    --float-color: #fd79a8;
    --float-color-light: #ffadc6;
    --float-color-dark: #e84393;
    --float-shadow: rgba(253, 121, 168, 0.4);
}

.pool-float:nth-child(14) {
    --float-color: #fdcb6e;
    --float-color-light: #ffeaa7;
    --float-color-dark: #e0a800;
    --float-shadow: rgba(253, 203, 110, 0.4);
}

.pool-float:nth-child(15) {
    --float-color: #6c5ce7;
    --float-color-light: #a29bfe;
    --float-color-dark: #4834d4;
    --float-shadow: rgba(108, 92, 231, 0.4);
}

.pool-float:nth-child(16) {
    --float-color: #00cec9;
    --float-color-light: #81ecec;
    --float-color-dark: #00a8a5;
    --float-shadow: rgba(0, 206, 201, 0.4);
}

/* Staggered animations */
.pool-float:nth-child(odd) {
    animation-delay: -0.7s;
}

.pool-float:nth-child(3n) {
    animation-delay: -1.4s;
}

.pool-float:nth-child(4n) {
    animation-delay: -2.1s;
}

.pool-float:nth-child(5n) {
    animation-delay: -2.8s;
}

@keyframes floatBob3D {

    0%,
    100% {
        transform: translateY(0) rotateX(10deg) rotateZ(0deg) translate(var(--float-x), var(--float-y));
    }

    25% {
        transform: translateY(-6px) rotateX(5deg) rotateZ(3deg) translate(var(--float-x), var(--float-y));
    }

    50% {
        transform: translateY(-10px) rotateX(-5deg) rotateZ(-2deg) translate(var(--float-x), var(--float-y));
    }

    75% {
        transform: translateY(-4px) rotateX(8deg) rotateZ(1deg) translate(var(--float-x), var(--float-y));
    }
}

/* Hover Effect - Pop up with ripple */
.pool-float:hover {
    animation-play-state: paused;
    transform: translateY(-20px) scale(1.15) rotateX(0deg) rotateZ(0deg) !important;
    z-index: 20;
}

.pool-float:hover::before {
    box-shadow:
        inset 0 -8px 20px rgba(0, 0, 0, 0.2),
        inset 0 8px 20px rgba(255, 255, 255, 0.5),
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 10px 30px var(--float-shadow);
}

/* Ripple effect on hover */
.pool-float .ripple-effect {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2px solid rgba(6, 182, 212, 0.5);
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.pool-float:hover .ripple-effect {
    animation: rippleExpand 1s ease-out infinite;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Fort Worth - Main HQ Float - SPECIAL */
.pool-float.fort-worth {
    width: 90px;
    height: 90px;
    z-index: 10;
    animation: floatBobHQ3D 4s ease-in-out infinite;
}

.pool-float.fort-worth::before {
    background: linear-gradient(145deg,
            #34d9eb 0%,
            #0891b2 50%,
            #0e7490 100%);
    box-shadow:
        inset 0 -10px 25px rgba(0, 0, 0, 0.35),
        inset 0 10px 25px rgba(255, 255, 255, 0.5),
        0 15px 40px rgba(0, 0, 0, 0.3),
        0 8px 25px rgba(8, 145, 178, 0.5);
    border: 4px solid rgba(255, 255, 255, 0.5);
}

.pool-float.fort-worth::after {
    width: 36px;
    height: 36px;
}

.pool-float.fort-worth .float-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 10;
    transform: translateZ(25px);
}

.pool-float.fort-worth .float-city {
    font-size: 0.7rem;
    font-weight: 800;
}

.pool-float.fort-worth .float-tag {
    font-size: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Pulsing glow ring for HQ */
.float-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 3px solid rgba(6, 182, 212, 0.6);
    animation: ringPulseGlow 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ringPulseGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
        border-color: rgba(6, 182, 212, 0.6);
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
        border-color: rgba(34, 211, 238, 0.8);
    }
}

@keyframes floatBobHQ3D {

    0%,
    100% {
        transform: translateY(0) rotateX(5deg) rotateZ(0deg);
    }

    25% {
        transform: translateY(-12px) rotateX(-3deg) rotateZ(5deg);
    }

    50% {
        transform: translateY(-18px) rotateX(-8deg) rotateZ(-3deg);
    }

    75% {
        transform: translateY(-8px) rotateX(3deg) rotateZ(2deg);
    }
}

.pool-float.fort-worth:hover {
    transform: translateY(-30px) scale(1.2) rotateX(0deg) rotateZ(0deg) !important;
}

.pool-float.fort-worth:hover::before {
    box-shadow:
        inset 0 -10px 25px rgba(0, 0, 0, 0.25),
        inset 0 10px 25px rgba(255, 255, 255, 0.6),
        0 25px 60px rgba(0, 0, 0, 0.4),
        0 15px 40px rgba(8, 145, 178, 0.6);
}

/* ========== SPLASH EFFECT ========== */
.splash-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 50;
}

.splash-droplet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(6, 182, 212, 0.6) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
    animation: splashDrop 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes splashDrop {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.3);
    }
}

/* Central splash ring */
.splash-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
    pointer-events: none;
    animation: splashRingExpand 0.6s ease-out forwards;
}

@keyframes splashRingExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* ========== CONTINUOUS BUBBLES ========== */
.bubble-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.pool-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(6, 182, 212, 0.3) 50%,
            rgba(6, 182, 212, 0.1) 100%);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.5),
        0 0 5px rgba(6, 182, 212, 0.2);
    pointer-events: none;
    animation: bubbleRise var(--duration, 4s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes bubbleRise {
    0% {
        transform: translateY(100%) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    50% {
        transform: translateY(50%) translateX(var(--wobble, 10px)) scale(1);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-10%) translateX(calc(var(--wobble, 10px) * -1)) scale(0.8);
        opacity: 0;
    }
}

/* ========== ENHANCED WATER EFFECTS ========== */
/* Multi-layered caustics */
.pool-oasis-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Light beam layer */
        repeating-linear-gradient(115deg,
            transparent 0px,
            transparent 40px,
            rgba(255, 255, 255, 0.03) 40px,
            rgba(255, 255, 255, 0.03) 80px),
        /* Primary caustics */
        radial-gradient(ellipse 50% 30% at 30% 40%,
            rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 40% 25% at 70% 55%,
            rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 35% 20% at 50% 70%,
            rgba(34, 211, 238, 0.1) 0%, transparent 50%);
    mix-blend-mode: overlay;
    animation: waterCaustics 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* Secondary shimmer layer */
.pool-oasis-image .water-caustics {
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 25% 35%,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.04) 8px,
            rgba(255, 255, 255, 0.04) 10px),
        repeating-radial-gradient(circle at 75% 65%,
            transparent 0px,
            transparent 12px,
            rgba(6, 182, 212, 0.05) 12px,
            rgba(6, 182, 212, 0.05) 14px);
    animation: causticsShift 12s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* Wave ripple overlay */
.pool-oasis-image .wave-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.02) 3px,
            rgba(255, 255, 255, 0.02) 6px);
    animation: waveScroll 3s linear infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
}

@keyframes waterCaustics {

    0%,
    100% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translateX(2%) translateY(1%) scale(1.02);
        opacity: 1;
    }

    50% {
        transform: translateX(-1%) translateY(-2%) scale(1.01);
        opacity: 0.9;
    }

    75% {
        transform: translateX(-2%) translateY(1%) scale(1.03);
        opacity: 1;
    }
}

@keyframes causticsShift {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes waveScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(6px);
    }
}

/* ========== DARK THEME - NEON POOL PARTY ========== */
[data-theme="dark"] .pool-float::before {
    box-shadow:
        inset 0 -8px 20px rgba(0, 0, 0, 0.5),
        inset 0 8px 20px rgba(255, 255, 255, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 25px var(--float-shadow),
        0 0 50px var(--float-shadow);
    border: 3px solid rgba(255, 255, 255, 0.2);
    animation: neonPulse 2s ease-in-out infinite;
}

[data-theme="dark"] .pool-float::after {
    background: linear-gradient(180deg,
            rgba(0, 0, 30, 0.8) 0%,
            rgba(0, 30, 60, 0.9) 100%);
}

@keyframes neonPulse {

    0%,
    100% {
        filter: brightness(1) saturate(1.2);
    }

    50% {
        filter: brightness(1.3) saturate(1.5);
    }
}

[data-theme="dark"] .pool-float:hover::before {
    box-shadow:
        inset 0 -8px 20px rgba(0, 0, 0, 0.4),
        inset 0 8px 20px rgba(255, 255, 255, 0.3),
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 40px var(--float-shadow),
        0 0 80px var(--float-shadow);
}

[data-theme="dark"] .float-city {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px var(--float-shadow);
}

/* Dark theme HQ */
[data-theme="dark"] .pool-float.fort-worth::before {
    background: linear-gradient(145deg,
            #22d3ee 0%,
            #06b6d4 30%,
            #a855f7 70%,
            #ec4899 100%);
    box-shadow:
        inset 0 -10px 25px rgba(0, 0, 0, 0.4),
        inset 0 10px 25px rgba(255, 255, 255, 0.3),
        0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 255, 0.5),
        0 0 80px rgba(168, 85, 247, 0.3),
        0 0 120px rgba(236, 72, 153, 0.2);
    animation: neonRGB 3s linear infinite;
}

@keyframes neonRGB {

    0%,
    100% {
        filter: hue-rotate(0deg) brightness(1.2);
    }

    33% {
        filter: hue-rotate(60deg) brightness(1.3);
    }

    66% {
        filter: hue-rotate(-60deg) brightness(1.2);
    }
}

[data-theme="dark"] .float-ring {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* Dark theme ripple */
[data-theme="dark"] .pool-float .ripple-effect {
    border-color: rgba(0, 255, 255, 0.6);
}

[data-theme="dark"] .pool-float:hover .ripple-effect {
    animation: rippleExpandNeon 1s ease-out infinite;
}

@keyframes rippleExpandNeon {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    100% {
        transform: scale(2);
        opacity: 0;
        box-shadow: 0 0 30px rgba(0, 255, 255, 0);
    }
}

/* Dark theme bubbles - bioluminescent */
[data-theme="dark"] .pool-bubble {
    background: radial-gradient(circle at 30% 30%,
            rgba(0, 255, 255, 0.8) 0%,
            rgba(168, 85, 247, 0.4) 50%,
            rgba(168, 85, 247, 0.1) 100%);
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.5),
        0 0 20px rgba(168, 85, 247, 0.3);
}

/* Dark theme splash */
[data-theme="dark"] .splash-droplet {
    background: radial-gradient(circle,
            rgba(0, 255, 255, 0.9) 0%,
            rgba(168, 85, 247, 0.6) 100%);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

[data-theme="dark"] .splash-ring {
    border-color: rgba(0, 255, 255, 0.8);
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* Dark mode pool map glow */
[data-theme="dark"] .pool-map {
    box-shadow:
        0 0 100px rgba(0, 255, 255, 0.2),
        0 0 200px rgba(168, 85, 247, 0.1),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Dark caustics - more dramatic */
[data-theme="dark"] .pool-oasis-image::before {
    background:
        repeating-linear-gradient(115deg,
            transparent 0px,
            transparent 40px,
            rgba(0, 255, 255, 0.05) 40px,
            rgba(0, 255, 255, 0.05) 80px),
        radial-gradient(ellipse 50% 30% at 30% 40%,
            rgba(0, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 40% 25% at 70% 55%,
            rgba(168, 85, 247, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 35% 20% at 50% 70%,
            rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    mix-blend-mode: screen;
}

[data-theme="dark"] .pool-oasis-image .water-caustics {
    background:
        repeating-radial-gradient(circle at 25% 35%,
            transparent 0px,
            transparent 8px,
            rgba(0, 255, 255, 0.06) 8px,
            rgba(0, 255, 255, 0.06) 10px),
        repeating-radial-gradient(circle at 75% 65%,
            transparent 0px,
            transparent 12px,
            rgba(168, 85, 247, 0.05) 12px,
            rgba(168, 85, 247, 0.05) 14px);
}

/* Additional areas text */
.areas-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-top: 32px;
    text-align: center;
}

.wave-icon {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .pool-map {
        height: 400px;
        border-radius: 24px;
    }

    .pool-float {
        padding: 6px 10px;
    }

    .float-city {
        font-size: 0.7rem;
    }

    .pool-float.fort-worth {
        padding: 12px 16px;
    }

    .pool-float.fort-worth .float-city {
        font-size: 0.9rem;
    }
}




/* ========== TESTIMONIALS - PREMIUM REDESIGN ========== */
.testimonials {
    background: var(--bg-section);
    padding: 80px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.testimonial-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 32px 28px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.15);
}

/* Featured center card */
.testimonial-card.featured {
    background: linear-gradient(135deg,
            rgba(8, 145, 178, 0.05) 0%,
            rgba(6, 182, 212, 0.08) 100%);
    border-color: rgba(8, 145, 178, 0.2);
    transform: scale(1.02);
}

.testimonial-card.featured:hover {
    transform: scale(1.02) translateY(-8px);
}

[data-theme="dark"] .testimonial-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .testimonial-card:hover {
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.1),
        0 12px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .testimonial-card.featured {
    background: linear-gradient(135deg,
            rgba(0, 255, 255, 0.05) 0%,
            rgba(168, 85, 247, 0.05) 100%);
    border-color: rgba(0, 255, 255, 0.2);
}

/* Star Ratings */
.testimonial-stars {
    display: flex;
    gap: 4px;
    color: #fbbf24;
}

.testimonial-stars svg {
    filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3));
}

[data-theme="dark"] .testimonial-stars svg {
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

/* Quote Text */
.testimonial-quote {
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.7;
    flex-grow: 1;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: auto;
}

[data-theme="dark"] .testimonial-author {
    border-color: rgba(255, 255, 255, 0.1);
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

[data-theme="dark"] .author-avatar {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name {
    font-weight: 600;
    color: var(--text-heading);
    font-size: 0.9375rem;
}

.author-location {
    font-size: 0.8125rem;
    color: var(--text-muted);
}



/* ========== CONTACT SECTION ========== */
.contact {
    background: var(--bg-main);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

.contact-info h3 {
    margin-bottom: 16px;
}

.contact-info>p {
    margin-bottom: 32px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="dark"] .contact-item-icon {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.contact-item-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.contact-item strong {
    display: block;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.contact-item p {
    font-size: 0.9375rem;
    margin: 0;
}

/* Contact Form */
.contact-form {
    background: var(--bg-section);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .contact-form {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 0.9375rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-dark);
    background: var(--bg-main);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: var(--bg-section);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.15);
}

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

.contact-form .btn {
    width: 100%;
    margin-top: 8px;
}

/* ========== FOOTER ========== */
.footer {
    background: #0c4a6e;
    color: white;
    padding: 60px 0 24px;
}

[data-theme="dark"] .footer {
    background: #020617;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer .logo {
    color: white;
    margin-bottom: 16px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    max-width: 300px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    color: white;
}

.footer-column h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.footer-bottom a {
    color: var(--primary-light);
}

/* ==========================================================
   PAGE-WIDE FANCY EFFECTS - Water Theme Throughout
   ========================================================== */

/* Wave dividers removed - they created ugly horizontal stripes */

.services,
.testimonials,
.contact {
    position: relative;
}

/* ===== FLOATING WATER DROPLETS DECORATION ===== */
.services::after {
    content: '';
    position: absolute;
    top: 80px;
    left: 5%;
    width: 100%;
    height: calc(100% - 80px);
    background-image:
        radial-gradient(circle 8px at 10% 20%, rgba(8, 145, 178, 0.15) 50%, transparent 50%),
        radial-gradient(circle 12px at 90% 40%, rgba(6, 182, 212, 0.12) 50%, transparent 50%),
        radial-gradient(circle 6px at 20% 70%, rgba(34, 211, 238, 0.18) 50%, transparent 50%),
        radial-gradient(circle 10px at 85% 80%, rgba(8, 145, 178, 0.1) 50%, transparent 50%),
        radial-gradient(circle 5px at 50% 15%, rgba(6, 182, 212, 0.15) 50%, transparent 50%);
    animation: floatDroplets 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes floatDroplets {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-15px) translateX(5px);
    }

    50% {
        transform: translateY(-8px) translateX(-8px);
    }

    75% {
        transform: translateY(-20px) translateX(3px);
    }
}

/* ===== SERVICE CARD ENHANCED EFFECTS ===== */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(8, 145, 178, 0.08),
            transparent);
    transition: left 0.6s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.service-card:hover::after {
    transform: scaleX(1);
    animation: shimmerBar 2s linear infinite;
}

@keyframes shimmerBar {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ===== AREAS SECTION WAVE BACKGROUND ===== */
.areas {
    position: relative;
    background:
        linear-gradient(180deg, transparent 0%, rgba(8, 145, 178, 0.03) 50%, transparent 100%),
        var(--bg-main);
}

.areas::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 50%, rgba(8, 145, 178, 0.06) 0%, transparent 70%);
    animation: areaGlow 10s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes areaGlow {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Enhanced Pills with Water Ripple */
.area-pill {
    position: relative;
    overflow: hidden;
}

.area-pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.area-pill:hover::before {
    width: 200px;
    height: 200px;
}

/* ===== TESTIMONIALS WATER THEME ===== */
.testimonials {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(8, 145, 178, 0.08) 0%, transparent 60%),
        var(--bg-section);
}

.testimonials::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230891b2' fill-opacity='0.08' d='M0,30 C480,0 960,60 1440,30 L1440,60 L0,60 Z'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0,30 C480,0 960,60 1440,30 L1440,60 L0,60 Z;M0,30 C480,60 960,0 1440,30 L1440,60 L0,60 Z;M0,30 C480,0 960,60 1440,30 L1440,60 L0,60 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(8, 145, 178, 0.03) 0%, transparent 50%);
    animation: testimonialGlow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes testimonialGlow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10%, 10%);
    }
}

/* ===== CONTACT SECTION BUBBLE BACKGROUND ===== */
.contact {
    background:
        radial-gradient(circle 150px at 10% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 70%),
        radial-gradient(circle 200px at 90% 20%, rgba(8, 145, 178, 0.06) 0%, transparent 70%),
        radial-gradient(circle 100px at 50% 50%, rgba(34, 211, 238, 0.05) 0%, transparent 70%),
        var(--bg-main);
}

.contact::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 6px at 5% 30%, rgba(8, 145, 178, 0.2) 50%, transparent 50%),
        radial-gradient(circle 8px at 95% 70%, rgba(6, 182, 212, 0.18) 50%, transparent 50%),
        radial-gradient(circle 5px at 15% 85%, rgba(34, 211, 238, 0.22) 50%, transparent 50%),
        radial-gradient(circle 7px at 85% 15%, rgba(8, 145, 178, 0.15) 50%, transparent 50%),
        radial-gradient(circle 4px at 40% 10%, rgba(6, 182, 212, 0.2) 50%, transparent 50%),
        radial-gradient(circle 6px at 60% 95%, rgba(34, 211, 238, 0.18) 50%, transparent 50%);
    animation: contactBubbles 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes contactBubbles {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-20px);
        opacity: 1;
    }
}

/* Contact Form Glow Effect */
.contact-form {
    position: relative;
    z-index: 1;
}

.contact-form::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
            rgba(8, 145, 178, 0.3),
            rgba(6, 182, 212, 0.1),
            rgba(34, 211, 238, 0.3),
            rgba(8, 145, 178, 0.1));
    background-size: 300% 300%;
    border-radius: calc(var(--radius-lg) + 2px);
    z-index: -1;
    animation: formGlow 6s ease infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-form:hover::before {
    opacity: 1;
}

@keyframes formGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ===== FOOTER WAVE TOP - PROMINENT ANIMATED WAVE ===== */
.footer {
    position: relative;
    overflow: visible;
    margin-top: 0;
    border: none;
}

/* Remove any border/line between contact and footer */
.contact {
    border-bottom: none !important;
    margin-bottom: 0;
    padding-bottom: 100px;
}

.footer::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%230c4a6e' d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z;M0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,80 L0,80 Z;M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    z-index: 10;
}

/* Second wave layer for depth */
.footer::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230c4a6e' fill-opacity='0.7' d='M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z'%3E%3Canimate attributeName='d' dur='8s' repeatCount='indefinite' values='M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z;M0,30 C360,0 720,60 1080,30 L1440,30 L1440,60 L0,60 Z;M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    z-index: 9;
}

[data-theme="dark"] .footer::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cdefs%3E%3ClinearGradient id='footerWave' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23020617'/%3E%3Cstop offset='50%25' stop-color='%230f172a'/%3E%3Cstop offset='100%25' stop-color='%23020617'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23footerWave)' d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z;M0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,80 L0,80 Z;M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
}

[data-theme="dark"] .footer::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23020617' fill-opacity='0.7' d='M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z'%3E%3Canimate attributeName='d' dur='8s' repeatCount='indefinite' values='M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z;M0,30 C360,0 720,60 1080,30 L1440,30 L1440,60 L0,60 Z;M0,30 C360,60 720,0 1080,30 L1440,30 L1440,60 L0,60 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
}


/* ========== DARK THEME - DISCO POOL PARTY ========== */

/* Dark Pool Base - Deep Nighttime Water */
[data-theme="dark"] .hero {
    background: linear-gradient(180deg,
            #020617 0%,
            #0a0f1f 15%,
            #0c1225 30%,
            #0f172a 50%,
            #1a1f3c 75%,
            #1e1b4b 100%);
}

/* Neon Underwater Lights */
[data-theme="dark"] .water-bg {
    background:
        radial-gradient(ellipse 100% 80% at 20% 100%, rgba(0, 255, 255, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 80% 100%, rgba(255, 0, 255, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 120%, rgba(168, 85, 247, 0.35) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 30% 50%, rgba(0, 255, 255, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 70% 60%, rgba(255, 0, 255, 0.2) 0%, transparent 40%);
    animation: discoLights 8s ease-in-out infinite;
}

@keyframes discoLights {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    33% {
        filter: hue-rotate(40deg);
    }

    66% {
        filter: hue-rotate(-40deg);
    }
}

/* Neon Light Rays */
[data-theme="dark"] .light-rays::before {
    background:
        linear-gradient(160deg, rgba(0, 255, 255, 0.25) 0%, transparent 40%),
        linear-gradient(175deg, rgba(255, 0, 255, 0.2) 0%, transparent 35%),
        linear-gradient(145deg, rgba(168, 85, 247, 0.15) 0%, transparent 45%);
}

[data-theme="dark"] .light-rays::after {
    background:
        linear-gradient(200deg, rgba(255, 0, 255, 0.2) 0%, transparent 35%),
        linear-gradient(185deg, rgba(0, 255, 255, 0.18) 0%, transparent 40%);
}

/* Glowing Neon Bubbles */
[data-theme="dark"] .bubble {
    background: radial-gradient(circle at 30% 30%,
            rgba(0, 255, 255, 0.9) 0%,
            rgba(255, 0, 255, 0.4) 40%,
            rgba(168, 85, 247, 0.2) 60%,
            transparent 100%);
    box-shadow:
        inset 0 0 10px rgba(0, 255, 255, 0.6),
        0 0 15px rgba(0, 255, 255, 0.4),
        0 0 30px rgba(255, 0, 255, 0.2);
}

/* Neon Surface Shimmer */
[data-theme="dark"] .shimmer {
    background: linear-gradient(180deg,
            rgba(0, 255, 255, 0.2) 0%,
            rgba(255, 0, 255, 0.1) 40%,
            transparent 100%);
}

[data-theme="dark"] .shimmer::before {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 255, 255, 0.4) 25%,
            rgba(255, 0, 255, 0.5) 50%,
            rgba(0, 255, 255, 0.4) 75%,
            transparent 100%);
}

/* Neon Waves */
[data-theme="dark"] .wave-parallax>use:nth-child(1) {
    fill: rgba(0, 255, 255, 0.6);
}

[data-theme="dark"] .wave-parallax>use:nth-child(2) {
    fill: rgba(255, 0, 255, 0.4);
}

[data-theme="dark"] .wave-parallax>use:nth-child(3) {
    fill: rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .wave-parallax>use:nth-child(4) {
    fill: #0f172a;
}

/* Neon Click Ripples */
[data-theme="dark"] .ripple-ring {
    border-color: rgba(0, 255, 255, 0.9);
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.5),
        0 0 40px rgba(255, 0, 255, 0.3);
}

/* Neon Water Drops */
[data-theme="dark"] .water-drop {
    background: radial-gradient(ellipse at 30% 20%,
            rgba(0, 255, 255, 0.95) 0%,
            rgba(168, 85, 247, 0.7) 40%,
            rgba(255, 0, 255, 0.5) 100%);
    box-shadow:
        inset -2px -2px 4px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(0, 255, 255, 0.6),
        0 0 30px rgba(255, 0, 255, 0.3);
}

[data-theme="dark"] .water-splash::before,
[data-theme="dark"] .water-splash::after {
    background: rgba(0, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

/* Disco Shimmer Dance */

@keyframes discoLightDance {

    0%,
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
        opacity: 1;
    }

    25% {
        transform: translate(3%, 2%) rotate(3deg) scale(1.05);
        opacity: 0.8;
    }

    50% {
        transform: translate(-2%, 4%) rotate(-2deg) scale(0.95);
        opacity: 1;
    }

    75% {
        transform: translate(4%, -2%) rotate(2deg) scale(1.02);
        opacity: 0.9;
    }
}

/* Disco Sun Rays - Laser Beams */
[data-theme="dark"] .hero::before {
    background:
        conic-gradient(from 180deg at 50% 0%,
            transparent 0deg,
            rgba(0, 255, 255, 0.2) 5deg,
            transparent 10deg,
            transparent 20deg,
            rgba(255, 0, 255, 0.15) 25deg,
            transparent 30deg,
            transparent 50deg,
            rgba(168, 85, 247, 0.18) 55deg,
            transparent 60deg,
            transparent 80deg,
            rgba(0, 255, 255, 0.12) 85deg,
            transparent 90deg,
            transparent 110deg,
            rgba(255, 0, 255, 0.15) 115deg,
            transparent 120deg,
            transparent 140deg,
            rgba(245, 158, 11, 0.1) 145deg,
            transparent 150deg,
            transparent 170deg,
            rgba(0, 255, 255, 0.18) 175deg,
            transparent 180deg);
    animation: discoRays 30s linear infinite;
    opacity: 0.9;
}

@keyframes discoRays {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Disco Particles - Glowing Bubbles */
[data-theme="dark"] .hero::after {
    background-image:
        radial-gradient(3px 3px at 20% 30%, rgba(0, 255, 255, 1), transparent),
        radial-gradient(4px 4px at 40% 70%, rgba(255, 0, 255, 0.9), transparent),
        radial-gradient(3px 3px at 60% 20%, rgba(168, 85, 247, 1), transparent),
        radial-gradient(5px 5px at 80% 50%, rgba(0, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 10% 80%, rgba(255, 0, 255, 0.9), transparent),
        radial-gradient(4px 4px at 90% 85%, rgba(245, 158, 11, 0.7), transparent),
        radial-gradient(3px 3px at 35% 45%, rgba(0, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 75% 35%, rgba(255, 0, 255, 0.8), transparent),
        radial-gradient(4px 4px at 55% 90%, rgba(168, 85, 247, 0.8), transparent),
        radial-gradient(3px 3px at 15% 55%, rgba(0, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 85% 15%, rgba(255, 0, 255, 0.8), transparent),
        radial-gradient(3px 3px at 45% 25%, rgba(168, 85, 247, 0.9), transparent);
    animation: discoParticles 15s linear infinite;
}

@keyframes discoParticles {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.9;
    }

    25% {
        transform: translateY(-20px) translateX(15px);
        opacity: 1;
    }

    50% {
        transform: translateY(-8px) translateX(-8px);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-25px) translateX(8px);
        opacity: 1;
    }

    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.9;
    }
}

/* Disco Surface - Rippling Neon */
[data-theme="dark"] .water-bg::before {
    background: linear-gradient(180deg,
            rgba(0, 255, 255, 0.25) 0%,
            rgba(255, 0, 255, 0.15) 30%,
            rgba(168, 85, 247, 0.1) 60%,
            transparent 100%);
    animation: discoSurface 5s ease-in-out infinite;
}

@keyframes discoSurface {

    0%,
    100% {
        transform: translateY(0) scaleY(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(15px) scaleY(1.2);
        opacity: 1;
    }
}

/* Dark Overlay - Less Opacity to Show Disco Lights */
[data-theme="dark"] .hero-overlay {
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.4) 100%);
}

/* Hero Text Neon Glow */
[data-theme="dark"] .hero h1 {
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(0, 255, 255, 0.3),
        0 0 60px rgba(255, 0, 255, 0.2);
}

[data-theme="dark"] .hero h1 .highlight {
    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 50%, #a855f7 100%);
    background-size: 200% 200%;
    animation: neonGradient 4s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)) drop-shadow(0 0 40px rgba(255, 0, 255, 0.3));
}

@keyframes neonGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Hero Badge Neon */
[data-theme="dark"] .hero-badge {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.05);
}

/* Hero Buttons Neon */
[data-theme="dark"] .hero .btn-primary {
    background: linear-gradient(135deg, #00ffff, #00d4ff);
    color: #020617;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2);
}

[data-theme="dark"] .hero .btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3);
    transform: translateY(-3px);
}

[data-theme="dark"] .hero .btn-secondary {
    border-color: rgba(255, 0, 255, 0.5);
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

[data-theme="dark"] .hero .btn-secondary:hover {
    background: rgba(255, 0, 255, 0.15);
    border-color: #ff00ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .areas-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-card.featured {
        transform: none;
    }

    .testimonial-card.featured:hover {
        transform: translateY(-8px);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Service Areas Mobile */
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .center-badge {
        padding: 24px 32px;
    }

    .center-badge span {
        font-size: 1.25rem;
    }

    .center-ripple {
        width: 150px;
        height: 150px;
    }

    .areas-more {
        flex-direction: column;
        text-align: center;
    }

    /* Pool Map Mobile - Tablet */
    .pool-map {
        aspect-ratio: 4 / 5;
        max-width: 100%;
    }

    .pool-float {
        width: 50px;
        height: 50px;
    }

    .pool-float::after {
        width: 20px;
        height: 20px;
    }

    .float-city {
        font-size: 0.5rem;
    }

    .pool-float.fort-worth {
        width: 65px;
        height: 65px;
    }

    .pool-float.fort-worth::after {
        width: 26px;
        height: 26px;
    }

    .pool-float.fort-worth .float-city {
        font-size: 0.55rem;
    }

    .pool-float.fort-worth .float-tag {
        font-size: 0.4rem;
        padding: 1px 5px;
    }

    .float-ring {
        inset: -8px;
        border-width: 2px;
    }

    /* Testimonials Mobile */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card {
        padding: 24px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-brand p {
        max-width: 100%;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ========== SMALL MOBILE (480px) ========== */
@media (max-width: 480px) {
    .pool-map {
        aspect-ratio: 3 / 4;
        border-radius: 12px;
    }

    .pool-float {
        width: 38px;
        height: 38px;
        animation-duration: 5s;
    }

    .pool-float::before {
        border-width: 2px;
    }

    .pool-float::after {
        width: 14px;
        height: 14px;
    }

    .float-city {
        font-size: 0.4rem;
        letter-spacing: 0;
    }

    .pool-float.fort-worth {
        width: 52px;
        height: 52px;
    }

    .pool-float.fort-worth::after {
        width: 20px;
        height: 20px;
    }

    .pool-float.fort-worth .float-city {
        font-size: 0.45rem;
    }

    .pool-float.fort-worth .float-tag {
        font-size: 0.35rem;
        padding: 1px 4px;
    }

    .float-ring {
        inset: -5px;
        border-width: 2px;
    }

    .pool-float .ripple-effect {
        inset: -10px;
    }

    /* Hide bubbles on very small screens for performance */
    .bubble-container {
        display: none;
    }
}

/* ========== REALISTIC WATER RIPPLES ========== */
.water-ripple {
    position: absolute;
    pointer-events: none;
    z-index: 30;
}

.water-ripple-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: radial-gradient(ellipse at center,
            rgba(6, 182, 212, 0.15) 0%,
            rgba(6, 182, 212, 0.05) 40%,
            transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: realisticRipple var(--ripple-duration, 1.5s) ease-out forwards;
    animation-delay: var(--ripple-delay, 0s);
    filter: blur(0.5px);
}

.water-ripple-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.water-ripple-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(6, 182, 212, 0.4);
}

@keyframes realisticRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        border-width: 3px;
    }

    50% {
        border-width: 2px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-width: 1px;
    }
}

/* Dark mode ripples */
[data-theme="dark"] .water-ripple-ring {
    border-color: rgba(0, 255, 255, 0.7);
    background: radial-gradient(ellipse at center,
            rgba(0, 255, 255, 0.2) 0%,
            rgba(0, 255, 255, 0.05) 40%,
            transparent 70%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

[data-theme="dark"] .water-ripple-ring::before {
    border-color: rgba(0, 255, 255, 0.4);
}

[data-theme="dark"] .water-ripple-ring::after {
    border-color: rgba(0, 255, 255, 0.5);
}

/* ========== 3D MEGA SPLASH EFFECTS ========== */
.mega-splash-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.mega-splash-3d {
    position: absolute;
    pointer-events: none;
}

/* Central splash column */
.splash-column {
    position: absolute;
    width: 60px;
    height: 0;
    background: linear-gradient(to top,
            rgba(6, 182, 212, 0.8) 0%,
            rgba(255, 255, 255, 0.9) 30%,
            rgba(255, 255, 255, 0.6) 60%,
            transparent 100%);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    transform: translateX(-50%);
    animation: splashColumnRise 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    filter: blur(1px);
}

@keyframes splashColumnRise {
    0% {
        height: 0;
        opacity: 1;
    }

    40% {
        height: 120px;
        opacity: 1;
    }

    100% {
        height: 80px;
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
}

/* 3D Water droplets with arc trajectory */
.splash-droplet-3d {
    position: absolute;
    width: var(--size, 10px);
    height: var(--size, 10px);
    background: radial-gradient(ellipse at 30% 30%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(6, 182, 212, 0.7) 50%,
            rgba(6, 182, 212, 0.4) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(6, 182, 212, 0.4);
    animation: dropletArc var(--duration, 1s) cubic-bezier(0.33, 0, 0.67, 1) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes dropletArc {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }

    30% {
        transform: translate(calc(var(--dx) * 0.5), calc(var(--peak) * -1)) scale(1.2) rotate(90deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(270deg);
        opacity: 0;
    }
}

/* Secondary splash ring */
.splash-ring-3d {
    position: absolute;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.8);
    background: radial-gradient(ellipse at center,
            rgba(6, 182, 212, 0.3) 0%,
            transparent 60%);
    transform: translate(-50%, -50%) scale(0) rotateX(70deg);
    animation: ring3DExpand 0.8s ease-out forwards;
    transform-style: preserve-3d;
}

@keyframes ring3DExpand {
    0% {
        transform: translate(-50%, -50%) scale(0) rotateX(70deg);
        opacity: 1;
        border-width: 6px;
    }

    100% {
        transform: translate(-50%, -50%) scale(4) rotateX(70deg);
        opacity: 0;
        border-width: 1px;
    }
}

/* Mist particles */
.splash-mist {
    position: absolute;
    width: var(--mist-size, 20px);
    height: var(--mist-size, 20px);
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    animation: mistFloat var(--mist-duration, 1.5s) ease-out forwards;
}

@keyframes mistFloat {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(var(--mist-dx), var(--mist-dy)) scale(2);
        opacity: 0;
    }
}

/* Dark mode 3D splashes */
[data-theme="dark"] .splash-column {
    background: linear-gradient(to top,
            rgba(0, 255, 255, 0.8) 0%,
            rgba(0, 255, 255, 0.5) 30%,
            rgba(255, 255, 255, 0.4) 60%,
            transparent 100%);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

[data-theme="dark"] .splash-droplet-3d {
    background: radial-gradient(ellipse at 30% 30%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(0, 255, 255, 0.8) 50%,
            rgba(0, 255, 255, 0.5) 100%);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(0, 255, 255, 0.6);
}

[data-theme="dark"] .splash-ring-3d {
    border-color: rgba(0, 255, 255, 0.8);
    background: radial-gradient(ellipse at center,
            rgba(0, 255, 255, 0.4) 0%,
            transparent 60%);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

[data-theme="dark"] .splash-mist {
    background: radial-gradient(circle,
            rgba(0, 255, 255, 0.5) 0%,
            rgba(0, 255, 255, 0.2) 50%,
            transparent 70%);
}

/* ========== ANIMATIONS ========== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Menu */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-section);
    z-index: 1001;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform var(--transition);
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
}

.mobile-menu-close svg {
    width: 24px;
    height: 24px;
    color: var(--text-dark);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-links a {
    display: block;
    padding: 12px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Theme transition — scoped to avoid jank on video/canvas/scroll elements */
*:not(video):not(canvas):not(.scroll-panel):not(.scroll-hero-video):not(.scroll-hero-canvas):not(.scroll-hero-overlay) {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* ========== SCROLL HERO ========== */
.scroll-hero {
    position: relative;
    height: 600vh;
    background: var(--bg-section);
    padding: 0;
}

.scroll-hero-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/hero-poster.jpg') center/cover no-repeat;
    background-color: #0e7490;
}

.scroll-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.scroll-hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
    will-change: transform;
}

.scroll-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.05) 25%,
            rgba(0, 0, 0, 0.05) 75%,
            rgba(0, 0, 0, 0.4) 100%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* ===== Scroll Panels ===== */
.scroll-panel {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.scroll-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-panel-inner {
    text-align: center;
    max-width: 850px;
    padding: 0 32px;
    padding-bottom: 180px;
}

.scroll-panel h1,
.scroll-panel h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    margin-bottom: 20px;
    text-shadow:
        0 4px 40px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.02em;
}

.scroll-panel h1 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.scroll-panel h2 {
    font-size: clamp(2.5rem, 6.5vw, 4.5rem);
}

.text-glow {
    background: linear-gradient(135deg, #67e8f9, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5));
}

.scroll-badge {
    display: inline-block;
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}

.scroll-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Hero Buttons in scroll */
.scroll-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.btn-secondary-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-secondary-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ===== Scroll Down Hint ===== */
.scroll-down-hint {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.scroll-down-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===== Persistent CTA Buttons ===== */
.scroll-hero-buttons-persistent {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    display: flex;
    justify-content: center;
}

.scroll-wheel {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    margin-top: 8px;
    animation: scrollWheelBounce 2s ease-in-out infinite;
}

@keyframes scrollWheelBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.2;
    }
}

.scroll-down-hint span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ===== Mobile: canvas frames for scroll scrub ===== */
@media (max-width: 768px) {
    .scroll-hero {
        height: 500vh;
    }

    .scroll-hero-video {
        display: none !important;
    }

    .scroll-hero-canvas {
        display: block;
    }

    .scroll-panel-inner {
        padding: 100px 24px 80px;
    }

    .scroll-panel h1 {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .scroll-panel h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .scroll-desc {
        font-size: 1rem;
    }

    .scroll-hero-buttons-persistent {
        flex-direction: column;
        align-items: center;
        bottom: 80px;
    }

    .scroll-down-hint {
        bottom: 60px;
    }
}

@media (max-width: 480px) {
    .scroll-panel h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .scroll-panel h2 {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }

    .scroll-hero-buttons-persistent {
        bottom: 70px;
        gap: 10px;
    }

    .scroll-hero-buttons-persistent .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .scroll-down-hint {
        bottom: 50px;
    }
}