/* ============================================================
   Species Product Pages — scoped by page-specific IDs
   poultrybi (#pbi-page) · swinebi (#sbi-page)
   dairybi   (#dbi-page) · beefbi  (#bbi-page)
   ============================================================ */

/* ── PoultryBI ─────────────────────────────────────────────── */
#pbi-page {
  background: #0e0800;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f1f5f9;
  overflow-x: hidden;
  margin-top: 0;
}
#pbi-page a { color: inherit; text-decoration: none; }
.pbi-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(14,8,0,0.92);
  border-bottom: 1px solid rgba(245,158,11,0.22);
  backdrop-filter: blur(20px);
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.pbi-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.pbi-brand-name {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 20%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pbi-brand-sub { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.09em; }
.pbi-nav-right { display: flex; align-items: center; gap: 12px; }
.pbi-btn-back {
  padding: 7px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.10); text-decoration: none; transition: all 0.2s;
}
.pbi-btn-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pbi-btn-cta {
  padding: 9px 22px; border-radius: 9px; font-size: 0.875rem; font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 12px rgba(245,158,11,0.35); transition: all 0.25s;
}
.pbi-btn-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.pbi-hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 65% 50% at 60% 35%, rgba(245,158,11,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(251,191,36,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #0e0800 0%, #150e00 60%, #0e0800 100%);
  display: flex; align-items: center;
  padding: 100px 40px 60px;
  max-width: 1200px; margin: 0 auto;
  gap: 60px;
}
.pbi-hero::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: pbiGridDrift 30s linear infinite;
  pointer-events: none;
}
@keyframes pbiGridDrift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
.pbi-hero-left { flex: 1; min-width: 0; position: relative; z-index: 2; }
.pbi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.30);
  border-radius: 40px; padding: 6px 16px;
  font-size: 0.72rem; font-weight: 700; color: #fcd34d;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 24px;
}
.pbi-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 8px #f59e0b;
  animation: pbiPulse 2s ease-in-out infinite;
}
@keyframes pbiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
.pbi-hero-headline { font-size: clamp(2.4rem, 3.8vw, 4rem); font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; }
.pbi-hero-headline-grad {
  background: linear-gradient(135deg, #fff 20%, #f59e0b 60%, #fcd34d 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block;
}
.pbi-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.60); line-height: 1.75; margin-bottom: 36px; max-width: 520px; }
.pbi-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.pbi-btn-primary {
  padding: 15px 36px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 28px rgba(245,158,11,0.42); transition: all 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.pbi-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); }
