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

    <!-- ============================================================
             GRACE FLOW · FULL STYLE SYSTEM
             Navy    #0F172A
             Rose Gold #E8A87C
             Light   #F1F5F9
             ============================================================ -->
    <style>
        /* ---------- RESET & BASE ---------- */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --navy: #0F172A;
            --rose-gold: #E8A87C;
            --light: #F1F5F9;

            --navy-light: #1e293b;
            --rose-light: #f3c6a0;
            --rose-dark: #c27a4a;

            --text-light: var(--light);
            --text-dark: var(--navy);

            --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--light);
            color: var(--navy);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* ---------- TYPOGRAPHY ---------- */
        h1,
        h2,
        h3,
        h4 {
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        h1 {
            font-size: clamp(2.6rem, 8vw, 5rem);
        }
        h2 {
            font-size: clamp(2rem, 5vw, 3.2rem);
        }
        h3 {
            font-size: clamp(1.3rem, 3vw, 1.8rem);
        }

        p {
            font-size: 1.05rem;
            max-width: 60ch;
            color: var(--navy-light);
        }

        a {
            color: var(--rose-gold);
            text-decoration: none;
            transition: color var(--transition);
        }
        a:hover {
            color: var(--rose-light);
        }

        .section-label {
            display: inline-block;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--rose-gold);
            border: 1px solid var(--rose-gold);
            padding: 0.2rem 1rem;
            border-radius: 100px;
            margin-bottom: 0.8rem;
        }

        /* ---------- BUTTONS ---------- */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 2rem;
            border-radius: 100px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all var(--transition);
            font-family: inherit;
        }

        .btn-primary {
            background: var(--rose-gold);
            color: var(--navy);
        }
        .btn-primary:hover {
            background: var(--rose-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(232, 168, 124, 0.35);
        }

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

        /* ---------- NAV / HEADER ---------- */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(15, 23, 42, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(232, 168, 124, 0.15);
            transition: background var(--transition);
        }

        .nav {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--light);
            letter-spacing: -0.04em;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .nav-logo span {
            color: var(--rose-gold);
        }
        .nav-logo .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--rose-gold);
            border-radius: 50%;
            margin-left: 2px;
        }

        /* ---- nav links (desktop) ---- */
        .nav-links {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            list-style: none;
        }
        .nav-links a {
            color: var(--light);
            font-size: 0.9rem;
            font-weight: 500;
            position: relative;
            padding: 0.2rem 0;
            transition: color var(--transition);
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--rose-gold);
            transition: width var(--transition);
        }
        .nav-links a:hover {
            color: var(--rose-gold);
        }
        .nav-links a:hover::after {
            width: 100%;
        }

        /* ---- hamburger (mobile) ---- */
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 8px;
            transition: background var(--transition);
            z-index: 1001;
        }
        .hamburger:hover {
            background: rgba(232, 168, 124, 0.1);
        }
        .hamburger span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--light);
            border-radius: 4px;
            transition: all 0.35s cubic-bezier(0.68, -0.6, 0.32, 1);
            margin: 3px 0;
        }
        /* hamburger open state */
        .hamburger.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* ---- mobile menu overlay ---- */
        .nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 999;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .nav-overlay.open {
            display: flex;
            opacity: 1;
            pointer-events: all;
        }
        .nav-overlay .overlay-links {
            list-style: none;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 2.2rem;
        }
        .nav-overlay .overlay-links a {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--light);
            transition: color var(--transition);
        }
        .nav-overlay .overlay-links a:hover {
            color: var(--rose-gold);
        }
        .nav-overlay .overlay-cta {
            margin-top: 3rem;
        }

        /* ---------- HERO SECTIONS ---------- */

        /* — shared hero base — */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 7rem 2rem 4rem;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 1280px;
            margin: 0 auto;
            width: 100%;
            display: grid;
            gap: 3rem;
        }

        /* — Hero #1 · Navy · dark — */
        .hero-dark {
            background: var(--navy);
            color: var(--light);
        }
        .hero-dark p {
            color: rgba(241, 245, 249, 0.8);
        }
        .hero-dark .hero-content {
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }
        .hero-dark .hero-text .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
        }

        .hero-dark .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-dark .hero-visual .morph-box {
            width: 100%;
            max-width: 420px;
            aspect-ratio: 1 / 1;
            border-radius: 48% 52% 44% 56% / 50% 44% 56% 50%;
            background: linear-gradient(135deg, var(--rose-gold), var(--rose-dark));
            opacity: 0.25;
            animation: morph 8s ease-in-out infinite alternate;
        }
        .hero-dark .hero-visual .morph-glow {
            position: absolute;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232, 168, 124, 0.2), transparent 70%);
            filter: blur(60px);
            animation: pulse-glow 6s ease-in-out infinite alternate;
        }
        .hero-dark .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @keyframes morph {
            0% {
                border-radius: 48% 52% 44% 56% / 50% 44% 56% 50%;
            }
            100% {
                border-radius: 30% 70% 70% 30% / 50% 40% 60% 50%;
            }
        }
        @keyframes pulse-glow {
            0% {
                transform: scale(1);
                opacity: 0.3;
            }
            100% {
                transform: scale(1.8);
                opacity: 0.6;
            }
        }

        /* — Hero #2 · Light · Rose-gold accents — */
        .hero-light {
            background: var(--light);
            color: var(--navy);
        }
        .hero-light .hero-content {
            grid-template-columns: 1fr 1fr;
            align-items: center;
            direction: rtl;
            /* swap for visual right */;
        }
        .hero-light .hero-content>* {
            direction: ltr;
        }
        .hero-light .hero-text .section-label {
            background: rgba(232, 168, 124, 0.1);
            border-color: var(--rose-gold);
        }
        .hero-light .hero-text .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
        }
        .hero-light .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-light .hero-visual .card-stack {
            width: 100%;
            max-width: 380px;
            background: white;
            padding: 2rem;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
            border: 1px solid rgba(232, 168, 124, 0.15);
        }
        .hero-light .hero-visual .card-stack .bar {
            height: 8px;
            background: var(--rose-gold);
            border-radius: 100px;
            margin: 0.6rem 0;
            opacity: 0.3;
        }
        .hero-light .hero-visual .card-stack .bar:nth-child(2) {
            width: 80%;
        }
        .hero-light .hero-visual .card-stack .bar:nth-child(3) {
            width: 60%;
        }
        .hero-light .hero-visual .card-stack .bar:nth-child(4) {
            width: 70%;
        }
        .hero-light .hero-visual .card-stack .rose-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--rose-gold);
            margin-bottom: 1rem;
        }

        /* — Hero #3 · Split navy/rose — */
        .hero-split {
            background: linear-gradient(135deg, var(--navy) 50%, var(--rose-gold) 50%);
            color: var(--light);
        }
        .hero-split .hero-content {
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }
        .hero-split .hero-text .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
        }
        .hero-split .hero-text p {
            color: rgba(241, 245, 249, 0.85);
        }
        .hero-split .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-split .hero-visual .ring {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.25);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hero-split .hero-visual .ring::before {
            content: '✦';
            font-size: 3rem;
            color: white;
            opacity: 0.7;
        }
        .hero-split .hero-visual .ring::after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 1px dashed rgba(255, 255, 255, 0.15);
            animation: spin 20s linear infinite;
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ---------- RESPONSIVE ---------- */

        /* Tablet & small desktop */
        @media (max-width: 1024px) {
            .hero-dark .hero-content,
            .hero-light .hero-content,
            .hero-split .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2.5rem;
            }
            .hero-light .hero-content {
                direction: ltr;
            }
            .hero-light .hero-content>* {
                direction: ltr;
            }
            .hero-dark .hero-text .btn-group,
            .hero-light .hero-text .btn-group,
            .hero-split .hero-text .btn-group {
                justify-content: center;
            }
            .hero-dark .hero-visual .morph-box {
                max-width: 280px;
            }
            .hero-light .hero-visual .card-stack {
                max-width: 320px;
                margin: 0 auto;
            }
            .hero-split {
                background: linear-gradient(180deg, var(--navy) 50%, var(--rose-gold) 50%);
            }
            .hero-split .hero-visual .ring {
                width: 160px;
                height: 160px;
            }
            .hero-split .hero-visual .ring::after {
                width: 210px;
                height: 210px;
            }
            p {
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .nav {
                padding: 0 1.2rem;
                height: 60px;
            }
            .nav-links {
                display: none;
            }
            .hamburger {
                display: flex;
            }

            .hero {
                padding: 5rem 1.2rem 3rem;
                min-height: 90vh;
            }

            .hero-dark .hero-content,
            .hero-light .hero-content,
            .hero-split .hero-content {
                gap: 2rem;
            }

            .hero-dark .hero-visual .morph-box {
                max-width: 200px;
            }
            .hero-light .hero-visual .card-stack {
                max-width: 260px;
                padding: 1.5rem;
            }
            .hero-split .hero-visual .ring {
                width: 130px;
                height: 130px;
            }
            .hero-split .hero-visual .ring::after {
                width: 170px;
                height: 170px;
            }
            .hero-split .hero-visual .ring::before {
                font-size: 2rem;
            }

            .btn {
                padding: 0.65rem 1.5rem;
                font-size: 0.9rem;
            }

            .nav-overlay .overlay-links a {
                font-size: 1.5rem;
            }
        }

        /* Small phones */
        @media (max-width: 420px) {
            .hero-dark .hero-visual .morph-box {
                max-width: 150px;
            }
            .hero-light .hero-visual .card-stack {
                max-width: 200px;
                padding: 1rem;
            }
            .hero-split .hero-visual .ring {
                width: 100px;
                height: 100px;
            }
            .hero-split .hero-visual .ring::after {
                width: 130px;
                height: 130px;
            }
            h1 {
                font-size: 2rem;
            }
            .nav-logo {
                font-size: 1.2rem;
            }
        }

        /* ---------- UTILITY ---------- */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .text-rose {
            color: var(--rose-gold);
        }
        .text-navy {
            color: var(--navy);
        }
        .bg-navy {
            background: var(--navy);
        }
        .bg-light {
            background: var(--light);
        }

        /* ---------- SCROLL INDICATOR (tiny grace note) ---------- */
        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            color: rgba(241, 245, 249, 0.4);
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            animation: float-down 2s ease-in-out infinite;
        }
        .scroll-indicator .line {
            width: 1px;
            height: 32px;
            background: var(--rose-gold);
            opacity: 0.4;
        }
        @keyframes float-down {
            0%,
            100% {
                transform: translateX(-50%) translateY(0);
            }
            50% {
                transform: translateX(-50%) translateY(6px);
            }
        }

        /* ---------- JAVASCRIPT FOR HAMBURGER ---------- */
        /* (inline for demo — works right away) */
    </style>
