/* ============================================================
   TOKENS — bite-buddy template (food-delivery app site)
   Reference tokens lifted from its CSS:
   --primary-400 #f47342 · primary-500 #f2572b · primary-100
   #fff8f3 · primary-300 #e8e2df · primary-200 #eee8e5 ·
   secondary-400 #0a112e (navy) · Inter · content width 1300px ·
   h1 60 / h2 48 / h3 36 / h4 28 / text 16-18.
   ============================================================ */

:root{
  --orange: #b91c2b;
  --orange-2: #9a1220;
  --cream: #fff8f3;
  --sand: #e8e2df;
  --sand-2: #eee8e5;
  --navy: #0a112e;
  --white: #fff;
  --line: rgba(10,17,46,.07);        /* reference #0a112e12 */
  --shadow: 0 0 15px rgba(0,0,0,.05); /* review box shadow */

  --font: 'Inter', sans-serif;
  --w: 1300px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--navy);
  font-family:var(--font);
  font-size:18px;line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:0;font:inherit;cursor:pointer;color:inherit}

/* ---------- typography ---------- */
.h1{font-size:clamp(38px,4.5vw,60px);font-weight:700;line-height:1.12;letter-spacing:-.01em}
.h2{font-size:clamp(32px,3.6vw,48px);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.h3{font-size:clamp(24px,2.6vw,36px);font-weight:600;line-height:1.2}
.h4{font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.25}
.lead{font-size:18px;color:rgba(10,17,46,.72);font-weight:400}

/* ---------- layout shells (reference classes) ---------- */
.padding-global{padding-left:4%;padding-right:4%}
.container{width:100%;max-width:var(--w);margin:0 auto}
.max-width-common{max-width:var(--w);margin:0 auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--orange);color:#fff;
  padding:15px 36px;border-radius:8px;
  font-size:16px;font-weight:500;
  transition:transform .3s ease, background .3s ease;
}
.btn:hover{transform:translateY(-5px);background:var(--orange-2)}
.btn img{height:22px;width:auto}
.btn--ghost{border:1px solid var(--orange);background:transparent;color:var(--orange)}
.btn--ghost:hover{background:var(--cream)}
.mybtn{
  display:inline-block;border:1px solid var(--orange);
  background:transparent;color:var(--orange);
  padding:15px 36px;border-radius:8px;font-size:16px;font-weight:500;
  transition:transform .3s ease, background .3s ease;
}
.mybtn:hover{transform:translateY(-5px);background:var(--cream)}
.cta .btn--ghost,.dw .btn--ghost{border-color:#fff;color:#fff;background:transparent}
.cta .btn--ghost:hover,.dw .btn--ghost:hover{background:rgba(255,255,255,.12)}
.cta .btn--ghost img{filter:brightness(0) invert(1)}

/* ---------- placeholder slot system (photos swapped later) ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(150deg,var(--sand-2),var(--sand));
  display:flex;align-items:center;justify-content:center;
}
.ph::before{
  content:"";position:absolute;inset:12px;
  border:1px dashed rgba(10,17,46,.25);pointer-events:none;
}
.ph__label{
  position:relative;z-index:1;text-align:center;padding:0 12px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(10,17,46,.55);font-weight:600;
}
.ph__label small{display:block;margin-top:5px;font-size:9px;letter-spacing:.16em;color:rgba(10,17,46,.35)}

/* ---------- section rhythm ---------- */
section{padding:90px 0}
.inner-spacing{margin-top:34px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}