/* ============================================
   BEAN & BLOOM ETHIOPIAN COFFEE — STYLES
   Dark luxury theme with gold accents
   ============================================ */
:root {
  --bb-gold: #c9a84c;
  --bb-gold-light: #dfc06e;
  --bb-gold-dark: #a8893a;
  --bb-cream: #f5efe3;
  --bb-brown: #3e2c1c;
  --bb-bg: #0c0a08;
  --bb-bg2: #110e0a;
  --bb-bg-card: #1a1510;
  --bb-text: #f0ebe0;
  --bb-muted: #8a7d6b;
  --bb-border: rgba(201,168,76,0.15);
  --bb-glow: 0 0 30px rgba(201,168,76,0.15);
  --bb-font-display: 'Playfair Display', Georgia, serif;
  --bb-font-body: 'Montserrat', sans-serif;
  --bb-font-accent: 'Cormorant Garamond', Georgia, serif;
}
#bbc-wrapper, #bbc-wrapper * { margin:0; padding:0; box-sizing:border-box; }
#bbc-wrapper { font-family:var(--bb-font-body); background:var(--bb-bg); color:var(--bb-text); overflow-x:hidden; line-height:1.6; }

/* HEADER */
.bbc-header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(12,10,8,0.8); backdrop-filter:blur(20px); border-bottom:1px solid var(--bb-border); transition:all .3s; }
.bbc-header.scrolled { background:rgba(12,10,8,0.97); box-shadow:0 4px 40px rgba(0,0,0,0.6); }
.bbc-header-inner { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:80px; }
.bbc-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.bbc-logo-text { display:flex; flex-direction:column; }
.bbc-brand { font-family:var(--bb-font-display); font-size:22px; font-weight:700; color:var(--bb-gold); letter-spacing:0.5px; }
.bbc-sub { font-family:var(--bb-font-body); font-size:9px; letter-spacing:4px; color:var(--bb-muted); font-weight:500; }
.bbc-nav { display:flex; gap:36px; }
.bbc-nav-link { font-size:13px; font-weight:500; color:var(--bb-muted); text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; transition:color .3s; position:relative; padding:4px 0; }
.bbc-nav-link:hover, .bbc-nav-link.active { color:var(--bb-gold); }
.bbc-nav-link.active::after { content:''; position:absolute; bottom:-2px; left:0; width:100%; height:1.5px; background:var(--bb-gold); }
.bbc-btn-header { font-size:12px; font-weight:600; padding:10px 28px; border:1px solid var(--bb-gold); color:var(--bb-gold); text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; transition:all .3s; }
.bbc-btn-header:hover { background:var(--bb-gold); color:var(--bb-bg); }
.bbc-menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.bbc-menu-toggle span { display:block; width:24px; height:1.5px; background:var(--bb-gold); margin:6px 0; transition:.3s; }

/* HERO */
.bbc-hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 40px 100px; overflow:hidden; }
.bbc-hero-bg { position:absolute; inset:0; background:linear-gradient(160deg, #1a1208 0%, #0c0a08 30%, #120e08 60%, #0a0806 100%); }
.bbc-hero-bg::before { content:''; position:absolute; inset:0; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.bbc-hero-overlay { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.06) 0%, transparent 60%); }
.bbc-hero-content { position:relative; z-index:3; text-align:center; max-width:800px; }
.bbc-hero-badge { display:inline-block; font-size:12px; letter-spacing:5px; color:var(--bb-gold); border:1px solid var(--bb-border); padding:8px 24px; margin-bottom:32px; font-weight:500; }
.bbc-hero-title { font-family:var(--bb-font-display); font-size:clamp(36px,6vw,72px); font-weight:700; line-height:1.15; margin-bottom:24px; color:var(--bb-cream); }
.bbc-hero-title em { font-family:var(--bb-font-accent); color:var(--bb-gold); font-weight:400; font-style:italic; }
.bbc-hero-subtitle { font-size:clamp(14px,1.5vw,17px); color:var(--bb-muted); max-width:600px; margin:0 auto 40px; line-height:1.8; font-weight:300; }
.bbc-hero-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.bbc-hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bbc-hero-scroll span { font-size:11px; letter-spacing:3px; color:var(--bb-muted); text-transform:uppercase; }
.bbc-scroll-line { width:1px; height:40px; background:linear-gradient(to bottom, var(--bb-gold), transparent); animation:bbc-scroll 2s ease-in-out infinite; }
@keyframes bbc-scroll { 0%,100% { opacity:.3; transform:scaleY(1); } 50% { opacity:1; transform:scaleY(1.3); } }

/* BUTTONS */
.bbc-btn { font-family:var(--bb-font-body); font-size:13px; font-weight:600; padding:16px 40px; text-decoration:none; letter-spacing:2px; text-transform:uppercase; transition:all .3s; display:inline-block; cursor:pointer; border:none; }
.bbc-btn-gold { background:linear-gradient(135deg, var(--bb-gold), var(--bb-gold-dark)); color:var(--bb-bg); }
.bbc-btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,0.4); background:linear-gradient(135deg, var(--bb-gold-light), var(--bb-gold)); }
.bbc-btn-outline { border:1px solid rgba(201,168,76,0.4); color:var(--bb-gold); background:transparent; }
.bbc-btn-outline:hover { background:rgba(201,168,76,0.1); border-color:var(--bb-gold); }
.bbc-btn-full { width:100%; text-align:center; }

