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

:root {
    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --secondary: #06b6d4;
    --accent: #22d3ee;
    --ocean-deep: #0c4a6e;
    --ocean-mid: #0369a1;
    --ocean-light: #0284c7;
    --bioluminescent: #22d3ee;
    --coral: #fb7185;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-dark: #1f2937;
    
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    
    /* Text shadow variables for ocean theme */
    --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
    --text-shadow-heavy: 0 3px 6px rgba(0, 0, 0, 0.5);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--ocean-deep) 0%, #083344 50%, var(--ocean-mid) 100%);
    min-height: 100vh;
}

/* Navigation */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 1000;
    padding: 1.5rem 0;
}

.nav-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link:hover,
.nav-link.active {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link.cta {
    background: rgba(251, 113, 133, 0.8);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link.cta:hover {
    background: rgba(251, 113, 133, 0.9);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }
    
    .nav-link.cta {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Corner Logo */
.logo-corner {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    text-shadow: var(--text-shadow-medium);
}

.logo-corner .dolphin-emoji {
    font-size: 1.5rem;
}

.logo-corner .logo-text {
    font-weight: 800;
}

/* Main Continuous Ocean Section */
.continuous-ocean {
    background: 
        /* Deep ocean gradient - lighter at top (surface), darker at bottom (depths) */
        linear-gradient(to bottom, 
            #4fb3d9 0%,          /* Surface - bright blue */
            #2e86c1 15%,         /* Shallow water */
            var(--ocean-light) 30%, 
            var(--ocean-mid) 50%, 
            var(--ocean-deep) 70%,
            #0a1a2e 85%,         /* Deep water */
            #051220 100%         /* Abyssal depths */
        );
    color: white;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

/* Sunlight rays from the surface */
.continuous-ocean::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Sunlight rays */
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 20%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.1) 0%, transparent 25%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, transparent 18%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, transparent 22%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, transparent 15%),
        /* Bioluminescent spots */
        radial-gradient(circle at 15% 25%, rgba(34, 211, 238, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 25% 60%, rgba(34, 211, 238, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 75% 30%, rgba(6, 182, 212, 0.1) 0%, transparent 55%),
        radial-gradient(circle at 40% 80%, rgba(34, 211, 238, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 80% 85%, rgba(6, 182, 212, 0.06) 0%, transparent 40%);
    pointer-events: none;
    /* animation: sunlight-shimmer 8s ease-in-out infinite; */
}

/* Floating particles and bubbles */
.continuous-ocean::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1.5" fill="%2322d3ee" opacity="0.6"><animate attributeName="cy" values="30;10;30" dur="4s" repeatCount="indefinite"/></circle><circle cx="70" cy="60" r="2" fill="%2306b6d4" opacity="0.4"><animate attributeName="cy" values="60;20;60" dur="6s" repeatCount="indefinite"/></circle><circle cx="40" cy="80" r="1" fill="%2322d3ee" opacity="0.8"><animate attributeName="cy" values="80;40;80" dur="5s" repeatCount="indefinite"/></circle><circle cx="80" cy="20" r="1.5" fill="%230ea5e9" opacity="0.5"><animate attributeName="cy" values="20;5;20" dur="3.5s" repeatCount="indefinite"/></circle><circle cx="10" cy="90" r="1" fill="%2322d3ee" opacity="0.3"><animate attributeName="cy" values="90;70;90" dur="7s" repeatCount="indefinite"/></circle><circle cx="90" cy="85" r="1.8" fill="%2306b6d4" opacity="0.4"><animate attributeName="cy" values="85;65;85" dur="5.5s" repeatCount="indefinite"/></circle></svg>');
    opacity: 0.7;
    animation: float-bubbles 20s linear infinite;
    filter: blur(2px);
}

/* Sunlight shimmer animation */
@keyframes sunlight-shimmer {
    0%, 100% { 
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
    25% { 
        opacity: 0.8;
        transform: translateX(2px) rotate(0.5deg);
    }
    50% { 
        opacity: 1.2;
        transform: translateX(-1px) rotate(-0.3deg);
    }
    75% { 
        opacity: 0.9;
        transform: translateX(1px) rotate(0.2deg);
    }
}

/* Content Sections within the continuous ocean */
.content-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
    isolation: isolate; /* Ensures proper stacking context */
}

.hero-content {
    padding: 80px 0 80px;
    /* Brightest section - near surface */
}

.features-content {
    padding: 60px 0;
    /* Slight depth overlay */
    position: relative;
}

/* .features-content::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    bottom: -40px;
    background: linear-gradient(to bottom, 
        rgba(0, 26, 51, 0) 0%,
        rgba(0, 26, 51, 0.03) 30%,
        rgba(0, 26, 51, 0.05) 50%,
        rgba(0, 26, 51, 0.07) 70%,
        rgba(0, 26, 51, 0.05) 100%
    );
    pointer-events: none;
} */

/* About Preview Content */
.about-preview {
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.about-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.about-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-shadow: var(--text-shadow-light);
}

.learn-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.learn-more-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.learn-more-btn:hover .button-arrow {
    transform: translateX(3px);
}

/* Product Roadmap Content */
.roadmap-content {
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.roadmap-single {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.roadmap-stage {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.roadmap-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--coral) 50%, var(--accent) 100%);
    opacity: 0.8;
}

.roadmap-stage:hover {
    transform: translateY(-8px) scale(1.02);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stage-title {
    color: white;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: var(--text-shadow-medium);
    letter-spacing: -0.025em;
    position: relative;
}

.stage-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    border-radius: 1px;
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: none;
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.stage-badge.upcoming {
    background: linear-gradient(135deg, var(--coral) 0%, #e11d48 100%);
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.3);
}

.stage-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    text-shadow: var(--text-shadow-light);
    font-weight: 400;
}

.stage-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: grid;
    gap: 0.75rem;
}

.stage-features li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    text-shadow: var(--text-shadow-light);
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;
}

.stage-features li::before {
    content: '✓';
    color: var(--success);
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.75rem;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    min-width: 1.5rem;
    text-align: center;
}

/* Teams Content */
.teams-content {
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.section-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    margin-bottom: 4rem;
    text-shadow: var(--text-shadow-light);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.team-member {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.member-image {
    margin-bottom: 1.5rem;
}

.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.member-avatar-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.team-member:hover .member-avatar {
    transform: scale(1.1);
    border-color: var(--accent);
}

.team-member:hover .member-avatar-image {
    transform: scale(1.1);
    border-color: var(--accent);
}

.member-name {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: var(--text-shadow-light);
}

.member-role {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-light);
}

.member-bio {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    text-shadow: var(--text-shadow-light);
}

.team-member-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-member {
        padding: 1.5rem;
    }
    
    .member-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .member-avatar-image {
        width: 60px;
        height: 60px;
    }
}

.differentiation-content {
    padding: 60px 0;
    /* Medium depth overlay */
    position: relative;
}

/* .differentiation-content::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    bottom: -60px;
    background: linear-gradient(to bottom, 
        rgba(0, 26, 51, 0.03) 0%,
        rgba(0, 26, 51, 0.08) 30%,
        rgba(0, 26, 51, 0.1) 50%,
        rgba(0, 26, 51, 0.12) 70%,
        rgba(0, 26, 51, 0.08) 100%
    );
    pointer-events: none;
} */

.waitlist-content {
    padding: 60px 0 80px;
    /* Transparent background - no overlay */
    position: relative;
}

/* Disabled caustic light effects for seamless transitions */
/* .hero-content::after,
.features-content::after,
.differentiation-content::after,
.waitlist-content::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    bottom: -40px;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
        radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 25%);
    pointer-events: none;
    z-index: -1;
} */

/* Remove opacity differences to make transitions seamless */
/* .features-content::after {
    opacity: 0.9;
}

.differentiation-content::after {
    opacity: 0.6;
}

.waitlist-content::after {
    opacity: 0.3;
} */

@keyframes caustic-shimmer {
    0%, 100% { 
        opacity: 1;
        transform: translateX(0px) translateY(0px) scale(1);
    }
    25% { 
        opacity: 0.7;
        transform: translateX(10px) translateY(5px) scale(1.02);
    }
    50% { 
        opacity: 1.3;
        transform: translateX(-5px) translateY(-3px) scale(0.98);
    }
    75% { 
        opacity: 0.9;
        transform: translateX(8px) translateY(2px) scale(1.01);
    }
}

/* Hero Section - now part of continuous ocean */

/* Swimming dolphins background */
.dolphins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    /* Ensure container is completely invisible */
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    opacity: 1;
}

