/* QuickBite — fast food / cloud kitchen demo
   Palet: utama #dc2626, aksen #facc15, tema terang */
:root{
  --red:#dc2626; --red-dark:#991b1b; --red-soft:#fee2e2;
  --yellow:#facc15; --yellow-soft:#fef9c3;
  --ink:#1c1410; --muted:#6b5d54;
  --bg:#fffaf5; --card:#ffffff; --line:#f1e4d8;
  --shadow:0 10px 30px rgba(220,38,38,.12);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- Demo bar ---- */
.demobar{
  background:var(--ink); color:#fff; font-size:13px;
  text-align:center; padding:7px 12px;
}
.demobar a{color:var(--yellow); font-weight:600}
.demobar b{color:#fff}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,250,245,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1120px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.5px}
.brand .logo{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--red),var(--yellow));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.brand .logo svg{width:22px;height:22px}
.brand span b{color:var(--red)}
.brand small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase}

.nav-toggle{display:none}
.burger{display:none; cursor:pointer; width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.burger span,.burger span::before,.burger span::after{
  content:""; display:block; position:relative; width:20px;height:2px;background:var(--ink);
  margin:0 auto; transition:.2s;
}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

.menu{display:flex; align-items:center; gap:6px; list-style:none}
.menu a{
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--ink);
}
.menu a:hover{background:var(--red-soft); color:var(--red)}
.menu a.active{background:var(--red); color:#fff}
.menu .btn-nav{background:var(--yellow); color:var(--ink)!important; font-weight:800}
.menu .btn-nav:hover{background:#eab308}

@media(max-width:820px){
  .burger{display:block}
  .menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); border-bottom:1px solid var(--line);
    padding:12px 18px; box-shadow:var(--shadow);
    display:none;
  }
  .nav{position:relative}
  .nav-toggle:checked ~ .menu{display:flex}
  .nav-toggle:checked ~ .burger span{background:transparent}
  .nav-toggle:checked ~ .burger span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked ~ .burger span::after{top:-2px;transform:rotate(-45deg)}
  .menu a{padding:11px 14px}
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:800; font-size:15px;
  cursor:pointer; border:none; transition:transform .12s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow)}
.btn-accent{background:var(--yellow); color:var(--ink)}
.btn-ghost{background:#fff; color:var(--red); border:2px solid var(--red)}

/* ---- Layout ---- */
.wrap{max-width:1120px; margin:0 auto; padding:0 18px}
section{padding:56px 0}
.eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--red); background:var(--red-soft);
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
h1,h2,h3{letter-spacing:-.6px; line-height:1.15}
h2.title{font-size:clamp(26px,4vw,38px); margin-bottom:10px}
.lead{color:var(--muted); font-size:17px; max-width:620px}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---- Hero ---- */
.hero{
  background:
    radial-gradient(900px 400px at 110% -10%,var(--yellow-soft),transparent),
    radial-gradient(700px 500px at -10% 110%,var(--red-soft),transparent);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(34px,6vw,58px)}
.hero h1 em{color:var(--red); font-style:normal}
.hero .lead{margin:18px 0 26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-stats{display:flex; gap:26px; margin-top:32px; flex-wrap:wrap}
.hero-stats b{display:block; font-size:26px; color:var(--red)}
.hero-stats span{font-size:13px; color:var(--muted)}

.hero-art{
  position:relative; aspect-ratio:1/1; border-radius:28px;
  background:linear-gradient(160deg,var(--red),var(--red-dark));
  box-shadow:var(--shadow); display:grid; place-items:center; overflow:hidden;
}
.hero-art::before{
  content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--yellow),transparent 70%); top:-10%; right:-10%; opacity:.6;
}
.hero-art .plate{
  width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#fde68a 60%,#f59e0b);
  box-shadow:inset 0 6px 20px rgba(0,0,0,.15), 0 18px 40px rgba(0,0,0,.3);
  display:grid; place-items:center; position:relative; z-index:1;
}
.hero-art .plate svg{width:48%;height:48%}
.badge-float{
  position:absolute; z-index:2; background:#fff; color:var(--ink);
  padding:9px 14px; border-radius:14px; font-weight:800; font-size:14px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:8px;
}
.badge-float.a{top:18px; left:18px}
.badge-float.b{bottom:18px; right:18px}
.badge-float .dot{width:9px;height:9px;border-radius:50%;background:#16a34a}

/* ---- Feature cards ---- */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:transform .15s, box-shadow .2s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.ico{
  width:50px;height:50px;border-radius:13px; display:grid; place-items:center;
  background:var(--red-soft); color:var(--red); margin-bottom:14px;
}
.ico svg{width:26px;height:26px}
.card h3{font-size:19px; margin-bottom:6px}
.card p{color:var(--muted); font-size:15px}

/* ---- Menu ---- */
.menu-cat{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px;
}
.menu-cat span{
  background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:999px;
  font-weight:700; font-size:14px;
}
.menu-cat span.on{background:var(--red); color:#fff; border-color:var(--red)}
.menu-list{display:grid; gap:14px}
.menu-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; display:flex; align-items:center; gap:16px;
}
.menu-item .thumb{
  width:62px;height:62px;border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--red)); display:grid; place-items:center;
}
.menu-item .thumb svg{width:30px;height:30px}
.menu-item .info{flex:1; min-width:0}
.menu-item h3{font-size:17px}
.menu-item p{color:var(--muted); font-size:14px}
.menu-item .price{font-weight:800; color:var(--red); font-size:18px; white-space:nowrap}
.tag{
  display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px;
  background:var(--yellow-soft); color:var(--red-dark); margin-left:6px;
}