.pbi-btn-ghost {
  padding: 15px 28px; border-radius: 12px; font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: all 0.25s;
  display: inline-flex; align-items: center;
}
.pbi-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pbi-hero-stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.pbi-stat { display: flex; flex-direction: column; gap: 3px; }
.pbi-stat-val { font-size: 1.7rem; font-weight: 900; color: #f59e0b; line-height: 1; }
.pbi-stat-lbl { font-size: 0.70rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.09em; }
.pbi-hero-right { width: 340px; flex-shrink: 0; position: relative; z-index: 2; }
.pbi-panel {
  background: rgba(20,12,0,0.75); border: 1px solid rgba(245,158,11,0.22);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}
.pbi-panel::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, #fcd34d, transparent); }
.pbi-panel-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(245,158,11,0.08);
}
.pbi-panel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pbi-panel-label { font-size: 0.63rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.10em; flex: 1; }
.pbi-kpi-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pbi-kpi-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  border-bottom: 1px solid rgba(245,158,11,0.06); transition: background 0.2s;
}
.pbi-kpi-row:last-child { border-bottom: none; }
.pbi-kpi-row:hover { background: rgba(245,158,11,0.07); }
.pbi-kpi-name { font-size: 0.72rem; color: rgba(255,255,255,0.50); font-weight: 500; }
.pbi-kpi-val { font-size: 0.98rem; font-weight: 800; }
.pbi-kpi-delta { font-size: 0.64rem; color: rgba(255,255,255,0.35); }
.pbi-features { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
.pbi-section-eyebrow { font-size: 0.72rem; font-weight: 700; color: #f59e0b; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.pbi-section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.pbi-section-sub { font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 600px; margin-bottom: 52px; }
.pbi-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .pbi-feat-grid { grid-template-columns: 1fr; } }
.pbi-feat-card {
  background: rgba(20,12,0,0.65); border: 1.5px solid rgba(245,158,11,0.15);
  border-radius: 16px; padding: 24px; transition: all 0.3s ease;
}
.pbi-feat-card:hover { border-color: rgba(245,158,11,0.40); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(245,158,11,0.15); }
.pbi-feat-icon { font-size: 2rem; margin-bottom: 14px; }
.pbi-feat-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.pbi-feat-desc { font-size: 0.86rem; color: rgba(255,255,255,0.52); line-height: 1.65; }
.pbi-cta {
  background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(14,8,0,0.5) 100%);
  border-top: 1px solid rgba(245,158,11,0.22);
  padding: 80px 40px; text-align: center;
}
.pbi-cta-title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.pbi-cta-sub { font-size: 1rem; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.pbi-footer {
  background: rgba(10,6,0,0.95); border-top: 1px solid rgba(245,158,11,0.10);
  padding: 28px 40px; text-align: center; font-size: 0.80rem; color: rgba(255,255,255,0.30);
}

/* ── SwineBI ───────────────────────────────────────────────── */
#sbi-page {
  background: #0f0008;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f1f5f9;
  overflow-x: hidden;
  margin-top: 0;
}
#sbi-page a { color: inherit; text-decoration: none; }
.sbi-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(15,0,8,0.92); border-bottom: 1px solid rgba(244,63,94,0.22);
  backdrop-filter: blur(20px); padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.sbi-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.sbi-brand-name {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 20%, #f43f5e 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sbi-brand-sub { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.09em; }
.sbi-nav-right { display: flex; align-items: center; gap: 12px; }
.sbi-btn-back {
  padding: 7px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.10); text-decoration: none; transition: all 0.2s;
}
.sbi-btn-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sbi-btn-cta {
  padding: 9px 22px; border-radius: 9px; font-size: 0.875rem; font-weight: 700;
  background: linear-gradient(135deg, #f43f5e, #9f1239);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 12px rgba(244,63,94,0.35); transition: all 0.25s;
}
.sbi-btn-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sbi-hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 65% 50% at 60% 35%, rgba(244,63,94,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(251,113,133,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #0f0008 0%, #160010 60%, #0f0008 100%);
  display: flex; align-items: center;
  padding: 100px 40px 60px; max-width: 1200px; margin: 0 auto; gap: 60px;
}
.sbi-hero::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(244,63,94,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,63,94,0.04) 1px, transparent 1px);
  background-size: 60px 60px; animation: sbiGridDrift 30s linear infinite; pointer-events: none;
}
@keyframes sbiGridDrift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
.sbi-hero-left { flex: 1; min-width: 0; position: relative; z-index: 2; }
.sbi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.30);
  border-radius: 40px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700;
  color: #fb7185; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 24px;
}
.sbi-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f43f5e; box-shadow: 0 0 8px #f43f5e; animation: sbiPulse 2s ease-in-out infinite;
}
@keyframes sbiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
.sbi-hero-headline { font-size: clamp(2.4rem, 3.8vw, 4rem); font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; }
.sbi-hero-headline-grad {
  background: linear-gradient(135deg, #fff 20%, #f43f5e 60%, #fb7185 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block;
}
.sbi-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.60); line-height: 1.75; margin-bottom: 36px; max-width: 520px; }
.sbi-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.sbi-btn-primary {
  padding: 15px 36px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #f43f5e, #9f1239);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 28px rgba(244,63,94,0.42); transition: all 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.sbi-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); }
.sbi-btn-ghost {
  padding: 15px 28px; border-radius: 12px; font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: all 0.25s;
  display: inline-flex; align-items: center;
}
.sbi-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sbi-hero-stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.sbi-stat { display: flex; flex-direction: column; gap: 3px; }
.sbi-stat-val { font-size: 1.7rem; font-weight: 900; color: #f43f5e; line-height: 1; }
.sbi-stat-lbl { font-size: 0.70rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.09em; }
.sbi-hero-right { width: 340px; flex-shrink: 0; position: relative; z-index: 2; }
.sbi-panel {
  background: rgba(20,0,10,0.75); border: 1px solid rgba(244,63,94,0.22);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}
.sbi-panel::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, #f43f5e, #fb7185, transparent); }
.sbi-panel-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(244,63,94,0.08);
}
.sbi-panel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sbi-panel-label { font-size: 0.63rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.10em; flex: 1; }
.sbi-kpi-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sbi-kpi-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  border-bottom: 1px solid rgba(244,63,94,0.06); transition: background 0.2s;
}
.sbi-kpi-row:last-child { border-bottom: none; }
.sbi-kpi-row:hover { background: rgba(244,63,94,0.07); }
.sbi-kpi-name { font-size: 0.72rem; color: rgba(255,255,255,0.50); font-weight: 500; }
.sbi-kpi-val { font-size: 0.98rem; font-weight: 800; }
.sbi-kpi-delta { font-size: 0.64rem; color: rgba(255,255,255,0.35); }
.sbi-features { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
.sbi-section-eyebrow { font-size: 0.72rem; font-weight: 700; color: #f43f5e; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.sbi-section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.sbi-section-sub { font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 600px; margin-bottom: 52px; }
.sbi-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .sbi-feat-grid { grid-template-columns: 1fr; } }
.sbi-feat-card {
  background: rgba(20,0,10,0.65); border: 1.5px solid rgba(244,63,94,0.15);
  border-radius: 16px; padding: 24px; transition: all 0.3s ease;
}
.sbi-feat-card:hover { border-color: rgba(244,63,94,0.40); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(244,63,94,0.15); }
.sbi-feat-icon { font-size: 2rem; margin-bottom: 14px; }
.sbi-feat-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.sbi-feat-desc { font-size: 0.86rem; color: rgba(255,255,255,0.52); line-height: 1.65; }
.sbi-cta {
  background: linear-gradient(135deg, rgba(244,63,94,0.10) 0%, rgba(15,0,8,0.5) 100%);
  border-top: 1px solid rgba(244,63,94,0.22); padding: 80px 40px; text-align: center;
}
.sbi-cta-title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.sbi-cta-sub { font-size: 1rem; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.sbi-footer {
  background: rgba(10,0,5,0.95); border-top: 1px solid rgba(244,63,94,0.10);
  padding: 28px 40px; text-align: center; font-size: 0.80rem; color: rgba(255,255,255,0.30);
}

/* ── DairyBI ───────────────────────────────────────────────── */
#dbi-page {
  background: #03041a;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f1f5f9;
  overflow-x: hidden;
  margin-top: 0;
}
#dbi-page a { color: inherit; text-decoration: none; }
.dbi-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(3,4,26,0.92); border-bottom: 1px solid rgba(99,102,241,0.22);
  backdrop-filter: blur(20px); padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.dbi-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.dbi-brand-name {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 20%, #6366f1 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.dbi-brand-sub { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.09em; }
.dbi-nav-right { display: flex; align-items: center; gap: 12px; }
.dbi-btn-back {
  padding: 7px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.10); text-decoration: none; transition: all 0.2s;
}
.dbi-btn-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dbi-btn-cta {
  padding: 9px 22px; border-radius: 9px; font-size: 0.875rem; font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #3730a3);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 12px rgba(99,102,241,0.35); transition: all 0.25s;
}
.dbi-btn-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.dbi-hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 65% 50% at 60% 35%, rgba(99,102,241,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(165,180,252,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #03041a 0%, #060820 60%, #03041a 100%);
  display: flex; align-items: center;
  padding: 100px 40px 60px; max-width: 1200px; margin: 0 auto; gap: 60px;
}
.dbi-hero::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 60px 60px; animation: dbiGridDrift 30s linear infinite; pointer-events: none;
}
@keyframes dbiGridDrift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
.dbi-hero-left { flex: 1; min-width: 0; position: relative; z-index: 2; }
.dbi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.30);
  border-radius: 40px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700;
  color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 24px;
}
.dbi-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6366f1; box-shadow: 0 0 8px #6366f1; animation: dbiPulse 2s ease-in-out infinite;
}
@keyframes dbiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
.dbi-hero-headline { font-size: clamp(2.4rem, 3.8vw, 4rem); font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; }
.dbi-hero-headline-grad {
  background: linear-gradient(135deg, #fff 20%, #6366f1 60%, #a5b4fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block;
}
.dbi-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.60); line-height: 1.75; margin-bottom: 36px; max-width: 520px; }
.dbi-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.dbi-btn-primary {
  padding: 15px 36px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #3730a3);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 28px rgba(99,102,241,0.42); transition: all 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.dbi-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); }
.dbi-btn-ghost {
  padding: 15px 28px; border-radius: 12px; font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: all 0.25s;
  display: inline-flex; align-items: center;
}
.dbi-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dbi-hero-stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.dbi-stat { display: flex; flex-direction: column; gap: 3px; }
.dbi-stat-val { font-size: 1.7rem; font-weight: 900; color: #a5b4fc; line-height: 1; }
.dbi-stat-lbl { font-size: 0.70rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.09em; }
.dbi-hero-right { width: 340px; flex-shrink: 0; position: relative; z-index: 2; }
.dbi-panel {
  background: rgba(5,6,30,0.75); border: 1px solid rgba(99,102,241,0.22);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}
.dbi-panel::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, #6366f1, #a5b4fc, transparent); }
.dbi-panel-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(99,102,241,0.08);
}
.dbi-panel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dbi-panel-label { font-size: 0.63rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.10em; flex: 1; }
.dbi-kpi-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.dbi-kpi-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  border-bottom: 1px solid rgba(99,102,241,0.06); transition: background 0.2s;
}
.dbi-kpi-row:last-child { border-bottom: none; }
.dbi-kpi-row:hover { background: rgba(99,102,241,0.07); }
.dbi-kpi-name { font-size: 0.72rem; color: rgba(255,255,255,0.50); font-weight: 500; }
.dbi-kpi-val { font-size: 0.98rem; font-weight: 800; }
.dbi-kpi-delta { font-size: 0.64rem; color: rgba(255,255,255,0.35); }
.dbi-features { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
.dbi-section-eyebrow { font-size: 0.72rem; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.dbi-section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.dbi-section-sub { font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 600px; margin-bottom: 52px; }
.dbi-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .dbi-feat-grid { grid-template-columns: 1fr; } }
.dbi-feat-card {
  background: rgba(5,6,30,0.65); border: 1.5px solid rgba(99,102,241,0.15);
  border-radius: 16px; padding: 24px; transition: all 0.3s ease;
}
.dbi-feat-card:hover { border-color: rgba(99,102,241,0.40); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(99,102,241,0.15); }
.dbi-feat-icon { font-size: 2rem; margin-bottom: 14px; }
.dbi-feat-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.dbi-feat-desc { font-size: 0.86rem; color: rgba(255,255,255,0.52); line-height: 1.65; }
.dbi-cta {
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(3,4,26,0.5) 100%);
  border-top: 1px solid rgba(99,102,241,0.22); padding: 80px 40px; text-align: center;
}
.dbi-cta-title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.dbi-cta-sub { font-size: 1rem; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.dbi-footer {
  background: rgba(2,2,15,0.95); border-top: 1px solid rgba(99,102,241,0.10);
  padding: 28px 40px; text-align: center; font-size: 0.80rem; color: rgba(255,255,255,0.30);
}

/* ── BeefBI ────────────────────────────────────────────────── */
#bbi-page {
  background: #0d0700;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f1f5f9;
  overflow-x: hidden;
  margin-top: 0;
}
#bbi-page a { color: inherit; text-decoration: none; }
.bbi-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(13,7,0,0.92); border-bottom: 1px solid rgba(180,83,9,0.22);
  backdrop-filter: blur(20px); padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.bbi-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.bbi-brand-name {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 20%, #fbbf24 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.bbi-brand-sub { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.09em; }
.bbi-nav-right { display: flex; align-items: center; gap: 12px; }
.bbi-btn-back {
  padding: 7px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.10); text-decoration: none; transition: all 0.2s;
}
.bbi-btn-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
.bbi-btn-cta {
  padding: 9px 22px; border-radius: 9px; font-size: 0.875rem; font-weight: 700;
  background: linear-gradient(135deg, #fbbf24, #b45309);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 12px rgba(180,83,9,0.35); transition: all 0.25s;
}
.bbi-btn-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bbi-hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 65% 50% at 60% 35%, rgba(180,83,9,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(251,191,36,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #0d0700 0%, #150a00 60%, #0d0700 100%);
  display: flex; align-items: center;
  padding: 100px 40px 60px; max-width: 1200px; margin: 0 auto; gap: 60px;
}
.bbi-hero::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(180,83,9,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,83,9,0.04) 1px, transparent 1px);
  background-size: 60px 60px; animation: bbiGridDrift 30s linear infinite; pointer-events: none;
}
@keyframes bbiGridDrift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
.bbi-hero-left { flex: 1; min-width: 0; position: relative; z-index: 2; }
.bbi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(180,83,9,0.12); border: 1px solid rgba(180,83,9,0.30);
  border-radius: 40px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700;
  color: #fbbf24; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 24px;
}
.bbi-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24; box-shadow: 0 0 8px #fbbf24; animation: bbiPulse 2s ease-in-out infinite;
}
@keyframes bbiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
.bbi-hero-headline { font-size: clamp(2.4rem, 3.8vw, 4rem); font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; }
.bbi-hero-headline-grad {
  background: linear-gradient(135deg, #fff 20%, #fbbf24 60%, #b45309 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block;
}
.bbi-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.60); line-height: 1.75; margin-bottom: 36px; max-width: 520px; }
.bbi-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.bbi-btn-primary {
  padding: 15px 36px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #fbbf24, #b45309);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 28px rgba(180,83,9,0.42); transition: all 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.bbi-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); }
.bbi-btn-ghost {
  padding: 15px 28px; border-radius: 12px; font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: all 0.25s;
  display: inline-flex; align-items: center;
}
.bbi-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.bbi-hero-stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.bbi-stat { display: flex; flex-direction: column; gap: 3px; }
.bbi-stat-val { font-size: 1.7rem; font-weight: 900; color: #fbbf24; line-height: 1; }
.bbi-stat-lbl { font-size: 0.70rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.09em; }
.bbi-hero-right { width: 340px; flex-shrink: 0; position: relative; z-index: 2; }
.bbi-panel {
  background: rgba(18,10,0,0.75); border: 1px solid rgba(180,83,9,0.22);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}
.bbi-panel::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, #b45309, #fbbf24, transparent); }
.bbi-panel-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(180,83,9,0.08);
}
.bbi-panel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bbi-panel-label { font-size: 0.63rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.10em; flex: 1; }
.bbi-kpi-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.bbi-kpi-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  border-bottom: 1px solid rgba(180,83,9,0.06); transition: background 0.2s;
}
.bbi-kpi-row:last-child { border-bottom: none; }
.bbi-kpi-row:hover { background: rgba(180,83,9,0.07); }
.bbi-kpi-name { font-size: 0.72rem; color: rgba(255,255,255,0.50); font-weight: 500; }
.bbi-kpi-val { font-size: 0.98rem; font-weight: 800; }
.bbi-kpi-delta { font-size: 0.64rem; color: rgba(255,255,255,0.35); }
.bbi-features { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
.bbi-section-eyebrow { font-size: 0.72rem; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.bbi-section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.bbi-section-sub { font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 600px; margin-bottom: 52px; }
.bbi-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .bbi-feat-grid { grid-template-columns: 1fr; } }
.bbi-feat-card {
  background: rgba(18,10,0,0.65); border: 1.5px solid rgba(180,83,9,0.15);
  border-radius: 16px; padding: 24px; transition: all 0.3s ease;
}
.bbi-feat-card:hover { border-color: rgba(180,83,9,0.40); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(180,83,9,0.15); }
.bbi-feat-icon { font-size: 2rem; margin-bottom: 14px; }
.bbi-feat-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.bbi-feat-desc { font-size: 0.86rem; color: rgba(255,255,255,0.52); line-height: 1.65; }
.bbi-cta {
  background: linear-gradient(135deg, rgba(180,83,9,0.10) 0%, rgba(13,7,0,0.5) 100%);
  border-top: 1px solid rgba(180,83,9,0.22); padding: 80px 40px; text-align: center;
}
.bbi-cta-title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; }
.bbi-cta-sub { font-size: 1rem; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.bbi-footer {
  background: rgba(8,4,0,0.95); border-top: 1px solid rgba(180,83,9,0.10);
  padding: 28px 40px; text-align: center; font-size: 0.80rem; color: rgba(255,255,255,0.30);
}

/* ── Scroll progress bars (per-page accent colors) ─────────── */
.pbi-scroll-track, .sbi-scroll-track, .dbi-scroll-track, .bbi-scroll-track {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 10000;
  background: rgba(0,0,0,0.20);
}
.pbi-scroll-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #fcd34d); transition: width 0.1s; }
.sbi-scroll-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #f43f5e, #fb7185); transition: width 0.1s; }
.dbi-scroll-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6366f1, #a5b4fc); transition: width 0.1s; }
.bbi-scroll-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #b45309, #fbbf24); transition: width 0.1s; }

/* ── LiveStack button (solid blue, identical on navbar + hero) ─── */
.pbi-btn-livestack, .sbi-btn-livestack, .dbi-btn-livestack, .bbi-btn-livestack {
  padding: 14px 28px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 18px rgba(59,130,246,0.38);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.pbi-btn-livestack:hover, .sbi-btn-livestack:hover, .dbi-btn-livestack:hover, .bbi-btn-livestack:hover {
  filter: brightness(1.12); transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(59,130,246,0.50);
}