/* ========== CSS Reset & Variables ========== */
:root {
    --primary-color: #FF6B35;
    --secondary-color: #004E89;
    --accent-color: #1BB9D1;
    --light-bg: #F7F3E9;
    --dark-bg: #0A1428;
    --sand: #F4A259;
    --ocean: #1e6f8f;
    --wave: #0099cc;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a1428 0%, #1a3a52 50%, #2d5a7b 100%);
    min-height: 100vh;
    color: var(--text-dark);
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(27, 185, 209, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ========== Stars Background ========== */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 100px white, 200px 50px white, 300px 150px white,
        400px 80px white, 500px 120px white, 600px 40px white,
        700px 180px white, 800px 100px white, 900px 150px white,
        150px 300px white, 350px 350px white, 650px 280px white,
        900px 380px white, 200px 450px white, 700px 420px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    width: 1px;
    height: 1px;
    box-shadow: 
        50px 50px white, 100px 200px white, 250px 100px white,
        400px 300px white, 550px 150px white, 750px 250px white,
        850px 320px white, 300px 450px white, 600px 450px white;
    animation: twinkle 4s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ========== Container ========== */
.container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========== Header & Logo ========== */
.header {
    margin-top: 40px;
    margin-bottom: 60px;
    animation: fadeInDown 1s ease-out;
}

.logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.4));
    animation: float 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.logo-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(27, 185, 209, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    z-index: -1;
}

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

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Hero Section ========== */
.hero {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.brand-name {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    animation: slideInUp 0.8s ease-out;
    text-shadow: 0 0 30px rgba(27, 185, 209, 0.3);
}

.waves-container {
    position: relative;
    height: 100px;
    width: 100%;
    max-width: 600px;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,30 Q300,0 600,30 T1200,30 L1200,120 L0,120 Z" fill="%231BB9D1" opacity="0.3"/></svg>') repeat-x;
    background-size: 600px 120px;
    animation: wave 15s linear infinite;
}

.wave2 {
    bottom: 10px;
    animation: wave 10s linear infinite reverse;
    opacity: 0.5;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,30 Q300,60 600,30 T1200,30 L1200,120 L0,120 Z" fill="%230099cc" opacity="0.5"/></svg>') repeat-x;
    background-size: 600px 120px;
}

.wave3 {
    bottom: 20px;
    animation: wave 20s linear infinite;
    opacity: 0.3;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,40 Q300,10 600,40 T1200,40 L1200,120 L0,120 Z" fill="%23FF6B35" opacity="0.4"/></svg>') repeat-x;
    background-size: 600px 120px;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(600px); }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tagline-wrapper {
    margin: 20px 0;
    animation: fadeIn 1s ease-out 0.3s both;
}

.tagline {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.tagline::before {
    content: '-';
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

.tagline::after {
    content: '-';
    display: block;
    font-size: 2rem;
    margin-top: 10px;
}

.subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 1px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.description {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

/* ========== Email Signup Section ========== */
.signup-section {
    margin-top: 40px;
    animation: fadeIn 1s ease-out 0.6s both;
}

.cta-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.email-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.email-form input {
    flex: 1;
    min-width: 200px;
    padding: 14px 20px;
    border: 2px solid var(--accent-color);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.email-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.email-form input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(27, 185, 209, 0.5);
    border-color: var(--primary-color);
}

.btn-submit {
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    white-space: nowrap;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 107, 53, 0.5);
}

.btn-submit:active {
    transform: translateY(-1px);
}

.form-message {
    margin-top: 15px;
    font-size: 0.9rem;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-message.success {
    color: #4ade80;
}

.form-message.error {
    color: #f87171;
}

/* ========== Features Section ========== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
    margin-bottom: 60px;
    perspective: 1000px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(27, 185, 209, 0.2);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    animation: fadeIn 1s ease-out backwards;
}

.feature-card:nth-child(1) { animation-delay: 0.7s; }
.feature-card:nth-child(2) { animation-delay: 0.8s; }
.feature-card:nth-child(3) { animation-delay: 0.9s; }

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(27, 185, 209, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-light);
    font-weight: 600;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ========== Wave Canvas Section ========== */
.wave-section {
    width: 100%;
    height: 300px;
    margin-bottom: 60px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(27, 185, 209, 0.2);
}

.wave-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========== Social Section ========== */
.social-section {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeIn 1s ease-out 1s both;
}

.follow-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(27, 185, 209, 0.2) 100%);
    border: 2px solid var(--accent-color);
    border-radius: 50px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3) 0%, rgba(27, 185, 209, 0.3) 100%);
    box-shadow: 0 10px 30px rgba(27, 185, 209, 0.3);
    transform: translateY(-3px);
}

.social-link i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.social-link:hover i {
    transform: scale(1.2);
}

/* ========== Footer ========== */
.footer {
    text-align: center;
    padding: 30px 20px;
    border-top: 1px solid rgba(27, 185, 209, 0.2);
    margin-top: auto;
    animation: fadeIn 1s ease-out 1.2s both;
}

.footer p {
    color: rgba(255, 255, 255, 0.7);
    margin: 5px 0;
    font-size: 0.9rem;
}

.location {
    margin-top: 10px;
}

/* ========== Responsive Design ========== */
@media (max-width: 768px) {
    .container {
        padding: 30px 15px;
        min-height: auto;
    }

    .header {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .logo {
        max-width: 130px;
    }

    .logo-glow {
        width: 150px;
        height: 150px;
    }

    .hero {
        gap: 20px;
        margin-bottom: 40px;
    }

    .email-form {
        flex-direction: column;
        max-width: 100%;
    }

    .email-form input {
        min-width: 100%;
    }

    .btn-submit {
        width: 100%;
        justify-content: center;
    }

    .features {
        gap: 20px;
        margin-bottom: 40px;
    }

    .wave-section {
        height: 200px;
    }

    .tagline::before,
    .tagline::after {
        font-size: 1.2rem;
        margin-bottom: 5px;
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 20px 10px;
    }

    .header {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .logo {
        max-width: 100px;
    }

    .logo-glow {
        width: 120px;
        height: 120px;
    }

    .brand-name {
        font-size: 2rem;
    }

    .tagline {
        font-size: 1.4rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .feature-card {
        padding: 25px 20px;
    }

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

    .wave-section {
        height: 150px;
    }

    .social-link {
        font-size: 0.95rem;
        padding: 12px 20px;
    }
}

/* ========== Print Styles ========== */
@media print {
    body::before {
        display: none;
    }

    .stars {
        display: none;
    }
}