:root {
    --red:#d9362b;
    --orange:#f28b24;
    --cream:#fff8ee;
    --ink:#231f20;
    --muted:#6d6762;
    --green:#568b46;
    --card:#fff;
    --line:#eadfd1
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--ink);
    background:#fff
}

a {
    color:inherit;
    text-decoration:none
}

.wrap {
    width:min(1160px,calc(100% - 36px));
    margin:auto
}

.top {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #eee
}

.nav {
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.logo {
    font-size:30px;
    font-weight:1000;
    letter-spacing:-1px;
    color:var(--red)
}

.logo span {
    color:var(--orange)
}

.links {
    display:flex;
    gap:22px;
    font-size:14px;
    font-weight:700
}

.phone {
    background:var(--ink);
    color:#fff;
    padding:12px 16px;
    border-radius:999px;
    font-weight:800
}

.hero {
    min-height:680px;
    display:grid;
    align-items:center;
    background:radial-gradient(circle at 75% 30%,#ffd6a3 0,transparent 30%),linear-gradient(135deg,#fff9f0,#ffe8c8);
    overflow:hidden
}

.hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:30px
}

.eyebrow {
    display:inline-block;
    padding:8px 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    font-weight:800;
    color:var(--red);
    font-size:13px
}

.hero h1 {
    font-size:clamp(48px,7vw,86px);
    line-height:.92;
    margin:20px 0 18px;
    letter-spacing:-4px
}

.hero h1 em {
    font-style:normal;
    color:var(--red)
}

.lead {
    font-size:21px;
    line-height:1.5;
    color:#514a45;
    max-width:650px
}

.buttons {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px
}

.btn {
    display:inline-block;
    padding:15px 21px;
    border-radius:13px;
    font-weight:900;
    background:var(--red);
    color:#fff
}

.btn.alt {
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line)
}

.food-art {
    position:relative;
    min-height:520px
}

.plate {
    position:absolute;
    inset:55px 15px 20px 30px;
    border-radius:50%;
    background:radial-gradient(circle at 48% 45%,#fff 0 46%,#eee 47% 52%,#fff 53%);
    box-shadow:0 30px 80px #8c4a1d33
}

.burger {
    position:absolute;
    width:330px;
    height:240px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-5deg);
    filter:drop-shadow(0 28px 20px #6b2e162f)
}

.bun,.patty,.cheese,.salad {
    position:absolute;
    left:15px;
    right:15px;
    border-radius:50%
}

.bun.top {
    height:95px;
    top:18px;
    background:linear-gradient(#e9a349,#c66a20);
    border-radius:50% 50% 32% 32%
}

.bun.bottom {
    height:58px;
    bottom:18px;
    background:linear-gradient(#d88630,#b85b19)
}

.patty {
    height:55px;
    bottom:65px;
    background:#5a2e21
}

.cheese {
    height:28px;
    bottom:111px;
    background:#f7b51d;
    clip-path:polygon(0 0,100% 0,88% 100%,60% 55%,33% 100%,0 55%)
}

.salad {
    height:25px;
    bottom:133px;
    background:#5f9e43;
    clip-path:polygon(0 35%,12% 5%,27% 42%,43% 4%,61% 45%,77% 8%,100% 40%,100% 100%,0 100%)
}

.price-bubble {
    position:absolute;
    right:8px;
    top:48px;
    background:var(--red);
    color:#fff;
    width:145px;
    height:145px;
    border-radius:50%;
    display:grid;
    place-content:center;
    text-align:center;
    transform:rotate(8deg);
    font-weight:900;
    font-size:17px;
    box-shadow:0 14px 35px #a5222240
}

.price-bubble b {
    font-size:34px
}

.section {
    padding:10px 0
}

.section.altbg {
    background:var(--cream)
}

.section h2 {
    font-size:clamp(34px,5vw,54px);
    margin:0 0 12px;
    letter-spacing:-2px
}

.sub {
    color:var(--muted);
    font-size:18px;
    max-width:760px;
    line-height:1.55
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:34px
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:26px;
    box-shadow:0 12px 40px #5d3a2010
}

.card h3 {
    font-size:23px;
    margin:10px 0
}

.card .big {
    font-size:34px;
    font-weight:1000;
    color:var(--red)
}

.card p {
    line-height:1.55;
    color:var(--muted)
}

.tag {
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--orange)
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:32px
}

.feature {
    min-height:160px;
    border-radius:20px;
    padding:22px;
    background:var(--ink);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}

.feature:nth-child(2n) {
    background:var(--red)
}

.feature:nth-child(3n) {
    background:var(--orange);
    color:#231f20
}

.feature b {
    font-size:22px
}

.feature small {
    margin-top:6px;
    opacity:.8
}

.menu-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:34px
}

.menu-item {
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line)
}

