:root {
    --bg: #080705;
    --bg2: #100d09;
    --card: rgba(25,20,14,.76);
    --gold: #d1a95e;
    --gold2: #f1d28c;
    --gold3: #8f6c35;
    --text: #f6f0e5;
    --muted: #bdb3a4;
    --line: rgba(209,169,94,.24);
    --shadow: 0 30px 80px rgba(0,0,0,.45);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 75% 5%, rgba(139,101,42,.16), transparent 26rem),
        radial-gradient(circle at 10% 35%, rgba(111,79,35,.09), transparent 30rem),
        linear-gradient(180deg, #080705 0%, #0c0a07 45%, #070605 100%);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .21;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

a {
    color: inherit;
}

.wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

header {
    position: relative;
    z-index: 5;
    border-bottom: 1px solid var(--line);
    background: rgba(8,7,5,.72);
    backdrop-filter: blur(18px);
}

.nav {
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand img {
    width: 69px;
    height: 69px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.brand-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--gold2);
}

.brand-small {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

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

.status {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--gold2);
    background: rgba(209,169,94,.06);
    font-size: 14px;
    white-space: nowrap;
}

.hero {
    min-height: 680px;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 54px;
    padding: 64px 0 74px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .18em;
    font-weight: 700;
    margin-bottom: 21px;
}

.eyebrow:before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--gold);
}

h1 {
    margin: 0;
    max-width: 760px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 6.2vw, 88px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 700;
}

h1 span {
    color: var(--gold2);
}

.hero-copy {
    max-width: 690px;
    margin: 29px 0 0;
    color: #d3cabc;
    font-size: clamp(17px, 1.8vw, 21px);
}

.offer {
    margin-top: 34px;
    width: fit-content;
    padding: 19px 25px;
    border: 1px solid rgba(209,169,94,.42);
    border-radius: 19px;
    background:
        linear-gradient(135deg, rgba(209,169,94,.14), rgba(209,169,94,.035));
    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 14px 44px rgba(0,0,0,.23);
}

.offer-top {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.offer-price {
    margin-top: 2px;
    color: var(--gold2);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: clamp(33px, 4vw, 52px);
}

.actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 31px;
}

.btn {
    display: inline-flex;
    min-height: 55px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 750;
    transition: .2s ease;
}

.btn-primary {
    color: #151007;
    background: linear-gradient(135deg, #f0d28b, #bc8b43);
    box-shadow: 0 13px 32px rgba(158,113,52,.23);
}

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.btn-secondary {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.025);
    color: #eee6d9;
}

.btn-secondary:hover {
    border-color: rgba(209,169,94,.55);
    background: rgba(209,169,94,.06);
}

.hero-art {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-art:before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209,169,94,.13), transparent 64%);
    filter: blur(4px);
}

.logo-big {
    position: relative;
    width: min(420px, 90%);
    aspect-ratio: 1/1;
    object-fit: contain;
    filter:
        drop-shadow(0 36px 70px rgba(0,0,0,.65))
        drop-shadow(0 0 35px rgba(209,169,94,.10));
}

.quick {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.012);
}

.quick-grid {
    min-height: 126px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.quick-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 28px;
    border-right: 1px solid var(--line);
}

.quick-item:last-child {
    border-right: 0;
}

.quick-icon {
    font-size: 22px;
    margin-bottom: 5px;
}

.quick-title {
    color: var(--gold2);
    font-weight: 760;
    font-size: 18px;
}

.quick-text {
    color: var(--muted);
    font-size: 14px;
}

.section {
    padding: 104px 0;
}

.section-head {
    max-width: 780px;
    margin-bottom: 50px;
}

.kicker {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12px;
    font-weight: 750;
}

h2 {
    margin: 12px 0 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 63px);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.lead {
    color: var(--muted);
    font-size: 18px;
    max-width: 680px;
}

