.landing-page {
    background: #f7f1ea;
    color: #241813;
    --landing-readable-text-color: #6c625b;
}

.landing-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
    background: rgba(24, 15, 12, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-brand {
    font-weight: 700;
    color: white;
    letter-spacing: 0.04em;
}

.landing-login-button {
    text-transform: none;
    font-weight: 600;
    color: #241813;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
}

.landing-primary-button {
    text-transform: none;
    font-weight: 600;
}

.landing-hero-section,
.landing-image-background-section {
    background-image: linear-gradient(rgba(24, 15, 12, 0.58), rgba(24, 15, 12, 0.58)), url('/images/landing/S0/Landing-Background.jpg');
    background-size: cover;
    background-position: center;
}

.landing-hero-section,
.landing-image-background-section,
.landing-control-section {
    color: white;
}

.landing-hero-section .mud-typography,
.landing-image-background-section .mud-typography,
.landing-control-section .mud-typography {
    color: white;
}

.landing-hero-section {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
}

.landing-hero-title {
    font-weight: 700;
    line-height: 1.05;
    color: white;
    max-width: 780px;
}

.landing-hero-subtitle {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 760px;
    font-size: 1.35rem;
    line-height: 1.65;
}

.landing-occasion-icons {
    flex-wrap: wrap;
    gap: 10px;
}

.landing-occasion-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 1.4rem;
}