.menu-pic {
    height:180px;
    display:grid;
    place-content:center;
    font-size:72px;
    background:linear-gradient(145deg,#ffe9ca,#fff6e8)
}

.menu-body {
    padding:20px
}

.menu-body h3 {
    margin:0 0 8px
}

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

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}

.promo {
    border-radius:26px;
    padding:38px;
    background:var(--red);
    color:#fff
}

.promo.dark {
    background:var(--ink)
}

.promo h3 {
    font-size:34px;
    margin:0 0 12px
}

.promo p {
    font-size:17px;
    line-height:1.55;
    opacity:.9
}

.contact {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:26px;
    align-items:stretch
}

.contact-box {
    background:var(--ink);
    color:#fff;
    padding:36px;
    border-radius:25px
}

.contact-box h2 {
    margin-top:0
}

.contact-row {
    padding:14px 0;
    border-bottom:1px solid #ffffff22;
    line-height:1.5
}

.map {
    min-height:430px;
    border:0;
    width:100%;
    border-radius:25px
}

.footer {
    padding:35px 0;
    background:#171414;
    color:#bbb
}

.footer-grid {
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center
}

.footer .logo {
    font-size:25px
}

.notice {
    font-size:13px;
    color:#8c8580;
    margin-top:18px
}

.mobile {
    display:none
}

@media(max-width:850px) {
    .links {
        display:none
    }

    .mobile {
        display:inline
    }

    .hero {
        min-height:auto;
        padding:28px 0
    }

    .hero-grid,.split,.contact {
        grid-template-columns:1fr
    }

    .food-art {
        min-height:420px
    }

    .cards,.menu-grid {
        grid-template-columns:1fr
    }

    .feature-grid {
        grid-template-columns:1fr 1fr
    }

    .hero h1 {
        letter-spacing:-2px
    }

    .contact {
        gap:16px
    }

}

@media(max-width:520px) {
    .wrap {
        width:min(100% - 24px,1160px)
    }

    .phone {
        font-size:13px;
        padding:10px
    }

    .feature-grid {
        grid-template-columns:1fr
    }

    .food-art {
        min-height:350px
    }

    .burger {
        width:270px
    }

    .plate {
        inset:25px 0
    }

    .price-bubble {
        width:110px;
        height:110px;
        font-size:13px
    }

    .price-bubble b {
        font-size:27px
    }

    .section {
        padding:28px 0
    }

    .footer-grid {
        align-items:flex-start;
        flex-direction:column
    }

}

/* Фотография на первом экране */

.food-art {
    display:flex;
    align-items:center;
    justify-content:center
}

.hero-photo {
    display:block;
    width:100%;
    height:480px;
    object-fit:cover;
    border-radius:30px;
    box-shadow:0 25px 65px #8c4a1d30
}

@media(max-width:850px) {
    .hero-photo {
        height:390px
    }

}

@media(max-width:520px) {
    .hero-photo {
        height:320px
    }

}

/* Фирменный фон кафе «Е-ДА!» */

