:root{
  --honey-50:#fff8e1;
  --honey-100:#ffecb3;
  --honey-200:#ffe082;
  --honey-300:#ffd54f;
  --honey-400:#ffca28;
  --honey-500:#ffb300;
  --honey-600:#fb8c00;
  --honey-700:#f57c00;
  --brown-900:#1f1607;
  --ink:#111827;
  --muted:#475569;
  --line: rgba(17, 24, 39, .12);
  --surface:#ffffff;
  --alt:#fffdf7;
  --radius:16px;
  --shadow: 0 18px 60px rgba(2,6,23,.12);
  --container: 1180px;
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-serif: 'Playfair Display', ui-serif, Georgia;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--alt), #ffffff 55%);
  line-height: 1.6;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.94}
img{max-width:100%; display:block}

/* Ensure hidden attribute always hides elements (used for toast + mobile nav) */
[hidden]{display:none !important;}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto;}

/* Honey & bee motifs */
.honeycomb{
  position:absolute; inset: auto 0 0 0; height: 140px;
  background-image: url('images/honeycomb-pattern.webp');
  background-size: 520px auto;
  background-repeat: repeat-x;
  opacity: .18;
  pointer-events:none;
}

.bee-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--honey-500);
  box-shadow: 0 0 0 6px rgba(255,179,0,.18);
  display:inline-block;
  margin-right:10px;
}

.topbar{
  background: radial-gradient(900px 280px at 10% 0%, rgba(255,179,0,.28), transparent 55%),
              radial-gradient(900px 280px at 90% 0%, rgba(251,140,0,.22), transparent 55%),
              #101214;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: .92rem;
}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:10px 0; gap:14px; flex-wrap:wrap;}
.topbar-left{display:flex; align-items:center; gap:10px;}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.topbar-link{color: rgba(255,255,255,.86); font-weight: 600;}
.sep{opacity:.5}

.site-header{position:sticky; top:0; z-index:50; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap:14px;}

.brand{display:flex; align-items:center; gap:12px; font-weight:800;}
.brand-mark{border-radius: 12px; box-shadow: 0 10px 26px rgba(255,179,0,.18);}
.brand-name{font-weight: 900; letter-spacing: .2px;}
.brand-tag{font-size:.9rem; color: var(--muted); font-weight: 600; margin-top:2px;}

.nav{display:flex; gap: 10px; align-items:center;}
.nav-link{padding:10px 10px; border-radius: 12px; color: var(--muted); font-weight: 700; font-size:.95rem;}
.nav-link:hover{background: rgba(17,24,39,.04); color: var(--ink);}
.nav-link.active{background: rgba(255,179,0,.14); color: var(--brown-900);}

