/* ===== JoZi Homemade Brownies — shared styles ===== */
:root{
  --cream:#fdf8f3;
  --blush:#faf0ed;
  --choc:#2a1810;
  --terra:#c97d6e;
  --terra-dark:#b56d5e;
  --pink:#e8c4b8;
  --max:1180px;
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  position:relative;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream);
  color:var(--choc);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:url('images/logo.jpg') center 28%/40% no-repeat;
  opacity:.06;
  filter:grayscale(1) blur(0.5px) brightness(1.05);
  z-index:-1;
}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.15}
em{color:var(--terra);font-style:italic}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--terra);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;margin-bottom:20px;
}
.eyebrow::before{content:"✦"}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"✦"}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:999px;font-weight:500;font-size:15px;
  cursor:pointer;border:none;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(42,24,16,.08);}
.btn-dark{background:var(--choc);color:var(--cream)}
.btn-dark:hover{background:#3d2418}
.btn-terra{background:var(--terra);color:#fff}
.btn-terra:hover{background:var(--terra-dark);color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(201,125,110,.4);color:var(--choc)}
.btn-ghost:hover{border-color:var(--terra)}
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}

/* ===== NAV ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(253,248,243,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,196,184,.4);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand{display:flex;align-items:center;gap:14px;font-family:'Playfair Display',serif;font-size:24px;letter-spacing:.02em;font-weight:600}
.brand img{width:50px;height:50px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 12px 24px rgba(42,24,16,.18);transition:transform .25s ease,box-shadow .25s ease}
.brand img:hover{transform:scale(1.05);box-shadow:0 16px 32px rgba(42,24,16,.22)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;font-weight:500;color:rgba(42,24,16,.7);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--terra)}
.nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--choc)}
@media(max-width:760px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--cream);border-bottom:1px solid rgba(232,196,184,.4);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links.open{
    max-height:calc(100vh - 82px);
    overflow-y:auto;
  }
  .nav-links a{padding:16px 24px;width:100%;border-top:1px solid rgba(232,196,184,.3)}
  .nav-links .btn{margin:14px 24px}
  .nav-toggle{display:block}
}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:90px 0}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 40%,rgba(232,196,184,.35) 0%,transparent 55%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,68px);margin-bottom:22px}
.hero p.lead{color:rgba(42,24,16,.6);font-size:18px;max-width:440px;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-img{position:relative}
.hero-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px;transform:rotate(-2deg);box-shadow:0 30px 60px rgba(42,24,16,.18)}
.hero-badge{
  position:absolute;bottom:-16px;right:-10px;background:var(--terra);color:#fff;
  border-radius:18px;padding:16px 22px;transform:rotate(4deg);box-shadow:0 12px 30px rgba(42,24,16,.2);
}
.hero-badge b{font-family:'Playfair Display',serif;font-size:26px;display:block;line-height:1}
.hero-badge span{font-size:12px;opacity:.85}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-img{order:-1}
}

.hero h1,.hero p.lead,.hero-actions .btn{opacity:0;animation:fadeUp .8s ease forwards}
.hero h1{animation-delay:0.1s}
.hero p.lead{animation-delay:0.2s}
.hero-actions .btn{animation-delay:0.3s}
.hero-img img{animation:float 8s ease-in-out infinite alternate}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(-1deg)}}

/* ===== SECTION HELPERS ===== */
.section{padding:80px 0}
.section.blush{background:var(--blush)}
.section.choc{background:var(--choc);color:var(--cream)}
.section.choc h2{color:var(--cream)}
.section-head{text-align:center;margin-bottom:48px}
.section-head h2{font-size:clamp(28px,4vw,40px)}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:#fff;border:1px solid rgba(232,196,184,.4);border-top:2px solid var(--pink);
  border-radius:18px;padding:30px;transition:all .2s;
}
.card:hover{box-shadow:0 14px 30px rgba(42,24,16,.08);transform:translateY(-2px)}
.card .num{
  width:44px;height:44px;border-radius:50%;background:var(--choc);color:var(--pink);
  display:flex;align-items:center;justify-content:center;font-weight:500;margin-bottom:18px;
}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:rgba(42,24,16,.55);font-size:14px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}

/* price highlight */
.price-tag{font-family:'Playfair Display',serif;color:var(--terra);font-size:20px;font-weight:500}

/* ===== FOOTER ===== */
.footer{background:var(--choc);color:var(--cream);padding:56px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer .brand{color:var(--cream);margin-bottom:14px}
.footer p{color:rgba(253,248,243,.5);font-size:14px;max-width:280px}
.footer h4{font-family:'Inter',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--terra);margin-bottom:16px}
.footer a{display:block;color:rgba(253,248,243,.6);font-size:14px;padding:5px 0;transition:color .2s}
.footer a:hover{color:var(--cream)}
.footer-bottom{border-top:1px solid rgba(232,196,184,.15);padding-top:24px;text-align:center;color:rgba(253,248,243,.35);font-size:13px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:32px}}

/* page header (inner pages) */
.page-head{position:relative;overflow:hidden;padding:80px 0 50px}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(232,196,184,.25) 0%,transparent 55%)}
.page-head h1{font-size:clamp(38px,5vw,58px);position:relative}
.page-head p{position:relative;color:rgba(42,24,16,.55);max-width:460px;margin-top:18px}

/* divider */
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}
.divider .line{height:1px;width:48px;background:linear-gradient(to right,transparent,rgba(201,125,110,.4))}
.divider .line.r{background:linear-gradient(to left,transparent,rgba(201,125,110,.4))}
.divider span{color:var(--terra);font-size:13px}

.nav-links a.btn.active{color:#fff}