.moments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.moment {
    min-height: 255px;
    padding: 31px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(209,169,94,.09), transparent 40%),
        var(--card);
    box-shadow: var(--shadow);
}

.moment-num {
    color: var(--gold3);
    font-family: Georgia, serif;
    font-size: 42px;
    margin-bottom: 42px;
}

.moment h3 {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 26px;
    color: var(--gold2);
}

.moment p {
    margin: 0;
    color: var(--muted);
}

.price-section {
    position: relative;
    overflow: hidden;
}

.price-card {
    padding: 65px;
    border: 1px solid rgba(209,169,94,.36);
    border-radius: 30px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(214,171,91,.13), transparent 34rem),
        rgba(23,18,12,.78);
    box-shadow: var(--shadow);
}

.price-mini {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .19em;
    font-size: 13px;
}

.price-main {
    margin: 10px 0 4px;
    color: var(--gold2);
    font-family: Georgia, serif;
    font-size: clamp(64px, 10vw, 120px);
    line-height: 1;
}

.price-desc {
    margin: 0 auto;
    color: #d7cec0;
    max-width: 630px;
    font-size: 19px;
}

.cups {
    margin-top: 43px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
}

.cup {
    padding: 25px 10px 20px;
    border-radius: 17px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.16);
}

.cup-symbol {
    display: block;
    font-size: 34px;
    margin-bottom: 7px;
    filter: sepia(1);
}

.cup strong {
    display: block;
    color: var(--gold2);
    font-size: 21px;
}

.route {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center;
}

