:root {
    --sand: #faf7f2;
    --sand-2: #f0ebe0;
    --sand-3: #e4ddd0;
    --sea: #1a6b8a;
    --sea-light: #2a8fad;
    --sea-pale: #e8f4f8;
    --orange: #ff6b35;
    --orange-2: #ff9a3c;
    --ink: #1a1410;
    --ink-2: #4a3f35;
    --ink-3: #8a7d70;
    --green: #2a9d5c;
    --green-light: #3ab86b;
    --green-pale: #f0faf5;
    --green-dark: #1a7a46;
    --green-border: rgba(42, 157, 92, .25);
    --purple: #6050c8;
    --purple-pale: rgba(96, 80, 200, .1);
    --teal: #0f7a6b;
    --teal-pale: rgba(15, 122, 107, .08);
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 100px;
    --t: 0.18s ease;
}

/* @font-face {
    font-family: 'Geologica';
    src: url('/public/fonts/Geologica-Variable.ttf') format('truetype'),
        url('/public/fonts/Geologica-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Unbounded';
    src: url('/public/fonts/Unbounded-Variable.ttf') format('truetype'),
        url('/public/fonts/Unbounded-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
} */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: 'Geologica', sans-serif;
    background: var(--sand);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

main {
    flex: 1
}

ul {
    list-style: none
}

a {
    text-decoration: none;
}

address {
    font-style: normal
}

/* ---- HEADER ---- */
.header {
    background: rgba(250, 247, 242, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sand-3);
    position: sticky;
    top: 0;
    z-index: 50
}

.header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px
}

.logo {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    display: flex;
    align-items: center
}

.logo__accent {
    color: var(--orange)
}

.logo__dot {
    color: var(--sand-3);
    margin: 0 7px
}

.logo__sub {
    color: var(--ink-3);
    font-weight: 300;
    font-size: 13px
}

.header__nav {
    display: flex;
    gap: 24px
}

.header__nav a {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--t)
}

.header__nav a:hover {
    color: var(--sea)
}

.header__nav a.active {
    color: var(--orange)
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.header__phone {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sea);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--t)
}

.header__phone:hover {
    color: var(--sea-light)
}



/* ---- FOOTER ---- */
.footer {
    background: var(--sand-2);
    border-top: 1px solid var(--sand-3);
    padding: 48px 0 24px
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 32px
}

.footer__heading {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px
}

.footer__text {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.7
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer__links a {
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--t)
}

.footer__links a:hover {
    color: var(--sea)
}

.footer__links a.active {
    color: var(--orange)
}

.footer__copy {
    border-top: 1px solid var(--sand-3);
    padding-top: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--ink-3)
}

.footer__disclaimer {
    font-size: 11px;
    color: var(--ink-3);
    background: rgba(42, 157, 92, .05);
    border: 1px solid rgba(42, 157, 92, .15);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-top: 8px;
    line-height: 1.6
}



.footer__join-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: all var(--t);
    margin: 12px 0 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.footer__partner-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--t);
}

.footer__partner-link:hover {
    color: var(--orange);
}
        /* ---- РЕКОМЕНДУЕМ ---- */
        .rec-section {
            padding: 56px 0;
            background: linear-gradient(160deg, var(--sea-pale) 0%, var(--sand) 100%);
            border-bottom: 1px solid var(--sand-3)
        }
    
        .rec-eyebrow {
            font-family: 'Unbounded', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .18em;
            color: var(--orange);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px
        }
    
        .rec-eyebrow::before {
            content: '★';
            color: var(--orange-2);
            font-size: 14px
        }
    
        .rec-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(1.4rem, 3vw, 2rem);
            font-weight: 900;
            letter-spacing: -.5px;
            color: var(--ink);
            margin-bottom: 6px
        }
    
        .rec-sub {
            font-size: 13px;
            color: var(--ink-3);
            margin-bottom: 28px
        }
    
        /* Сетки для разных вариантов */
        .rec-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
    
        .rec-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
        }
    
        .rec-grid-6 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
    
        /* Карточка рекомендации */
        .rec-card {
            background: #fff;
            border: 2px solid var(--orange);
            border-radius: var(--r-lg);
            padding: 22px;
            transition: transform var(--t), box-shadow var(--t);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden
        }
    
        .rec-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--orange), var(--orange-2))
        }
    
        .rec-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(255, 107, 53, .18)
        }
    
        /* Бейдж рекомендации */
        .rec-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: 'Unbounded', sans-serif;
            font-size: 10px;
            font-weight: 700;
            color: var(--orange);
            background: rgba(255, 107, 53, .08);
            padding: 3px 10px;
            border-radius: var(--r-pill);
            margin-bottom: 12px
        }
    
        .rec-badge__star {
            font-size: 11px
        }
    
        .rec-card__name {
            font-family: 'Unbounded', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 6px;
            line-height: 1.3
        }
    
        .rec-card__type {
            font-size: 11px;
            color: var(--ink-3);
            margin-bottom: 10px
        }
    
        .rec-card__why {
            font-size: 13px;
            color: var(--ink-2);
            line-height: 1.6;
            margin-bottom: auto;
            padding-bottom: 16px;
            font-style: italic
        }
    
        .rec-card__meta {
            font-size: 12px;
            color: var(--ink-3);
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 4px
        }
    
        .rec-card__footer {
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 107, 53, .12);
            display: flex;
            justify-content: space-between;
            align-items: center
        }
    
        .rec-card__rating {
            font-family: 'Unbounded', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--orange);
            display: flex;
            align-items: center;
            gap: 4px
        }




/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

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

.fu1 {
    animation: fadeUp .5s ease both .05s
}

.fu2 {
    animation: fadeUp .5s ease both .12s
}

.fu3 {
    animation: fadeUp .5s ease both .19s
}

.fu4 {
    animation: fadeUp .5s ease both .26s
}

.fu5 {
    animation: fadeUp .5s ease both .33s
}

/* ---- RESPONSIVE ---- */
@media(max-width:768px) {

    .header__nav,
    .header__phone {
        display: none
    }

    .sticky-cta {
        display: flex
    }

    .footer__grid,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .partner {
        flex-direction: column
    }

    .o-banner__inner,
    .sea-banner__inner,
    .green-banner__inner {
        flex-direction: column;
        text-align: center
    }

    .hotel-grid,
    .cafe-grid,
    .pharmacy-grid {
        grid-template-columns: 1fr
    }

    .hero__actions {
        flex-direction: column
    }

    .hero__actions .btn,
    .hero__actions .btn-ghost {
        width: 100%;
        justify-content: center
    }

    .hero__stats {
        gap: 20px
    }

    .hero-404__actions {
        flex-direction: column;
        align-items: center
    }

    .hero-404__actions .btn-orange-lg,
    .hero-404__actions .btn-ghost {
        width: 260px;
        justify-content: center
    }

    .footer__inner {
        flex-direction: column;
        text-align: center;
        gap: 8px
    }
}

@media(max-width:480px) {
    .grid-4 {
        grid-template-columns: 1fr
    }

    .filters {
        gap: 6px
    }

    .filter-btn {
        font-size: 10px;
        padding: 7px 14px
    }
}

@media(max-width:400px) {
    .sugg-link {
        font-size: 10px;
        padding: 8px 14px
    }
}