/* STATS */
.bbc-stats { padding:60px 40px; background:var(--bb-bg2); border-top:1px solid var(--bb-border); border-bottom:1px solid var(--bb-border); }
.bbc-stats-inner { max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.bbc-stat { text-align:center; flex:1; padding:16px 0; }
.bbc-stat-num { font-family:var(--bb-font-display); font-size:clamp(28px,4vw,48px); font-weight:700; color:var(--bb-gold); }
.bbc-stat-plus { font-family:var(--bb-font-display); font-size:clamp(20px,3vw,36px); color:var(--bb-gold); }
.bbc-stat-label { display:block; font-size:13px; color:var(--bb-muted); letter-spacing:2px; margin-top:4px; }
.bbc-stat-div { width:1px; height:50px; background:var(--bb-border); }

/* OVERLINE & SECTION TITLE */
.bbc-overline { display:block; font-size:12px; letter-spacing:5px; color:var(--bb-gold); text-transform:uppercase; margin-bottom:12px; font-weight:500; }
.bbc-center { text-align:center; }
.bbc-section-title { font-family:var(--bb-font-display); font-size:clamp(24px,3.5vw,44px); font-weight:700; color:var(--bb-cream); margin-bottom:32px; line-height:1.2; }
.bbc-text { font-size:15px; color:var(--bb-muted); line-height:1.9; margin-bottom:16px; font-weight:300; }
.bbc-text-sm { font-size:14px; color:var(--bb-muted); line-height:1.8; }

/* OUR STORY */
.bbc-story { padding:120px 40px; background:var(--bb-bg); }
.bbc-story-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.bbc-story-img-placeholder { width:100%; aspect-ratio:4/5; background:linear-gradient(135deg, #1a1510, #241c12); border:1px solid var(--bb-border); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.bbc-coffee-plant { font-size:80px; opacity:.3; }
.bbc-story-img-border { position:absolute; inset:12px; border:1px solid rgba(201,168,76,0.1); }
.bbc-story-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.bbc-sf { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bb-bg-card); border:1px solid var(--bb-border); font-size:13px; color:var(--bb-cream); transition:all .3s; }
.bbc-sf:hover { border-color:var(--bb-gold); transform:translateX(4px); }
.bbc-sf-icon { font-size:18px; }

/* ORIGINS */
.bbc-origins { padding:120px 40px; background:var(--bb-bg2); }
.bbc-origins-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.bbc-origin-card { background:var(--bb-bg-card); border:1px solid var(--bb-border); padding:40px 32px; text-align:center; transition:all .4s; position:relative; overflow:hidden; }
.bbc-origin-card:hover { border-color:var(--bb-gold); transform:translateY(-6px); box-shadow:var(--bb-glow); }
.bbc-origin-card h3 { font-family:var(--bb-font-display); font-size:26px; font-weight:700; color:var(--bb-cream); margin-bottom:8px; }
.bbc-origin-flavor { font-family:var(--bb-font-accent); font-size:15px; color:var(--bb-gold); font-style:italic; margin-bottom:16px; letter-spacing:0.5px; }
.bbc-origin-visual { margin-bottom:24px; }
.bbc-origin-emoji { font-size:48px; margin-bottom:8px; }
.bbc-origin-alt { font-size:12px; color:var(--bb-muted); letter-spacing:2px; }
.bbc-origin-featured { border-color:rgba(201,168,76,0.3); background:linear-gradient(180deg, rgba(201,168,76,0.05), var(--bb-bg-card)); }
.bbc-origin-badge { position:absolute; top:16px; right:-32px; background:var(--bb-gold); color:var(--bb-bg); font-size:10px; font-weight:700; letter-spacing:2px; padding:4px 40px; transform:rotate(45deg); }

/* PRODUCTS */
.bbc-products { padding:120px 40px; background:var(--bb-bg); }
.bbc-products-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.bbc-product-card { background:var(--bb-bg-card); border:1px solid var(--bb-border); overflow:hidden; transition:all .4s; }
.bbc-product-card:hover { border-color:var(--bb-gold); transform:translateY(-4px); box-shadow:var(--bb-glow); }
.bbc-product-img { height:180px; background:linear-gradient(135deg, #1a1510, #201812); display:flex; align-items:center; justify-content:center; font-size:60px; opacity:.3; border-bottom:1px solid var(--bb-border); }
.bbc-product-info { padding:28px 24px; }
.bbc-product-info h3 { font-family:var(--bb-font-display); font-size:20px; font-weight:700; color:var(--bb-cream); margin-bottom:10px; }
.bbc-product-meta { display:flex; gap:8px; margin-bottom:12px; }
.bbc-product-meta span { font-size:11px; padding:4px 12px; border:1px solid var(--bb-border); color:var(--bb-gold); letter-spacing:1px; font-weight:500; }
.bbc-product-info p { font-size:14px; color:var(--bb-muted); line-height:1.7; margin-bottom:16px; }
.bbc-product-details { font-size:12px; color:var(--bb-muted); border-top:1px solid var(--bb-border); padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.bbc-product-details strong { color:var(--bb-cream); }

/* PROCESS */
.bbc-process { padding:120px 40px; background:var(--bb-bg2); }
.bbc-process-timeline { max-width:700px; margin:0 auto; position:relative; }
.bbc-timeline-line { position:absolute; left:28px; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, var(--bb-gold), var(--bb-border), transparent); }
.bbc-process-step { display:flex; gap:32px; margin-bottom:48px; position:relative; }
.bbc-step-num { font-family:var(--bb-font-display); font-size:18px; font-weight:700; color:var(--bb-gold); background:var(--bb-bg2); width:56px; height:56px; border:1px solid var(--bb-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.bbc-step-content h3 { font-family:var(--bb-font-display); font-size:20px; font-weight:600; color:var(--bb-cream); margin-bottom:8px; }
.bbc-step-content p { font-size:14px; color:var(--bb-muted); line-height:1.8; }

/* CERTIFICATIONS */
.bbc-certs { padding:48px 40px; background:var(--bb-bg); border-top:1px solid var(--bb-border); border-bottom:1px solid var(--bb-border); }
.bbc-certs-inner { max-width:900px; margin:0 auto; display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
.bbc-cert { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--bb-muted); letter-spacing:1px; text-transform:uppercase; font-weight:500; }

/* CONTACT */
.bbc-contact { padding:120px 40px; background:var(--bb-bg2); }
.bbc-contact-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.bbc-contact-details { margin-top:32px; display:flex; flex-direction:column; gap:12px; }
.bbc-cd { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--bb-muted); }
.bbc-form { display:flex; flex-direction:column; gap:16px; }
.bbc-form-row { display:flex; gap:16px; }
.bbc-input { flex:1; padding:14px 20px; background:var(--bb-bg-card); border:1px solid var(--bb-border); color:var(--bb-text); font-family:var(--bb-font-body); font-size:14px; transition:border-color .3s; outline:none; -webkit-appearance:none; }
.bbc-input:focus { border-color:var(--bb-gold); }
.bbc-input::placeholder { color:var(--bb-muted); }
.bbc-textarea { resize:vertical; min-height:100px; }
.bbc-select { cursor:pointer; }

/* FOOTER */
.bbc-footer { background:#060503; border-top:1px solid var(--bb-border); padding:60px 40px 0; }
.bbc-footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.bbc-footer-col h4 { font-family:var(--bb-font-display); font-size:15px; font-weight:600; color:var(--bb-gold); margin-bottom:16px; }
.bbc-footer-col a { display:block; color:var(--bb-muted); text-decoration:none; font-size:13px; margin-bottom:8px; transition:color .3s; }
.bbc-footer-col a:hover { color:var(--bb-gold); }
.bbc-footer-bottom { border-top:1px solid var(--bb-border); text-align:center; padding:20px 0; }
.bbc-footer-bottom p { font-size:12px; color:var(--bb-muted); margin:0; letter-spacing:1px; }

/* PARTICLES */
.bbc-particle { position:absolute; border-radius:50%; background:var(--bb-gold); opacity:0; animation:bbc-float 8s ease-in-out infinite; }
@keyframes bbc-float { 0% { opacity:0; transform:translateY(0) rotate(0deg); } 40% { opacity:.25; } 100% { opacity:0; transform:translateY(-250px) rotate(120deg); } }

/* SCROLL REVEAL */
.bbc-reveal { opacity:0; transform:translateY(30px); transition:all .8s ease; }
.bbc-reveal.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:1024px) {
  .bbc-story-inner, .bbc-contact-inner { grid-template-columns:1fr; gap:48px; }
  .bbc-origins-grid, .bbc-products-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .bbc-nav { display:none; position:fixed; top:80px; left:0; width:100%; background:rgba(12,10,8,.97); flex-direction:column; align-items:center; padding:32px 0; gap:24px; border-bottom:1px solid var(--bb-border); }
  .bbc-nav.open { display:flex; }
  .bbc-btn-header { display:none; }
  .bbc-menu-toggle { display:block; }
  .bbc-form-row { flex-direction:column; }
  .bbc-footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .bbc-origins-grid, .bbc-products-grid { grid-template-columns:1fr; }
  .bbc-stats-inner { flex-direction:column; gap:20px; }
  .bbc-stat-div { width:50px; height:1px; }
  .bbc-story-features { grid-template-columns:1fr; }
  .bbc-certs-inner { gap:24px; }
  .bbc-footer-inner { grid-template-columns:1fr; }
  .bbc-hero { padding:120px 24px 100px; }
}