.address {
    margin: 24px 0;
    padding: 21px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.address-label {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.address-main {
    margin-top: 4px;
    font-size: 22px;
    color: var(--gold2);
    font-weight: 760;
}

.maps {
    display: grid;
    gap: 14px;
}

.map-card {
    display: flex;
    align-items: center;
    min-height: 132px;
    padding: 26px;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    text-decoration: none;
    background: rgba(23,19,14,.74);
    box-shadow: var(--shadow);
    transition: .2s ease;
}

.map-card:hover {
    transform: translateY(-3px);
    border-color: rgba(209,169,94,.55);
    background: rgba(32,25,17,.85);
}

.map-icon {
    width: 63px;
    height: 63px;
    flex: 0 0 63px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 900;
}

.yandex {
    background: #fff;
    color: #ed1c24;
}

.gis {
    background: #2eaf59;
    color: #fff;
}

.map-title {
    font-size: 21px;
    font-weight: 760;
}

.map-text {
    color: var(--muted);
    font-size: 14px;
    margin-top: 3px;
}

.arrow {
    margin-left: auto;
    color: var(--gold2);
    font-size: 28px;
}

.final {
    padding: 85px 0 105px;
    text-align: center;
}

.final-box {
    padding: 75px 30px;
    border-radius: 30px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 50% 100%, rgba(209,169,94,.11), transparent 50%),
        rgba(18,15,11,.63);
}

.final h2 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.final p {
    color: var(--muted);
    font-size: 18px;
    max-width: 620px;
    margin: 0 auto 28px;
}

.seo-copy {
    max-width: 830px;
    margin: 0 auto 75px;
    padding-top: 65px;
    border-top: 1px solid var(--line);
    color: #978f84;
    font-size: 14px;
    line-height: 1.75;
}

.seo-copy strong {
    color: #c0b4a2;
}

footer {
    border-top: 1px solid var(--line);
    padding: 31px 0 35px;
    color: #8e8579;
    font-size: 13px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 50px;
        text-align: center;
    }

    .hero-copy {
        margin-left: auto;
        margin-right: auto;
    }

    .eyebrow {
        justify-content: center;
    }

    .offer {
        margin-left: auto;
        margin-right: auto;
    }

    .actions {
        justify-content: center;
    }

    .hero-art {
        margin-top: -10px;
    }

    .logo-big {
        width: min(340px, 78vw);
    }

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

    .quick-item:nth-child(2) {
        border-right: 0;
    }

    .quick-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .moments {
        grid-template-columns: 1fr;
    }

    .route {
        grid-template-columns: 1fr;
    }

    .cups {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 620px) {
    .wrap {
        width: min(100% - 28px, 1180px);
    }

    .nav {
        min-height: 79px;
    }

    .brand img {
        width: 54px;
        height: 54px;
    }

    .brand-name {
        font-size: 19px;
    }

    .brand-small {
        display: none;
    }

    .status {
        padding: 8px 11px;
        font-size: 12px;
    }

    .hero {
        min-height: auto;
        padding-bottom: 57px;
    }

    h1 {
        font-size: clamp(46px, 14vw, 65px);
    }

    .hero-copy {
        font-size: 17px;
    }

    .offer {
        width: 100%;
    }

    .actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .quick-item {
        padding: 21px 16px;
    }

    .quick-title {
        font-size: 16px;
    }

    .quick-text {
        font-size: 12px;
    }

    .section {
        padding: 76px 0;
    }

    .price-card {
        padding: 45px 18px 26px;
    }

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

    .cups .cup:last-child {
        grid-column: 1 / -1;
    }

    .moment {
        min-height: auto;
    }

    .moment-num {
        margin-bottom: 25px;
    }

    .map-card {
        padding: 20px 17px;
    }

    .map-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .footer-inner {
        flex-direction: column;
    }
}

.muted-inline{color:var(--muted)}

/* ===== COFFE V4.1 VISUAL BEGIN ===== */

/* ---------------------------------------------------------
   Общая атмосфера
--------------------------------------------------------- */

body {
    background:
        radial-gradient(
            ellipse at 74% 7%,
            rgba(188, 139, 67, .13) 0%,
            rgba(116, 80, 33, .055) 23%,
            transparent 45%
        ),
        radial-gradient(
            ellipse at 14% 31%,
            rgba(155, 110, 48, .07),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #070604 0%,
            #0d0b08 43%,
            #080705 100%
        );
}


/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

header {
    box-shadow:
        0 8px 35px rgba(0,0,0,.18),
        inset 0 -1px rgba(209,169,94,.035);
}

.nav {
    min-height: 86px;
}

.brand img {
    width: 62px;
    height: 62px;
}

.brand-name {
    letter-spacing: .075em;
}

.status {
    position: relative;
    padding-left: 31px;
}

.status::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #d7b36a;
    box-shadow:
        0 0 0 4px rgba(215,179,106,.08),
        0 0 15px rgba(215,179,106,.38);
}


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

.hero {
    position: relative;
    isolation: isolate;
    min-height: 620px;

    grid-template-columns:
        minmax(0, 1.13fr)
        minmax(330px, .87fr);

    gap: 35px;

    padding-top: 58px;
    padding-bottom: 68px;
}


/* Мягкий камчатский силуэт.
   Это чистый CSS, никаких картинок и внешних запросов. */

.hero::before {
    content: "";
    position: absolute;

    z-index: -2;

    left: -9vw;
    right: -9vw;
    bottom: 0;

    height: 285px;

    pointer-events: none;

    opacity: .32;

    background:
        linear-gradient(
            141deg,
            transparent 0 41%,
            rgba(168,122,58,.12) 41.2% 42%,
            transparent 42.2%
        )
        14% 100% / 380px 240px no-repeat,

        linear-gradient(
            218deg,
            transparent 0 42%,
            rgba(168,122,58,.10) 42.2% 43%,
            transparent 43.2%
        )
        29% 100% / 420px 255px no-repeat,

        linear-gradient(
            141deg,
            transparent 0 44%,
            rgba(200,153,79,.11) 44.2% 45%,
            transparent 45.2%
        )
        64% 100% / 485px 280px no-repeat,

        linear-gradient(
            219deg,
            transparent 0 44%,
            rgba(200,153,79,.095) 44.2% 45%,
            transparent 45.2%
        )
        84% 100% / 420px 250px no-repeat;
}


