:root{
  /* Fonts */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-display: "Manrope", var(--font-sans);

  /* Palette – light, fresh */
  --bg: #fffaf3;         /* warm cream */
  --surface: #ffffff;    /* paper */
  --muted: #f7f2ea;      /* soft beige */
  --ink: #1f2937;        /* slate */
  --sub: #667085;        /* neutral */
  --brand: #f2a93b;      /* bagel gold */
  --brand-ink: #5a3a06;  /* toasted crust */
  --accent: #2563eb;     /* blue accent */
  --ring: #e5e7eb;
  --ok: #0ea5a5;

  /* Elevation & radii */
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --radius-xl: 18px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Type scale (tight & modern) */
  --fs-xxl: clamp(28px, 4vw, 36px);
  --fs-xl: clamp(22px, 3vw, 26px);
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;

  /* Spacing scale */
  --s-xxl: 40px;
  --s-xl: 28px;
  --s-lg: 20px;
  --s-md: 14px;
  --s-sm: 10px;
  --s-xs: 6px;

  --stroke: #eee3d4;
}
.bb-section { padding: 40px 0; }
.bb-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.cc-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.cc-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cc-badge {
  display:inline-block;
  background: linear-gradient(90deg,#F5D98A,#E9C45C);
  color:#3A2A00;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.2px;
}
.cc-desc { color:#555; margin:8px 0 16px; }
.cc-actions { display:flex; align-items:center; gap:16px; }
.bb-btn { border:0; border-radius:12px; padding:10px 14px; cursor:pointer; }
.bb-btn-primary { background:#1E293B; color:#fff; }
.bb-btn-primary:hover { filter:brightness(1.05); }
.bb-link { color:#1E293B; text-decoration:underline; }

/* Global reset */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font: var(--fs-md)/1.5 var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* Layout */
.container{ max-width:1200px; margin-inline:auto; padding: var(--s-lg) var(--s-lg) }
.section{ margin-top: var(--s-xxl) }

/* Header (lighter, airy) */
.header{
  position:sticky; top:0; z-index:30;
  background: linear-gradient(180deg, rgba(255,250,243,.86), rgba(255,250,243,.55));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #f0e7da;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-md); padding: var(--s-sm) 0 }
.brand{ display:flex; align-items:center; gap: var(--s-md) }
.logo{
  width:44px; height:44px; border-radius:50%;
  background:
    radial-gradient(80% 80% at 50% 36%, #ffe7b0 0 35%, #f2a93b 36% 62%, #ce8a21 63% 100%),
    radial-gradient(30% 30% at 60% 65%, #fff6d9 30%, transparent 31%);
  box-shadow: 0 0 0 3px #fff, 0 6px 22px rgba(0,0,0,.08);
}
.h1{ font-family:var(--font-display); font-weight:800; letter-spacing:.2px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #f0e7da; color:var(--brand-ink);
  padding: 6px 10px; border-radius:999px; font-size: var(--fs-sm);
}
.nav{ display:flex; gap:8px; flex-wrap:wrap }
.nav a{
  padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #eae2d6;
  color:#374151; font-weight:600; letter-spacing:.2px;
}
.nav a:hover{ background:var(--muted) }

/* Hero & cards */
.hero{ display:grid; gap: var(--s-lg); margin: var(--s-lg) 0 var(--s-xl) }
@media(min-width:980px){ .hero{ grid-template-columns: 1.1fr .9fr } }

.card{
  background:var(--surface); border:1px solid var(--stroke); border-radius: var(--radius-xl);
  padding: var(--s-lg); box-shadow: var(--shadow);
}
.hero-card{ position:relative }
.hero-card .bagel-ring{
  position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 64%, rgba(242,169,59,.22) 65% 70%, transparent 71%),
    conic-gradient(from 0deg, #ffe3ae, #f9c66b, #f2a93b, #ffe3ae);
  filter: blur(1px); opacity:.32; pointer-events:none;
}

/* Type elements */
h1{ font-size: var(--fs-xxl); margin:.2rem 0 .5rem; line-height:1.2; font-family:var(--font-display) }
h2{ font-size: var(--fs-xl); margin:.2rem 0 .5rem; line-height:1.25; font-family:var(--font-display) }
h3{ font-size: var(--fs-lg); margin:.2rem 0 .4rem; font-weight:700; font-family:var(--font-display) }
.lead{ font-size: var(--fs-lg); color:#475569 }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #f0e7da; color:#7c5a17;
  padding:6px 10px; border-radius:999px; font-size: var(--fs-sm); font-weight:700; letter-spacing:.3px;
}

/* Buttons */
.btn{
  cursor:pointer; border:1px solid #eadfce; border-radius:12px; padding:11px 14px;
  background:linear-gradient(#fff,#f9f6f1); color:#111827; font-weight:700;
  box-shadow:0 6px 18px rgba(17,24,39,.06); transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(17,24,39,.09) }
.btn.primary{ background:linear-gradient(#ffd88a,#ffb43a); color:#1b1000; border-color:#d49827 }
.btn.ghost{ background:#fff }

/* Grids & lists */
.grid{ display:grid; gap: var(--s-md) }
@media(min-width:820px){ .cols-2{ grid-template-columns:1fr 1fr } .cols-3{ grid-template-columns: repeat(3,1fr) } }

.kpis{ display:grid; gap: var(--s-sm) }
@media(min-width:720px){ .kpis{ grid-template-columns: repeat(3,1fr) } }
.kpi{ background:#fff; border:1px solid var(--stroke); border-radius: var(--radius); padding: var(--s-md) }
.kpi .label{ color:var(--sub); font-size: var(--fs-sm) }
.kpi .value{ font-weight:800; font-size: calc(var(--fs-lg) + 2px) }

.steps{ display:grid; gap: var(--s-sm) }
@media(min-width:720px){ .steps{ grid-template-columns: repeat(3,1fr) } }
.step{ background:#fff; border:1px solid var(--stroke); border-radius: var(--radius); padding: var(--s-md) }

.hr{ height:1px; background:#efe5d7; margin: var(--s-md) 0 }

.list{ display:grid; gap: var(--s-sm) }
.item{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-md);
  padding: 12px 14px; border-radius: var(--radius); background:#fff; border:1px solid var(--stroke)
}
.item h4{ margin:0; font-size: var(--fs-md); font-weight:700; font-family:var(--font-display) }
.item small{ color:var(--sub) }

/* Inputs */
.label{ display:block; margin: var(--s-sm) 0 6px; color: var(--sub); font-size: var(--fs-sm) }
.input,.select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--ring); background:#fff; color:var(--ink);
  outline:none; transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus,.select:focus{ border-color:#d6c5a6; box-shadow: 0 0 0 4px rgba(242,169,59,.15) }
.checkbox{ transform: scale(1.15); margin-right:8px }

.pill{
  display:inline-block; padding:4px 10px; border-radius:999px; background:#fff;
  border:1px solid #efe5d7; color:#7a5b19; font-size: var(--fs-sm); font-weight:700;
}

/* Product cards (homepage) */
.product-grid{ display:grid; gap: var(--s-md) }
@media(min-width:760px){ .product-grid{ grid-template-columns: repeat(3,1fr) } }
.prod{
  border:1px solid var(--stroke); border-radius:16px; background:#fff; overflow:hidden;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.prod:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,24,39,.10) }
.prod .img{
  height:140px; background:
    radial-gradient(60% 60% at 50% 40%, #ffe7b8 0 40%, #f2a93b 41% 55%, #d9922a 56% 100%);
  display:flex; align-items:center; justify-content:center;
}
.prod .body{ padding: var(--s-md) }
.prod .row{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-md) }
.price{ font-weight:800 }

/* Reviews reel */
.reel{ display:flex; gap: var(--s-md); overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px }
.reel .review{
  min-width:300px; scroll-snap-align:start; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

/* Footer & toast */
.footer{ margin: var(--s-xl) 0 var(--s-md); color:#6b7280; font-size:.92rem; text-align:center }
.toast{
  position:fixed; right:16px; bottom:16px; z-index:40; background:#fff; border:1px solid var(--stroke);
  border-radius:12px; padding:12px 14px; box-shadow: var(--shadow);
}
.hidden{ display:none }