/* Dreamery Global Branding - Defined from Reference Images */
:root {
    /* Colors */
    --brand-bg: #F6F3EE;
    /* Original off-white base */
    --brand-bg-texture: radial-gradient(circle at center, #FBF8F4, #F2EFE9);
    /* subtle vignette */

    --text-primary: #1C2B1C;
    /* Very dark green/black for main text */
    --text-secondary: #4A5D4A;
    /* Muted green for subtext */

    --accent-green: #2F4F2F;
    /* Deep Forest Green (Logo/Impact color) */
    --accent-gold: #B89C6F;
    /* Antique Gold (Dividers/Accents) */
    --accent-gold-light: #D4B98C;

    --white: #ffffff;

    --btn-primary-bg: #2F4F2F;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #2F4F2F;

    --spacing-unit: 8px;
    --container-width: 1100px;

    /* Typography */
    /* Playfair Display for "DREAMERY" and Headings */
    --font-heading: 'Playfair Display', serif;
    /* Lato for Body to be clean but softer than Inter */
    --font-body: 'Lato', sans-serif;

    --shadow-soft: 0 4px 20px rgba(47, 79, 47, 0.08);
    /* Green tinted shadow */
}

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

html {
    scroll-behavior: smooth;
    font-family: var(--font-body);
    background: var(--brand-bg);
    background-image: var(--brand-bg-texture);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
.logo,
.logo-small {
    font-family: var(--font-heading);
    color: var(--accent-green);
    font-weight: 600;
    /* Serif Boldness */
    letter-spacing: 0.02em;
    /* Slight tracking for elegance */
    line-height: 1.25;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 24px;
    color: var(--accent-gold);
    /* Gold for main Hero title as per ref? Actually ref has green text, gold dividers. Let's make H1 Gold for prestige or Green. Let's stick to Green for readability but maybe Gold accent. */
    color: #2F4F2F;
    /* Sticking to the deep green for legibility, Gold for accents */
}

h2 {
    font-size: 2.8rem;
    margin-bottom: 16px;
    text-align: center;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Decorative Dividers (The "Gold Lines" from reference) */
.decorative-divider,
.decorative-divider-center,
.decorative-divider-left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0;
    color: var(--accent-gold);
}

.decorative-divider span,
.decorative-divider-center span,
.decorative-divider-left span {
    padding: 0 16px;
    font-size: 1.2rem;
    position: relative;
}

/* Lines before and after the symbol */
.decorative-divider span::before,
.decorative-divider span::after,
.decorative-divider-center span::before,
.decorative-divider-center span::after,
.decorative-divider-left span::before,
.decorative-divider-left span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background-color: var(--accent-gold);
}

.decorative-divider span::before,
.decorative-divider-center span::before {
    right: 100%;
}

.decorative-divider span::after,
.decorative-divider-center span::after {
    left: 100%;
}

.decorative-divider-left {
    justify-content: flex-start;
}

/* For left align, only show the AFTER line generally? Or just style differently */
.decorative-divider-left span::before {
    display: none;
}

.decorative-divider-left span::after {
    width: 100px;
    left: 120%;
    /* Offset */
}


/* Utility Classes */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* Button Styling Updated to Brand */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 2px;
    /* Less rounded, more classic */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    box-shadow: 0 4px 10px rgba(47, 79, 47, 0.2);
}

.btn-primary:hover {
    background-color: var(--text-primary);
    /* Darker green/black on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(47, 79, 47, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-green);
    border-color: var(--accent-gold);
    /* Gold border for secondary */
}

.btn-secondary:hover {
    background-color: var(--accent-gold);
    color: var(--white);
    border-color: var(--accent-gold);
}

.btn-small {
    padding: 10px 24px;
    font-size: 0.8rem;
}

.btn-full {
    width: 100%;
    display: block;
}

.btn-large {
    padding: 18px 48px;
    font-size: 1.1rem;
}


/* 1) Sticky Header */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(246, 243, 238, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(184, 156, 111, 0.2);
    /* faint gold border */
    padding: 16px 0;
}

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

.logo {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    color: var(--accent-gold);
    /* Gold logo */
}

.desktop-nav a {
    margin: 0 20px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-gold);
    transition: width 0.3s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}