/* мягкое затемнение под текстом */

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;

    left: -120px;
    top: 38px;

    width: 690px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(5,4,3,.65),
            rgba(5,4,3,.24) 52%,
            transparent 72%
        );

    pointer-events: none;
}


.eyebrow {
    margin-bottom: 18px;
    color: #d9b56d;
}

h1 {
    max-width: 720px;

    font-size:
        clamp(56px, 5.8vw, 82px);

    line-height: .965;
    letter-spacing: -.043em;

    text-shadow:
        0 4px 22px rgba(0,0,0,.24);
}

h1 span {
    color: #f0cf88;

    text-shadow:
        0 0 32px rgba(208,164,83,.07);
}


.hero-copy {
    max-width: 620px;

    margin-top: 24px;

    font-size:
        clamp(17px, 1.45vw, 20px);

    line-height: 1.62;

    color: #cdc4b7;
}


/* ---------------------------------------------------------
   Главный оффер
--------------------------------------------------------- */

.offer {
    position: relative;

    overflow: hidden;

    margin-top: 27px;

    max-width: 555px;

    padding:
        17px
        23px
        18px;

    border-color:
        rgba(209,169,94,.37);

    border-radius: 17px;

    background:
        linear-gradient(
            110deg,
            rgba(209,169,94,.115),
            rgba(209,169,94,.025) 62%
        ),
        rgba(16,13,9,.60);

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 16px 45px rgba(0,0,0,.20);
}

.offer::after {
    content: "";

    position: absolute;

    top: -80%;
    left: -38%;

    width: 50%;
    height: 270%;

    transform: rotate(19deg);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,231,180,.028),
            transparent
        );

    pointer-events: none;
}

.offer-top {
    font-size: 11px;

    letter-spacing: .18em;

    color: #aaa092;
}

.offer-price {
    margin-top: 4px;

    font-size:
        clamp(34px, 3.3vw, 47px);

    line-height: 1.12;
}


/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.actions {
    margin-top: 26px;
}

.btn {
    min-height: 53px;

    border-radius: 13px;

    letter-spacing: .005em;

    box-shadow:
        inset 0 1px rgba(255,255,255,.06);

    transition:
        transform .20s ease,
        filter .20s ease,
        border-color .20s ease,
        background .20s ease,
        box-shadow .20s ease;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            #efd18a 0%,
            #d0a157 52%,
            #b9843e 100%
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.28),
        0 13px 32px rgba(158,113,52,.19);
}

.btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.32),
        0 18px 40px rgba(158,113,52,.26);
}

.btn-secondary:hover {
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Большой логотип
--------------------------------------------------------- */

.hero-art {
    align-self: center;

    min-height: 470px;

    padding:
        25px
        0
        12px;

    overflow: visible;
}

.hero-art::before {
    width: 395px;
    height: 395px;

    background:
        radial-gradient(
            circle,
            rgba(209,169,94,.105),
            rgba(167,117,48,.035) 44%,
            transparent 68%
        );
}

.hero-art::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    border: 1px solid
        rgba(209,169,94,.07);

    border-radius: 50%;

    box-shadow:
        0 0 80px rgba(193,143,65,.035);

    pointer-events: none;
}

.logo-big {
    width:
        min(365px, 83%);

    max-height: 440px;

    object-fit: contain;

    transform:
        translateY(4px);

    filter:
        drop-shadow(
            0 28px 48px
            rgba(0,0,0,.54)
        )
        drop-shadow(
            0 0 26px
            rgba(209,169,94,.075)
        );
}


/* ---------------------------------------------------------
   Быстрые преимущества
--------------------------------------------------------- */

.quick {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.016),
            rgba(255,255,255,.006)
        );
}

.quick-grid {
    min-height: 116px;
}