.dolphins::before,
.dolphins::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 60px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -16 722 352"><path d="M650 251 C628 214 632.117 185.296 607 151 C594.101 133.387 586.234 123.401 569 110 C544.583 91.0133 497 77 497 77 L414 64 C414 64 370 27 329 7 C312.322 -1.13586 264 -16 288 18 C312 52 288 84 288 84 C288 84 207.122 114.885 159 142 C121.915 162.897 108.24 188.117 68 202 C40.3245 211.548 9.00002 202 -5.99997 214 C-21 226 -50 239 -28 241 C-5.99995 243 60 251 60 251 C60 251 115 336 127 327 C139 318 134 292 134 283 C134 274 115 234 115 234 C115 234 193.77 207.611 246 207 C275.026 206.661 291.088 211.414 320 214 C348.912 216.586 388.231 214 391 220 C393.769 226 356.5 280 361 283 C365.5 286 395.237 278.979 416 272 C448.002 261.243 491 229 491 229 L628 274 C628 274 672 288 650 251 Z" fill="%2322d3ee" opacity="0.4"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    animation: swim-across 30s linear infinite;
    filter: blur(2px);
}

.dolphins::before {
    top: 20%;
    animation-delay: 0s;
}

.dolphins::after {
    top: 60%;
    animation-delay: -7s;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -16 722 352"><path d="M650 251 C628 214 632.117 185.296 607 151 C594.101 133.387 586.234 123.401 569 110 C544.583 91.0133 497 77 497 77 L414 64 C414 64 370 27 329 7 C312.322 -1.13586 264 -16 288 18 C312 52 288 84 288 84 C288 84 207.122 114.885 159 142 C121.915 162.897 108.24 188.117 68 202 C40.3245 211.548 9.00002 202 -5.99997 214 C-21 226 -50 239 -28 241 C-5.99995 243 60 251 60 251 C60 251 115 336 127 327 C139 318 134 292 134 283 C134 274 115 234 115 234 C115 234 193.77 207.611 246 207 C275.026 206.661 291.088 211.414 320 214 C348.912 216.586 388.231 214 391 220 C393.769 226 356.5 280 361 283 C365.5 286 395.237 278.979 416 272 C448.002 261.243 491 229 491 229 L628 274 C628 274 672 288 650 251 Z" fill="%2306b6d4" opacity="0.5"/></svg>');
}