/* ---- Combo / packages ---- */
.combo{
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:26px; text-align:center; position:relative;
}
.combo.feature{border-color:var(--red); box-shadow:var(--shadow)}
.combo .ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--yellow); color:var(--ink); font-weight:800; font-size:12px;
  padding:5px 14px; border-radius:999px;
}
.combo h3{font-size:21px; margin-bottom:8px}
.combo .cprice{font-size:34px; font-weight:800; color:var(--red); margin:8px 0}
.combo .cprice s{font-size:16px; color:var(--muted); font-weight:600}
.combo ul{list-style:none; text-align:left; margin:16px 0 22px; display:grid; gap:9px}
.combo li{padding-left:26px; position:relative; font-size:15px}
.combo li::before{content:"✓"; position:absolute; left:0; color:var(--red); font-weight:900}

/* ---- Steps ---- */
.steps{counter-reset:s; display:grid; gap:18px}
.step{display:flex; gap:16px; align-items:flex-start}
.step .num{
  counter-increment:s; flex:none; width:44px;height:44px;border-radius:50%;
  background:var(--red); color:#fff; font-weight:800; display:grid; place-items:center;
}
.step .num::before{content:counter(s)}
.step h3{font-size:18px}
.step p{color:var(--muted); font-size:15px}

/* ---- Gallery ---- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gtile{
  aspect-ratio:1; border-radius:14px; position:relative; overflow:hidden;
  display:grid; place-items:center; color:#fff;
}
.gtile svg{width:46px;height:46px;opacity:.95; position:relative; z-index:1}
.gtile span{position:absolute; bottom:10px; left:12px; font-weight:800; font-size:14px; z-index:1}
.gtile.g1{background:linear-gradient(135deg,#dc2626,#991b1b)}
.gtile.g2{background:linear-gradient(135deg,#facc15,#f59e0b)}
.gtile.g3{background:linear-gradient(135deg,#ef4444,#facc15)}
.gtile.g4{background:linear-gradient(135deg,#b91c1c,#dc2626)}
.gtile.g5{background:linear-gradient(135deg,#f59e0b,#dc2626)}
.gtile.g6{background:linear-gradient(135deg,#fbbf24,#ef4444)}
.gtile::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.25),transparent 60%)}

/* ---- Testimonials ---- */
.quote{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.quote .stars{color:var(--yellow); font-size:18px; letter-spacing:2px}
.quote p{font-size:15px; margin:10px 0 16px}
.quote .who{display:flex; align-items:center; gap:12px}
.quote .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--yellow));color:#fff;display:grid;place-items:center;font-weight:800}
.quote .who b{display:block;font-size:15px}
.quote .who small{color:var(--muted)}

/* ---- CTA band ---- */
.band{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff; border-radius:24px; padding:46px 30px; text-align:center;
}
.band h2{font-size:clamp(24px,4vw,34px); margin-bottom:10px}
.band p{opacity:.92; max-width:560px; margin:0 auto 22px}

/* ---- Forms ---- */
.formnote{
  background:var(--yellow-soft); border:1px dashed var(--yellow); color:var(--red-dark);
  padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:18px;
  display:inline-block;
}
form.box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:grid; gap:14px;
}
.field{display:grid; gap:6px}
.field label{font-weight:700; font-size:14px}
.field input,.field select,.field textarea{
  font:inherit; padding:12px 14px; border:1px solid var(--line); border-radius:11px;
  background:var(--bg); color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red); border-color:var(--red)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ---- Info / contact ---- */
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.info{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.info .ico{margin-bottom:10px}
.info b{display:block; margin-bottom:2px}
.info p{color:var(--muted); font-size:14px}

/* ---- Footer ---- */
.site-footer{background:var(--ink); color:#e9ddd4; margin-top:30px}
.foot-grid{
  max-width:1120px; margin:0 auto; padding:48px 18px 24px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px;
}
.site-footer .brand{color:#fff}
.site-footer p{color:#b9a99c; font-size:14px; margin-top:12px; max-width:300px}
.foot-col h4{font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; color:#fff}
.foot-col a{display:block; color:#b9a99c; padding:5px 0; font-size:14px}
.foot-col a:hover{color:var(--yellow)}
.foot-bottom{border-top:1px solid #33271f; text-align:center; padding:18px; font-size:13px; color:#9c8a7c}

/* ---- Responsive ---- */
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero-art{max-width:380px; margin:0 auto; width:100%}
  .grid-3,.info-grid,.gallery{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  section{padding:42px 0}
  .grid-3,.grid-2,.info-grid,.gallery,.row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .menu-item{flex-wrap:wrap}
  .menu-item .price{margin-left:auto}
}