/* ══════════════════════
   IT LEARNS FROM EVERY DEMO
   A loop plays when the stage is in view: questions arrive on the left,
   go through the brain in the middle, and end up as playbooks (learned
   once), answers from memory (asked before) or gaps (for you to teach).
   Without JS, or with reduced motion, the finished lists show as they are.
   Dark section: navy ground, glass cards, teal light.
══════════════════════ */
.lb-section {
    position: relative;
    width: 100%;
    background:
        radial-gradient(ellipse 55% 45% at 50% 58%, rgba(45,212,191,.12), transparent 70%),
        linear-gradient(180deg, #0b1020 0%, #0d1726 100%);
    color: #e2e8f0;
    padding: 5rem 1.5rem;
    display: flex;
    justify-content: center;
}
.lb-inner { width: 100%; max-width: 1100px; }

.lb-head { text-align: center; max-width: 720px; margin: 0 auto; }
.lb-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(45,212,191,.35);
    background: rgba(45,212,191,.08);
    color: #5eead4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lb-title {
    margin: 18px 0 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;   /* same as the hero title */
    font-weight: 500;
    font-size: clamp(28px, min(4.3vw, 6.2vh), 46px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: #ffffff;
}
.lb-accent { color: #2dd4bf; }
.lb-lede {
    margin: 18px auto 0;
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(226,232,240,.68);
}

/* ── Stage ── */
.lb-stage {
    position: relative;
    margin-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 28px 0;                    /* no visible box: cards and brain sit on the section itself */
    overflow: visible;
    isolation: isolate;
}
.lb-stage::before {                     /* faint dotted field */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.4px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
}

.lb-col { display: flex; flex-direction: column; min-width: 0; }
.lb-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(148,163,184,.8);
}
.lb-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(45,212,191,.12);
    color: #5eead4;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.72rem;
}

.lb-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