/* Add more dolphins swimming in opposite direction */
.dolphins .dolphin-left-1,
.dolphins .dolphin-left-2 {
    content: '';
    position: absolute;
    width: 120px;
    height: 60px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -16 722 352"><g transform="scale(-1,1) translate(-672,0)"><path d="M650 251 C628 214 632.117 185.296 607 151 C594.101 133.387 586.234 123.401 569 110 C544.583 91.0133 497 77 497 77 L414 64 C414 64 370 27 329 7 C312.322 -1.13586 264 -16 288 18 C312 52 288 84 288 84 C288 84 207.122 114.885 159 142 C121.915 162.897 108.24 188.117 68 202 C40.3245 211.548 9.00002 202 -5.99997 214 C-21 226 -50 239 -28 241 C-5.99995 243 60 251 60 251 C60 251 115 336 127 327 C139 318 134 292 134 283 C134 274 115 234 115 234 C115 234 193.77 207.611 246 207 C275.026 206.661 291.088 211.414 320 214 C348.912 216.586 388.231 214 391 220 C393.769 226 356.5 280 361 283 C365.5 286 395.237 278.979 416 272 C448.002 261.243 491 229 491 229 L628 274 C628 274 672 288 650 251 Z" fill="%2322d3ee" opacity="0.3"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    animation: swim-left 36s linear infinite;
    filter: blur(2px);
}