</head>

<body>

    <!-- ===== HEADER / NAV ===== -->
    <header class="header" id="header">
        <nav class="nav">
            <div class="nav-logo">
                Grace<span>Flow</span><span class="dot"></span>
            </div>

            <ul class="nav-links">
                <li><a href="#hero-dark">Home</a></li>
                <li><a href="#hero-light">About</a></li>
                <li><a href="#hero-split">Work</a></li>
                <li><a href="#">Journal</a></li>
                <li><a href="#" class="btn btn-primary" style="padding:0.5rem 1.6rem;">Let's talk</a></li>
            </ul>

            <button class="hamburger" id="hamburger" aria-label="Toggle menu">
                <span></span><span></span><span></span>
            </button>
        </nav>
    </header>

    <!-- ===== MOBILE OVERLAY ===== -->
    <div class="nav-overlay" id="navOverlay">
        <ul class="overlay-links">
            <li><a href="#hero-dark">Home</a></li>
            <li><a href="#hero-light">About</a></li>
            <li><a href="#hero-split">Work</a></li>
            <li><a href="#">Journal</a></li>
            <li class="overlay-cta"><a href="#" class="btn btn-primary">Let's talk</a></li>
        </ul>
    </div>

    <!-- ===== HERO · 1 · DARK ===== -->
    <section class="hero hero-dark" id="hero-dark">
        <div class="hero-content">
            <div class="hero-text">
                <span class="section-label">✦ graceful</span>
                <h1>Where elegance <br />meets <span class="text-rose">flow</span>.</h1>
                <p>Curated digital experiences bathed in navy depth and rose-gold warmth. Minimal, intentional, alive.</p>
                <div class="btn-group">
                    <a href="#" class="btn btn-primary">Explore</a>
                    <a href="#" class="btn btn-outline">Our story</a>
                </div>
            </div>
            <div class="hero-visual">
                <div class="morph-glow"></div>
                <div class="morph-box"></div>
            </div>
        </div>
        <div class="scroll-indicator">
            <span>scroll</span>
            <div class="line"></div>
        </div>
    </section>

    <!-- ===== HERO · 2 · LIGHT ===== -->
    <section class="hero hero-light" id="hero-light">
        <div class="hero-content">
            <div class="hero-text">
                <span class="section-label">✦ refined</span>
                <h2>Designed with <span class="text-rose">intention</span>.</h2>
                <p>Soft light, warm accents, and clean structure — every detail serves a purpose. Grace flows through every pixel.</p>
                <div class="btn-group">
                    <a href="#" class="btn btn-primary">See work</a>
                    <a href="#" class="btn btn-outline" style="border-color:var(--navy);color:var(--navy);">Process</a>
                </div>
            </div>
            <div class="hero-visual">
                <div class="card-stack">
                    <div class="rose-dot"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar" style="width:45%;"></div>
                    <div style="margin-top:1.2rem;display:flex;gap:0.5rem;">
                        <span style="width:12px;height:12px;border-radius:50%;background:var(--rose-gold);"></span>
                        <span style="width:12px;height:12px;border-radius:50%;background:var(--navy);opacity:0.2;"></span>
                        <span style="width:12px;height:12px;border-radius:50%;background:var(--navy);opacity:0.2;"></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== HERO · 3 · SPLIT ===== -->
    <section class="hero hero-split" id="hero-split">
        <div class="hero-content">
            <div class="hero-text">
                <span class="section-label" style="background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);color:white;">✦ balance</span>
                <h2>Two worlds, <br />one <span class="text-rose">rhythm</span>.</h2>
                <p>Navy meets rose gold in a bold dialogue of depth and warmth. Grace lives in the in-between.</p>
                <div class="btn-group">
                    <a href="#" class="btn btn-primary" style="background:var(--light);color:var(--navy);">Get started</a>
                    <a href="#" class="btn btn-outline" style="border-color:var(--light);color:var(--light);">Learn more</a>
                </div>
            </div>
            <div class="hero-visual">
                <div class="ring"></div>
            </div>
        </div>
    </section>

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

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

            hamburger.addEventListener('click', toggleMenu);

            // close on link click
            overlay.querySelectorAll('.overlay-links a').forEach(link => {
                link.addEventListener('click', () => {
                    if (overlay.classList.contains('open')) toggleMenu();
                });
            });

            // close on resize to desktop
            window.addEventListener('resize', () => {
                if (window.innerWidth > 768 && overlay.classList.contains('open')) {
                    toggleMenu();
                }
            });
        })();
    </script>

</body>
</html>