*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(212, 175, 55, 0.22), transparent 22%),
        radial-gradient(circle at 20% 85%, rgba(221, 189, 120, 0.18), transparent 20%),
        linear-gradient(120deg, #faf6ef 0%, #f4ead7 35%, #fff6e2 55%, #f4ead7 75%, #faf6ef 100%);
    background-size:100% 100%, 220% 220%, 220% 220%, 260% 260%;
    animation:goldenBackgroundFlow 18s ease-in-out infinite;
    color:#2b2b2b;
    position:relative;
    min-height:100vh;
    overflow-x:hidden;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(139,94,52,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(139,94,52,.04) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at center, black 55%, transparent 100%);
}

body::after{
    content:'';
    position:fixed;
    width:420px;
    height:420px;
    left:-120px;
    top:12%;
    pointer-events:none;
    background:radial-gradient(circle, rgba(212,175,55,.22) 0%, rgba(212,175,55,.14) 28%, rgba(212,175,55,0) 72%);
    filter:blur(14px);
    animation:goldenFloat 10s ease-in-out infinite;
}

body::before{
    animation:goldenGridShift 22s linear infinite;
}

.hero{
    max-width:1200px;
    margin:24px auto 0;
    background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,235,218,.96), rgba(255,255,255,.92));
    text-align:center;
    padding:72px 20px 64px;
    border:1px solid rgba(225,199,161,.7);
    border-radius:28px;
    box-shadow:0 18px 50px rgba(133,101,60,.12);
    position:relative;
    overflow:hidden;
}

.hero::after{
    content:'';
    position:absolute;
    inset:auto 24px 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(139,94,52,.35), transparent);
}

.hero h1{
    font-size:72px;
    color:#8b5e34;
    margin-bottom:10px;
    letter-spacing:4px;
    text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.hero h3{
    color:#6d6d6d;
    font-weight:500;
    font-size:20px;
}

.menu-wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:42px 20px 60px;
}

.category{
    margin:0 0 28px;
    padding:24px 24px 10px;
    background:rgba(255,255,255,.7);
    border:1px solid rgba(234,223,206,.9);
    border-radius:24px;
    box-shadow:0 12px 30px rgba(133,101,60,.08);
    backdrop-filter:blur(6px);
}

.category-title{
    color:#8b5e34;
    font-size:36px;
    margin-bottom:20px;
    padding-left:15px;
    border-left:5px solid #d9b48f;
    text-align:center;
}

table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,248,242,.98));
    border:1px solid #eadfce;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(133,101,60,.08);
}

th,
td{
    padding:16px 22px;
    text-align:left;
}

th{
    color:#5f4630;
    font-size:15px;
    font-weight:600;
    border-bottom:1px solid #eadfce;
    background:linear-gradient(180deg, #fcf8f1, #f5ece0);
    letter-spacing:.2px;
    text-transform:uppercase;
}

td{
    color:#2b2b2b;
    border-bottom:1px solid #f0e7da;
}

tr:hover td{
    background:#fff7ed;
}

tr:last-child td{
    border-bottom:none;
}

td:last-child,
th:last-child{
    text-align:right;
}

#pizza th:first-child,
#pizza td:first-child{
    width:46%;
}

#pizza th:nth-child(2),
#pizza td:nth-child(2),
#pizza th:nth-child(3),
#pizza td:nth-child(3),
#pizza th:nth-child(4),
#pizza td:nth-child(4){
    width:18%;
    text-align:center;
}

#pizza th:last-child,
#pizza td:last-child{
    text-align:center;
}

#pizza th,
#pizza td{
    padding:15px 18px;
}

#special th:first-child,
#special td:first-child{
    width:58%;
}

#special th:nth-child(2),
#special td:nth-child(2),
#special th:nth-child(3),
#special td:nth-child(3){
    width:21%;
    text-align:center;
}

#special th:last-child,
#special td:last-child{
    text-align:center;
}

#appetizer th:first-child,
#appetizer td:first-child,
#burger th:first-child,
#burger td:first-child,
#shawarma th:first-child,
#shawarma td:first-child,
#wrap th:first-child,
#wrap td:first-child,
#sandwich th:first-child,
#sandwich td:first-child,
#pasta th:first-child,
#pasta td:first-child,
#chinese th:first-child,
#chinese td:first-child{
    width:78%;
}

#appetizer th:last-child,
#appetizer td:last-child,
#burger th:last-child,
#burger td:last-child,
#shawarma th:last-child,
#shawarma td:last-child,
#wrap th:last-child,
#wrap td:last-child,
#sandwich th:last-child,
#sandwich td:last-child,
#pasta th:last-child,
#pasta td:last-child,
#chinese th:last-child,
#chinese td:last-child{
    width:22%;
    text-align:center;
}

@media(max-width:768px){
    .hero h1{
        font-size:48px;
    }

    .hero{
        margin:12px 12px 0;
        padding:54px 16px 44px;
        border-radius:22px;
    }

    .menu-wrapper{
        padding:24px 12px 40px;
    }

    .category{
        padding:18px 14px 8px;
        border-radius:20px;
    }

    .category-title{
        font-size:30px;
    }

    .hero h3{
        font-size:18px;
    }

    th,
    td{
        padding:14px 16px;
        font-size:14px;
    }
}

@keyframes goldenFloat{
    0%,100%{
        transform:translate3d(0,0,0) scale(1);
        opacity:.55;
    }

    50%{
        transform:translate3d(180px,70px,0) scale(1.15);
        opacity:.85;
    }
}

@keyframes goldenBackgroundFlow{
    0%{
        background-position:0 0, 0% 0%, 100% 100%, 0% 50%;
    }

    50%{
        background-position:0 0, 100% 15%, 0% 85%, 100% 50%;
    }

    100%{
        background-position:0 0, 0% 0%, 100% 100%, 0% 50%;
    }
}

@keyframes goldenGridShift{
    0%{
        transform:translate3d(0,0,0);
    }

    50%{
        transform:translate3d(24px,18px,0);
    }

    100%{
        transform:translate3d(0,0,0);
    }
}