.dolphins .dolphin-left-1 {
    top: 35%;
    animation-delay: -5s;
}

.dolphins .dolphin-left-2 {
    top: 75%;
    animation-delay: -12s;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -16 722 352"><g transform="scale(-1,1) translate(-672,0)"><path d="M650 251 C628 214 632.117 185.296 607 151 C594.101 133.387 586.234 123.401 569 110 C544.583 91.0133 497 77 497 77 L414 64 C414 64 370 27 329 7 C312.322 -1.13586 264 -16 288 18 C312 52 288 84 288 84 C288 84 207.122 114.885 159 142 C121.915 162.897 108.24 188.117 68 202 C40.3245 211.548 9.00002 202 -5.99997 214 C-21 226 -50 239 -28 241 C-5.99995 243 60 251 60 251 C60 251 115 336 127 327 C139 318 134 292 134 283 C134 274 115 234 115 234 C115 234 193.77 207.611 246 207 C275.026 206.661 291.088 211.414 320 214 C348.912 216.586 388.231 214 391 220 C393.769 226 356.5 280 361 283 C365.5 286 395.237 278.979 416 272 C448.002 261.243 491 229 491 229 L628 274 C628 274 672 288 650 251 Z" fill="%2306b6d4" opacity="0.4"/></g></svg>');
}

@keyframes swim-across {
    0% {
        left: -100px;
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(8px) rotate(-1deg);
    }
    75% {
        transform: translateY(-12px) rotate(1deg);
    }
    100% {
        left: calc(100vw + 20px);
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes swim-left {
    0% {
        right: -100px;
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) rotate(-2deg);
    }
    50% {
        transform: translateY(10px) rotate(1deg);
    }
    75% {
        transform: translateY(-8px) rotate(-1deg);
    }
    100% {
        right: calc(100vw + 20px);
        transform: translateY(0px) rotate(0deg);
    }
}

/* Simplified dolphin patterns for continuous ocean */

/* Coral and sea life at bottom */
.coral-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80"><g opacity="0.5"><path d="M50 75 Q45 60 40 75 Q48 50 55 75 Q60 45 65 75 Q58 55 50 75" fill="%2322d3ee" opacity="0.7"><animateTransform attributeName="transform" type="rotate" values="0 52.5 60;3 52.5 60;0 52.5 60;-2 52.5 60;0 52.5 60" dur="8s" repeatCount="indefinite"/></path><g transform="translate(180,0)"><path d="M0 78 Q-8 65 -12 78 Q-5 55 0 78 Q5 50 12 78 Q8 60 0 78" fill="%23fb7185" opacity="0.8"><animateTransform attributeName="transform" type="rotate" values="0 0 66;-4 0 66;0 0 66;3 0 66;0 0 66" dur="7s" repeatCount="indefinite"/></path><circle cx="8" cy="45" r="3" fill="%23fb7185" opacity="0.6"><animate attributeName="r" values="3;5;3;2;3" dur="5s" repeatCount="indefinite"/></circle></g><g transform="translate(400,0)"><path d="M0 76 Q-6 62 -10 76 Q-3 58 0 76 Q3 52 8 76 Q5 65 0 76" fill="%2306b6d4" opacity="0.7"><animateTransform attributeName="transform" type="rotate" values="0 -1 64;2 -1 64;0 -1 64;-3 -1 64;0 -1 64" dur="9s" repeatCount="indefinite"/></path><ellipse cx="-5" cy="50" rx="2" ry="8" fill="%2322d3ee" opacity="0.8"><animateTransform attributeName="transform" type="rotate" values="0 -5 50;4 -5 50;0 -5 50;-2 -5 50;0 -5 50" dur="6s" repeatCount="indefinite"/></ellipse></g></g></svg>');
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat-x;
    background-position: bottom;
}