/* incoming questions */
.lb-q {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.lb-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
/* the photo sits over the initial, which only shows if the photo fails to load */
.lb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-q-body { min-width: 0; }
.lb-q-who { display: block; font-size: 0.72rem; color: rgba(148,163,184,.85); }
.lb-q-text { display: block; margin-top: 1px; font-size: 0.88rem; line-height: 1.4; color: #f1f5f9; }

/* what it knows */
.lb-p {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px -16px rgba(0,0,0,.6);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.lb-p-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(45,212,191,.14);
    color: #5eead4;
}
.lb-p-icon svg { width: 15px; height: 15px; }
.lb-p-text { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: #ffffff; line-height: 1.35; }
.lb-p-meta { display: block; font-size: 0.72rem; font-weight: 500; color: rgba(148,163,184,.85); }
.lb-badge {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.lb-badge--new    { background: rgba(45,212,191,.14); color: #5eead4; }
.lb-badge--memory { background: #2dd4bf; color: #04211e; }

.lb-p.is-hit { border-color: rgba(45,212,191,.7); box-shadow: 0 0 0 4px rgba(45,212,191,.16), 0 0 24px rgba(45,212,191,.25); }

/* a gap: it did not know, so it asks you */
.lb-p--gap { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.3); box-shadow: none; }
.lb-p--gap .lb-p-icon { background: rgba(251,191,36,.14); color: #fbbf24; }
.lb-badge--gap { background: rgba(251,191,36,.16); color: #fcd34d; }

/* ── The brain ── */
.lb-brain {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 380px;
    isolation: isolate;
}
.lb-brain::before {                     /* a soft glow behind the brain, no box */
    content: "";
    position: absolute;
    inset: 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,212,191,.16) 0%, rgba(45,212,191,.05) 45%, transparent 70%);
}
.lb-brain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
/* the drawn orb stays as the fallback; once the hologram is up it only marks the spot */
.lb-brain--3d .lb-net { display: none; }
.lb-brain--3d .lb-core { visibility: hidden; }
.lb-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lb-net line { stroke: rgba(0,168,150,.22); stroke-width: 1.2; }
.lb-net circle { fill: #0b1220; stroke: rgba(0,168,150,.5); stroke-width: 1.5; }
.lb-net .lb-spark { fill: #00A896; stroke: none; opacity: 0; }

.lb-core {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 34% 28%, #99f6e4 0%, #2dd4bf 38%, #0d9488 72%, #115e59 100%);
    box-shadow: 0 24px 50px -16px rgba(13,148,136,.65), inset 0 -10px 24px rgba(4,47,46,.35);
}
.lb-core::before,
.lb-core::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,168,150,.28);
}
.lb-core::after { inset: -30px; border-color: rgba(0,168,150,.14); }
.lb-core svg { width: 58px; height: 58px; color: #ffffff; }

.lb-status {
    position: absolute;
    left: 50%;
    bottom: 6px;
    translate: -50% 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.85);
    border: 1px solid rgba(94,234,212,.25);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s ease;
}
.lb-status.show { opacity: 1; }
.lb-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #2dd4bf;
    vertical-align: 1px;
}

/* the question travelling into the brain */
.lb-flyer {
    position: absolute;
    z-index: 3;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #2dd4bf;
    color: #04211e;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.35;
    box-shadow: 0 14px 30px -14px rgba(15,23,42,.6);
    pointer-events: none;
    opacity: 0;
}

/* ── Animation states (added by JS) ── */
.lb-live .lb-q,
.lb-live .lb-p { animation: lb-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lb-in {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.lb-q.is-sent { opacity: .45; transition: opacity .4s ease; }

.lb-live .lb-core.is-thinking { animation: lb-think 1.1s ease-in-out infinite; }
@keyframes lb-think {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.lb-live .lb-core.is-thinking::before { animation: lb-ring 1.1s ease-out infinite; }
@keyframes lb-ring {
    from { transform: scale(.9); opacity: .9; }
    to   { transform: scale(1.35); opacity: 0; }
}
.lb-live.is-memory .lb-core { box-shadow: 0 0 0 10px rgba(94,234,212,.22), 0 24px 50px -16px rgba(13,148,136,.65); }
.lb-live .lb-spark.go { animation: lb-spark .9s ease-out; }
@keyframes lb-spark { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ── Three points underneath ── */
.lb-points {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.lb-point {
    padding: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
}
.lb-point-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(45,212,191,.12);
    color: #5eead4;
}
.lb-point-icon svg { width: 20px; height: 20px; }
.lb-point h3 {
    margin-top: 14px;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -.01em;
}
.lb-point p { margin-top: 6px; font-size: 0.9rem; line-height: 1.6; color: rgba(226,232,240,.62); }

@media (max-width: 960px) {
    .lb-stage { grid-template-columns: 1fr; gap: 18px; padding: 8px 0; }
    .lb-brain { min-height: 280px; order: 0; }
    .lb-col--in  { order: -1; }
    .lb-col--out { order: 1; }
    .lb-points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .lb-section { padding: 3.5rem 1rem; }
    .lb-flyer { display: none; }
    /* tighter cards so each question and playbook fits on one line */
    .lb-q { gap: 10px; padding: 9px 11px; align-items: center; border-radius: 12px; }
    .lb-avatar { width: 28px; height: 28px; }
    .lb-q-who { font-size: 0.66rem; }
    .lb-q-text { font-size: 0.76rem; line-height: 1.35; }
    .lb-p { gap: 9px; padding: 9px 11px; border-radius: 12px; }
    .lb-p-icon { width: 24px; height: 24px; }
    .lb-p-text { font-size: 0.78rem; }
    .lb-p-meta { font-size: 0.66rem; }
    .lb-badge { font-size: 0.62rem; padding: 2px 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-live .lb-q, .lb-live .lb-p, .lb-live .lb-core, .lb-live .lb-core::before { animation: none !important; }
}

/* heading: 'behind every lead.' sits on its own line; on desktop keep each line whole */
@media (min-width: 761px) { .lb-title { white-space: nowrap; } }