@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Space+Grotesk:wght@300..700&display=swap');

    :root{
        --yellow:#d97706;
        --red:#e51420;
        --dark:#111827;
        --muted:#6b7280;
        --card:#ffffff;
        --accent:#c2410c;
    }
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;margin:0;background:linear-gradient(180deg,#fff 0%, #f8fafc 100%);color:var(--dark)}
    a{color:inherit;text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:28px}
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand {
        display:flex;
        gap:12px;
        align-items:center;
        flex-direction: column;
    }
    .brand img {
        width: 100%;
        height: auto;
        max-width: 20em;
    }
    .logo{width:56px;height:56px;border-radius:12px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
    .nav{display:flex;gap:12px;align-items:center}
    .btn{background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;border:none;cursor:pointer}

    .hero{
        display:grid;
        /* grid-template-columns:1fr 420px; */
        gap:28px;
        align-items:center;
        margin-top:18px;
        height: 80vh;
    }
    .hero .eyebrow{color:var(--muted);font-weight:600}
    .hero h1{
        font-family: "Changa One", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:90px;
        margin:-30px 0;
    }
    .hero p{
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        color: var(--red);
        margin: 0 0 14px;
        font-size: 30px;

    }
    .hero .title {
        margin: 0 0 20px 0;
    }
    .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(17,24,39,0.06)}
    .features{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .feature{flex:1 1 45%;display:flex;gap:10px;align-items:flex-start}
    .feature .dot{width:36px;height:36px;border-radius:10px;background:#fde68a;display:flex;align-items:center;justify-content:center;font-weight:700}

    form .field{margin-bottom:12px}
    label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
    input[type=text],input[type=email],input[type=tel],select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ee}
    .small{font-size:13px;color:var(--muted)}

    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .section{margin-top:32px}
    .menu-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .menu-item{background:#fff;padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(17,24,39,0.04)}

    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px}

    .testi{background:linear-gradient(90deg,#fff,#fff);padding:16px;border-radius:12px}

    footer{margin-top:36px;padding:20px 0;color:var(--muted);font-size:13px}

    /* Responsive */
    @media screen and (max-width:980px){
        .hero{grid-template-columns:1fr;}
        .grid-3{grid-template-columns:repeat(2,1fr)}
        .gallery{grid-template-columns:repeat(2,1fr)}
        
    }
    @media screen and (max-width:600px){
        .grid-3{grid-template-columns:1fr}
        .hero {
            height: 100vh;
            margin: -28px;
            padding: 28px;
        }
        .hero h1{
            font-size: 60px;
            margin: 8px 0;
            line-height: 0.8;
        }
        .hero p {
            font-size: 27px;
            line-height: 1;
        }
        .gallery img{height:120px}
        .brand span{display:none}
        .brand {
            gap: 5px;
        }
        header {
            /* flex-direction: column;
            gap: 20px; */
            display: none;
        }
        .feature {
            flex: 1 1 55%;
        }
    }