.header-cta{display:flex; gap:10px; align-items:center;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 11px 14px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; cursor:pointer; transition: transform .08s ease, filter .2s ease, background .2s ease, border-color .2s ease;}
.btn:active{transform: translateY(1px)}
.btn-primary{background: linear-gradient(135deg, var(--honey-600), var(--honey-500)); color: #1b1405;}
.btn-primary:hover{filter: brightness(1.04)}
.btn-ghost{background: #fff; border-color: var(--line);}
.btn-ghost:hover{background: rgba(17,24,39,.03)}
.btn-block{width:100%}

.nav-toggle{display:none; background:#fff; border: 1px solid var(--line); width:44px; height:44px; padding:0; border-radius: 12px; font-weight: 900; align-items:center; justify-content:center; gap:0;}
.mobile-nav{border-top:1px solid var(--line); background:#fff;}
.mobile-nav-inner{padding: 12px 0; display:grid; gap:10px;}
.mobile-nav-inner a{padding: 10px 10px; border-radius: 12px; font-weight: 750; color: var(--muted);}
.mobile-nav-inner a:hover{background: rgba(17,24,39,.04); color: var(--ink);}

@media (max-width: 1020px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* Hero */
.page-hero{position:relative; overflow:hidden; padding: 34px 0 12px; background:
  radial-gradient(900px 360px at 15% 10%, rgba(255,179,0,.30), transparent 55%),
  radial-gradient(900px 360px at 85% 0%, rgba(251,140,0,.22), transparent 55%),
  linear-gradient(180deg, #fffdf6, #ffffff);
  border-bottom: 1px solid var(--line);
}
.page-hero-inner{display:grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items:center; padding: 22px 0 34px;}
.crumb{display:inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(255,179,0,.14); border:1px solid rgba(255,179,0,.35); font-weight: 800; color: var(--brown-900); width: fit-content;}
.page-title{margin: 12px 0 8px; font-family: var(--font-serif); letter-spacing: -0.4px; font-size: clamp(2.0rem, 3.4vw, 3.05rem); line-height: 1.08;}
.page-sub{margin:0; color: var(--muted); max-width: 72ch;}
.page-hero-actions{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 16px;}

@media (max-width: 980px){
  .page-hero-inner{grid-template-columns: 1fr;}
}

.media-frame{
  display:block;
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(500px 240px at 20% 10%, rgba(255,179,0,.18), transparent 55%),
              radial-gradient(520px 260px at 90% 0%, rgba(251,140,0,.14), transparent 55%);
  pointer-events:none;
  opacity:.55;
}
.media-frame img{width:100%; height:auto;}

/* Sections */
.section{padding: 46px 0;}
.section.alt{background: linear-gradient(180deg, rgba(255,179,0,.10), rgba(255,179,0,0) 60%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 14px; flex-wrap:wrap;}
.section-head h2{margin:0; font-size: 1.6rem; letter-spacing: -0.2px;}
.muted{color: var(--muted)}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
@media (max-width: 980px){.grid-3{grid-template-columns: 1fr}}

.split{display:grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items:start;}
@media (max-width: 980px){.split{grid-template-columns: 1fr}}

.feature-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset: -120px -80px auto auto;
  width: 240px; height: 240px;
  background-image: url('images/bee-motif.webp');
  background-size: contain;
  background-repeat:no-repeat;
  opacity:.10;
  transform: rotate(10deg);
}
.feature-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,179,0,.14);
  border: 1px solid rgba(255,179,0,.32);
  color: var(--brown-900);
  font-weight: 850;
  font-size: .92rem;
  width: fit-content;
  margin-bottom: 10px;
}
.feature-card h2{margin:0 0 8px; font-size: 1.15rem; letter-spacing: -0.1px;}
.feature-card p{margin:0 0 10px; color: var(--muted)}

.checklist{list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 8px;}
.checklist li{padding-left: 26px; position:relative; color: var(--muted)}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color: var(--honey-700); font-weight: 900;}

.mini-cards{display:grid; gap: 10px; margin-top: 12px;}
.mini{padding: 12px 12px; border-radius: 14px; border: 1px dashed rgba(251,140,0,.35); background: rgba(255,179,0,.08); font-weight: 800; color: var(--brown-900);}

.card{border-radius: var(--radius); border: 1px solid var(--line); background:#fff; box-shadow: 0 10px 30px rgba(2,6,23,.06); overflow:hidden;}
.card-head{padding: 16px 16px 10px; border-bottom: 1px solid var(--line);}
.card-head h3{margin:0; font-size: 1.1rem;}
.card-body{padding: 16px;}
.card-foot{padding: 14px 16px 16px; border-top: 1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap;}

.list{display:grid; gap: 8px; padding: 10px 16px 16px;}
.list-item{padding: 12px 12px; border-radius: 14px; border:1px solid rgba(17,24,39,.10); background: rgba(255,179,0,.06); font-weight: 800;}

.stats{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;}
.stat{padding: 14px; border-radius: 14px; border:1px solid rgba(17,24,39,.10); background: rgba(255,179,0,.06);}
.stat .num{font-weight: 950; font-size: 1.2rem; font-family: var(--font-serif); color: var(--brown-900);}
.stat .lbl{color: var(--muted); font-weight: 650;}

.center{text-align:center; margin-top: 14px;}

/* Product grid */
.product-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
@media (max-width: 980px){.product-grid{grid-template-columns: 1fr}}

.product{border-radius: var(--radius); border: 1px solid var(--line); background:#fff; box-shadow: 0 10px 30px rgba(2,6,23,.06); overflow:hidden; display:flex; flex-direction:column;}
.product-img{display:block; background: linear-gradient(135deg, rgba(255,179,0,.18), rgba(251,140,0,.08)); border-bottom: 1px solid var(--line);}
.product-img img{width:100%; height:auto;}
.product-body{padding: 14px 14px 16px; display:grid; gap: 6px;}
.product-name{font-weight: 900; letter-spacing: -0.1px;}
.product-cat{font-weight: 800; color: var(--brown-900);}
.product-desc{color: var(--muted)}
.product-cta{font-weight: 900; color: var(--honey-700);}

/* Tiles */
.grid-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
@media (max-width: 980px){.grid-cards{grid-template-columns: 1fr}}

.tile-media{display:block; background: linear-gradient(135deg, rgba(255,179,0,.18), rgba(251,140,0,.08)); border-bottom: 1px solid var(--line);}
.tile-body{padding: 14px 14px 16px;}
.tile-body h3{margin:0 0 6px;}
.link{font-weight: 900; color: var(--honey-700);}

/* Product page */
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px;}
.pill{display:inline-flex; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(17,24,39,.10); background: rgba(255,179,0,.08); font-weight: 850; color: var(--brown-900);}
.bullets{margin: 8px 0 0; color: var(--muted)}

.note{margin-top: 16px; padding: 14px; border-radius: var(--radius); border: 1px solid rgba(251,140,0,.30); background: rgba(255,179,0,.08); color: var(--brown-900); font-weight: 650;}

.inline-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}

/* Blog */
.blog-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
@media (max-width: 980px){.blog-grid{grid-template-columns: 1fr}}

.blog-card{border-radius: var(--radius); border: 1px solid var(--line); background:#fff; box-shadow: 0 10px 30px rgba(2,6,23,.06); overflow:hidden; display:flex; flex-direction:column;}
.blog-img{display:block; background: linear-gradient(135deg, rgba(255,179,0,.18), rgba(251,140,0,.08)); border-bottom: 1px solid var(--line);}
.blog-body{padding: 14px 14px 16px; display:grid; gap: 6px;}
.blog-title{font-weight: 900; letter-spacing: -0.1px;}
.blog-meta{color: var(--muted); font-weight: 650; font-size: .92rem;}
.blog-excerpt{color: var(--muted)}

.article{max-width: 980px;}
.article-meta{color: var(--muted); font-weight: 700; margin-bottom: 8px;}
.article h2{margin: 0 0 12px; font-family: var(--font-serif); letter-spacing: -0.3px;}
.article-body{margin-top: 14px; color: var(--muted);}

/* Contact */
.contact-cards{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px;}
@media (max-width: 980px){.contact-cards{grid-template-columns: 1fr}}
.contact-card{padding: 16px; border-radius: var(--radius); border:1px solid var(--line); background:#fff; box-shadow: 0 10px 30px rgba(2,6,23,.06);}
.form-card{padding-bottom: 8px;}

.form{padding: 0 16px 16px;}
.form-row{display:grid; gap: 6px; margin-top: 12px;}
.form-row.two{grid-template-columns: 1fr 1fr; gap: 12px;}
@media (max-width: 720px){.form-row.two{grid-template-columns: 1fr}}

label{font-weight: 800; color: var(--brown-900);}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.14);
  background:#fff;
  outline:none;
  font-family: var(--font-sans);
  font-weight: 600;
}
input:focus, select:focus, textarea:focus{border-color: rgba(251,140,0,.55); box-shadow: 0 0 0 4px rgba(255,179,0,.18)}

.form-foot{margin-top: 10px; color: var(--muted); font-size: .92rem;}

/* Footer */
.site-footer{background: #101214; color: rgba(255,255,255,.84); margin-top: 28px;}
.footer-grid{display:grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 16px; padding: 36px 0;}
@media (max-width: 980px){.footer-grid{grid-template-columns: 1fr 1fr}}
.site-footer h3{margin:0 0 10px; font-size: 1.05rem;}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap: 8px;}
.site-footer a{color: rgba(255,255,255,.80); font-weight: 650;}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding: 14px 0 22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}

/* Floating contact + modal */
.floating-contact{
  position: fixed;
  right: 16px;
  bottom: 16px;
  border: 0;
  background: linear-gradient(135deg, var(--honey-600), var(--honey-500));
  color: #1b1405;
  font-weight: 950;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 18px 46px rgba(2,6,23,.22);
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  z-index: 70;
}
.floating-icon{width: 26px; height: 26px; border-radius: 999px; display:grid; place-items:center; background: rgba(255,255,255,.55); border: 1px solid rgba(17,24,39,.12);}

.contact-modal{position: fixed; inset:0; z-index: 80;}
.contact-modal-backdrop{position:absolute; inset:0; background: rgba(2,6,23,.55);}
.contact-modal-card{position: relative; width: min(720px, calc(100% - 24px)); margin: 10vh auto; background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid rgba(17,24,39,.12); overflow:hidden;}
.contact-modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding: 16px; border-bottom: 1px solid var(--line);
  background: radial-gradient(700px 220px at 20% 0%, rgba(255,179,0,.22), transparent 55%),
              radial-gradient(700px 220px at 90% 0%, rgba(251,140,0,.16), transparent 55%),
              #fff;
}
.contact-modal-title{font-weight: 950; font-size: 1.1rem;}
.contact-modal-sub{color: var(--muted); font-weight: 650; margin-top: 3px;}

.icon-btn{border:1px solid rgba(17,24,39,.14); background:#fff; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; font-weight: 900; cursor:pointer;}

.toast{position: fixed; inset: auto 0 22px 0; z-index: 90; display:flex; justify-content:center; pointer-events:none;}
.toast-card{pointer-events:none; background: rgba(16,18,20,.94); color: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 46px rgba(2,6,23,.40); width: min(560px, calc(100% - 26px));}
.toast-title{font-weight: 950;}
.toast-sub{color: rgba(255,255,255,.78); font-weight: 650; margin-top: 4px;}


.nav-toggle .hamburger{display:grid; gap:5px;}
.nav-toggle .bar{width:18px; height:2px; background: var(--ink); border-radius: 2px; display:block;}
.nav-toggle:focus{outline: 3px solid rgba(245,158,11,.30); outline-offset: 2px;}