/* 2) Hero Section */
.hero {
    padding: 80px 0 120px;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-text {
    animation: fadeIn 1s ease-out;
}

.subhead {
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 24px;
    border-left: 2px solid var(--accent-gold);
    padding-left: 24px;
}

/* Trust Icons/Chips Redesign */
.trust-chips {
    display: flex;
    flex-direction: column;
    /* Stacked lists or flex layout? Ref shows impact separated. Let's do horizontal row of feature items. */
    flex-direction: row;
    gap: 24px;
    margin-bottom: 40px;
    border-top: 1px solid rgba(184, 156, 111, 0.3);
    border-bottom: 1px solid rgba(184, 156, 111, 0.3);
    padding: 16px 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    color: var(--accent-green);
    font-style: italic;
    font-size: 1rem;
}

.trust-item .icon {
    color: var(--accent-gold);
}


.hero-ctas {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

/* Hero Image with Gold Frame */
.hero-image-container {
    position: relative;
    padding: 12px;
    /* space for border offset */
}

.hero-img {
    position: relative;
    z-index: 2;
    border-radius: 2px;
    box-shadow: var(--shadow-soft);
}

.frame-border {
    position: absolute;
    top: 0;
    left: 24px;
    /* Offset frame */
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent-gold);
    z-index: 1;
    opacity: 0.6;
}

.disclaimer {
    font-size: 0.75rem;
    color: #888;
    margin-top: 16px;
    font-family: var(--font-body);
}

/* 3) Value Grid */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 60px 32px;
    text-align: center;
}

.value-card h3 {
    color: var(--accent-green);
}

.card-divider {
    width: 40px;
    height: 2px;
    background: var(--accent-gold);
    margin: 12px auto;
}

/* 4) Choose Your Set (Product Tiles) */
.sets-section {
    padding: 100px 0;
    background: var(--white);
    position: relative;
}

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.sets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
}

.product-tile {
    background: var(--brand-bg);
    /* Use brand bg instead of pure white */
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
    border-color: var(--accent-gold-light);
}

.product-image {
    margin-bottom: 24px;
}

.product-info h3 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.tile-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
    margin: 12px auto;
}

.meaning {
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-green);
    margin-bottom: 12px;
}

.desc {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 5) Rewards Summary */
.rewards-section {
    padding: 100px 32px;
}

.rewards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: #fff;
    padding: 60px;
    border: 1px solid #eee;
    box-shadow: var(--shadow-soft);
}

.reward-list {
    margin-top: 32px;
}

.reward-row {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    color: var(--accent-green);
}

.reward-row span {
    color: var(--accent-gold);
    margin-right: 12px;
    font-size: 1.4rem;
}

.highlight-card {
    background: var(--accent-green);
    /* Dark Green Card for Ultimate Reward */
    color: #fff;
    padding: 40px;
    text-align: center;
    border: 2px solid var(--accent-gold);
}

.highlight-card h3 {
    color: var(--accent-gold);
    margin-bottom: 16px;
}

.highlight-card p {
    color: #e0e0e0;
    margin-bottom: 24px;
}

.card-divider-light {
    width: 60px;
    height: 1px;
    background: var(--accent-gold);
    margin: 0 auto 20px;
}

.highlight-card .btn {
    background: var(--accent-gold);
    color: #2F4F2F;
}

/* 6) Timeline */
.timeline-section {
    padding: 80px 32px;
    text-align: center;
}

.timeline-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.step {
    border: 1px solid var(--accent-gold);
    padding: 16px 24px;
    border-radius: 50%;
    /* Circle nodes? Or boxes. Let's do elegant boxes from ref style? Actually ref shows simple text lists. Let's do diamonds or circles. */
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
}

.step .label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-green);
}

.connector {
    width: 40px;
    height: 1px;
    background: var(--accent-gold);
}


/* 7) Impact Section matches Reference Image 2 style */
.impact-section {
    padding: 100px 0;
    background: linear-gradient(to right, #FBF8F4, #fff);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-text {
    padding-left: 20px;
}

.about-text h2 {
    text-align: left;
    color: var(--accent-green);
}

.impact-lead {
    font-size: 1.3rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.impact-badges {
    display: flex;
    gap: 12px;
    margin: 24px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* 8) Final CTA */
.final-cta {
    padding: 120px 0;
    text-align: center;
    background: var(--accent-green);
    /* Full green band at bottom */
    color: #fff;
}

.final-cta h2 {
    color: var(--accent-gold);
}

.final-cta p {
    color: #e0e0e0;
}

.final-cta .btn {
    background: var(--accent-gold);
    color: var(--accent-green);
}

/* Footer */
footer {
    padding: 60px 0;
    text-align: center;
    background: #1a2e1a;
    /* Very dark green */
    color: #8fa08f;
}

.logo-small {
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-gold);
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.copyright {
    margin-top: 24px;
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .hero-grid,
    .value-grid,
    .sets-grid,
    .rewards-grid,
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trust-chips {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .timeline-steps {
        flex-direction: column;
    }

    .connector {
        width: 1px;
        height: 40px;
    }
}

/* Animation Classes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}