.quick-item {
    padding:
        22px
        25px;

    transition:
        background .2s ease;
}

.quick-item:hover {
    background:
        rgba(209,169,94,.026);
}

.quick-icon {
    color: #ddba73;
}

.quick-title {
    font-size: 17px;
}


/* ---------------------------------------------------------
   Секции
--------------------------------------------------------- */

.section {
    padding:
        94px
        0;
}

.section-head {
    margin-bottom: 43px;
}

h2 {
    max-width: 810px;

    font-size:
        clamp(39px, 4.5vw, 60px);
}


/* ---------------------------------------------------------
   Карточки
--------------------------------------------------------- */

.moments {
    gap: 15px;
}

.moment {
    position: relative;

    overflow: hidden;

    min-height: 238px;

    padding: 29px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(209,169,94,.072),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(28,23,17,.76),
            rgba(17,14,11,.72)
        );

    box-shadow:
        0 20px 58px rgba(0,0,0,.27);

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.moment:hover {
    transform: translateY(-4px);

    border-color:
        rgba(209,169,94,.40);
}

.moment-num {
    margin-bottom: 33px;

    color:
        rgba(209,169,94,.48);
}


/* ---------------------------------------------------------
   Большая цена
--------------------------------------------------------- */

.price-card {
    position: relative;

    overflow: hidden;

    padding:
        58px
        54px;

    border-color:
        rgba(209,169,94,.30);

    background:
        radial-gradient(
            ellipse at 50% -15%,
            rgba(214,171,91,.14),
            transparent 47%
        ),
        linear-gradient(
            145deg,
            rgba(27,21,14,.84),
            rgba(15,12,9,.80)
        );

    box-shadow:
        0 32px 90px rgba(0,0,0,.37);
}

.price-card::before {
    content: "";

    position: absolute;

    inset: 1px;

    pointer-events: none;

    border-radius: 29px;

    border-top:
        1px solid rgba(255,238,202,.035);
}

.price-main {
    font-size:
        clamp(70px, 8.5vw, 108px);

    text-shadow:
        0 12px 45px rgba(0,0,0,.25);
}

.cup {
    border-color:
        rgba(209,169,94,.18);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(0,0,0,.12)
        );

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.cup:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(209,169,94,.38);
}


/* ---------------------------------------------------------
   Карты
--------------------------------------------------------- */

.map-card {
    min-height: 122px;

    background:
        linear-gradient(
            145deg,
            rgba(27,22,16,.80),
            rgba(17,14,11,.76)
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.29);
}

.map-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 26px 65px rgba(0,0,0,.37);
}


/* ---------------------------------------------------------
   Финальный CTA
--------------------------------------------------------- */

.final-box {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 110%,
            rgba(209,169,94,.14),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(25,20,14,.75),
            rgba(14,12,9,.65)
        );

    box-shadow:
        0 28px 80px rgba(0,0,0,.29);
}


/* ---------------------------------------------------------
   Desktop wide
--------------------------------------------------------- */

