:root {
    /* Color Palette */
    --bg-primary: #f7f3ea;
    --bg-secondary: #efe7d6;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-solid: #ffffff;
    --accent-primary: #d97706;
    --accent-secondary: #65a30d;
    --accent-highlight: #fbbf24;
    --support-brown: #7c5a3c;
    --support-green: #d9f99d;
    --text-primary: #2b2b2b;
    --text-secondary: #6b7280;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    
    /* Spacing & Layout */
    --container-max: 1320px;
    --spacing-desktop: 110px;
    --spacing-tablet: 80px;
    --spacing-mobile: 60px;
    
    /* Visuals */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --shadow-soft: 0 10px 40px rgba(217, 119, 6, 0.08);
    --shadow-hover: 0 20px 40px rgba(217, 119, 6, 0.15);
    --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.05);
    --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

/* ==========================================
   LAYOUT & UTILITIES
========================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .container { padding: 0 24px; }
}

@media (min-width: 1024px) {
    .container { padding: 0 32px; }
}

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

@media (min-width: 1024px) {
    .grid-12 { gap: 32px; }
}

.section {
    padding: var(--spacing-mobile) 0;
}

@media (min-width: 768px) {
    .section { padding: var(--spacing-tablet) 0; }
}

@media (min-width: 1024px) {
    .section { padding: var(--spacing-desktop) 0; }
}

.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }

.section-header {
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--support-brown);
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* ==========================================
   HEADER (FLOATING RESORT NAVBAR)
========================================== */
.header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: var(--container-max);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: var(--transition);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--support-brown);
}

.logo svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
}

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

@media (min-width: 1024px) {
    .nav-links { display: flex; }
}

.nav-link {
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    padding: 8px 0;
}

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

.nav-link:hover { color: var(--accent-primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Mobile Menu Toggle */
.mobile-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

@media (min-width: 1024px) {
    .mobile-toggle { display: none; }
}

.hamburger {
    width: 24px;
    height: 2px;
    background: var(--support-brown);
    position: relative;
    transition: var(--transition);
}

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--support-brown);
    left: 0;
    transition: var(--transition);
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.mobile-menu .nav-link {
    font-size: 1.5rem;
}

/* ==========================================
   BUTTONS
========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-highlight));
    color: #fff;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.2);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(217, 119, 6, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: var(--support-brown);
    border: 1px solid rgba(124, 90, 60, 0.2);
}

.btn-secondary:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.nav-cta {
    display: none;
}

@media (min-width: 1024px) {
    .nav-cta { display: inline-flex; }
}

/* ==========================================
   HERO SECTION (IMMERSIVE ENTRY)
========================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.1), transparent 50%),
                radial-gradient(circle at bottom left, rgba(101, 163, 13, 0.05), transparent 50%);
    z-index: -1;
}

.hero .grid-12 {
    align-items: center;
}

.hero-content {
    grid-column: span 12;
    z-index: 2;
}

@media (min-width: 1024px) {
    .hero-content { grid-column: span 5; }
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--support-brown);
    line-height: 1.1;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .hero-title { font-size: 4rem; }
}

.hero-desc {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 480px;
}

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

.hero-visual {
    grid-column: span 12;
    position: relative;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

@media (min-width: 1024px) {
    .hero-visual { 
        grid-column: 7 / span 6;
        height: 600px; 
    }
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 10s ease-out;
}

.hero:hover .hero-img {
    transform: scale(1);
}

/* Floating Particles */
.particle {
    position: absolute;
    background: var(--accent-highlight);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.4;
    animation: float 8s infinite ease-in-out;
}

.p1 { width: 8px; height: 8px; top: 20%; left: 10%; animation-delay: 0s; }
.p2 { width: 12px; height: 12px; top: 60%; left: 80%; animation-delay: 2s; }
.p3 { width: 6px; height: 6px; top: 80%; left: 30%; animation-delay: 4s; }

/* ==========================================
   CARDS (ROOMS & EXPERIENCES)
========================================== */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

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

.card-img-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .card-img {
    transform: scale(1.08);
}

.card-content {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-tag {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--support-brown);
    margin-bottom: 12px;
}

.card-desc {
    color: var(--text-secondary);
    margin-bottom: 24px;
    flex: 1;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 16px;
    margin-top: auto;
}

.card-price {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.125rem;
}

/* ==========================================
   EXPERIENCES MINIMAL CARDS
========================================== */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
    background: var(--surface-solid);
    padding: 32px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    text-align: center;
    transition: var(--transition);
}

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