:root {
    --red:#d9231e;
    --orange:#e65b1e;
    --cream:#fff2dd;
    --ink:#29130c;
    --line:#ebd4b6
}

body {
    background:#fff8ec
}

.top {
    background:rgba(255,247,232,.95);
    border-bottom:1px solid #e7cfad
}

.logo {
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:1;
    color:#d83918;
    transform:rotate(-6deg);
    min-width:105px
}

.logo-mark {
    font-size:34px;
    font-weight:1000;
    font-style:italic;
    letter-spacing:-2px;
    text-shadow:1px 2px 0 #fff4e0
}

.logo small {
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
    margin-top:4px;
    color:#d8561b
}

.phone,.btn {
    background:var(--red)
}

.hero,.lunch-section {
    background-color:#fff1d8;
    background-image:url('images/pattern.svg');
    background-repeat:repeat;
    background-size:620px 620px
}

.hero {
    min-height:300px;
    padding:35px 0 30px;
    background-image:linear-gradient(90deg,rgba(255,247,230,.50),rgba(255,244,222,.20)),url('images/pattern.svg')
}

.hero h1 {
    font-size:clamp(47px,6vw,78px);
    letter-spacing:-3px;
    line-height:1.02
}

.hero h1 em,.lunch-heading em {
    color:#d92b18;
    font-style:normal
}

.hero .lead {
    font-weight:550;
    color:#3d2a21
}

.food-art {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:320px;
    isolation:isolate
}

.food-art::before {
    content:'';
    position:absolute;
    inset:13% 4% 5%;
    border-radius:50%;
    background:radial-gradient(ellipse,#ffe1ac88,transparent 70%);
    z-index:-1
}

.hero-photo {
    position:relative;
    width:min(100%,560px);
    height:auto;
    object-fit:contain;
    border-radius:0;
    filter:drop-shadow(0 24px 18px #754a2826)
}

.price-bubble {
    right:0;
    top:26px;
    z-index:2;
    background:#dc1d1c;
    border:4px solid #ffcfbd;
    width:146px;
    height:146px;
    box-shadow:0 14px 35px #992a2340
}

.lunch-section {
    background-image:linear-gradient(#fff3df66,#fff3df66),url('images/pattern.svg')
}

.lunch-heading {
    text-align:center
}

.lunch-heading .sub {
    margin:0 auto
}

.lunch-heading h2 em {
    font-style:normal
}

.lunch-cards {
    gap:15px;
    align-items:stretch
}

.lunch-card {
    padding:24px 18px 10px;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    position:relative;
    background:#fffaf3;
    border:1px solid #f1dcc3;
    box-shadow:0 12px 35px #744b2518
}

.lunch-card::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:7px;
    background:#4c985a
}

.lunch-card.base::before {
    background:#f49a2e
}

.lunch-card.lite::before {
    background:#d9362b
}

.lunch-card h3 {
    font-size:23px;
    margin:8px 0
}

.lunch-card .tag {
    color:#5e371d
}

.lunch-card .big {
    font-size:40px;
    color:#db301c
}

.lunch-card ul {
    margin:12px 0 4px;
    padding-left:21px;
    line-height:1.75;
    font-size:14px;
    font-weight:650
}

.lunch-card li::marker {
    color:#519e60
}

.lunch-card.base li::marker {
    color:#ef8c23
}

.lunch-card.lite li::marker {
    color:#d9362b
}

.lunch-card img {
    display:block;
    width:100%;
    height:190px;
    object-fit:contain;
    margin-top:auto;
    mix-blend-mode:multiply
}

.section:not(.altbg) {
    background:#ffd191
}

.section.altbg:not(.lunch-section) {
    background:#fff0dc
}

.menu-pic {
    background:linear-gradient(145deg,#fff1dc,#fff8ef)
}

.feature:nth-child(2n) {
    background:#d9362b
}

.footer .logo {
    align-items:flex-start
}

.map {
    display:block;
    border:0;
    width:100%;
    min-height:420px;
    height:100%;
    border-radius:25px
}

@media(max-width:850px) {
    .hero {
        padding:30px 0 24px
    }

    .food-art {
        min-height:300px
    }

    .hero-photo {
        max-width:500px
    }

    .lunch-cards {
        grid-template-columns:1fr
    }

    .lunch-card {
        display:grid;
        grid-template-columns:1fr minmax(150px,42%);
        align-items:center;
        gap:10px
    }

    .lunch-card img {
        height:auto;
        max-height:230px
    }

}

@media(max-width:520px) {
    .hero h1 {
        font-size:clamp(42px,12vw,58px)
    }

    .food-art {
        min-height:240px
    }

    .price-bubble {
        width:105px;
        height:105px;
        font-size:12px;
        top:0;
        right:2px
    }

    .price-bubble b {
        font-size:24px
    }

    .lunch-card {
        grid-template-columns:1fr
    }

    .lunch-card img {
        height:185px
    }

    .logo-mark {
        font-size:27px
    }

    .logo {
        min-width:70px
    }

    .logo small {
        font-size:10px
    }

    .phone {
        font-size:12px
    }

}

/* Фото вместо цветных заливок восьми карточек */

.feature-grid .feature {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#fff!important;
    color:#fff!important;
    min-height:210px;
    justify-content:flex-end;
    text-shadow:0 1px 5px rgba(0,0,0,.8)
}

.feature-grid .feature::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--feature-image);
    background-position:center;
    background-size:cover;
    z-index:-2;
    transition:transform .35s ease
}

.feature-grid .feature::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(140,75,35,.75) 0%,rgba(255,166,102,.30) 45%,transparent 85%);
    z-index:-1
}

