
:root{
  --primary:#C1806D;
  --tan:#E9E6DA;
  --dark:#4a3b36;
  --light:#fdfbf7;
  --whatsapp:#25d366;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:var(--light);color:var(--dark);line-height:1.5}

nav{position:sticky;top:0;z-index:20;background:var(--tan);border-bottom:1px solid #e3ddd2}
nav .wrap{max-width:1200px;margin:auto;display:flex;align-items:center;gap:22px;padding:14px 18px}
.logo{
  height:180px;           /* 150% of previous desktop size (120 -> 180) */
  width:auto;
  display:block;
  object-fit:contain;
}
nav .links{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
nav a{color:var(--dark);text-decoration:none;padding:10px 12px;border-radius:10px}
nav a:hover{background:#efece2}

.hero{
  background:linear-gradient(135deg,#c1806db3,#e9e6da), url('assets/hero_banner.png') center/cover no-repeat;
  min-height:64vh;display:grid;place-items:center;text-align:center;padding:90px 16px
}
.hero .card{background:rgba(0,0,0,.35);color:#fff;padding:22px 24px;border-radius:14px;backdrop-filter:blur(2px)}
.hero h1{margin:0 0 8px 0;font-size:42px;letter-spacing:.3px}
.hero p{margin:0 0 14px 0;opacity:.95;max-width:720px}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:12px 18px;border-radius:10px}

.section{max-width:1200px;margin:60px auto;padding:0 16px}
.section h2{color:var(--primary);font-size:28px;margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card .cx{padding:12px 14px}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:10px 8px;text-align:left}
.table th:nth-child(2),.table td:nth-child(2){text-align:right}
.table th:nth-child(3),.table td:nth-child(3){text-align:right}
.table th:nth-child(4),.table td:nth-child(4){text-align:right}

.order-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.order-row input[type='number']{width:64px;padding:8px}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why .why-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px;display:flex;gap:12px;align-items:flex-start}
.why .icon{font-size:24px}

.pay-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pay-card img{width:220px;height:auto;border-radius:10px;border:1px dashed #ddd;background:#fafafa}
.pay-note{font-size:14px;color:#6d5f5a}

.footer{padding:40px 16px;text-align:center;color:#7a6f6a}

.whatsapp-float{position:fixed;right:18px;bottom:76px;width:56px;height:56px;border-radius:50%;background:var(--whatsapp);display:grid;place-items:center;color:#fff;text-decoration:none;font-size:26px;box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* Sticky order CTA on mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee;padding:10px 16px;display:none;z-index:25}
.sticky-cta .btn{width:100%;text-align:center}

@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .logo{height:135px}  /* 150% of previous mobile size (90 -> 135) */
  .grid{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .sticky-cta{display:block}
}
