:root {
    --bi-bg: #05060a;
    --bi-surface: #0c0f16;
    --bi-surface-soft: #111623;
    --bi-accent: #5b8cff;
    --bi-accent-soft: rgba(91, 140, 255, 0.2);
    --bi-text: #f4f6ff;
    --bi-muted: #9ba0b8;
    --bi-border: #1b2133;
    --bi-pill-bg: #121827;
    --bi-pill-active: #1c2a4a;
    --bi-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
  }

  .bi-section.bi-consumers {
    background: radial-gradient(circle at top, #101426 0, #05060a 55%, #020308 100%);
    color: var(--bi-text);
    padding: 80px 16px 72px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  }

  .bi-container {
    max-width: 1160px;
    margin: 0 auto;
  }

  .bi-header {
    text-align: left;
    margin-bottom: 32px;
    opacity: 0;
    animation: bi-fade-up 0.7s ease-out forwards;
  }

  .bi-kicker {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bi-muted);
    margin-bottom: 6px;
  }

  .bi-title {
    font-size: clamp(28px, 3.2vw, 34px);
    line-height: 1.2;
    margin: 0 0 8px;
  }

  .bi-subtitle {
    font-size: 18px;
    color: var(--bi-muted);
    max-width: 620px;
    margin: 0;
  }

  .bi-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  .bi-nav-btn {
    border: 1px solid var(--bi-border);
    background: rgba(10, 14, 25, 0.9);
    color: var(--bi-muted);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
  }

  .bi-nav-btn:hover {
    background: var(--bi-pill-active);
    color: var(--bi-text);
    transform: translateY(-1px);
  }

  .bi-nav-btn.active {
    background: var(--bi-accent-soft);
    color: var(--bi-text);
    border-color: var(--bi-accent);
  }

  .bi-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 20px;
    margin-top: 32px;
  }

  .bi-aside-title {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bi-muted);
    margin-bottom: 14px;
  }

  .bi-pills {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bi-pill {
    background: var(--bi-pill-bg);
    border-radius: 12px;
    padding: 8px 10px;
    border: 1px solid var(--bi-border);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
  }

  .bi-pill:hover {
    border-color: var(--bi-accent);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }

  .bi-pill.active {
    background: var(--bi-pill-active);
    border-color: var(--bi-accent);
  }

  .bi-pill-label {
    font-size: 14px;
  }

  .bi-pill-tag {
    font-size: 11px;
    color: var(--bi-muted);
  }

  .bi-highlight-card {
    margin-top: 18px;
    padding: 12px 12px 12px;
    border-radius: 16px;
    background: radial-gradient(circle at top left, var(--bi-accent-soft), var(--bi-surface-soft));
    border: 1px solid rgba(91, 140, 255, 0.3);
    box-shadow: var(--bi-shadow-soft);
  }

  .bi-highlight-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bi-muted);
    margin-bottom: 6px;
  }

  .bi-highlight-text {
    font-size: 13px;
    color: var(--bi-text);
  }

  .bi-mini-callout {
    margin-top: 14px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(10, 16, 30, 0.9);
    border: 1px dashed var(--bi-border);
  }

  .bi-mini-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bi-muted);
    margin: 0 0 4px;
  }

  .bi-mini-text {
    font-size: 13px;
    margin: 0;
    color: var(--bi-text);
  }

  .bi-content {
    position: relative;
    min-height: 260px;
  }

  .bi-block {
    background: linear-gradient(135deg, rgba(14, 19, 35, 0.96), rgba(8, 10, 18, 0.96));
    border-radius: 18px;
    padding: 18px 18px 18px;
    border: 1px solid var(--bi-border);
    box-shadow: var(--bi-shadow-soft);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .bi-block-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
  }

  .bi-block-title {
    font-size: 18px;
    margin: 0 0 10px;
  }

  .bi-block-lead {
    font-size: 14px;
    color: var(--bi-muted);
    margin: 0 0 14px;
  }

  .bi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
  }

  .bi-card {
    background: var(--bi-surface-soft);
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid var(--bi-border);
    font-size: 13px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  }

  .bi-card-title {
    font-size: 14px;
    margin: 0 0 6px;
  }

  .bi-card-accent {
    background: radial-gradient(circle at top, var(--bi-accent-soft), var(--bi-surface-soft));
    border-color: var(--bi-accent);
  }

  .bi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    border-color: var(--bi-accent);
  }

  .bi-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin-top: 6px;
  }

  .bi-tag-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bi-muted);
    margin: 0 0 8px;
  }

  .bi-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bi-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    color: var(--bi-text);
  }

  .bi-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bi-accent);
    position: absolute;
    left: 4px;
    top: 7px;
  }

  .bi-note {
    font-size: 12px;
    color: var(--bi-muted);
    margin: 0;
  }

  .bi-graph-wrapper {
    margin-top: 4px;
    padding: 12px 12px 10px;
    border-radius: 16px;
    background: rgba(10, 14, 25, 0.9);
    border: 1px solid var(--bi-border);
  }

  .bi-graph-header {
    margin-bottom: 10px;
  }

  .bi-graph-title {
    font-size: 14px;
    margin: 0 0 4px;
  }

  .bi-graph-subtitle {
    font-size: 12px;
    color: var(--bi-muted);
    margin: 0;
  }

  .bi-bar-chart {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bi-bar-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 140px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .bi-bar-label {
    color: var(--bi-muted);
  }

  .bi-bar-track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: #080b14;
    overflow: hidden;
    border: 1px solid var(--bi-border);
  }

  .bi-bar-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bi-accent-soft), var(--bi-accent));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--bi-text);
    padding-right: 6px;
    box-sizing: border-box;
    font-size: 11px;
    opacity: 0;
  }

  .bi-bar-fill::after {
    content: attr(data-value);
  }

  .bi-bar-meta {
    color: var(--bi-muted);
    text-align: right;
  }

  .bi-graph-footnote {
    font-size: 12px;
    color: var(--bi-muted);
    margin-top: 8px;
  }

  .bi-block-extra {
    font-size: 13px;
    margin-top: 12px;
  }

  .bi-conclusion-card {
    margin-top: 10px;
    padding: 12px 12px 12px;
    border-radius: 16px;
    background: radial-gradient(circle at top left, var(--bi-accent-soft), var(--bi-surface-soft));
    border: 1px solid rgba(91, 140, 255, 0.35);
  }

  .bi-conclusion-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bi-muted);
    margin: 0 0 6px;
  }

  .bi-conclusion-text {
    font-size: 13px;
    margin: 0 0 6px;
  }

  .bi-conclusion-sign {
    font-size: 12px;
    color: var(--bi-muted);
    margin: 0;
  }

  .bi-footer {
    margin-top: 32px;
    border-top: 1px solid var(--bi-border);
    padding-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
    gap: 18px;
  }

  .bi-footer-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bi-muted);
    margin: 0 0 8px;
  }

  .bi-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bi-footer-list li {
    font-size: 12px;
    color: var(--bi-text);
  }

  .bi-footer-text {
    font-size: 12px;
    color: var(--bi-muted);
    margin: 0 0 8px;
  }

  @keyframes bi-fade-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 900px) {
    .bi-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .bi-aside {
      order: 2;
    }
    .bi-content {
      order: 1;
    }
    .bi-footer {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 640px) {
    .bi-section.bi-consumers {
      padding: 56px 14px 48px;
    }
    .bi-block {
      padding: 16px 14px 14px;
    }
    .bi-nav {
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .bi-nav-btn {
      white-space: nowrap;
    }
    .bi-bar-row {
      grid-template-columns: 50px minmax(0, 1fr) 120px;
      gap: 6px;
    }
  }

/* DESKTOP — implicit */
.burger {
  display:none;
}

.nav-links {
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  align-items:center;
}

/* LINK STYLING */
.nav-links a {
  color:white;
  text-decoration:none;
  padding:6px 10px;
  border-radius:6px;
  font-size:20px;
  transition:0.25s ease;
}

/* HOVER */
.nav-links a:hover {
  background:rgba(255,255,255,0.08);
  transform:translateY(-2px);
}

/* ACTIVE */
.nav-links a.active {
  background:rgba(255,255,255,0.18);
  font-weight:500;
  box-shadow:0 0 8px rgba(255,255,255,0.15);
}

/* MOBILE */
@media (max-width: 900px) {

  /* Afișăm burgerul */
  .burger {
    display:block !important;
  }

  /* Ascundem meniul desktop */
  .nav-links {
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    height:100vh;
    background:#0f0f0f;
    flex-direction:column;
    padding:80px 20px 20px 20px;
    gap:14px;
    box-shadow:-4px 0 12px rgba(0,0,0,0.4);
    transition:0.35s ease;
  }

  /* Când e activ, intră în ecran */
  .nav-links.active {
    right:0;
  }

  /* Linkuri mobile */
  .nav-links a {
    padding:12px 0;
    font-size:18px;
    width:100%;
  
    <!-- HEADER -->
    <header class="bi-header">
      <p class="bi-kicker">Breaking_Intell · RoIntelliA</p>
      <h1 class="bi-title">Comportamentul consumatorilor în 2026</h1>
      <p class="bi-subtitle">
        De la cumpărături haotice la achiziții inteligente. Cum se maturizează e-commerce-ul românesc și ce înseamnă asta pentru branduri.
      </p>

      <!-- NAV SUB ANTET -->
      <nav class="bi-nav" style="display:flex; gap:8px; flex-wrap:wrap;">

  <button class="bi-nav-btn active" data-target="#bi-sec-context"
    style="
      padding:10px 16px;
      border:none;
      background:#061c66;
      color:white;
      border-radius:6px;
      cursor:pointer;
      transition:0.3s ease;
      animation:pulse 2s infinite;
    ">
    Context & schimbarea de paradigmă
  </button>

  <button class="bi-nav-btn" data-target="#bi-sec-factori"
    style="
      padding:10px 16px;
      border:none;
      background:#061c66;
      color:white;
      border-radius:6px;
      cursor:pointer;
      transition:0.3s ease;
    ">
    Factorii care modelează consumul
  </button>

  <button class="bi-nav-btn" data-target="#bi-sec-date"
    style="
      padding:10px 16px;
      border:none;
      background:#061c66;
      color:white;
      border-radius:6px;
      cursor:pointer;
      transition:0.3s ease;
    ">
    Date & evoluții 2023–2025
  </button>

  <button class="bi-nav-btn" data-target="#bi-sec-ai"
    style="
      padding:10px 16px;
      border:none;
      background:#061c66;
      color:white;
      border-radius:6px;
      cursor:pointer;
      transition:0.3s ease;
    ">
    AI, disciplinare & transparență
  </button>

  <button class="bi-nav-btn" data-target="#bi-sec-strategie"
    style="
      padding:10px 16px;
      border:none;
      background:#061c66;
      color:white;
      border-radius:6px;
      cursor:pointer;
      transition:0.3s ease;
    ">
    Implicații & concluzii strategice
  </button>

</nav>

<style>
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(7, 33, 73, 0); }
}