.feature-grid .feature:hover::before {
    transform:scale(1.055)
}

.feature-grid .feature b {
    font-size:21px;
    line-height:1.25
}

.feature-grid .feature small {
    opacity:1;
    color:#fff;
    font-size:13px
}

@media(max-width:520px) {
    .feature-grid .feature {
        min-height:230px
    }

}

/* Компактные отступы разделов на больших экранах */
@media (min-width: 851px) {
    .section {
        padding: 35px 0;
    }
}


/* =====================================================
   ОСНОВНОЕ МЕНЮ. Каждый article.dish — отдельное блюдо.
   Можно добавлять и удалять элементы независимо.
   ===================================================== */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-top: 30px;
}
.catalog-section {
    min-width: 0;
    background: #fffaf3;
    border: 1px solid #efd9c1;
    border-radius: 18px;
    padding: 20px;
    break-inside: avoid;
}
.catalog-title {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid #e65b1e;
    color: #8c321a;
}
.dish-list { display: grid; gap: 0; }
.dish {
    padding: 12px 0;
    border-bottom: 1px dashed #dfc5a9;
}
.dish:last-child { border-bottom: 0; padding-bottom: 0; }
.dish-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.dish-heading h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}
.dish-price {
    flex-shrink: 0;
    color: #d9231e;
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}
.dish p {
    margin: 5px 0 0;
    color: #6d6762;
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 720px) {
    .catalog-grid { grid-template-columns: 1fr; gap: 14px; }
    .catalog-section { padding: 16px; }
    .catalog-title { font-size: 22px; }
}


/* Логотип PNG в шапке и подвале. Размеры можно менять здесь. */
.top .logo,
.footer .logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    line-height: normal;
    transform: none;
}

.logo-image {
    display: block;
    width: 120px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.footer .logo-image {
    width: 105px;
}

@media (max-width: 520px) {
    .top .logo-image {
        width: 85px;
    }
}


/* Фотографии блюд в меню */
.dish img {
    width: 115px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
}


/* Опускаем логотип в шапке на 8 пикселей */
.top .logo {
    position: relative;
    top: 8px;
}