.feature-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--accent-primary);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ==========================================
   REVIEWS SECTION
========================================== */
.review-card {
    background: var(--surface);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255,255,255,0.6);
}

.stars {
    color: var(--accent-highlight);
    margin-bottom: 16px;
    display: flex;
    gap: 4px;
}

.stars svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.review-text {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 24px;
}

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

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
}

.reviewer-info h4 {
    font-size: 1rem;
    font-weight: 600;
}

.reviewer-info span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ==========================================
   LEGAL / CONTENT PAGES
========================================== */
.page-header {
    padding: 160px 0 80px;
    background: var(--bg-secondary);
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
    color: var(--support-brown);
}

.content-block {
    max-width: 800px;
    margin: 0 auto;
    background: var(--surface-solid);
    padding: 48px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.content-block h2 {
    margin: 32px 0 16px;
    color: var(--support-brown);
}

.content-block p {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

/* Forms */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 16px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

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

/* ==========================================
   FOOTER
========================================== */
.footer {
    background: var(--surface-solid);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

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

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

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

.footer-desc {
    color: var(--text-secondary);
    max-width: 300px;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--support-brown);
}

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

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(0,0,0,0.05);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ==========================================
   ANIMATIONS
========================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Scroll Animation Classes */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ENDFILE */<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Golden Orchard Retreat | Sunlit Simplicity</title>
    <meta name="description" content="A peaceful countryside resort surrounded by sunlit orchards, warm breeze, and slow living luxury.">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Header Navigation -->
    <header class="header">
        <div class="nav">
            <a href="index.html" class="logo">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                    <path d="M2 12h20"></path>
                </svg>
                Golden Orchard
            </a>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link active">Home</a></li>
                <li><a href="rooms.html" class="nav-link">Rooms</a></li>
                <li><a href="experiences.html" class="nav-link">Experiences</a></li>
                <li><a href="reviews.html" class="nav-link">Reviews</a></li>
                <li><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
            <a href="rooms.html" class="btn btn-primary nav-cta">Book Stay</a>
            <button class="mobile-toggle" aria-label="Toggle Menu">
                <div class="hamburger"></div>
            </button>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div class="mobile-menu">
        <a href="index.html" class="nav-link active">Home</a>
        <a href="rooms.html" class="nav-link">Rooms</a>
        <a href="experiences.html" class="nav-link">Experiences</a>
        <a href="reviews.html" class="nav-link">Reviews</a>
        <a href="contact.html" class="nav-link">Contact</a>
        <a href="rooms.html" class="btn btn-primary">Book Stay</a>
    </div>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-bg-overlay"></div>
        <div class="particle p1"></div>
        <div class="particle p2"></div>
        <div class="particle p3"></div>
        <div class="container grid-12">
            <div class="hero-content" data-animate>
                <h1 class="hero-title">Escape to Sunlit Simplicity</h1>
                <p class="hero-desc">Discover a peaceful countryside resort surrounded by golden orchards, warm breezes, and slow-living luxury. Your boutique escape awaits.</p>
                <div class="hero-actions">
                    <a href="rooms.html" class="btn btn-primary">Book Your Stay</a>
                    <a href="experiences.html" class="btn btn-secondary">Explore Retreat</a>
                </div>
            </div>
            <div class="hero-visual" data-animate class="delay-2">
                <img src="https://images.unsplash.com/photo-1542314831-c6a4d81908d2?auto=format&fit=crop&w=800&q=80" alt="Luxury countryside villa window looking out to golden orchard trees" class="hero-img">
            </div>
        </div>
    </section>

    <!-- Features Overview -->
    <section class="section">
        <div class="container">
            <div class="feature-grid">
                <div class="feature-card" data-animate>
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                    </div>
                    <h3 class="feature-title">Orchard Villas</h3>
                    <p class="text-secondary">Premium comfort nested within nature's beauty.</p>
                </div>
                <div class="feature-card" data-animate class="delay-1">
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
                    </div>
                    <h3 class="feature-title">Slow Living</h3>
                    <p class="text-secondary">Unwind at your own pace with mindful amenities.</p>
                </div>
                <div class="feature-card" data-animate class="delay-2">
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
                    </div>
                    <h3 class="feature-title">Spa & Wellness</h3>
                    <p class="text-secondary">Holistic treatments inspired by natural botanicals.</p>
                </div>
                <div class="feature-card" data-animate class="delay-3">
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-4v-4h6v2z"></path><path d="M3 19a2 2 0 0 0 2 2h4v-4H3v2z"></path></svg>
                    </div>
                    <h3 class="feature-title">Orchard Dining</h3>
                    <p class="text-secondary">Farm-to-table cuisine under the setting sun.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Rooms -->
    <section class="section" style="background: var(--bg-secondary);">
        <div class="container">
            <div class="section-header text-center" data-animate>
                <h2 class="section-title">The Stay Experience</h2>
                <p class="section-desc">Thoughtfully designed spaces that blend warm natural materials with modern premium luxury.</p>
            </div>
            
            <div class="card-grid">
                <!-- Room 1 -->
                <div class="card" data-animate>
                    <div class="card-img-wrapper">
                        <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=600&q=80" alt="Premium luxury villa bedroom with warm sunlight and soft linens" class="card-img">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">Villa</span>
                        <h3 class="card-title">Golden Hour Villa</h3>
                        <p class="card-desc">A spacious standalone villa featuring a private terrace opening directly into the apple and citrus orchards.</p>
                        <div class="card-footer">
                            <span class="card-price">From $450 / night</span>
                            <a href="rooms.html" class="btn btn-secondary">Details</a>
                        </div>
                    </div>
                </div>

                <!-- Room 2 -->
                <div class="card" data-animate class="delay-1">
                    <div class="card-img-wrapper">
                        <img src="https://images.unsplash.com/photo-1618773928120-2c710d02b9e6?auto=format&fit=crop&w=600&q=80" alt="Sunlit countryside suite with natural wood finishes" class="card-img">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">Suite</span>
                        <h3 class="card-title">Sunlit Suite</h3>
                        <p class="card-desc">Bathing in natural light, this suite offers soft linen bedding, wooden textures, and a soaking tub with valley views.</p>
                        <div class="card-footer">
                            <span class="card-price">From $320 / night</span>
                            <a href="rooms.html" class="btn btn-secondary">Details</a>
                        </div>
                    </div>
                </div>

                <!-- Room 3 -->
                <div class="card" data-animate class="delay-2">
                    <div class="card-img-wrapper">
                        <img src="https://images.unsplash.com/photo-1566665797739-1674de7a421a?auto=format&fit=crop&w=600&q=80" alt="Spacious boutique orchard villa with panoramic countryside views" class="card-img">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">Retreat</span>
                        <h3 class="card-title">The Grand Orchard</h3>
                        <p class="card-desc">Our most expansive offering for families or groups, featuring two bedrooms, a fireplace, and private plunge pool.</p>
                        <div class="card-footer">
                            <span class="card-price">From $680 / night</span>
                            <a href="rooms.html" class="btn btn-secondary">Details</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center" style="margin-top: 48px;" data-animate>
                <a href="rooms.html" class="btn btn-primary">View All Rooms</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="index.html" class="logo">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                        Golden Orchard
                    </a>
                    <p class="footer-desc">A peaceful countryside resort focusing on relaxation, nature, and premium comfort.</p>
                </div>
                <div>
                    <h4 class="footer-title">Explore</h4>
                    <div class="footer-links">
                        <a href="index.html">Home</a>
                        <a href="rooms.html">Rooms & Villas</a>
                        <a href="experiences.html">Experiences</a>
                        <a href="reviews.html">Guest Reviews</a>
                    </div>
                </div>
                <div>
                    <h4 class="footer-title">Legal</h4>
                    <div class="footer-links">
                        <a href="terms.html">Terms of Service</a>
                        <a href="privacy.html">Privacy Policy</a>
                    </div>
                </div>
                <div>
                    <h4 class="footer-title">Connect</h4>
                    <div class="footer-links">
                        <a href="contact.html">Contact Us</a>
                        <a href="https://twitter.com" target="_blank" rel="noopener">Twitter</a>
                        <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                &copy; 2026 nexajovex.xyz. All rights reserved.
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // Mobile menu toggle
        const mobileToggle = document.querySelector('.mobile-toggle');
        const mobileMenu = document.querySelector('.mobile-menu');
        const hamburger = document.querySelector('.hamburger');

        mobileToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('active');
            if(mobileMenu.classList.contains('active')) {
                hamburger.style.background = 'transparent';
                hamburger.style.setProperty('--webkit-transform', 'rotate(45deg)');
            } else {
                hamburger.style.background = 'var(--support-brown)';
            }
        });

        // Scroll Animation Observer
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('[data-animate]').forEach((el) => {
            observer.observe(el);
        });
    </script>
</body>
</html>