/* Simplified coral for continuous ocean */

@keyframes float-bubbles {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-100px); }
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: var(--text-shadow-medium);
}

.title-line {
    display: block;
}

.highlight {
    background: none;
    color: #ffe066 !important;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    text-shadow: none;
    filter: none;
}

.typing-cursor {
    color: #ffe066;
    animation: blink-cursor 1s infinite;
    font-weight: 800;
    font-size: 0.85em;
    width: 0.7ch;
    display: inline-block;
    vertical-align: baseline;
}

@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
    text-shadow: var(--text-shadow-light);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-button {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.cta-button.primary {
    background: var(--coral);
    color: white;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cta-button.primary:hover {
    background: #e11d48;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.cta-button.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-button.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.button-arrow {
    transition: transform 0.3s ease;
}

.cta-button:hover .button-arrow {
    transform: translateX(3px);
}

/* Phone Mockup */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-mockup {
    width: 280px;
    height: 560px;
    background: linear-gradient(145deg, #2d3748, #1a202c);
    border-radius: 2.5rem;
    padding: 0.75rem;
    position: relative;
    animation: float-phone 4s ease-in-out infinite;
    transform: rotateY(-12deg) rotateX(5deg);
    perspective: 1000px;
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.4),
        0 15px 30px rgba(0,0,0,0.2),
        inset 0 2px 4px rgba(255,255,255,0.05),
        inset 0 -2px 6px rgba(0,0,0,0.3);
}

.phone-mockup::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #4a5568, #2d3748);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.phone-mockup::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 2px;
    box-shadow: 
        inset 0 1px 2px rgba(0,0,0,0.3),
        0 1px 2px rgba(255,255,255,0.05);
}

/* Side buttons for hero phone */
.phone-mockup .volume-up {
    position: absolute;
    left: -3px;
    top: 80px;
    width: 6px;
    height: 25px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 3px 0 0 3px;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1),
        -2px 0 4px rgba(0,0,0,0.3);
}

.phone-mockup .volume-down {
    position: absolute;
    left: -3px;
    top: 115px;
    width: 6px;
    height: 25px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 3px 0 0 3px;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1),
        -2px 0 4px rgba(0,0,0,0.3);
}

.phone-mockup .power-button {
    position: absolute;
    right: -3px;
    top: 95px;
    width: 6px;
    height: 30px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 0 3px 3px 0;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1),
        2px 0 4px rgba(0,0,0,0.3);
}

@keyframes float-phone {
    0%, 100% { transform: translateY(0px) rotateY(-12deg) rotateX(5deg); }
    50% { transform: translateY(-12px) rotateY(-8deg) rotateX(3deg); }
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #0a0a0a, #000);
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.8),
        inset 0 0 1px rgba(255,255,255,0.1);
}

.phone-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #1a1a1a, #000);
    border-radius: 50%;
    box-shadow: 
        inset 0 1px 2px rgba(0,0,0,0.8),
        0 0 4px rgba(255,255,255,0.1);
}

.video-feed {
    height: 100%;
    position: relative;
}

.video-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--ocean-light) 0%, var(--ocean-mid) 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.video-card.active {
    transform: translateY(0);
}

.video-card:nth-child(2) {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
}

.video-card:nth-child(3) {
    background: linear-gradient(135deg, var(--accent) 0%, var(--bioluminescent) 100%);
}

.video-content h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.video-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.video-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

.action-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Sections */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: white;
    position: relative;
    text-shadow: var(--text-shadow-medium);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--bioluminescent), var(--accent), var(--secondary));
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

/* Section title styling for continuous ocean */
.content-section .section-title {
    color: white;
    text-shadow: var(--text-shadow-medium);
}

.unified-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

