/* ============================================================
   Bananalyze Design System — v2.0
   Extracted from site.css, chat.css, portal.css, blob.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Gradients */
  --bz-gradient:        linear-gradient(135deg, #C2477E 0%, #8400FF 100%);
  --bz-gradient-full:   linear-gradient(90deg, #FF8C00 0%, #C2477E 47.12%, #8400FF 100%);

  /* Brand colours */
  --bz-orange:   #FF8C00;
  --bz-coral:    #E55A3F;
  --bz-magenta:  #C2477E;
  --bz-purple:   #8400FF;
  --bz-yellow:   #F1C700;

  /* ── Layer colours (data source tiers) ── */
  --bz-layer-1-color:   #FF8C00;
  --bz-layer-1-border:  3px solid #FF8C00;
  --bz-layer-1-grad:    linear-gradient(135deg, #ff8c00 0%, #ff5500 100%);
  --bz-layer-1-shadow:  0 6px 16px rgba(255, 140, 0, 0.30);

  --bz-layer-2-color:   #E55A3F;
  --bz-layer-2-border:  3px solid #E55A3F;
  --bz-layer-2-grad:    linear-gradient(135deg, #e55a3f 0%, #e53f3f 100%);
  --bz-layer-2-shadow:  0 6px 16px rgba(229, 90, 63, 0.30);

  --bz-layer-3-color:   #C2477E;
  --bz-layer-3-border:  3px solid #C2477E;
  --bz-layer-3-grad:    linear-gradient(135deg, #c2477e 0%, #ab0ca8 100%);
  --bz-layer-3-shadow:  0 6px 16px rgba(194, 71, 126, 0.30);

  --bz-layer-4-color:   #8400FF;
  --bz-layer-4-border:  3px solid #8400FF;
  --bz-layer-4-grad:    linear-gradient(135deg, #8400FF 0%, #6e00ff 100%);
  --bz-layer-4-shadow:  0 6px 16px rgba(132, 0, 255, 0.30);

  /* ── Icon box gradients & shadows (capabilities panel) ── */
  --bz-icon-orange-grad:   linear-gradient(135deg, #FF8C00 0%, #ff5500 100%);
  --bz-icon-orange-shadow: 0 6px 16px rgba(255, 140, 0, 0.30);

  --bz-icon-coral-grad:    linear-gradient(135deg, #E55A3F 0%, #e53f3f 100%);
  --bz-icon-coral-shadow:  0 6px 16px rgba(229, 90, 63, 0.30);

  --bz-icon-pink-grad:     linear-gradient(135deg, #C2477E 0%, #a03468 100%);
  --bz-icon-pink-shadow:   0 6px 16px rgba(194, 71, 126, 0.30);

  --bz-icon-purple-grad:   linear-gradient(135deg, #8400FF 0%, #6e00ff 100%);
  --bz-icon-purple-shadow: 0 6px 16px rgba(132, 0, 255, 0.30);

  --bz-icon-green-grad:    linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --bz-icon-green-shadow:  0 6px 16px rgba(34, 197, 94, 0.30);

  /* Backgrounds */
  --bz-bg:          #f8f4f1;
  --bz-bg-white:    #ffffff;
  --bz-bg-hero:     #022350;
  --bz-bg-alt:      #f8f9fa;

  /* Text */
  --bz-text:          #183153;
  --bz-text-muted:    #64748b;
  --bz-text-light:    rgba(255,255,255,0.65);
  --bz-text-on-dark:  #ffffff;

  /* Borders */
  --bz-border:           #e2e8f0;
  --bz-border-dark:      rgba(0,0,0,0.08);
  --bz-border-glass:     rgba(255,255,255,0.8);
  --bz-border-glass-dk:  rgba(255,255,255,0.15);

  /* Glass — light surfaces */
  --bz-glass:       rgb(255 255 255 / 50%);
  --bz-glass-hover: rgb(255 255 255 / 90%);

  /* Glass — dark (hero) surfaces */
  --bz-glass-dk:    rgb(255 255 255 / 10%);

  /* Shadows — two levels only */
  --bz-shadow-sm:  0 2px 8px rgba(0,0,0,0.05);
  --bz-shadow-md:  0 4px 12px rgba(0,0,0,0.10);

  /* CTA glow (purple only) */
  --bz-glow:       0 4px 15px rgba(132,0,255,0.30);
  --bz-glow-hover: 0 6px 20px rgba(132,0,255,0.50);

  /* Blur */
  --bz-blur:        blur(10px);
  --bz-blur-strong: blur(20px);

  /* Radius */
  --bz-radius-sm:   8px;
  --bz-radius-md:   12px;
  --bz-radius-lg:   16px;
  --bz-radius-xl:   20px;
  --bz-radius-2xl:  25px;
  --bz-radius-pill: 100px;

  /* Transitions */
  --bz-t-fast: transform 0.2s ease, box-shadow 0.2s ease;
  --bz-t:      transform 0.3s ease, box-shadow 0.3s ease;

  /* Spacing */
  --bz-s1: 4px;  --bz-s2: 8px;   --bz-s3: 12px;  --bz-s4: 16px;
  --bz-s5: 20px; --bz-s6: 24px;  --bz-s8: 32px;  --bz-s10: 40px;
  --bz-s12: 48px; --bz-s16: 64px;

  /* Fonts */
  --bz-font-display: 'Sora', sans-serif;
  --bz-font-ui:      'DM Sans', sans-serif;
  --bz-font-body:    'Inter', sans-serif;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background-color: var(--bz-bg);
  color: var(--bz-text);
  font-family: var(--bz-font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; }
a { color: var(--bz-text); text-decoration: none; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(24,49,81,0.2); border-radius: var(--bz-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(24,49,81,0.4); }


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

.bz-gradient-text {
  background: var(--bz-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-bottom: 4px;
  padding-right: 4px;
  -webkit-font-smoothing: antialiased;
}

/* Display — Sora, hero headlines */
.bz-display {
  font-family: var(--bz-font-display);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
  color: #fff;
}
.bz-display em {
  font-style: normal;
  background: var(--bz-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bz-h1 { font-family: var(--bz-font-display); font-size: clamp(28px,4vw,48px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--bz-text); }
.bz-h2 { font-family: var(--bz-font-display); font-size: clamp(22px,3vw,32px); font-weight: 600; line-height: 1.2; color: var(--bz-text); }
.bz-h3 { font-family: var(--bz-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--bz-text); }

.bz-body-lg { font-size: 18px; line-height: 1.7; color: var(--bz-text-muted); }
.bz-body    { font-size: 15px; line-height: 1.65; color: var(--bz-text-muted); }
.bz-body-sm { font-size: 13px; line-height: 1.6;  color: var(--bz-text-muted); }

.bz-ui    { font-family: var(--bz-font-ui); font-size: 15px; font-weight: 500; }
.bz-ui-sm { font-family: var(--bz-font-ui); font-size: 13px; font-weight: 500; }
.bz-label { font-family: var(--bz-font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bz-text-muted); }


/* ============================================================
   4. SURFACES
   ============================================================ */

/* Light glass — on #f8f4f1 */
.bz-glass {
  background: var(--bz-glass);
  border: 1px solid var(--bz-border-glass);
  border-radius: var(--bz-radius-xl);
  backdrop-filter: var(--bz-blur);
  -webkit-backdrop-filter: var(--bz-blur);
  box-shadow: var(--bz-shadow-sm);
}
.bz-glass:hover { background: var(--bz-glass-hover); box-shadow: var(--bz-shadow-md); }

/* Dark glass — on #022350 */
.bz-glass-dark {
  background: var(--bz-glass-dk);
  border: 1px solid var(--bz-border-glass-dk);
  border-radius: var(--bz-radius-xl);
  backdrop-filter: var(--bz-blur);
  -webkit-backdrop-filter: var(--bz-blur);
}

/* White card */
.bz-card {
  background: var(--bz-bg-white);
  border-radius: var(--bz-radius-xl);
  padding: var(--bz-s8);
  box-shadow: var(--bz-shadow-md);
  transition: var(--bz-t);
}
.bz-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.10); }

/* Navy quality box — used in dark sections */
.bz-card-navy {
  position: relative;
  background: rgba(19,45,81,0.6);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bz-radius-xl);
  padding: 32px 28px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.bz-card-navy:hover {
  transform: translateY(-6px);
  background: rgba(19,45,81,0.8);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* Accent strip on card top */
.bz-card-strip {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: var(--bz-radius-xl) var(--bz-radius-xl) 0 0;
}
.bz-strip-gradient { background: var(--bz-gradient-full); }
.bz-strip-orange   { background: linear-gradient(90deg,#FF8C00,#ff5500); }
.bz-strip-pink     { background: linear-gradient(90deg,#C2477E,#ab0ca8); }
.bz-strip-purple   { background: linear-gradient(90deg,#8400FF,#6e00ff); }

/* Tinted boxes (on hero) */
.bz-tinted { border-radius: var(--bz-radius-xl); padding: 24px; }
.bz-tinted-orange { background: rgba(254,139,3,0.30); }
.bz-tinted-pink   { background: rgba(254,3,105,0.30); }
.bz-tinted-purple { background: rgba(134,3,254,0.30); }

/* Banana CTA box */
.bz-banana-box { background: var(--bz-yellow); border-radius: var(--bz-radius-xl); overflow: hidden; }

/* Box with gradient accent on left border (chat/box-background style) */
.bz-box-accent {
  position: relative;
  background: var(--bz-glass);
  border: 1px solid rgba(200,195,220,0.15);
  border-radius: var(--bz-radius-lg);
  padding: 20px 24px;
  backdrop-filter: var(--bz-blur);
  -webkit-backdrop-filter: var(--bz-blur);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.bz-box-accent::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: var(--bz-radius-lg) 0 0 var(--bz-radius-lg);
  background: linear-gradient(180deg,#a882ff,#ff8c5a);
  opacity: 0; transition: opacity 0.4s ease;
}
.bz-box-accent:hover { background: rgba(255,255,255,0.95); border-color: rgba(168,130,255,0.25); }
.bz-box-accent:hover::before { opacity: 1; }


/* ============================================================
   5. BUTTONS
   ============================================================ */

.bz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bz-s2); padding: 10px 22px;
  border-radius: var(--bz-radius-pill);
  font-family: var(--bz-font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: var(--bz-t-fast);
  white-space: nowrap; text-decoration: none; line-height: 1;
}
.bz-btn:active { transform: scale(0.97); }

/* Primary — gradient CTA */
.bz-btn-primary {
  background: var(--bz-gradient);
  color: #fff; box-shadow: var(--bz-glow);
}
.bz-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--bz-glow-hover); color: #fff; }

/* Ghost on dark bg */
.bz-btn-ghost-dark {
  background: var(--bz-glass-dk); color: #fff;
  border: 1px solid var(--bz-border-glass-dk);
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
}
.bz-btn-ghost-dark:hover { background: rgb(255 255 255 / 15%); transform: translateY(-1px); color: #fff; }

/* Ghost on light bg */
.bz-btn-ghost-light {
  background: var(--bz-glass); color: var(--bz-text);
  border: 1px solid var(--bz-border);
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
}
.bz-btn-ghost-light:hover { background: var(--bz-glass-hover); box-shadow: var(--bz-shadow-md); }

/* Sizes */
.bz-btn-sm { padding: 8px 18px; font-size: 13px; }
.bz-btn-lg { padding: 14px 30px; font-size: 15px; }

/* Round send button */
.bz-btn-send {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: var(--bz-gradient); box-shadow: var(--bz-glow);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; transition: var(--bz-t-fast);
}
.bz-btn-send:hover { transform: scale(1.1); box-shadow: var(--bz-glow-hover); }


/* ============================================================
   6. NAVIGATION
   ============================================================ */

.bz-nav {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 1000; padding: 10px 24px;
  background: linear-gradient(180deg,rgba(10,10,20,0.3) 0%,rgba(10,10,20,0) 100%);
  font-family: var(--bz-font-ui);
}
.bz-nav-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bz-glass-dk);
  border: 1px solid var(--bz-border-glass-dk);
  border-radius: var(--bz-radius-pill);
  padding: 8px 8px 8px 24px;
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
  box-shadow: var(--bz-shadow-md); transition: box-shadow 0.3s ease;
}
.bz-nav-inner:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.bz-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: #fff;
  letter-spacing: -0.3px; text-decoration: none; flex-shrink: 0;
}
.bz-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.bz-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--bz-text-light);
  padding: 8px 16px; border-radius: var(--bz-radius-pill);
  transition: all 0.2s ease; white-space: nowrap; text-decoration: none;
}
.bz-nav-links a:hover { color: #fff; background: var(--bz-glass-dk); }
.bz-nav-links a.active { color: #fff; background: rgb(255 255 255 / 15%); font-weight: 600; }
.bz-nav-right { display: flex; align-items: center; gap: 8px; }
.bz-nav-ghost {
  font-family: var(--bz-font-ui); font-size: 14px; font-weight: 500; color: #fff;
  background: transparent; border: none; padding: 8px 18px;
  border-radius: var(--bz-radius-pill); cursor: pointer; transition: all 0.2s ease;
}
.bz-nav-ghost:hover { background: var(--bz-glass-dk); }


/* ============================================================
   7. FORM ELEMENTS
   ============================================================ */

.bz-input, .bz-select, .bz-textarea {
  width: 100%; background: #f7f7f8;
  border: 1.5px solid var(--bz-border);
  border-radius: var(--bz-radius-md);
  color: var(--bz-text); font-family: var(--bz-font-body);
  font-size: 15px; padding: 10px 14px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; appearance: none;
}
.bz-input::placeholder, .bz-textarea::placeholder { color: var(--bz-text-muted); }
.bz-input:focus, .bz-select:focus, .bz-textarea:focus {
  border-color: var(--bz-purple);
  box-shadow: 0 0 0 3px rgba(132,0,255,0.10); background: #fff;
}
.bz-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.bz-input.bz-error { border-color: #dc2626; }
.bz-input.bz-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.10); }

.bz-input-label { display: block; font-family: var(--bz-font-ui); font-size: 13px; font-weight: 500; color: var(--bz-text); margin-bottom: 6px; }
.bz-input-hint  { font-size: 12px; color: var(--bz-text-muted); margin-top: 4px; }
.bz-input-error { font-size: 12px; color: #dc2626; margin-top: 4px; }

/* Chat input box */
.bz-chat-input {
  width: 100%; background: var(--bz-glass);
  border: 1px solid var(--bz-border); border-radius: var(--bz-radius-lg);
  padding: 8px; box-shadow: var(--bz-shadow-sm);
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
}
.bz-chat-textarea {
  width: 100%; border: none; outline: none; resize: none;
  font-family: var(--bz-font-body); font-size: 15px; line-height: 1.5;
  padding: 8px 56px 8px 12px;
  border-radius: var(--bz-radius-md); background: #f7f7f8;
  max-height: 200px; overflow-y: auto; color: var(--bz-text);
}
.bz-chat-textarea::placeholder { color: var(--bz-text-muted); }


/* ============================================================
   8. BADGES & CHIPS
   ============================================================ */

/* Suggestion chip — matches site exactly */
.bz-chip {
  display: inline-flex; align-items: center; gap: var(--bz-s2);
  padding: 10px 20px; border-radius: var(--bz-radius-pill);
  font-family: var(--bz-font-ui); font-size: 13px; font-weight: 500;
  color: var(--bz-text); background: var(--bz-glass);
  border: 2px solid #fff;
  box-shadow: var(--bz-shadow-sm);
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
  cursor: pointer; transition: background 0.2s ease; user-select: none; white-space: nowrap;
}
.bz-chip:hover { background: var(--bz-glass-hover); color: var(--bz-text); }

/* Quick-action pill */
.bz-pill {
  display: inline-flex; align-items: center; gap: var(--bz-s2);
  padding: 8px 14px; border-radius: var(--bz-radius-pill);
  font-family: var(--bz-font-ui); font-size: 13px; font-weight: 500;
  color: #374151; background: rgb(255 255 255 / 60%);
  border: 1px solid var(--bz-border-glass);
  backdrop-filter: var(--bz-blur); -webkit-backdrop-filter: var(--bz-blur);
  box-shadow: var(--bz-shadow-sm); cursor: pointer; transition: var(--bz-t-fast);
}
.bz-pill:hover { background: var(--bz-glass-hover); transform: translateY(-2px); box-shadow: var(--bz-shadow-md); }

/* Status badge */
.bz-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--bz-radius-pill);
  font-family: var(--bz-font-ui); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.bz-badge-gradient { background: var(--bz-gradient); color: #fff; }
.bz-badge-orange   { background: rgba(255,140,0,0.12); color: #c97000; border: 1px solid rgba(255,140,0,0.25); }
.bz-badge-coral    { background: rgba(229,90,63,0.12); color: #b83c20; border: 1px solid rgba(229,90,63,0.25); }
.bz-badge-pink     { background: rgba(194,71,126,0.12); color: #a33468; border: 1px solid rgba(194,71,126,0.25); }
.bz-badge-purple   { background: rgba(132,0,255,0.10); color: var(--bz-purple); border: 1px solid rgba(132,0,255,0.20); }
.bz-badge-green    { background: rgba(40,167,69,0.10); color: #166534; border: 1px solid rgba(40,167,69,0.22); }
.bz-badge-gray     { background: rgba(0,0,0,0.05); color: var(--bz-text-muted); border: 1px solid var(--bz-border); }


/* ============================================================
   FEATURE ITEMS (ob-feature-item pattern from demo.css)
   Left bar hidden by default, reveals on hover per layer color
   ============================================================ */

.bz-feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--bz-radius-md);
  padding: 20px 24px;
  box-shadow: var(--bz-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.bz-feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}

/* Left bar — hidden by default, slides in on hover */
.bz-feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: var(--bz-radius-md) 0 0 var(--bz-radius-md);
  opacity: 0;
  transition: opacity 0.25s ease;
  background: linear-gradient(180deg, #FF8C00, #ff5500); /* default: orange */
}

.bz-feature-item:hover::before  { opacity: 1; }

/* Per-layer bar colors */
.bz-feature-coral::before   { background: linear-gradient(180deg, #E55A3F, #e53f3f); }
.bz-feature-magenta::before { background: linear-gradient(180deg, #C2477E, #ab0ca8); }
.bz-feature-purple::before  { background: linear-gradient(180deg, #8400FF, #6e00ff); }
.bz-feature-green::before   { background: linear-gradient(180deg, #22c55e, #16a34a); }


/* ============================================================
   9. UTILITY
   ============================================================ */

.bz-hover-lift { transition: var(--bz-t-fast); }
.bz-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--bz-shadow-md); }

.bz-divider { height: 1px; background: var(--bz-border); border: none; margin: var(--bz-s8) 0; }

.bz-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Blob orbs (from blob.css) */
.bz-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bz-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; }
.bz-blob-1 { width: 400px; height: 400px; background: rgba(132,0,255,0.25); top: -100px; right: -80px; animation: bz-orb1 8s ease-in-out infinite; }
.bz-blob-2 { width: 350px; height: 350px; background: rgba(194,71,126,0.15); bottom: 100px; left: -100px; animation: bz-orb2 10s ease-in-out infinite; }
.bz-blob-3 { width: 200px; height: 200px; background: rgba(245,200,66,0.12); top: 30%; left: 15%; animation: bz-orb3 12s ease-in-out infinite; }

@keyframes bz-orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.1);} }
@keyframes bz-orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(25px,-15px) scale(1.05);} }
@keyframes bz-orb3 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(15px,-20px);} }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.bz-fade-up { animation: fadeUp 0.6s ease both; }

/* Responsive grids */
.bz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bz-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.bz-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

@media (max-width: 992px) { .bz-grid-3, .bz-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bz-grid-2, .bz-grid-3, .bz-grid-4 { grid-template-columns: 1fr; } }


/* ============================================================
   10. ICON BOXES (capabilities panel style)
   44px, white icon, gradient background, matching shadow
   ============================================================ */

.bz-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
  transition: transform 0.2s ease;
}
.bz-icon-box:hover { transform: scale(1.08); }

.bz-icon-box-lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 22px;
}

.bz-icon-orange { background: var(--bz-icon-orange-grad); box-shadow: var(--bz-icon-orange-shadow); }
.bz-icon-coral  { background: var(--bz-icon-coral-grad);  box-shadow: var(--bz-icon-coral-shadow); }
.bz-icon-pink   { background: var(--bz-icon-pink-grad);   box-shadow: var(--bz-icon-pink-shadow); }
.bz-icon-purple { background: var(--bz-icon-purple-grad); box-shadow: var(--bz-icon-purple-shadow); }
.bz-icon-green  { background: var(--bz-icon-green-grad);  box-shadow: var(--bz-icon-green-shadow); }


/* ============================================================
   11. LAYER BLOCKS (data source tier separators)
   Left border accent, used on cards/rows to indicate data layer
   ============================================================ */

.bz-layer {
  border-left: 3px solid transparent;
  border-radius: var(--bz-radius-lg);
  padding: 16px 20px;
  background: var(--bz-glass);
  backdrop-filter: var(--bz-blur);
  -webkit-backdrop-filter: var(--bz-blur);
}

.bz-layer-1 { border-left: var(--bz-layer-1-border); }
.bz-layer-2 { border-left: var(--bz-layer-2-border); }
.bz-layer-3 { border-left: var(--bz-layer-3-border); }
.bz-layer-4 { border-left: var(--bz-layer-4-border); }

/* Layer dot indicator (inline color pill) */
.bz-layer-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bz-layer-dot-1 { background: var(--bz-layer-1-color); }
.bz-layer-dot-2 { background: var(--bz-layer-2-color); }
.bz-layer-dot-3 { background: var(--bz-layer-3-color); }
.bz-layer-dot-4 { background: var(--bz-layer-4-color); }