<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ocean Weave · CSS</title>

    <!-- ===== STYLES ===== -->
    <style>
        /* ------------------------------------------------
             RESET & BASE
           ------------------------------------------------ */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --navy: #0F1B2D;
            --seafoam: #2DD4A0;
            --pearl: #E2E8F0;
            --navy-light: #1a2a42;
            --seafoam-dark: #1fa07a;
            --pearl-dark: #c8d0dc;
            --text: #c8d0dc;
            --text-light: #94a3b8;
            --white: #ffffff;
            --radius: 12px;
            --shadow: 0 8px 32px rgba(15, 27, 45, 0.6);
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: var(--font);
            background-color: var(--navy);
            color: var(--pearl);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

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

        /* ------------------------------------------------
             TYPOGRAPHY
           ------------------------------------------------ */
        h1,
        h2,
        h3,
        h4 {
            font-weight: 700;
            line-height: 1.2;
            color: var(--white);
        }

        h1 {
            font-size: clamp(2.4rem, 6vw, 4rem);
        }
        h2 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
        }
        h3 {
            font-size: clamp(1.2rem, 2.5vw, 1.6rem);
        }

        .section-label {
            display: inline-block;
            font-size: 0.8rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--seafoam);
            font-weight: 600;
            margin-bottom: 12px;
            border-left: 3px solid var(--seafoam);
            padding-left: 14px;
        }

        /* ------------------------------------------------
             BUTTONS
           ------------------------------------------------ */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 32px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font);
        }

        .btn-primary {
            background: var(--seafoam);
            color: var(--navy);
        }
        .btn-primary:hover {
            background: var(--seafoam-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(45, 212, 160, 0.35);
        }

        .btn-outline {
            background: transparent;
            color: var(--pearl);
            border: 2px solid var(--pearl);
        }
        .btn-outline:hover {
            background: var(--pearl);
            color: var(--navy);
            transform: translateY(-2px);
        }

        /* ------------------------------------------------
             NAVIGATION
           ------------------------------------------------ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 16px 0;
            background: rgba(15, 27, 45, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.06);
            transition: var(--transition);
        }

        .navbar .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* ---- brand ---- */
        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.5px;
        }
        .brand-icon {
            width: 36px;
            height: 36px;
            background: var(--seafoam);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--navy);
            flex-shrink: 0;
        }
        .brand span {
            color: var(--seafoam);
        }

        /* ---- nav links ---- */
        .nav-links {
            display: flex;
            align-items: center;
            gap: 36px;
        }

        .nav-links a {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text);
            transition: var(--transition);
            position: relative;
            padding: 4px 0;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--seafoam);
            transition: var(--transition);
            border-radius: 2px;
        }
        .nav-links a:hover {
            color: var(--white);
        }
        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-links .btn {
            padding: 10px 24px;
            font-size: 0.9rem;
        }

        /* ---- hamburger ---- */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            z-index: 1001;
            transition: var(--transition);
        }
        .hamburger span {
            display: block;
            width: 28px;
            height: 3px;
            background: var(--pearl);
            border-radius: 4px;
            transition: var(--transition);
            transform-origin: center;
        }

        /* hamburger open state */
        .hamburger.open span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.open span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger.open span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* ---- mobile nav overlay ---- */
        .nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 27, 45, 0.6);
            backdrop-filter: blur(4px);
            z-index: 998;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .nav-overlay.active {
            opacity: 1;
        }

        /* ------------------------------------------------
             HERO
           ------------------------------------------------ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(45, 212, 160, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(15, 27, 45, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(45, 212, 160, 0.04) 0%, transparent 50%);
            pointer-events: none;
        }

        /* wave decoration */
        .hero-waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            color: var(--navy);
            fill: var(--navy);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .hero-text .subtitle {
            display: inline-block;
            font-size: 0.9rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--seafoam);
            font-weight: 600;
            margin-bottom: 16px;
            border-left: 3px solid var(--seafoam);
            padding-left: 16px;
        }

        .hero-text h1 {
            margin-bottom: 20px;
        }
        .hero-text h1 .highlight {
            color: var(--seafoam);
        }

        .hero-text p {
            font-size: 1.15rem;
            color: var(--text);
            max-width: 520px;
            margin-bottom: 36px;
        }

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

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

        .hero-shape {
            width: 380px;
            height: 380px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(45, 212, 160, 0.15), transparent 70%),
                radial-gradient(circle at 70% 70%, rgba(226, 232, 240, 0.05), transparent 50%);
            border: 1px solid rgba(45, 212, 160, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            animation: float 8s ease-in-out infinite;
        }

        .hero-shape::before {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 1px solid rgba(45, 212, 160, 0.1);
            animation: float 10s ease-in-out infinite reverse;
        }

        .hero-shape::after {
            content: '🌊';
            font-size: 5rem;
            filter: drop-shadow(0 0 40px rgba(45, 212, 160, 0.2));
        }

        @keyframes float {
            0%,
            100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-20px) scale(1.02);
            }
        }

        /* ------------------------------------------------
             SECTIONS (shared)
           ------------------------------------------------ */
        section {
            padding: 100px 0;
        }

        .section-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 60px;
        }
        .section-header h2 {
            margin-bottom: 16px;
        }
        .section-header p {
            color: var(--text);
            font-size: 1.1rem;
        }

        /* ------------------------------------------------
             SECTION: FEATURES (cards)
           ------------------------------------------------ */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
        }

        .feature-card {
            background: rgba(26, 42, 66, 0.5);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(226, 232, 240, 0.06);
            border-radius: var(--radius);
            padding: 36px 28px;
            transition: var(--transition);
            cursor: default;
        }
        .feature-card:hover {
            transform: translateY(-6px);
            border-color: rgba(45, 212, 160, 0.2);
            box-shadow: 0 12px 40px rgba(45, 212, 160, 0.06);
        }

        .feature-icon {
            width: 56px;
            height: 56px;
            background: rgba(45, 212, 160, 0.1);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 20px;
            color: var(--seafoam);
        }

        .feature-card h3 {
            margin-bottom: 12px;
        }
        .feature-card p {
            color: var(--text);
            font-size: 0.95rem;
        }

        /* ------------------------------------------------
             SECTION: ABOUT (split)
           ------------------------------------------------ */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-image {
            background: rgba(26, 42, 66, 0.4);
            border-radius: var(--radius);
            aspect-ratio: 4/3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            border: 1px solid rgba(45, 212, 160, 0.08);
            position: relative;
            overflow: hidden;
        }
        .about-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 40%, rgba(45, 212, 160, 0.06), transparent 70%);
        }
        .about-image span {
            position: relative;
            z-index: 1;
        }

        .about-content .section-label {
            margin-bottom: 16px;
        }
        .about-content h2 {
            margin-bottom: 20px;
        }
        .about-content p {
            color: var(--text);
            margin-bottom: 24px;
            font-size: 1.05rem;
        }

        .about-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .about-details li {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
            font-size: 0.95rem;
        }
        .about-details li::before {
            content: '✓';
            color: var(--seafoam);
            font-weight: 700;
            font-size: 1.1rem;
        }

        /* ------------------------------------------------
             SECTION: TESTIMONIALS
           ------------------------------------------------ */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 32px;
        }

        .testimonial-card {
            background: rgba(26, 42, 66, 0.3);
            border: 1px solid rgba(226, 232, 240, 0.05);
            border-radius: var(--radius);
            padding: 32px 28px;
            transition: var(--transition);
        }
        .testimonial-card:hover {
            border-color: rgba(45, 212, 160, 0.15);
            background: rgba(26, 42, 66, 0.5);
        }

        .testimonial-stars {
            color: var(--seafoam);
            font-size: 0.9rem;
            letter-spacing: 2px;
            margin-bottom: 16px;
        }
        .testimonial-card blockquote {
            font-style: italic;
            color: var(--pearl);
            font-size: 1rem;
            margin-bottom: 20px;
            line-height: 1.7;
        }
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .testimonial-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--seafoam);
            color: var(--navy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .testimonial-author .name {
            font-weight: 600;
            color: var(--white);
            font-size: 0.95rem;
        }
        .testimonial-author .role {
            font-size: 0.8rem;
            color: var(--text-light);
        }

        /* ------------------------------------------------
             SECTION: CTA
           ------------------------------------------------ */
        .cta-section {
            text-align: center;
            background: linear-gradient(135deg, rgba(45, 212, 160, 0.04), rgba(15, 27, 45, 0.8));
            border-top: 1px solid rgba(45, 212, 160, 0.06);
            border-bottom: 1px solid rgba(45, 212, 160, 0.06);
        }

        .cta-section h2 {
            margin-bottom: 16px;
        }
        .cta-section p {
            color: var(--text);
            max-width: 520px;
            margin: 0 auto 36px;
            font-size: 1.1rem;
        }
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* ------------------------------------------------
             FOOTER
           ------------------------------------------------ */
        .footer {
            padding: 48px 0 32px;
            border-top: 1px solid rgba(226, 232, 240, 0.04);
            color: var(--text-light);
            font-size: 0.9rem;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-brand .brand {
            margin-bottom: 12px;
        }
        .footer-brand p {
            max-width: 300px;
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .footer-col h4 {
            font-size: 0.95rem;
            color: var(--white);
            margin-bottom: 16px;
        }
        .footer-col ul li {
            margin-bottom: 10px;
        }
        .footer-col ul li a {
            color: var(--text-light);
            transition: var(--transition);
        }
        .footer-col ul li a:hover {
            color: var(--seafoam);
        }

        .footer-bottom {
            border-top: 1px solid rgba(226, 232, 240, 0.04);
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            color: var(--text-light);
            font-size: 0.85rem;
        }
        .footer-socials {
            display: flex;
            gap: 18px;
        }
        .footer-socials a {
            color: var(--text-light);
            transition: var(--transition);
            font-size: 1.1rem;
        }
        .footer-socials a:hover {
            color: var(--seafoam);
        }

        /* ------------------------------------------------
             RESPONSIVE
           ------------------------------------------------ */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }
            .hero-text p {
                margin: 0 auto 32px;
            }
            .hero-buttons {
                justify-content: center;
            }
            .hero-shape {
                width: 280px;
                height: 280px;
            }
            .hero-shape::before {
                width: 200px;
                height: 200px;
            }
            .hero-shape::after {
                font-size: 3.6rem;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }
            .about-details {
                justify-items: center;
            }
            .about-image {
                aspect-ratio: 16/9;
            }

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

        @media (max-width: 768px) {
            /* ---- hamburger visible ---- */
            .hamburger {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background: var(--navy-light);
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                padding: 100px 32px 40px;
                z-index: 999;
                transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
                border-left: 1px solid rgba(45, 212, 160, 0.08);
                overflow-y: auto;
            }

            .nav-links.open {
                right: 0;
            }

            .nav-links a {
                font-size: 1.2rem;
                padding: 12px 0;
                width: 100%;
                border-bottom: 1px solid rgba(226, 232, 240, 0.04);
            }
            .nav-links a::after {
                display: none;
            }
            .nav-links a:hover {
                color: var(--seafoam);
            }

            .nav-links .btn {
                width: 100%;
                justify-content: center;
                margin-top: 12px;
            }

            .nav-overlay {
                display: block;
                pointer-events: none;
            }
            .nav-overlay.active {
                pointer-events: all;
            }

            /* ---- hero ---- */
            .hero {
                padding: 100px 0 60px;
            }
            .hero-shape {
                width: 220px;
                height: 220px;
            }
            .hero-shape::before {
                width: 160px;
                height: 160px;
            }
            .hero-shape::after {
                font-size: 2.8rem;
            }

            section {
                padding: 72px 0;
            }
            .section-header {
                margin-bottom: 40px;
            }

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

            .about-details {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 16px;
            }
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            .hero-buttons .btn {
                width: 100%;
                justify-content: center;
            }
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            .cta-buttons .btn {
                width: 100%;
                justify-content: center;
            }
            .hero-shape {
                width: 180px;
                height: 180px;
            }
            .hero-shape::before {
                width: 130px;
                height: 130px;
            }
            .hero-shape::after {
                font-size: 2.2rem;
            }
        }

        /* ------------------------------------------------
             UTILITY (scroll margin for anchor offsets)
           ------------------------------------------------ */
        section[id] {
            scroll-margin-top: 80px;
        }
    </style>
</head>

<body>

    <!-- ===== NAVIGATION ===== -->
    <nav class="navbar" id="navbar">
        <div class="container">
            <a href="#" class="brand">
                <span class="brand-icon">⧁</span>
                Ocean<span>Weave</span>
            </a>

            <ul class="nav-links" id="navLinks">
                <li><a href="#features">Features</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#testimonials">Stories</a></li>
                <li><a href="#cta" class="btn btn-primary">Dive In</a></li>
            </ul>

            <button class="hamburger" id="hamburger" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </nav>

    <!-- overlay for mobile -->
    <div class="nav-overlay" id="navOverlay"></div>

    <!-- ===== HERO ===== -->
    <section class="hero" id="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <div class="subtitle">Deep · Current · Light</div>
                    <h1>
                        Where the<br />
                        <span class="highlight">ocean</span> meets design
                    </h1>
                    <p>
                        Ocean Weave brings the rhythm of the tide to your brand —
                        deep navy foundations, seafoam accents, and pearl-white clarity.
                    </p>
                    <div class="hero-buttons">
                        <a href="#features" class="btn btn-primary">Explore →</a>
                        <a href="#about" class="btn btn-outline">Our Story</a>
                    </div>
                </div>
                <div class="hero-visual">
                    <div class="hero-shape"></div>
                </div>
            </div>
        </div>
        <!-- simple wave ornament -->
        <svg class="hero-waves" viewBox="0 0 1440 80" preserveAspectRatio="none">
            <path d="M0,40 C360,80 720,0 1080,40 C1260,60 1380,40 1440,40 L1440,80 L0,80 Z" />
        </svg>
    </section>

    <!-- ===== FEATURES ===== -->
    <section id="features">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Features</span>
                <h2>Woven with purpose</h2>
                <p>Every detail echoes the ocean — from deep currents to shimmering surfaces.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🌊</div>
                    <h3>Deep Navy Base</h3>
                    <p>#0F1B2D anchors your experience — stable, immersive, and endlessly deep like the midnight sea.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌿</div>
                    <h3>Seafoam Accents</h3>
                    <p>#2DD4A0 brings living energy — fresh, vibrant, and reminiscent of sunlit waves breaking on shore.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🕊️</div>
                    <h3>Pearl Clarity</h3>
                    <p>#E2E8F0 offers a soft, refined glow — like moonlight on the tide, ensuring readability and calm.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== ABOUT ===== -->
    <section id="about">
        <div class="container">
            <div class="about-grid">
                <div class="about-image">
                    <span>🧜‍♀️</span>
                </div>
                <div class="about-content">
                    <span class="section-label">Our Story</span>
                    <h2>Born from the <span style="color:var(--seafoam);">tide</span></h2>
                    <p>
                        Ocean Weave was created to capture the raw beauty of the sea —
                        where deep navy meets seafoam light, and every interaction flows
                        with the grace of ocean currents.
                    </p>
                    <ul class="about-details">
                        <li>Responsive by nature</li>
                        <li>Accessible &amp; inclusive</li>
                        <li>Performance-driven</li>
                        <li>Timeless aesthetic</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== TESTIMONIALS ===== -->
    <section id="testimonials">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Stories</span>
                <h2>What our community says</h2>
                <p>Real voices from people who ride the wave.</p>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <blockquote>"The palette is pure poetry. Deep navy gives me focus, while seafoam keeps me inspired."</blockquote>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">MK</div>
                        <div>
                            <div class="name">Maya K.</div>
                            <div class="role">Product Designer</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <blockquote>"I've never seen a theme that feels so calm yet so alive. It's like working by the shore."</blockquote>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">JR</div>
                        <div>
                            <div class="name">Jamie R.</div>
                            <div class="role">Front-end Developer</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <blockquote>"Accessibility meets beauty. The pearl text on navy is a joy to read, even late at night."</blockquote>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">AL</div>
                        <div>
                            <div class="name">Alex L.</div>
                            <div class="role">Content Strategist</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== CTA ===== -->
    <section class="cta-section" id="cta">
        <div class="container">
            <span class="section-label">Join the current</span>
            <h2>Ready to weave your own wave?</h2>
            <p>Dive into Ocean Weave and bring the depth, energy, and clarity of the sea to your next project.</p>
            <div class="cta-buttons">
                <a href="#" class="btn btn-primary">Get Started →</a>
                <a href="#" class="btn btn-outline">View on GitHub</a>
            </div>
        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#" class="brand">
                        <span class="brand-icon">⧁</span>
                        Ocean<span>Weave</span>
                    </a>
                    <p>Deep navy · Seafoam · Pearl — a design system inspired by the ocean.</p>
                </div>
                <div class="footer-col">
                    <h4>Navigate</h4>
                    <ul>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#testimonials">Stories</a></li>
                        <li><a href="#cta">Get Started</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li><a href="#">Tokens</a></li>
                        <li><a href="#">Accessibility</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Connect</h4>
                    <ul>
                        <li><a href="#">GitHub</a></li>
                        <li><a href="#">Dribbble</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Email</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <span>&copy; 2025 Ocean Weave. All rights reserved.</span>
                <div class="footer-socials">
                    <a href="#" aria-label="GitHub">⌨</a>
                    <a href="#" aria-label="Twitter">🐦</a>
                    <a href="#" aria-label="Dribbble">🏀</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- ===== HAMBURGER TOGGLE SCRIPT ===== -->
    <script>
        (function() {
            const hamburger = document.getElementById('hamburger');
            const navLinks = document.getElementById('navLinks');
            const overlay = document.getElementById('navOverlay');

            function toggleMenu() {
                hamburger.classList.toggle('open');
                navLinks.classList.toggle('open');
                overlay.classList.toggle('active');
                document.body.style.overflow = navLinks.classList.contains('open') ? 'hidden' : '';
            }

            function closeMenu() {
                hamburger.classList.remove('open');
                navLinks.classList.remove('open');
                overlay.classList.remove('active');
                document.body.style.overflow = '';
            }

            hamburger.addEventListener('click', toggleMenu);
            overlay.addEventListener('click', closeMenu);

            // Close on link click (mobile)
            navLinks.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', closeMenu);
            });

            // Close on Escape key
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && navLinks.classList.contains('open')) {
                    closeMenu();
                }
            });

            // Update navbar background on scroll
            const navbar = document.getElementById('navbar');
            let lastScroll = 0;
            window.addEventListener('scroll', () => {
                const currentScroll = window.pageYOffset;
                if (currentScroll > 80) {
                    navbar.style.background = 'rgba(15, 27, 45, 0.95)';
                    navbar.style.borderBottom = '1px solid rgba(45, 212, 160, 0.08)';
                } else {
                    navbar.style.background = 'rgba(15, 27, 45, 0.85)';
                    navbar.style.borderBottom = '1px solid rgba(226, 232, 240, 0.06)';
                }
                lastScroll = currentScroll;
            });
        })();
    </script>

</body>
</html>