.demo-phone {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 256px;
    height: 512px;
    background: linear-gradient(145deg, #2d3748, #1a202c);
    border-radius: 3rem;
    padding: 1rem;
    position: relative;
    transform: rotateY(8deg) rotateX(-2deg);
    perspective: 1000px;
    box-shadow: 
        0 35px 70px rgba(0,0,0,0.5),
        0 20px 40px rgba(0,0,0,0.3),
        inset 0 3px 6px rgba(255,255,255,0.08),
        inset 0 -3px 8px rgba(0,0,0,0.4);
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background: linear-gradient(90deg, #4a5568, #2d3748, #4a5568);
    border-radius: 3px;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 1px 2px rgba(255,255,255,0.05);
}

.phone-frame::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 3px;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 1px 2px rgba(255,255,255,0.05);
}

/* Side buttons for features phone */
.phone-frame .volume-up {
    position: absolute;
    left: -4px;
    top: 100px;
    width: 8px;
    height: 30px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 4px 0 0 4px;
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.1),
        -3px 0 6px rgba(0,0,0,0.4);
}

.phone-frame .volume-down {
    position: absolute;
    left: -4px;
    top: 140px;
    width: 8px;
    height: 30px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 4px 0 0 4px;
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.1),
        -3px 0 6px rgba(0,0,0,0.4);
}

.phone-frame .power-button {
    position: absolute;
    right: -4px;
    top: 115px;
    width: 8px;
    height: 35px;
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-radius: 0 4px 4px 0;
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.1),
        3px 0 6px rgba(0,0,0,0.4);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #0a0a0a, #000);
    border-radius: 2.5rem;
    overflow: hidden;
    position: relative;
    box-shadow: 
        inset 0 3px 12px rgba(0,0,0,0.9),
        inset 0 0 2px rgba(255,255,255,0.1);
}

.phone-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2.5rem;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #1a1a1a, #000);
    border-radius: 50%;
    box-shadow: 
        inset 0 2px 3px rgba(0,0,0,0.8),
        0 0 6px rgba(255,255,255,0.1);
    z-index: 10;
}

.demo-content {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 2rem;
}

.feature-text {
    margin-bottom: 3rem;
    position: relative;
    perspective: 1000px;
    height: 200px;
    overflow: hidden;
}

.feature-text h3 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    transform-style: preserve-3d;
    text-shadow: var(--text-shadow-medium);
}

.feature-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    transition: all 0.3s ease;
    max-width: 85%;
    position: relative;
    transform-style: preserve-3d;
    text-shadow: var(--text-shadow-light);
}

