:root{
      --bg:#0b0d12;           /* page background */
      --surface:#0f1320;      /* cards/sections */
      --primary:#4ade80;      /* green */
      --primary-600:#22c55e;
      --primary-700:#16a34a;
      --muted:#94a3b8;        /* slate-400 */
      --text:#e5e7eb;         /* light */
      --accent:#60a5fa;       /* blue */
      --danger:#fb7185;       /* soft red for badges */
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --maxw:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      background:linear-gradient(180deg,#0b0d12 0%,#0b0d12 40%,#0d1325 100%);
      color:var(--text);
      line-height:1.5;
      overflow-x:hidden;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}

    /* ======= Top Bar / Nav ======= */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(160%) blur(8px);
      background:rgba(11,13,18,.6);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
    .brand .logo{width:38px; height:38px; border-radius:12px; background:radial-gradient(60% 60% at 35% 35%, #a7f3d0 0, #34d399 40%, #10b981 70%, #064e3b 100%); box-shadow:var(--shadow)}
    .nav a.cta{background:var(--primary); color:#0a0a0a; padding:10px 16px; border-radius:12px; font-weight:700; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 20px rgba(74,222,128,.35)}
    .nav a.cta:focus-visible,.nav a.cta:hover{background:var(--primary-600)}

    /* ======= Hero ======= */
    .hero{position:relative; padding-block:48px 24px; overflow:hidden}
    .hero .container{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center}
    .hero-badge{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:#d1fae5; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); padding:8px 12px; border-radius:999px}
    .headline{font-size:clamp(32px, 4vw + 8px, 64px); line-height:1.05; margin:10px 0 16px; font-weight:800}
    .sub{color:var(--muted); font-size:clamp(16px,1.2vw + 10px,20px)}
    .actions{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:10px; border-radius:14px; padding:12px 18px; font-weight:700; border:1px solid rgba(255,255,255,.08); background:#182032}
    .btn.primary{background:var(--primary); color:#04130a; border-color:transparent; box-shadow:0 10px 30px rgba(34,197,94,.35)}
    .btn.primary:hover{background:var(--primary-600)}
    .btn.ghost:hover{background:#111626}

    /* gallery on left */
    .gallery{
      display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:10px;
      transform:skewY(-2deg);
    }
    .gallery .tile{position:relative; border-radius:16px; overflow:hidden; background:#111; box-shadow:var(--shadow)}
    .tile:nth-child(1){grid-column:1/3; grid-row:1/3}
    .tile:nth-child(2){grid-column:3/5; grid-row:1/2}
    .tile:nth-child(3){grid-column:5/7; grid-row:1/3}
    .tile:nth-child(4){grid-column:1/2; grid-row:3/4}
    .tile:nth-child(5){grid-column:2/4; grid-row:3/5}
    .tile:nth-child(6){grid-column:4/6; grid-row:3/4}
    .tile:nth-child(7){grid-column:6/7; grid-row:3/5}
    .tile:nth-child(8){grid-column:1/3; grid-row:5/6}
    .tile:nth-child(9){grid-column:3/5; grid-row:4/6}
    .tile:nth-child(10){grid-column:5/7; grid-row:4/6}
    .tile img{width:100%; height:100%; object-fit:cover; filter:saturate(105%) contrast(1.05)}

    /* ======= Social Proof ======= */
    .trust{padding-block:18px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00))}
    .trust .row{display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap}
    .trust .tag{opacity:.8; font-weight:600; color:#cbd5e1}

    /* ======= Features ======= */
    .features{padding:64px 0}
    .features .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .card{background:linear-gradient(180deg,#0f162b,#0e1426); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
    .card h3{margin:.2rem 0 .45rem; font-size:1.25rem}
    .card p{color:var(--muted)}
    .chip{display:inline-flex; gap:8px; align-items:center; font-size:.75rem; padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#cbd5e1}

    /* ======= Grid of Restaurants (cards) ======= */
    .list{padding:10px 0 70px; background:radial-gradient(80% 100% at 50% 0%, rgba(96,165,250,.15), rgba(96,165,250,0) 60%)}
    .list h2{font-size:clamp(26px,2.5vw,38px); margin:0 0 14px}
    .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
    .r-card{display:flex; flex-direction:column; background:#10182b; border:1px solid rgba(255,255,255,.06); border-radius:20px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
    .r-card:hover{transform:translateY(-4px); box-shadow:0 14px 35px rgba(0,0,0,.45)}
    .r-media{background:#14532d; min-height:150px; display:grid; place-items:center}
    .r-body{padding:16px}
    .rating{display:flex; align-items:center; gap:8px; color:#fde68a}
    .meta{margin-top:6px; color:var(--muted); font-size:.92rem}
    .r-actions{display:flex; gap:12px; padding:12px 16px 18px}
    .icon-btn{flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#0f1425; border:1px solid rgba(255,255,255,.08)}

    /* ======= Banner CTA ======= */
    .cta-banner{width:100%; padding:60px 0; background:linear-gradient(90deg,#111827 0 30%, #0b1223 30% 100%)}
    .cta-banner .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center}
    .cta-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(96,165,250,.15); border:1px solid rgba(96,165,250,.35); color:#dbeafe}
    .cta-card{background:#0e1424; padding:20px; border:1px solid rgba(255,255,255,.06); border-radius:16px}

    /* ======= Footer ======= */
    footer{padding:46px 0 60px; background:#0a0d15; border-top:1px solid rgba(255,255,255,.06)}
    .foot{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
    footer h4{margin:0 0 10px}
    .muted{color:var(--muted)}

    /* ======= Utilities ======= */
    .fullbleed{position:relative; isolation:isolate}
    .fullbleed::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -20%, rgba(34,197,94,.15), transparent 60%); z-index:-1}
    .hide-visually{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}

    /* ======= Responsive ======= */
    @media (max-width:1100px){
      .hero .container{grid-template-columns:1fr;}
      .gallery{grid-auto-rows:110px}
      .cards{grid-template-columns:repeat(3,1fr)}
      .features .grid{grid-template-columns:repeat(2,1fr)}
      .cta-banner .wrap{grid-template-columns:1fr}
    }
    @media (max-width:740px){
      .cards{grid-template-columns:repeat(2,1fr)}
      .features .grid{grid-template-columns:1fr}
      .foot{grid-template-columns:1fr 1fr}
      .nav .wrap{padding-inline:16px}
      .container{padding-inline:16px}
    }
    @media (max-width:460px){
      .cards{grid-template-columns:1fr}
      .r-media{min-height:120px}
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce){
      .r-card,.btn,.tile{transition:none}
    }
    .btn:focus-visible, .icon-btn:focus-visible, a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}