.landing-hero-cta-row {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.landing-hero-cta-text {
    color: white;
    font-size: 1.08rem;
    line-height: 1.6;
}

.landing-hero-button {
    padding: 12px 36px;
}

.landing-hero-side-image {
    min-height: 460px;
    border-radius: 22px;
    background-image: url('/images/landing/S0/Landing-Wife.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.landing-section-heading {
    max-width: 760px;
}

.landing-section-title {
    font-weight: 700;
}

.landing-section-accent {
    font-style: italic;
    color: #46614e;
    font-weight: 500;
}

.landing-readable-secondary-text {
    color: var(--landing-readable-text-color);
    font-size: 1.08rem;
    line-height: 1.7;
}

.landing-step-card {
    height: 100%;
}

.landing-step-header {
    gap: 14px;
}

.landing-step-number {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #241813;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.landing-step-title {
    font-weight: 700;
    font-size: 1.15rem;
}

.landing-dark-text-section {
    color: #f8f0ea;
}

.landing-dark-section-title {
    font-weight: 700;
    color: white;
}

.landing-dark-section-accent {
    font-style: italic;
    color: white;
    font-weight: 500;
}

.landing-dark-readable-text {
    color: white;
    font-size: 1.12rem;
    line-height: 1.75;
}

.landing-busy-life-item {
    gap: 14px;
}

.landing-busy-life-icon {
    color: #f1c6ba;
    flex-shrink: 0;
}

.landing-flowers-footer-text {
    max-width: 900px;
}

.landing-control-item {
    height: 100%;
}

.landing-control-section {
    background-image: linear-gradient(rgba(24, 15, 12, 0.58), rgba(24, 15, 12, 0.58)), url('/images/landing/S0/Landing-Background.jpg');
    background-size: cover;
    background-position: center;
}

.landing-control-icon {
    color: #f1c6ba;
    font-size: 1.5rem;
}

.landing-control-title {
    font-weight: 700;
    color: white;
}

.landing-control-section .landing-readable-secondary-text,
.landing-control-section .landing-section-title {
    color: white;
}

.landing-dark-section-text {
    color: white;
}

.landing-people-body-text {
    max-width: 680px;
}

.landing-bottom-image {
    min-height: 420px;
    border-radius: 18px;
    background-image: url('/images/landing/S0/Landing-Mom.jpg');
    background-size: cover;
    background-position: center;
}

.landing-bottom-cta-title {
    line-height: 1.1;
}

.landing-bottom-cta-text {
    max-width: 640px;
}

.landing-page-modern {
    --landing-modern-bg: #fbf6ef;
    --landing-modern-surface: rgba(255, 252, 248, 0.88);
    --landing-modern-text: #29352f;
    --landing-modern-muted: #64625e;
    --landing-modern-primary: #2f5a49;
    --landing-modern-primary-dark: #24493b;
    --landing-modern-accent: #f2a08f;
    --landing-modern-overline: #d5977f;
    --landing-modern-border: rgba(48, 52, 45, 0.12);
    --landing-modern-shadow: 0 18px 40px rgba(45, 35, 26, 0.08);
    color: var(--landing-modern-text);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.95), rgba(255,255,255,0) 28%),
        linear-gradient(180deg, #fffdfb 0%, #fbf6ef 42%, #f8f1e9 100%);
}

.landing-hero-section-modern {
    background-image: url('/images/landing/modern/landing-top.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.landing-topbar-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 30px;
}

.landing-topbar-actions-modern {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-brand-block-modern {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: auto;
}

.landing-brand-modern {
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #24312b;
}

.landing-brand-tagline-modern {
    letter-spacing: 0.04em;
    color: #54635b;
    font-weight: 700;
    text-transform: none;
}

.landing-nav-links-modern {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}

.landing-nav-links-modern a {
    color: #36423c;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.landing-nav-links-modern a:hover {
    color: var(--landing-modern-primary);
}

.landing-topbar-button-modern,
.landing-hero-button-modern,
.landing-bottom-button-modern {
    text-transform: none;
    font-weight: 700;
    border-radius: 18px;
    box-shadow: none;
}

.landing-topbar-button-modern,
.landing-hero-button-modern {
    background: var(--landing-modern-primary);
    color: white;
}

.landing-topbar-button-modern:hover,
.landing-hero-button-modern:hover {
    background: var(--landing-modern-primary-dark);
}

.landing-topbar-button-modern {
    min-width: 168px;
    min-height: 50px;
}

.landing-topbar-button-secondary-modern {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(47, 90, 73, 0.35);
    color: var(--landing-modern-primary);
}

.landing-topbar-button-secondary-modern:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(47, 90, 73, 0.5);
}

.landing-florist-footer-modern {
    text-align: center;
    padding: 1rem 1rem 1.5rem;
}

.landing-florist-link-modern {
    font-size: 0.82rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: none;
}

.landing-florist-link-modern:hover {
    color: var(--landing-modern-primary);
    text-decoration: underline;
}

.landing-hero-grid-modern {
    min-height: 720px;
}

.landing-hero-copy-modern {
    max-width: 520px;
}

.landing-hero-pill-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    width: fit-content;
    border-radius: 999px;
    background: rgba(241, 245, 243, 0.95);
    color: var(--landing-modern-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.78rem;
}

.landing-hero-title-modern {
    font-size: clamp(2.7rem, 4.8vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-weight: 500;
    color: #23312b;
}

.landing-hero-subtitle-modern {
    color: var(--landing-modern-muted);
    line-height: 1.7;
    font-weight: 400;
    max-width: 500px;
}

.landing-hero-button-modern {
    min-width: 220px;
    min-height: 56px;
}

.landing-hero-feature-row-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.landing-hero-feature-modern {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.landing-feature-icon-modern {
    color: var(--landing-modern-primary);
    margin-top: 2px;
}

.landing-feature-title-modern {
    font-weight: 700;
    color: #2d3933;
}

.landing-feature-text-modern {
    color: var(--landing-modern-muted);
    line-height: 1.4;
}

.landing-hero-visual-modern {
    position: relative;
    min-height: 620px;
}

.landing-phone-image-modern {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: min(100%, 340px);
    width: clamp(260px, 48%, 340px);
    height: auto;
    display: block;
    transform: translateY(34px);
}

.landing-content-section-modern {
    position: relative;
}

.landing-soft-section-modern {
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.6));
}

.landing-section-overline-modern {
    color: var(--landing-modern-overline);
    letter-spacing: 0.14em;
    font-weight: 800;
    text-transform: uppercase;
}

.landing-section-title-modern {
    color: #27332d;
    font-weight: 500;
}

.landing-section-subtitle-modern {
    color: var(--landing-modern-muted);
}

.landing-steps-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.landing-step-card-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.landing-step-icon-wrap-modern {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--landing-modern-primary);
}

.landing-step-icon-green-modern {
    background: #edf5ef;
}

.landing-step-icon-blue-modern {
    background: #edf0fb;
}

.landing-step-icon-blush-modern {
    background: #fbf1ea;
}

.landing-step-number-modern {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #d5b069;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: -26px;
}

.landing-step-title-modern {
    color: #2f3732;
    font-weight: 700;
}

.landing-step-text-modern {
    color: var(--landing-modern-muted);
    max-width: 280px;
    line-height: 1.6;
}

.landing-occasion-panel-modern {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: center;
    padding: 28px;
    border-radius: 24px;
    background: var(--landing-modern-surface);
    box-shadow: var(--landing-modern-shadow);
}

.landing-occasion-title-modern {
    color: #2b352f;
    line-height: 1.05;
    font-weight: 500;
}

.landing-occasion-grid-modern {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.landing-occasion-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    min-height: 110px;
}

.landing-occasion-icon-modern {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8ece6;
    color: #9e5f57;
    font-size: 1.8rem;
}

.landing-occasion-item-modern span {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: #3f413d;
}

.landing-occasion-item-text-modern {
    align-items: flex-start;
    justify-content: center;
}

.landing-benefits-grid-modern {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.landing-benefit-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #46504a;
}

.landing-benefit-icon-modern {
    color: var(--landing-modern-primary);
    font-size: 2rem;
}

.landing-bottom-section-modern {
    background: linear-gradient(135deg, #28473b 0%, #1e382e 100%);
    color: white;
    overflow: hidden;
}

.landing-bottom-panel-modern {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 30px;
    align-items: stretch;
}

.landing-bottom-copy-modern {
    padding: 56px 0 56px 0;
    max-width: 520px;
}

.landing-bottom-title-modern {
    color: white;
    font-weight: 500;
    line-height: 1.08;
}

.landing-bottom-subtitle-modern,
.landing-bottom-note-modern,
.landing-rating-text-modern,
.landing-check-row-modern span {
    color: rgba(255,255,255,0.86);
}

.landing-bottom-button-modern {
    margin-top: 18px;
    min-width: 220px;
    min-height: 56px;
    background: var(--landing-modern-accent);
    color: white;
}

.landing-bottom-button-modern:hover {
    background: #e8907d;
}

.landing-bottom-note-modern {
    margin-top: 14px;
}

.landing-bottom-right-modern {
    position: relative;
    min-height: 360px;
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    gap: 20px;
}

.landing-bottom-checks-modern {
    z-index: 1;
    padding-left: 10px;
}

.landing-check-row-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.landing-check-row-modern .mud-icon-root {
    color: #dcefe6;
}

.landing-rating-block-modern {
    margin-top: 14px;
}

.landing-rating-stars-modern {
    color: #f2b48d;
    letter-spacing: 0.2em;
    font-size: 1.1rem;
}

.landing-bottom-image-modern {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 1260px) {
    .landing-occasion-grid-modern {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-bottom-panel-modern {
        grid-template-columns: 1fr;
    }

    .landing-bottom-right-modern {
        grid-template-columns: 1fr 1fr;
        padding-bottom: 30px;
    }
}

@media (max-width: 959px) {
    .landing-hero-content {
        align-items: center;
        text-align: center;
    }

    .landing-hero-cta-row {
        justify-content: center;
    }

    .landing-occasion-icons {
        justify-content: center;
    }

    .landing-topbar-modern {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .landing-topbar-actions-modern {
        flex-wrap: wrap;
        justify-content: center;
    }

    .landing-hero-copy-modern {
        margin-inline: auto;
        align-items: center;
        text-align: center;
    }

    .landing-hero-feature-row-modern,
    .landing-steps-grid-modern,
    .landing-benefits-grid-modern {
        grid-template-columns: 1fr;
    }

    .landing-hero-visual-modern {
        min-height: 420px;
    }

    .landing-occasion-panel-modern {
        grid-template-columns: 1fr;
    }

    .landing-occasion-copy-modern {
        text-align: center;
    }
}

@media (max-width: 680px) {
    .landing-nav-links-modern {
        gap: 14px;
    }

    .landing-nav-links-modern a {
        font-size: 0.88rem;
    }

    .landing-hero-grid-modern {
        min-height: auto;
    }

    .landing-hero-visual-modern {
        min-height: 260px;
    }

    .landing-phone-image-modern {
        transform: translateY(18px);
    }

    .landing-occasion-grid-modern,
    .landing-bottom-right-modern {
        grid-template-columns: 1fr;
    }

    .landing-bottom-copy-modern,
    .landing-bottom-checks-modern {
        padding-inline: 20px;
    }
}