@media (min-width: 1250px) {

    .hero {
        grid-template-columns:
            1.17fr
            .83fr;
    }

    .logo-big {
        width:
            min(380px, 82%);
    }

}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 900px) {

    .hero {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 26px;

        padding-top: 48px;
        padding-bottom: 58px;
    }

    .hero::after {
        left: 50%;
        top: 30px;

        transform:
            translateX(-50%);

        width: 90vw;
    }

    .hero-copy {
        max-width: 650px;
    }

    .hero-art {
        min-height: auto;

        padding-top: 5px;
    }

    .hero-art::after {
        width: 300px;
        height: 300px;
    }

    .logo-big {
        width:
            min(325px, 68vw);

        max-height: 360px;
    }

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 620px) {

    .nav {
        min-height: 74px;
    }

    .brand img {
        width: 50px;
        height: 50px;
    }

    .status {
        padding:
            7px
            10px
            7px
            26px;
    }

    .status::before {
        left: 11px;
    }

    .hero {
        padding-top: 39px;
        padding-bottom: 48px;
    }

    .hero::before {
        height: 190px;

        opacity: .24;
    }

    h1 {
        font-size:
            clamp(43px, 13.3vw, 62px);

        line-height: .98;
    }

    .hero-copy {
        margin-top: 20px;

        font-size: 16px;

        line-height: 1.56;
    }

    .offer {
        margin-top: 23px;

        padding:
            15px
            17px;
    }

    .offer-price {
        font-size:
            clamp(30px, 9vw, 39px);
    }

    .actions {
        margin-top: 21px;
    }

    .hero-art {
        padding-bottom: 2px;
    }

    .logo-big {
        width:
            min(285px, 73vw);

        max-height: 310px;
    }

    .quick-grid {
        min-height: auto;
    }

    .quick-item {
        min-height: 104px;

        padding:
            18px
            15px;
    }

    .section {
        padding:
            70px
            0;
    }

    .price-card {
        padding:
            42px
            17px
            24px;
    }

    .price-main {
        font-size:
            clamp(64px, 22vw, 92px);
    }

    .moment {
        padding: 26px;

        border-radius: 19px;
    }

    .map-card {
        min-height: 108px;
    }

}


/* ===== COFFE V4.1 VISUAL END ===== */

/* ===== COFFE V4.2 BEGIN ===== */


/* =========================================================
   ЛОГО — убираем ощущение чёрного квадратного изображения
   ========================================================= */

.hero-art {
    isolation: isolate;
}

.logo-big {
    /*
      Исходное изображение имеет чёрный фон.
      Lighten позволяет ему визуально раствориться
      на фоне страницы, сохраняя золото логотипа.
    */
    mix-blend-mode: lighten;

    width: min(390px, 86%);

    transform:
        translateY(0)
        scale(1.015);

    filter:
        contrast(1.04)
        saturate(1.04)
        drop-shadow(0 28px 52px rgba(0,0,0,.55))
        drop-shadow(0 0 30px rgba(204,151,68,.10));
}


/* дополнительное мягкое сияние вместо квадрата */

.hero-art::before {
    width: 430px;
    height: 430px;

    background:
        radial-gradient(
            circle,
            rgba(211,165,84,.115) 0%,
            rgba(172,118,50,.050) 34%,
            rgba(120,82,37,.020) 54%,
            transparent 71%
        );

    filter: blur(5px);
}


.hero-art::after {
    width: 390px;
    height: 390px;

    border-color:
        rgba(214,172,92,.075);

    box-shadow:
        inset 0 0 65px rgba(209,169,94,.020),
        0 0 90px rgba(209,169,94,.032);
}


/* =========================================================
   HERO — чуть более собранная композиция
   ========================================================= */

.hero {
    min-height: 610px;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(370px,.92fr);

    column-gap: 52px;
}


.hero > div:first-child {
    position: relative;
    z-index: 2;
}


h1 {
    font-size:
        clamp(58px,5.95vw,84px);

    letter-spacing: -.047em;
}


.hero-copy {
    max-width: 650px;
}


/* =========================================================
   ОФФЕР 150 ₽
   ========================================================= */

.offer {
    max-width: 520px;

    padding:
        16px 21px
        17px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.045),
        inset 0 0 40px rgba(209,169,94,.025),
        0 17px 50px rgba(0,0,0,.22);
}


.offer-price {
    font-size:
        clamp(36px,3.45vw,49px);

    letter-spacing: -.018em;
}


/* =========================================================
   КНОПКИ
   ========================================================= */

.btn-primary {
    position: relative;
    overflow: hidden;
}


.btn-primary::after {
    content: "";

    position: absolute;
    top: -90%;
    left: -80%;

    width: 55%;
    height: 290%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    transition:
        left .45s ease;

    pointer-events: none;
}