.text-cube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-cube.rotating {
    animation: cubeRotate 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cubeRotate {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    30% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    70% {
        transform: rotateX(270deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(360deg);
        opacity: 1;
    }
}

.text-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.text-slide.active {
    transform: translateY(0);
    opacity: 1;
}

.text-slide.exiting {
    transform: translateY(-100%);
    opacity: 0;
}

/* Phone Screen Content Styles */
.screen-content {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    transition: all 0.5s ease;
}

.screen-endless-scroll {
    background: linear-gradient(135deg, var(--ocean-light), var(--secondary));
}

.screen-instant-help {
    background: linear-gradient(135deg, var(--secondary), var(--accent));
}

.screen-smart-ai {
    background: linear-gradient(135deg, var(--accent), var(--bioluminescent));
}

.screen-study-anywhere {
    background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
}

/* Responsive */
@media (max-width: 768px) {
    .unified-demo {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .demo-content {
        padding-left: 0;
        text-align: center;
    }
    
    .phone-frame {
        width: 224px;
        height: 448px;
    }
    
    .feature-text h3 {
        font-size: 1.8rem;
    }
    
    .feature-text p {
        font-size: 1rem;
        max-width: 100%;
    }
    

}

/* Comparison styling for continuous ocean */

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.comparison-card {
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.comparison-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    opacity: 1;
    transition: all 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.old-way {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.old-way::before {
    background: linear-gradient(90deg, #ff9a56, #ff6b35, #f7931e);
}

.new-way {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.new-way::before {
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

.comparison-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.comparison-card ul {
    list-style: none;
}

.comparison-card li {
    padding: 0.75rem 0;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Stats styling for continuous ocean */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.stat-card {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--ocean-light) 0%, var(--ocean-mid) 100%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(34, 211, 238, 0.2) 0%, transparent 60%);
    pointer-events: none;
}



.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.stat-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Waitlist styling for continuous ocean */

.waitlist-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.waitlist-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.waitlist-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.waitlist-form {
    margin-bottom: 3rem;
}

.form-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.form-group input {
    flex: 1;
    min-width: 280px;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
}

.form-group input::placeholder {
    color: var(--text-light);
}

.submit-button {
    padding: 1rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.submit-button:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.form-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Support Form Styles */
.support-form {
    max-width: 600px;
    margin: 0 auto;
}

.support-form .form-group {
    display: block;
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-light);
}

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

.form-submit-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.form-submit-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* FAQ Styles */
.faq-item {
    margin-bottom: 2rem;
}

.faq-question {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.community-links p {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-button {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.discord,
.cta-button.secondary.discord {
    background: #5865F2 !important;
    color: white;
    box-shadow: 0 2px 4px rgba(88, 101, 242, 0.3);
    border: 1px solid rgba(88, 101, 242, 0.5);
}

.discord:hover,
.cta-button.secondary.discord:hover {
    background: #4752C4 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.4);
    border: 1px solid rgba(88, 101, 242, 0.7);
}

/* Discord icon styling */
.discord-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Footer */
.footer {
    padding: 3rem 0;
    background: var(--bg-dark);
    color: white;
}

.footer-content {
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.footer-text {
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .phone-mockup {
        width: 240px;
        height: 480px;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .cta-button {
        flex: 1;
        min-width: 200px;
        justify-content: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .comparison-card {
        min-width: auto;
    }
    
    .form-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-group input {
        min-width: auto;
    }
    
    .submit-button {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .content-section {
        padding: 60px 0;
    }
    
    .phone-mockup {
        width: 200px;
        height: 400px;
    }
    
    .feature-text h3 {
        font-size: 1.5rem;
    }
    
    .feature-tabs {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .feature-tab {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation for video cards cycling */
@keyframes cycle-videos {
    0%, 30% { transform: translateY(0); }
    35%, 65% { transform: translateY(-100%); }
    70%, 100% { transform: translateY(-200%); }
}

.video-feed {
    animation: cycle-videos 6s infinite;
}

/* Glassmorphism card for comparison */
.glass-card {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 1.5rem;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    padding: 1.5rem 2rem 2rem 2rem;
    margin: 0.75rem 0 0 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    transition: box-shadow 0.2s;
}

/* Comparison menu styles */
.comparison-menu-glass {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.10);
    border-radius: 1.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    box-shadow: 0 2px 12px 0 rgba(31, 38, 135, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-x: auto;
    white-space: nowrap;
}

/* Mobile-only menu */
.mobile-only {
    display: block;
}

/* Desktop comparison table */
.desktop-comparison {
    display: none;
}

/* Desktop styles */
@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-comparison {
        display: block;
    }
    
    #comparisonCard {
        display: none;
    }
}
.comparison-menu {
    display: flex;
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.menu-item {
    padding: 0.5rem 1.2rem;
    border-radius: 1.2rem;
    cursor: pointer;
    font-weight: 600;
    color: #fff;
    background: transparent;
    transition: background 0.18s, color 0.18s;
    opacity: 0.85;
    border: none;
    outline: none;
    font-size: 1.05rem;
    white-space: nowrap;
}
.menu-item.active, .menu-item:hover {
    background: rgba(255,255,255,0.35);
    color: #fff;
    opacity: 1;
}
@media (max-width: 600px) {
    .comparison-menu-glass {
        padding: 0.5rem 0;
        border-radius: 1rem;
        margin-bottom: 1rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    .comparison-menu {
        gap: 0.5rem;
    }
    .menu-item {
        font-size: 0.98rem;
        padding: 0.4rem 0.7rem;
    }
}

/* Two-column comparison checklist */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.7rem;
}
.comparison-table th, .comparison-table td {
    padding: 0.7rem 0.7rem;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 500;
    background: none !important;
    border-radius: 0.7rem;
    color: #fff !important;
}
.comparison-table th, .comparison-table thead {
    background: none !important;
}
.comparison-table th {
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff !important;
    border-bottom: 2px solid rgba(37,99,235,0.10);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 2.6em;
}
.comparison-table th:nth-child(3) {
    min-width: 130px;
    max-width: 180px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.comparison-table td.feature-label {
    color: #ffffff;
    font-weight: 600;
    background: transparent;
}
.comparison-table td {
    color: #fff !important;
}
.comparison-checkmark, .comparison-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    font-size: 1.1em;
    margin-right: 0.2em;
    flex-shrink: 0;
    box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.10);
}
.comparison-checkmark {
    background: linear-gradient(135deg, #4f8cff 60%, #38e8c3 100%);
    color: #fff;
}
.comparison-cross {
    background: linear-gradient(135deg, #ef4444 60%, #fbbf24 100%);
    color: #fff;
}
@media (max-width: 600px) {
    .comparison-table th, .comparison-table td {
        font-size: 0.98rem;
        padding: 0.5rem 0.3rem;
    }
    .comparison-table th {
        font-size: 1.01rem;
    }
}

/* Desktop table specific styles */
.desktop-table {
    max-width: none;
    width: 100%;
}

.desktop-table th {
    min-width: 120px;
    text-align: center;
}

.desktop-table th:first-child {
    min-width: 200px;
    text-align: left;
}

.desktop-table td {
    text-align: center;
}

.desktop-table td:first-child {
    text-align: left;
}

@media (min-width: 769px) {
    .desktop-comparison {
        max-width: none;
        margin: 0 auto;
    }
}

.afore-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.afore-badge-bold {
    font-weight: 700;
    color: #e5ecf5;
    font-size: 1.15rem;
}
.afore-logo-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #101828;
    border-radius: 0.25rem;
    overflow: hidden;
}
.afore-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.afore-badge-capital {
    font-weight: 500;
    color: #007BFF;
    font-size: 1.15rem;
    margin-left: 0.1rem;
}

/* About page specific styles */
.about-hero {
    padding: 100px 0 60px;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-medium);
}

.page-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: var(--text-shadow-light);
}

.mission-content {
    padding: 60px 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.mission-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    transition: all 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.mission-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: var(--text-shadow-light);
}

.mission-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.7;
    text-shadow: var(--text-shadow-light);
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-list li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-light);
}

.audience-content {
    padding: 60px 0;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.audience-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.audience-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.audience-card h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-light);
}

.audience-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    text-shadow: var(--text-shadow-light);
}

.backed-content {
    padding: 60px 0;
}

.backing-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 3rem;
    max-width: 600px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.backing-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.afore-badge-large {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.afore-logo-square-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: #101828;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.afore-info h3 {
    color: #007BFF;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.afore-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    text-shadow: var(--text-shadow-light);
}

.cta-section {
    padding: 60px 0;
    text-align: center;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-medium);
}

.cta-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    text-shadow: var(--text-shadow-light);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
    }
    
    .audience-grid {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .afore-badge-large {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Privacy Policy Specific Styles */
.privacy-intro {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-section {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.privacy-list li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
    text-shadow: var(--text-shadow-light);
}

.privacy-list li::before {
    content: '•';
    color: var(--accent);
    font-weight: 700;
    font-size: 1.2rem;
    position: absolute;
    left: 0.5rem;
    top: 0;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.policy-meta {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 1rem 2rem;
    margin-top: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* TestFlight Button Styles */
.testflight-cta {
    margin-top: 2.5rem;
    text-align: center;
}

.testflight-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #0D63FF 0%, #0849CC 100%);
    color: white;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 25px rgba(13, 99, 255, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.025em;
}

.testflight-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.testflight-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 12px 35px rgba(13, 99, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.testflight-button:hover::before {
    left: 100%;
}

.testflight-button span {
    position: relative;
    z-index: 1;
}