:root{
  --bg: white;
  --card: white;
  --muted: #6b6b6b;
  --text:black;
  --accent: linear-gradient(90deg,#ff7a00,#ff3b00);
  --primary: #ff6b00;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 10px 30px rgba(16,16,16,0.08);
  --radius: 14px;
  --glass-border: rgba(255,255,255,0.35);
}

/* Dark theme variables */
.dark {
  --bg: #0f1115;
  --card: #0b0c0f;
  --muted: #9aa0a6;
  --text: #e6e8eb;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
  --glass-border: rgba(255,255,255,0.03);
}
* { box-sizing: border-box; }
html,body{
     height:100%;
      margin:0; 
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
      background:var(--bg); 
      color:var(--text);
       -webkit-font-smoothing:antialiased; 
       -moz-osx-font-smoothing:grayscale;
    }

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

.navbar{
  display:flex;
   align-items:center;
    justify-content:space-between;
  padding:14px 20px;
   position:sticky; 
   top:0;
    z-index:50;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  box-shadow: var(--shadow);
}
.dark .navbar{
     background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
     }

.logo-img{
     width:140px; 
     height:auto;
     display:block;
     }

.nav-links{
     display:flex;
      gap:10px; 
      align-items:center;
       margin-left:8px; 
    }
.nav-item{
     padding:8px 12px; 
     border-radius:10px;
      color:var(--muted);
       font-weight:600;
        transition:all .18s ease;
     }
.nav-item:hover{
     color:var(--text);
      transform:translateY(-3px);
     }
.nav-item.active{
     color:var(--primary);
      background: linear-gradient(90deg, rgba(255,107,0,0.06), transparent);
     }

.nav-actions{
     display:flex;
      gap:10px; 
      align-items:center; 
    }
.icon-btn{
     border:0;
      background:transparent; 
      font-size:18px;
       padding:8px;
        border-radius:10px;
         cursor:pointer;
         }
.btn{ 
    padding:10px 16px; 
    border-radius:10px; 
    font-weight:600; 
    border:1px solid transparent;
     cursor:pointer; 
     display:inline-flex;
      align-items:center;
       gap:8px;
     }
.btn.small{
     padding:8px 12px;
      font-size:14px; 
    }
.btn.primary{ 
    background:var(--primary);
     color:white;
      box-shadow: 0 8px 20px rgba(255,107,0,0.14);
    }
.btn.outline{ 
    background:transparent;
     border:1px solid rgba(0,0,0,0.06);
     }
.dark .btn.outline{
     border:1px solid rgba(255,255,255,0.06); 
    }


.premium-hero{ 
    display:grid; 
    grid-template-columns: 1fr 460px; 
    gap:32px;
     align-items:center;
      padding:48px 20px;
     }
.hero-left .headline{ font-size:34px; line-height:1.02; margin:0 0 12px; letter-spacing:-0.02em; }
.subhead{ color:var(--muted); margin:0 0 18px; }
.hero-cta{ display:flex; gap:12px; margin-bottom:18px; }

.device-card{
  width:420px;
   height:420px;
   border-radius:24px;
    overflow:hidden; 
    box-shadow: 0 20px 60px rgba(11,12,15,0.15);
  display:flex; 
  align-items:center;
   justify-content:center; 
   background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  border: 1px solid var(--glass-border);
}
.dark .device-card{
     background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
    }

.floating{ 
    transform-origin:center;
     animation:float 6s ease-in-out infinite;
     }
@keyframes float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-14px) rotate(-1deg);} 100%{ transform:translateY(0);} }


.section-pad{
     padding:50px 20px; 
    }
.section-title{
     font-size:20px;
      margin:0 0 18px;
     }


.card-grid{
     display:grid;
      grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
       gap:18px;
     }
.restaurant-card{
     border-radius:14px;
      overflow:hidden;
       background:var(--card);
        box-shadow:var(--shadow);
         transition:transform .28s ease, box-shadow .28s ease;
          display:block; 
        }