.btn-primary:hover::after {
    left: 140%;
}


/* =========================================================
   ПОЛОСА ПРЕИМУЩЕСТВ
   ========================================================= */

.quick-item {
    position: relative;
}


.quick-item::after {
    content: "";

    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 0;

    height: 1px;

    transform: scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(209,169,94,.42),
            transparent
        );

    transition:
        transform .25s ease;
}


.quick-item:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   НЕМНОГО БОЛЬШЕ ГЛУБИНЫ ФОНА
   ========================================================= */

.hero::before {
    opacity: .39;

    filter:
        drop-shadow(
            0 -10px 25px
            rgba(177,126,55,.025)
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;

        column-gap: 0;
    }

    .logo-big {
        width:
            min(340px,72vw);
    }

    .hero-art::before {
        width: 350px;
        height: 350px;
    }

    .hero-art::after {
        width: 315px;
        height: 315px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .logo-big {
        width:
            min(295px,76vw);
    }

    .hero-art::before {
        width: 300px;
        height: 300px;
    }

    .hero-art::after {
        width: 265px;
        height: 265px;
    }

    .offer-price {
        font-size:
            clamp(31px,9.3vw,40px);
    }

}


/* ===== COFFE V4.2 END ===== */

/* ===== COFFE V4.3 TRANSPARENT LOGO BEGIN ===== */


/* Настоящая прозрачность — никаких blend-костылей */

.logo-big {
    mix-blend-mode: normal !important;

    background: transparent !important;

    width: min(405px, 88%);

    max-height: 455px;

    object-fit: contain;

    transform:
        translateY(0)
        scale(1.015);

    filter:
        drop-shadow(
            0 28px 58px
            rgba(0,0,0,.52)
        )
        drop-shadow(
            0 0 25px
            rgba(207,157,75,.08)
        );
}


.brand img {
    mix-blend-mode: normal !important;

    background: transparent !important;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 14px
            rgba(0,0,0,.45)
        );
}


/* Убираем лишнее кольцо вокруг большого знака.
   Сам логотип теперь достаточно выразительный. */

.hero-art::after {
    opacity: .34;
}


.hero-art::before {
    width: 445px;
    height: 445px;

    background:
        radial-gradient(
            circle,
            rgba(210,164,82,.095) 0%,
            rgba(151,103,42,.035) 43%,
            transparent 70%
        );

    filter: blur(8px);
}


/* Телефон */

@media (max-width: 900px) {

    .logo-big {
        width: min(350px, 73vw);
    }

}


@media (max-width: 620px) {

    .logo-big {
        width: min(300px, 78vw);

        max-height: 325px;
    }

}


/* ===== COFFE V4.3 TRANSPARENT LOGO END ===== */

/* ===== COFFE V4.4 EXACT USER LOGO BEGIN ===== */

/*
  V4.4 использует изображение, полученное непосредственно
  из присланного пользователем PNG с настоящим alpha-каналом.
  Никаких flood-fill / chroma key / blend-mode больше не нужно.
*/

.logo-big {
    mix-blend-mode: normal !important;
    background: transparent !important;
    width: min(425px, 90%);
    max-height: 470px;
    object-fit: contain;
    transform: none;
    filter:
        drop-shadow(0 28px 60px rgba(0,0,0,.46))
        drop-shadow(0 0 30px rgba(209,169,94,.075));
}

.brand img {
    mix-blend-mode: normal !important;
    background: transparent !important;
    object-fit: contain;
}

.hero-art::after {
    opacity: .18;
}

@media (max-width: 900px) {
    .logo-big {
        width: min(355px, 74vw);
    }
}

@media (max-width: 620px) {
    .logo-big {
        width: min(305px, 79vw);
        max-height: 330px;
    }
}

/* ===== COFFE V4.4 EXACT USER LOGO END ===== */