.restaurant-card img{
     width:100%;
      height:160px; 
      object-fit:cover;
       display:block;
     }
.card-body{
     padding:30px;
     }
.restaurant-card h3{
     margin:50 0 6px;
      font-size:18px; 
    }
.meta{
     color:var(--muted); 
     font-size:13px; 
    }


.hover-raise:hover{
     transform:translateY(-8px); 
     box-shadow: 0 26px 60px rgba(16,16,16,0.12);
     }


.tilt{ transform: perspective(700px) rotateX(0deg) rotateY(0deg);
     transition: transform .35s cubic-bezier(.2,.9,.3,1); 
    }
.tilt:hover{
     transform: perspective(700px) rotateX(2deg) rotateY(-6deg) translateY(-6px); 
    }

.app-badges{ 
    display:flex; 
    gap:12px; margin-top:16px;
 }
.badge img{
     width:140px;
      max-width:140px;
       display:block;
     }


.menu-grid{
     display:grid; 
     gap:12px;
      margin-top:18px;
     }
.menu-item{ 
    display:flex;
     align-items:center; 
     justify-content:space-between;
      padding:14px;
       border-radius:12px;
        background:var(--card);
         box-shadow:var(--shadow);
         }
.price{
     font-weight:700;
      margin-right:12px;
     }


.cart-container{
     display:flex; 
     flex-direction:column; 
     gap:12px; margin-top:12px;
     }
.cart-item{
     display:flex;
      justify-content:space-between;
       align-items:center;
        padding:12px; 
        border-radius:12px;
         background:var(--card);
          box-shadow:var(--shadow); 
        }
.cart-summary{
     display:flex;
      justify-content:space-between;
       align-items:center;
        padding:18px 14px;
         border-radius:12px; 
         margin-top:14px; 
         background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
         }

.auth-page{
     min-height:70vh;
      display:flex;
       align-items:center;
        justify-content:center; 
        padding:40px 20px; 
    }
.auth-card{
     width:380px;
      padding:22px;
       border-radius:14px;
        background:var(--card);
         box-shadow:var(--shadow);
         }
.auth-card h2{
     margin:0 0 6px;
     }
.auth-card .muted{
     color:var(--muted);
      margin-bottom:12px;
     }
.auth-card label{
     display:block; 
     margin-bottom:12px;
     }
.auth-card input{
     width:100%; 
     padding:10px 12px;
      border-radius:8px;
       border:1px solid rgba(0,0,0,0.06); background:transparent;
     }
.dark .auth-card input{ 
    border:1px solid rgba(255,255,255,0.04); 
}


.muted{
     color:var(--muted);
     }
.small{ 
    font-size:13px;
 }
.section-title.lead{
     font-size:16px;
     }


.site-footer{
     margin-top:40px;
      padding:18px 20px;
       display:flex; 
       justify-content:space-between;
        align-items:center;
         color:var(--muted);
          font-size:14px;
         }


.animate-letters{
     display:inline-block;
      overflow:hidden;
     }
.animate-zoom{ 
    animation:pop .6s cubic-bezier(.2,.9,.3,1);
 }
@keyframes pop{ from{ transform:scale(.96); opacity:0 } to{ transform:scale(1); opacity:1 } }


@media (max-width:980px){
  .premium-hero{ grid-template-columns: 1fr; text-align:center; padding:28px 16px; gap:18px; }
  .device-card{ width:320px; height:320px; margin:0 auto; }
  .nav-links{ display:none; }
}
@media (max-width: 480px){
.logo-img{
    width: 100px;
}
.btn,.btn.small{
    padding: 8px 14px;
    font-size: 13px;
}
.restaurant-card h3{
    font-size: 22px;
}
.meta{
    font-size: 12px;
}
.menu-item{
    font-size: 13px;
}
.auth-card{
    width: 100%;
}
}
    



a:focus, button:focus, input:focus{
     outline:3px solid rgba(255,107,0,0.16); outline-offset:2px;
     }