/* ═══════════════════════════════════════════════════════════════════
   BeeZ landing page — hero variant ("Midnight Trading Floor")
   ───────────────────────────────────────────────────────────────────
   Loaded only when /beez renders; the rest of the page reuses
   public-homepage.css. Design intent: bold editorial headline, deep
   purple→black gradient, electric cyan punch, glass dashboard collage,
   atmospheric grain. Theme-aware via the site's CSS custom properties.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  --beez-cyan: #00E5FF;
  --beez-cyan-soft: rgba(0, 229, 255, 0.16);
  --beez-violet: #7300e7;
  --beez-violet-soft: rgba(115, 0, 231, 0.14);
  --beez-ink-0: #07030f;     /* deepest */
  --beez-ink-1: #100624;
  --beez-ink-2: #1d0a3a;
  --beez-ink-3: #2a1456;
  --beez-card-bg: rgba(20, 12, 40, 0.65);
  --beez-card-border: rgba(255, 255, 255, 0.08);
  --beez-card-border-hi: rgba(255, 255, 255, 0.16);
  --beez-text-mute: rgba(255, 255, 255, 0.62);
  --beez-text-soft: rgba(255, 255, 255, 0.78);
  --beez-text-hi: #fff;
}

/* ───────────────────────────────────────────────────────────────────
   The hero is intentionally always dark — even in light theme — so the
   cyan punch and figure silhouette read consistently. The rest of the
   page below switches with --background like normal.
   ─────────────────────────────────────────────────────────────────── */

/* The header itself stays transparent — the painted backdrop lives on
   a ::before pseudo-element so we can FEATHER its bottom edge with
   `mask-image` and avoid the horizontal seam the original code worked
   around. Previous approach removed all tint, which left the nav and
   logo unreadable when they sat directly on top of the hero headline. */
.beez-home .public-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  /* Establish a stacking context so the ::before backdrop can sit
     behind the header's flow content without leaking below the page. */
  isolation: isolate;
}

.beez-home .public-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Extend the painted box BELOW the visible header bottom so the
     mask-image fade-out happens outside the header's edge, eliminating
     any visible horizontal seam against the hero/pillars. */
  bottom: -28px;
  background: linear-gradient(
    180deg,
    rgba(7, 3, 18, 0.82) 0%,
    rgba(7, 3, 18, 0.68) 45%,
    rgba(7, 3, 18, 0.36) 75%,
    transparent 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.beez-home .public-header.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* When scrolled, deepen the tint + blur so the floating chrome reads
   clearly against busy content below. Still feathered — no seam. */
.beez-home .public-header.scrolled::before {
  background: linear-gradient(
    180deg,
    rgba(7, 3, 18, 0.92) 0%,
    rgba(7, 3, 18, 0.78) 50%,
    rgba(7, 3, 18, 0.42) 80%,
    transparent 100%
  );
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ─── HERO SHELL ────────────────────────────────────────────────── */

.beez-hero {
  position: relative;
  z-index: 1;                      /* sit above the site's spinning gradient */
  isolation: isolate;              /* new stacking ctx so atmos clips here */
  padding: 140px 0 40px;
  /* Background intentionally transparent — the site's <.bg-gradient-spin>
     conic gradient (magenta/purple/blue, blurred + rotating) lives on a
     position:fixed layer at z:0 and provides the page's overall theme.
     Previous versions added radial-gradient dark vignettes here to keep
     the hero copy legible, but those vignettes terminated at the hero's
     bottom boundary while the section immediately below had none —
     producing a visible horizontal seam at the hero/pitch boundary that
     read as a "darker box" framing the IQ pitch section. Removing the
     local vignette lets the page's spinning gradient flow continuously
     from the hero into the pitch and pillars without a visible seam. */
  background: transparent;
  color: var(--beez-text-hi);
  overflow: hidden;
}

@media (max-width: 980px) {
  .beez-hero { padding: 120px 0 32px; }
}

/* ─── ATMOSPHERIC LAYERS ────────────────────────────────────────── */

/* The hero's atmospheric overlays (glow blobs, noise grain with
   mix-blend-mode: overlay, geometric grid) tint the hero's interior
   in ways the IQ pitch and pillars sections don't have — and because
   .beez-hero has overflow:hidden + isolation:isolate, those tints
   are clipped to the hero's bounds, producing a visible seam at the
   hero/pitch boundary that read as a "darker box" framing the pitch
   section. Hiding the atmos wrapper here makes the hero render with
   the same pristine spinning conic gradient as the pitch and
   pillars, so all three sections flow continuously. */
.beez-hero-atmos {
  display: none;
}

/* Atmospheric blobs — toned down so they tint, not dominate, the
   spinning conic gradient that lives on the page underneath. */
.beez-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.32;
}

.beez-hero-glow--cyan {
  width: 520px; height: 520px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.55) 0%, transparent 70%);
  animation: beezDriftA 22s ease-in-out infinite alternate;
}

.beez-hero-glow--violet {
  width: 640px; height: 640px;
  bottom: -200px; left: -120px;
  background: radial-gradient(circle, rgba(115, 0, 231, 0.45) 0%, transparent 65%);
  animation: beezDriftB 28s ease-in-out infinite alternate;
  opacity: 0.22;
}

@keyframes beezDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}

@keyframes beezDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(60px, -40px, 0) scale(1.06); }
}

/* SVG-noise grain overlay: scoped, low-opacity, no extra HTTP request. */
.beez-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  pointer-events: none;
}

/* Faint geometric grid, 1px lines, fades from top. */
.beez-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 80%);
  pointer-events: none;
}

/* ─── CONTAINER GRID ────────────────────────────────────────────── */

.beez-hero-grid-2col {
  position: relative;
  z-index: 2;
  display: grid;
  /* Right column gets slightly more room than left so the 6-card collage
     (designed against a ~700px-wide reference canvas) doesn't crush the
     Halal Screener / Equity Lens cards into title-wrapping width. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}

@media (max-width: 1100px) {
  .beez-hero-grid-2col { grid-template-columns: 1fr; gap: 56px; }
}

/* ─── COPY (LEFT) ───────────────────────────────────────────────── */

.beez-hero-copy {
  font-family: 'Manrope', system-ui, sans-serif;
  animation: beezSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes beezSlideUp {
  0% { opacity: 0; transform: translate3d(0, 24px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ─── New · Financial IQ Test eyebrow pill above the headline ─────
   `text-decoration: none !important` and the explicit colour rules
   defeat the page's global anchor styles (which would otherwise
   render this as a default blue/violet underlined link). */

.beez-hero-eyebrow,
.beez-home a.beez-hero-eyebrow,
.beez-home a.beez-hero-eyebrow:hover,
.beez-home a.beez-hero-eyebrow:visited {
  text-decoration: none !important;
  color: var(--beez-cyan);
}

.beez-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  margin: 0 0 22px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.32);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  animation: beezSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.beez-hero-eyebrow:hover {
  background: rgba(0, 229, 255, 0.14);
  border-color: rgba(0, 229, 255, 0.5);
  transform: translateY(-1px);
}

.beez-hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beez-cyan);
  box-shadow: 0 0 10px var(--beez-cyan);
  flex-shrink: 0;
}

.beez-hero-eyebrow-text {
  color: var(--beez-cyan);
}

.beez-hero-eyebrow-text strong {
  font-weight: 700;
  color: #b8f1ff;
  letter-spacing: 0.02em;
}

.beez-hero-title {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-weight: 800;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: var(--beez-text-hi);
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}

.beez-hero-row {
  /* Wrap naturally so each word lands on its own line at narrow column
     widths (matches the editorial reference). nowrap was clipping
     "EXPERIENCE." once the right column expanded to host the 6 cards. */
  display: block;
}

@media (max-width: 720px) {
  .beez-hero-title { font-size: clamp(38px, 11vw, 64px); }
}

.beez-hero-subtitle {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(15px, 1.45vw, 19px);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--beez-text-soft);
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 560px;
}

/* font-size:inherit is defensive: the words live inside <span>s that
   inherit from .beez-hero-title. Without this, any global `span {…}`
   rule loaded later in the session (e.g. by the auth bundle) wins
   over inheritance and shrinks the headline to 16px. */
.beez-hero-row,
.beez-hero-word {
  font-size: inherit;
  letter-spacing: inherit;
}

.beez-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: beezWordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.beez-hero-word--1      { animation-delay: 0.05s; }
.beez-hero-word--2      { animation-delay: 0.18s; }
.beez-hero-word--3      { animation-delay: 0.31s; }
.beez-hero-word--succeed{ animation-delay: 0.44s; position: relative; }

.beez-hero-word--succeed {
  background: linear-gradient(180deg, #66f3ff 0%, #00E5FF 60%, #00b5cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 28px rgba(0, 229, 255, 0.45));
}

.beez-hero-underline {
  position: absolute;
  left: 0;
  bottom: -0.04em;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--beez-cyan) 35%, var(--beez-cyan) 70%, transparent 100%);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: beezUnderlineIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.7));
}

@keyframes beezWordIn {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes beezUnderlineIn {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.beez-hero-lede {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--beez-text-mute);
  max-width: 540px;
  margin: 0 0 30px;
}

.beez-hero-lede em {
  font-style: normal;
  color: var(--beez-text-hi);
  font-weight: 600;
}

/* ─── 4-STEP JOURNEY ───────────────────────────────────────────── */

.beez-journey {
  list-style: none;
  margin: 0 0 32px;
  padding: 22px 0 0;
  /* Flex with space-between distributes whatever leftover container width
     remains after the four step columns lay out at their natural width.
     Combined with vertical (icon-above-text) step layout, there's always
     real whitespace between adjacent steps regardless of label length. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.beez-journey-step {
  position: relative;
  /* Vertical stack: icon on top, text below. Each step's width is its
     widest text line (capped via meta max-width below), so neighbouring
     steps no longer collide horizontally. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  min-width: 0;
  flex: 0 1 auto;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: beezWordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.beez-journey-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--step-accent, var(--beez-cyan));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 6px 16px -8px rgba(0,0,0,0.6);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.beez-journey-icon svg { width: 19px; height: 19px; }

.beez-journey-step:hover .beez-journey-icon {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--step-accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-accent) 14%, transparent),
              0 12px 30px -12px color-mix(in srgb, var(--step-accent) 65%, transparent);
}

.beez-journey-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  /* Cap each text column so a long sub like "Visualise before the market"
     wraps to two lines instead of stretching the step wider than its
     siblings. ~13ch is wide enough to keep "Build knowledge" / "Use real
     tools" on a single line. */
  max-width: 13ch;
}

.beez-journey-label {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--beez-text-hi);
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.beez-journey-sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--beez-text-mute);
  line-height: 1.35;
}

.beez-journey-chevron {
  /* Unicode "›" — clean, no SVG sizing footguns, scales with font-size. */
  flex: 0 0 auto;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.30);
  user-select: none;
  opacity: 0;
  animation: beezWordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@media (max-width: 1180px) {
  .beez-journey-label { font-size: 13.5px; }
  .beez-journey-sub { font-size: 10.5px; }
  .beez-journey-icon { width: 34px; height: 34px; border-radius: 10px; }
  .beez-journey-icon svg { width: 17px; height: 17px; }
  .beez-journey { gap: 14px; }
  .beez-journey-meta { max-width: 12ch; }
}

@media (max-width: 980px) {
  /* Below tablet, fall back to a 2×2 grid so each step has full text room. */
  .beez-journey {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 18px;
    justify-content: stretch;
  }
  .beez-journey-meta { max-width: none; }
}

@media (max-width: 720px) {
  .beez-journey {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 18px;
  }
}

/* ─── CTA ───────────────────────────────────────────────────────── */

.beez-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 24px;
}

.beez-hero-cta .beez-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--beez-cyan) 0%, #2bb6ff 100%);
  color: #07060f;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.25),
    0 14px 40px -14px rgba(0, 229, 255, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.2s, box-shadow 0.3s, filter 0.2s;
}

.beez-hero-cta .beez-cta-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.45),
    0 22px 50px -16px rgba(0, 229, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.beez-hero-cta .beez-cta-primary svg { transition: transform 0.2s; }
.beez-hero-cta .beez-cta-primary:hover svg { transform: translateX(3px); }

.beez-hero-cta .beez-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--beez-text-hi);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.2s, border-color 0.2s;
}

.beez-hero-cta .beez-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ─── TRUST LINE ───────────────────────────────────────────────── */

.beez-trustline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--beez-text-mute);
}

.beez-trustline li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.beez-trustline-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   STAGE (RIGHT) — Dashboard collage with silhouette
   ═══════════════════════════════════════════════════════════════════ */

.beez-hero-stage {
  position: relative;
  /* Stretch to match the left column's natural height so the IQ card
     can fill the full hero area instead of sitting in a fixed 560px
     box with empty gutters above and below. align-self forces this
     cell to ignore the grid's `align-items: center`. */
  align-self: stretch;
  min-height: clamp(520px, 60vw, 640px);
  animation: beezSlideUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@media (max-width: 1100px) {
  .beez-hero-stage { align-self: auto; min-height: 0; height: auto; margin-top: 12px; }
}

.beez-hero-stage-inner {
  position: absolute;
  inset: 0;
}

.beez-hero-spotlight {
  /* Disabled — this cyan + violet glow lives inside the hero only
     and is clipped by the hero's overflow:hidden, so it ends ~30px
     before the hero's bottom border. The IQ pitch and pillars below
     have no equivalent glow, so the visible difference creates a
     perceptible horizontal seam at the hero/pitch boundary. Hiding
     it makes all three sections render uniformly against the page's
     spinning conic gradient. */
  display: none;
}

.beez-hero-figure {
  position: absolute;
  right: -2%;
  bottom: -6%;
  height: 92%;
  width: auto;
  z-index: 1;
  filter:
    drop-shadow(-30px 0 60px rgba(0, 229, 255, 0.25))
    drop-shadow(20px 30px 60px rgba(0, 0, 0, 0.6))
    saturate(0.85)
    contrast(1.05);
  pointer-events: none;
  user-select: none;
  /* Slight inversion so the figure reads as a deeper midnight rather than
     pure black; reads more cinematic against the cyan rim. */
  mix-blend-mode: normal;
}

@media (max-width: 1100px) {
  .beez-hero-figure { right: 2%; bottom: -2%; height: 80%; }
}

/* ─── DASHBOARD CARDS ───────────────────────────────────────────── */

.beez-card {
  position: absolute;
  z-index: 2;
  background: linear-gradient(155deg, rgba(28, 16, 56, 0.78) 0%, rgba(14, 8, 30, 0.62) 100%);
  border: 1px solid var(--beez-card-border);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 48px -22px rgba(0, 0, 0, 0.7),
    0 4px 12px -4px rgba(0, 229, 255, 0.12);
  color: var(--beez-text-hi);
  font-family: 'Manrope', system-ui, sans-serif;
  opacity: 0;
  animation: beezCardIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes beezCardIn {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.beez-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.beez-card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beez-text-mute);
}

.beez-card-title--xs { font-size: 10.5px; letter-spacing: 0.1em; }

.beez-card-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.beez-card-pill--up   { color: #4ade80; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); }
.beez-card-pill--down { color: #fb7185; background: rgba(244, 63, 94, 0.12);  border: 1px solid rgba(244, 63, 94, 0.35); }

.beez-card-value {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  color: var(--beez-text-hi);
}

.beez-card-value strong { font-weight: 800; }

.beez-card-sub {
  font-size: 11.5px;
  color: var(--beez-text-mute);
}

.beez-card-chart {
  margin: 10px -4px 0;
  height: 56px;
}

.beez-spark { width: 100%; height: 100%; display: block; }

.beez-card-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Card 1 — Portfolio ── */
.beez-card--portfolio {
  top: 0; left: 0;
  width: 64%;
  animation-delay: 0.35s;
}

/* ── Card 2 — Risk ── */
.beez-card--risk {
  top: 4%; right: 0;
  width: 36%;
  min-width: 178px;
  animation-delay: 0.5s;
  padding: 12px 14px;
}

.beez-risk-num {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  margin: 4px 0 1px;
  color: #fbbf24;
  letter-spacing: -0.02em;
}

.beez-risk-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0 8px;
  overflow: hidden;
}

.beez-risk-bar-fill {
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80 0%, #fbbf24 60%, #fb7185 100%);
}

.beez-risk-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--beez-text-mute);
}

/* ── Card 3 — Allocation ── */
.beez-card--alloc {
  top: 38%; left: 4%;
  width: 56%;
  animation-delay: 0.65s;
}

.beez-alloc-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
}

.beez-alloc-donut {
  width: 80px; height: 80px;
}

.beez-alloc-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
}

.beez-alloc-legend {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 11.5px;
  display: grid;
  gap: 4px;
  color: var(--beez-text-soft);
}

.beez-alloc-legend li {
  display: flex; align-items: center;
  gap: 8px;
}

.beez-alloc-legend li span {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.beez-alloc-legend em {
  margin-left: auto;
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--beez-text-hi);
}

/* ── Card 4 — Cash Flow ── */
.beez-card--flow {
  bottom: 6%; left: 0;
  width: 50%;
  animation-delay: 0.8s;
}

.beez-flow-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--beez-text-soft);
}

.beez-flow-row strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--beez-text-hi);
}

.beez-flow-row--neg strong { color: #fb7185; }

.beez-flow-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}

.beez-flow-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--beez-cyan) 0%, #2bb6ff 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

/* ── Card 5 — Backtest tag ── */
.beez-card--backtest {
  bottom: 14%; right: 4%;
  width: 36%;
  min-width: 160px;
  animation-delay: 0.95s;
  padding: 11px 14px;
}

.beez-backtest-num {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  margin: 2px 0 6px;
  color: #4ade80;
}

.beez-card--backtest .beez-card-chart {
  margin: 4px 0 0;
  height: 38px;
}

/* ─── Responsive: smaller stage cards ──────────────────────────── */

@media (max-width: 980px) {
  .beez-card--portfolio { width: 70%; }
  .beez-card--risk      { width: 38%; }
  .beez-card--alloc     { width: 60%; top: 40%; }
  .beez-card--flow      { width: 54%; }
  .beez-card--backtest  { width: 38%; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — collapse the absolute-positioned dashboard collage into a
   normal vertical stack. The figure + spotlight are decorative-only,
   so they hide. Header buttons tighten so they don't wrap.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* Hero shell — tighter padding, room for stacked cards */
  .beez-home .beez-hero { padding: 110px 0 28px; }

  /* The stage no longer needs a fixed height — it grows with content. */
  .beez-home .beez-hero-stage {
    height: auto !important;
    margin-top: 28px;
  }
  .beez-home .beez-hero-stage-inner {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    inset: auto !important;
  }

  /* Hide the silhouette + spotlight — purely decorative; they get
     cropped strangely when the stage shrinks. */
  .beez-home .beez-hero-figure,
  .beez-home .beez-hero-spotlight { display: none !important; }

  /* Every dashboard card becomes a normal-flow full-width tile.
     Scoping under .beez-home + each card class beats any earlier
     media-query rule (.beez-card--portfolio { width: 70% } at 980px). */
  .beez-home .beez-card,
  .beez-home .beez-card--portfolio,
  .beez-home .beez-card--risk,
  .beez-home .beez-card--alloc,
  .beez-home .beez-card--flow,
  .beez-home .beez-card--backtest {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    padding: 13px 14px;
    border-radius: 14px;
    animation-delay: 0.3s !important;
    transform: none !important;
  }

  .beez-home .beez-card-value { font-size: 20px; }
  .beez-home .beez-risk-num { font-size: 32px; }
  .beez-home .beez-backtest-num { font-size: 22px; }
  .beez-home .beez-card--backtest .beez-card-chart { height: 44px; }
}

/* Header tightens: narrow viewports were making "Sign in" wrap to two
   lines and "Start free →" likewise. Smaller padding + 12px font, no
   wrapping. */
@media (max-width: 540px) {
  .beez-home .public-header .container { gap: 10px; }
  .beez-home .public-header img { height: 38px !important; }
  .beez-home .public-header a {
    padding: 7px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    line-height: 1.1;
  }
}

@media (max-width: 380px) {
  /* Smallest pocket-phone fallback */
  .beez-hero { padding: 100px 0 56px; }
  .beez-hero-title { font-size: clamp(34px, 12vw, 56px); }
  .beez-hero-cta { gap: 10px; }
  .beez-hero-cta .beez-cta-primary,
  .beez-hero-cta .beez-cta-secondary {
    padding: 12px 16px;
    font-size: 13.5px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Light-theme adjustments — Beez hero stays dark, but the page below
   needs the regular light-theme treatment. The site's existing
   public-homepage.css already handles those sections; we only need to
   make sure no Beez-specific selector accidentally bleeds into them.
   (None do — every selector is .beez-* scoped.)
   ═══════════════════════════════════════════════════════════════════ */

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .beez-hero-glow--cyan,
  .beez-hero-glow--violet,
  .beez-hero-eyebrow-dot,
  .beez-hero-word,
  .beez-hero-underline,
  .beez-hero-copy,
  .beez-hero-stage,
  .beez-card,
  .beez-journey-step {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   POST-HERO SECTIONS — 3 PILLARS, ADVANCED TOOLS, FINAL CTA BAND
   Reference-matching composition. Same midnight-trading-floor theme
   as the hero (always dark, regardless of site theme toggle).
   ═══════════════════════════════════════════════════════════════════ */

.beez-pillars,
.beez-advanced,
.beez-final,
.beez-iq-pitch {
  position: relative;
  z-index: 1;                       /* layer above the spinning conic gradient */
  /* Transparent — the rotating teal/magenta/blue gradient on the page's
     fixed background layer is the site's actual theme, and these
     sections inherit it instead of pasting a flat midnight rectangle
     over it. Cards still own their dark glass via .beez-card. */
  background: transparent;
  color: var(--beez-text-hi);
  font-family: 'Manrope', system-ui, sans-serif;
  isolation: isolate;
  overflow: hidden;
}

.beez-pillars { padding: 24px 0 40px; }
.beez-advanced { padding: 20px 0 40px; }
.beez-final { padding: 20px 0 80px; }

/* Soft violet wash behind the pillar grid. */
.beez-pillars-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.beez-pillars-glow {
  /* The rotating site gradient already supplies plenty of violet —
     this becomes a subtle accent rather than a competing wash. */
  position: absolute;
  width: 70%; height: 60%;
  top: -8%; left: 15%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, transparent 65%);
  filter: blur(110px);
  opacity: 0.7;
  pointer-events: none;
}

/* ─── 3 PILLARS GRID ───────────────────────────────────────────── */

.beez-pillars-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1080px) {
  .beez-pillars-grid { grid-template-columns: 1fr; gap: 18px; }
}

.beez-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.85) 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  text-decoration: none;
  color: var(--beez-text-hi);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s, box-shadow 0.3s;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.beez-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--pillar-accent) 35%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, var(--pillar-accent) 12%, transparent) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.beez-pillar:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pillar-accent) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px color-mix(in srgb, var(--pillar-accent) 30%, transparent),
    0 38px 70px -30px color-mix(in srgb, var(--pillar-accent) 55%, transparent);
}

.beez-pillar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.beez-pillar-num {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pillar-accent);
  background: color-mix(in srgb, var(--pillar-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 45%, transparent);
  flex-shrink: 0;
}

.beez-pillar-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: var(--pillar-accent);
  margin: 0;
}

.beez-pillar-tagline {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--beez-text-soft);
  margin: 0 auto 22px;
  max-width: 32ch;
}

.beez-pillar-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 520px) {
  .beez-pillar-body { grid-template-columns: 1fr; }
}

/* ─── PILLAR MOCKUPS ────────────────────────────────────────────── */

.beez-pillar-mockup {
  display: flex;
  align-items: stretch;
}

.beez-mock {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, rgba(13, 6, 26, 0.7) 0%, rgba(28, 14, 60, 0.4) 100%);
  padding: 14px;
  position: relative;
  overflow: hidden;
  min-height: 178px;
}

/* Academy mockup — graduation cap + play button. */
.beez-mock--academy {
  background: linear-gradient(155deg, rgba(168, 85, 247, 0.22) 0%, rgba(115, 0, 231, 0.36) 100%);
  display: grid;
  place-items: center;
}

.beez-mock-cap {
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 6px 20px rgba(168, 85, 247, 0.55));
}

.beez-mock-play {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.7);
  color: #fff;
  padding-left: 2px;
}

/* Labs mockup — EMI calculator. */
.beez-mock--labs {
  font-family: 'Manrope', system-ui, sans-serif;
}

.beez-mock-labs-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--beez-text-mute);
  margin-bottom: 8px;
}

.beez-mock-labs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--beez-text-mute);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.beez-mock-labs-row strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--beez-text-hi);
  font-size: 12px;
}

.beez-mock-labs-row--strong strong { color: var(--beez-cyan); }

.beez-mock-labs-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--beez-cyan) 0%, #2bb6ff 100%);
  color: #07060f;
  border: none;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: default;
  box-shadow: 0 8px 18px -8px rgba(0, 229, 255, 0.55);
}

/* Sandbox mockup — portfolio simulation. */
.beez-mock--sandbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.beez-mock-sand-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--beez-text-mute);
}

.beez-mock-sand-meta {
  font-size: 11px;
  color: var(--beez-text-mute);
  margin-top: 8px;
}

.beez-mock-sand-num {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #4ade80;
  line-height: 1;
}

.beez-mock-sand-vs {
  font-size: 11px;
  color: var(--beez-text-mute);
}

.beez-mock-sand-vs strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #4ade80;
  font-weight: 600;
}

.beez-mock-sand-chart {
  margin-top: auto;
  height: 50px;
}

/* ─── PILLAR BULLETS ───────────────────────────────────────────── */

.beez-pillar-bullets {
  list-style: none;
  margin: 0;
  padding: 14px 4px 4px;
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 12.5px;
  color: var(--beez-text-soft);
}

.beez-pillar-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.35;
}

.beez-pillar-bullet-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pillar-accent);
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--pillar-accent) 70%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   ADVANCED TOOLS
   ═══════════════════════════════════════════════════════════════════ */

.beez-advanced-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.85) 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.beez-advanced-num {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13.5px;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.45);
}

.beez-advanced-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #c084fc;
  margin: 0;
}

.beez-advanced-sub {
  margin-left: auto;
  font-size: 13px;
  color: var(--beez-text-mute);
  flex: 1 1 auto;
  text-align: right;
  min-width: 280px;
}

@media (max-width: 720px) {
  .beez-advanced-sub { text-align: left; margin-left: 0; }
}

.beez-advanced-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 1180px) { .beez-advanced-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .beez-advanced-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .beez-advanced-grid { grid-template-columns: 1fr; } }

.beez-tool {
  padding: 18px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 14, 60, 0.55) 0%, rgba(13, 6, 26, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
  opacity: 0;
  animation: beezWordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.beez-tool:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.35);
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.7) 0%, rgba(13, 6, 26, 0.9) 100%);
}

.beez-tool-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #c084fc;
  margin-bottom: 12px;
}

.beez-tool-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #c084fc;
  margin: 0 0 6px;
  line-height: 1.25;
  min-height: 28px;
}

.beez-tool-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--beez-text-mute);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM CTA BAND
   ═══════════════════════════════════════════════════════════════════ */

.beez-final-bar {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1.1fr;
  align-items: center;
  gap: 30px;
  padding: 26px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.85) 100%);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 980px) {
  .beez-final-bar { grid-template-columns: 1fr; gap: 24px; }
}

.beez-final-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.beez-final-target {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(0, 229, 255, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
  flex-shrink: 0;
}

.beez-final-copy h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--beez-text-hi);
}

.beez-final-copy p {
  margin: 0;
  font-size: 13px;
  color: var(--beez-text-mute);
}

.beez-final-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.beez-final-mid-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--beez-text-mute);
}

.beez-final-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--beez-cyan) 0%, #2bb6ff 100%);
  color: #07060f;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.25),
    0 14px 36px -14px rgba(0, 229, 255, 0.7);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.3s;
}

.beez-final-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.45),
    0 18px 44px -14px rgba(0, 229, 255, 0.85);
}

.beez-final-right {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .beez-final-right { justify-content: flex-start; flex-wrap: wrap; }
}

.beez-final-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.beez-final-trust-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.32);
  color: #c084fc;
}

.beez-final-trust-text {
  display: grid;
  gap: 0;
  line-height: 1.2;
}

.beez-final-trust-text strong {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--beez-text-hi);
}

.beez-final-trust-text span {
  font-size: 11px;
  color: var(--beez-text-mute);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO COLLAGE V2 — six floating glass cards (no silhouette).
   Replaces the prior portfolio/risk/alloc/flow/backtest composition.
   Position rules reference the new .beez-card--* class names so the
   prior absolute-position media queries no longer apply.
   ═══════════════════════════════════════════════════════════════════ */

.beez-card-pill--amber { color: #fcd34d; background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.32); }
.beez-card-pill--cyan  { color: #67e8f9; background: rgba(34, 211, 238, 0.16); border: 1px solid rgba(34, 211, 238, 0.32); }

/* ── Card A — Capital Gains Tax (top-left) ──
   Reference: width 360px on a 700px canvas → 51%. The card holds 4 stat
   tiles + 4 progress bars, so it needs the full top-left quadrant. */
.beez-card--tax {
  top: 1%; left: 0;
  width: 54%;
  min-width: 320px;
  animation-delay: 0.32s;
}

.beez-tax-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.beez-tax-stat {
  display: flex; flex-direction: column;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}

.beez-tax-stat .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beez-text-mute);
  margin-bottom: 3px;
}

.beez-tax-stat .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
}

.v-net   { color: #a78bfa; }
.v-tax   { color: #fb7185; }
.v-long  { color: #34d399; }
.v-short { color: #fbbf24; }

.beez-tax-bars {
  margin-top: 10px;
  display: flex; flex-direction: column;
  gap: 5px;
}

.beez-tax-bar { display: flex; align-items: center; gap: 8px; }
.beez-tax-bar .nm { font-size: 10.5px; color: var(--beez-text-mute); width: 64px; flex-shrink: 0; }
.beez-tax-bar .tr { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; display: block; }
.beez-tax-bar .tf { display: block; height: 100%; border-radius: 3px; }
.beez-tax-bar .tf-pos { background: linear-gradient(90deg, #34d399, #10b981); }
.beez-tax-bar .tf-neg { background: linear-gradient(90deg, #fb7185, #ef4444); }

/* ── Card B — Halal Screener (top-right) ──
   Reference: 280px wide. Min-width raised so "🌙 Halal Screener" + PASS
   pill never wraps to two lines. */
.beez-card--halal {
  top: 0; right: 0;
  width: 42%;
  min-width: 270px;
  animation-delay: 0.45s;
}

.beez-halal-status {
  display: flex; align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}

.beez-halal-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(34,197,94,0.30), rgba(34,197,94,0.10));
  border: 1px solid rgba(34,197,94,0.40);
  color: #86efac;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 0 22px rgba(34,197,94,0.22);
  flex-shrink: 0;
}

.beez-halal-text .h-t { font-size: 13px; font-weight: 700; color: #86efac; letter-spacing: -0.005em; }
.beez-halal-text .h-s { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--beez-text-mute); }

.beez-halal-row { display: flex; gap: 4px; flex-wrap: wrap; }

.beez-h-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(34, 211, 238, 0.10);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.25);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Card C — Equity Lens NVDA (mid-right) ──
   Reference: top 178px, right 30px, width 312px (45% of 700). Sits below
   Halal and overlaps slightly with Cashflow below — that overlap is part
   of the layered cascade. */
.beez-card--lens {
  top: 28%; right: 4%;
  width: 46%;
  min-width: 290px;
  animation-delay: 0.6s;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  background: linear-gradient(165deg, rgba(14, 32, 42, 0.92) 0%, rgba(18, 12, 46, 0.92) 100%) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.55),
    0 6px 22px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  z-index: 4;
}

.beez-lens-body {
  display: flex; align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.beez-lens-left { flex: 1; }

.beez-lens-num {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}

.beez-lens-num small {
  font-size: 13px;
  color: var(--beez-text-mute);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0;
}

.beez-lens-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  color: #86efac;
  letter-spacing: 0.16em;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.32);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 8px;
}

.beez-lens-radar {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(34, 211, 238, 0.25));
}

.beez-lens-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.beez-lens-stat { text-align: center; display: flex; flex-direction: column; }
.beez-lens-stat .ll {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; color: var(--beez-text-mute);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.beez-lens-stat .lv {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 700;
  color: var(--beez-text-hi); margin-top: 2px;
}
.beez-lens-stat .lv-pos { color: #34d399; }

/* ── Card D — Cash Flow Forecast (bottom-right) ──
   Reference: top 368px, right 0, width 380px (54% of 700). The widest
   card; bar+line chart needs horizontal room. */
.beez-card--cashflow {
  bottom: 0; right: 0;
  width: 58%;
  min-width: 340px;
  animation-delay: 0.75s;
}

.beez-cf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.beez-cf-stat {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column;
}

.beez-cf-stat .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; color: var(--beez-text-mute);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.beez-cf-stat .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; margin-top: 2px;
}

.cf-in  { color: #34d399; }
.cf-out { color: #fb7185; }

.beez-cf-chart { margin-top: 8px; height: 70px; }
.beez-cf-chart svg { display: block; }

/* ── Card E — Rent vs Buy (bottom-left) ──
   Reference: bottom 24px, left 38px, width 320px (46% of 700). Sits to
   the left of Cashflow and overlaps the bottom edge of Quiz. */
.beez-card--rentbuy {
  bottom: 0; left: 4%;
  width: 48%;
  min-width: 290px;
  animation-delay: 0.9s;
}

.beez-rb-headline {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: -0.01em;
  margin: 4px 0;
}

.beez-rb-sub {
  font-size: 11px;
  color: var(--beez-text-mute);
  line-height: 1.45;
}
.beez-rb-sub b { color: var(--beez-text-hi); font-weight: 700; }

.beez-rb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.beez-rb-stat {
  text-align: center;
  padding: 7px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  gap: 2px;
}

.beez-rb-stat .l {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  color: var(--beez-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beez-rb-stat .v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--beez-text-hi);
}

/* ── Card F — Today's Lesson quiz (mid-left floater) ──
   Reference: top 300px, left -22px, width 228px (33% of 700). Slides
   slightly outside the column so it visually breaks the grid edge. */
.beez-card--quiz {
  top: 44%; left: -3%;
  width: 35%;
  min-width: 230px;
  animation-delay: 1.05s;
  background: linear-gradient(160deg, rgba(40, 18, 80, 0.88) 0%, rgba(20, 8, 52, 0.88) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.30) !important;
  z-index: 5;
}

.beez-quiz-q {
  font-size: 12px;
  color: var(--beez-text-hi);
  font-weight: 600;
  line-height: 1.35;
  margin: 4px 0 8px;
}

.beez-quiz-line {
  font-size: 11px;
  color: var(--beez-text-mute);
  line-height: 1.4;
  margin-bottom: 10px;
}

.beez-quiz-line .hl { color: #fbbf24; font-weight: 700; }

.beez-quiz-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

.beez-quiz-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e933e9, #a855f7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  white-space: nowrap;
}

.beez-quiz-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--beez-text-mute);
  white-space: nowrap;
}

/* ─── Hero stage — stretches to match the left column so the
       Financial IQ card can fill the full hero area. The old fixed
       `height` clamp left empty gutters above/below the card. ─ */
.beez-home .beez-hero-stage {
  height: auto;
  align-self: stretch;
  min-height: clamp(560px, 60vw, 680px);
}
@media (max-width: 1100px) {
  .beez-home .beez-hero-stage {
    height: auto;
    align-self: auto;
    min-height: clamp(520px, 90vw, 620px);
  }
}

/* ─── Mobile: stack the new cards vertically ──────────────────────── */
@media (max-width: 720px) {
  .beez-home .beez-hero-stage { height: auto !important; margin-top: 28px; }
  .beez-home .beez-hero-stage-inner {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    inset: auto !important;
  }
  .beez-home .beez-hero-spotlight { display: none !important; }
  .beez-home .beez-card,
  .beez-home .beez-card--tax,
  .beez-home .beez-card--halal,
  .beez-home .beez-card--lens,
  .beez-home .beez-card--cashflow,
  .beez-home .beez-card--rentbuy,
  .beez-home .beez-card--quiz {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    inset: auto !important;
    transform: none !important;
    animation-delay: 0.3s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3 PILLARS V2 — chip-based panels
   ═══════════════════════════════════════════════════════════════════ */

.beez-pillar2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.85) 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  text-decoration: none;
  color: var(--beez-text-hi);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 30px 60px -30px rgba(0,0,0,0.6);
}

.beez-pillar2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--pillar-accent) 35%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, var(--pillar-accent) 12%, transparent) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.beez-pillar2:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pillar-accent) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px color-mix(in srgb, var(--pillar-accent) 30%, transparent),
    0 38px 70px -30px color-mix(in srgb, var(--pillar-accent) 55%, transparent);
}

.beez-pillar2-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.beez-pillar2-num {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pillar-accent);
  background: color-mix(in srgb, var(--pillar-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 45%, transparent);
}

.beez-pillar2-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.10em;
  color: var(--pillar-accent);
  margin: 0;
}

.beez-pillar2-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--beez-text-soft);
  margin: 0 auto 14px;
  max-width: 32ch;
}

.beez-pillar2-icon {
  display: grid;
  place-items: center;
  margin: 6px auto 18px;
  color: var(--pillar-accent);
  filter: drop-shadow(0 8px 28px color-mix(in srgb, var(--pillar-accent) 50%, transparent));
}

.beez-pillar2-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.beez-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--beez-text-soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beez-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pillar-accent);
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--pillar-accent) 70%, transparent);
}

.beez-chip--full { grid-column: 1 / -1; justify-content: center; }
.beez-chip--muted { color: var(--beez-text-mute); background: rgba(255,255,255,0.02); border-style: dashed; }
.beez-chip--muted .beez-chip-dot { background: rgba(255,255,255,0.25); box-shadow: none; }

@media (max-width: 420px) {
  .beez-pillar2-chips { grid-template-columns: 1fr; }
  .beez-chip--full    { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADVANCED TOOLS V2 — tag/title/desc cards (no icon), 5-tile grid
   ═══════════════════════════════════════════════════════════════════ */

.beez-advanced-head--banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.85) 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  margin-bottom: 22px;
}

.beez-advanced-head-left {
  display: flex; align-items: center; gap: 12px;
}

.beez-advanced-head--banner .beez-advanced-title {
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--beez-text-hi);
}

.beez-advanced-head--banner .beez-advanced-sub {
  text-align: right;
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 280px;
  font-size: 13px;
}

.beez-advanced-grid--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

@media (max-width: 1180px) { .beez-advanced-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .beez-advanced-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .beez-advanced-grid--5 { grid-template-columns: 1fr; } }

.beez-tool2 {
  --tool-accent: #a855f7;
  position: relative;
  padding: 16px 16px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 14, 60, 0.55) 0%, rgba(13, 6, 26, 0.80) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  opacity: 0;
  animation: beezWordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.beez-tool2:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tool-accent) 45%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tool-accent) 18%, rgba(13, 6, 26, 0.7)) 0%,
    rgba(13, 6, 26, 0.92) 100%);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--tool-accent) 60%, transparent);
}

.beez-tool2-tag {
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--tool-accent);
  background: color-mix(in srgb, var(--tool-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tool-accent) 30%, transparent);
}

.beez-tool2-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--beez-text-hi);
  margin: 0;
  line-height: 1.25;
}

.beez-tool2-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--beez-text-mute);
  margin: 0;
}

.beez-advanced-footnote {
  text-align: center;
  margin: 26px 0 0;
  font-size: 12px;
  color: var(--beez-text-mute);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   FINANCIAL IQ — hero-mounted card
   ───────────────────────────────────────────────────────────────────
   The card is the sole inhabitant of the hero's right column. No
   dashboard collage. Centred vertically and horizontally inside the
   stage, with the spotlight glow doing the atmospheric work behind.
   Theme: our purple/magenta/cyan — no cream/honey.
   ═══════════════════════════════════════════════════════════════════ */

.beez-hero-iq {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 60px);
  border-radius: 28px;
  /* Match the 3-pillar cards below: translucent purple wash that
     lets the page's purple gradient bleed through, with a soft
     violet border. Replaces the near-opaque midnight gradient that
     was reading as a flat black box. */
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.7) 100%);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 36px 90px -30px rgba(115, 0, 231, 0.6),
    0 28px 70px -28px rgba(255, 0, 204, 0.35);
  text-align: left;
  overflow: hidden;
  z-index: 3;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: beezSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.beez-hero-iq::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(115, 0, 231, 0.6), rgba(255, 0, 204, 0.4) 50%, rgba(0, 229, 255, 0.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* Scale interior typography up when the card fills a wide hero stage
   so it doesn't read as a small card stretched onto a big surface. */
.beez-hero-iq .beez-iq-brand-mark {
  width: 44px; height: 44px; border-radius: 13px;
}
.beez-hero-iq .beez-iq-brand-name { font-size: 26px; }
.beez-hero-iq .beez-iq-card-tag   { font-size: 12px; letter-spacing: 0.18em; }
.beez-hero-iq .beez-iq-pill       { font-size: 13px; padding: 8px 14px; }
.beez-hero-iq .beez-iq-title      { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 18px; }
.beez-hero-iq .beez-iq-sub        { font-size: clamp(15px, 1.2vw, 17px); margin-bottom: 30px; max-width: 56ch; }
.beez-hero-iq .beez-iq-button     { padding: 18px 24px; font-size: 18px; }
.beez-hero-iq .beez-iq-button-foot{ font-size: 13px; margin-bottom: 28px; }
.beez-hero-iq .beez-iq-meta       { padding-top: 22px; }
.beez-hero-iq .beez-iq-meta-item  { font-size: 13.5px; gap: 8px; }
.beez-hero-iq .beez-iq-meta-item svg { width: 20px; height: 20px; }

@media (max-width: 1100px) {
  /* When the hero stacks into a single column, the IQ card releases
     its absolute positioning and becomes a flow-block centred under
     the headline. */
  .beez-hero-iq {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 560px;
    margin: 8px auto 0;
  }
}

@media (max-width: 560px) {
  .beez-hero-iq { padding: 26px 24px 24px; border-radius: 22px; }
  .beez-hero-iq .beez-iq-title { font-size: 28px; }
  .beez-hero-iq .beez-iq-button { font-size: 17px; }
}

/* ─── Header row: "FINANCIAL IQ TEST" tag (right-aligned) ─────── */

.beez-iq-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.beez-iq-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.beez-iq-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, #7300e7 0%, #ff00cc 100%);
  color: #fff;
  box-shadow:
    0 8px 22px -8px rgba(255, 0, 204, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.beez-iq-brand-name {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--beez-text-hi);
}

.beez-iq-card-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* ─── Cyan duration pill ─────────────────────────────────────── */

.beez-iq-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.32);
  color: var(--beez-cyan);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin-bottom: 16px;
}

.beez-iq-pill svg { color: var(--beez-cyan); }

/* ─── Headline + sub ──────────────────────────────────────────── */

.beez-iq-title {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--beez-text-hi);
  margin: 0 0 14px;
  text-wrap: balance;
}

.beez-iq-title-accent {
  color: var(--beez-cyan);
}

.beez-iq-sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--beez-text-soft);
  margin: 0 0 24px;
  max-width: 46ch;
}

/* ─── Primary button (full-width gradient) ────────────────────── */

.beez-iq-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7300e7 0%, #ff00cc 100%);
  color: #fff;
  text-decoration: none;
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 16px 44px -14px rgba(255, 0, 204, 0.55),
    0 12px 32px -16px rgba(115, 0, 231, 0.65),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, filter 220ms ease;
}

.beez-iq-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 80% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(140% 80% at 100% 100%, rgba(0, 229, 255, 0.22), transparent 60%);
  opacity: 0.8;
  z-index: -1;
}

.beez-iq-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px -14px rgba(255, 0, 204, 0.72),
    0 16px 44px -16px rgba(115, 0, 231, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
  filter: brightness(1.05);
  color: #fff;
}

.beez-iq-button:active { transform: translateY(0); }

.beez-iq-button:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 4px;
}

.beez-iq-button-text {
  display: inline-flex;
  align-items: center;
}

.beez-iq-button-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.beez-iq-button:hover .beez-iq-button-arrow {
  transform: translateX(4px);
}

.beez-iq-button-foot {
  margin: 10px 0 22px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* ─── 3-up meta row ──────────────────────────────────────────── */

.beez-iq-meta {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.beez-iq-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--beez-text-soft);
  text-align: center;
}

.beez-iq-meta-item svg {
  color: var(--beez-text-mute);
}

/* ─── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .beez-iq-button,
  .beez-iq-button-arrow {
    transition: none;
  }
  .beez-iq-button:hover { transform: none; }
  .beez-iq-button:hover .beez-iq-button-arrow { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PICK ONE · GO STRAIGHT THERE — hero right-column navigator
   ───────────────────────────────────────────────────────────────────
   Replaces the single-CTA Financial IQ card. 12 entry points grouped
   by mode, scrollable inside the hero's right column. Reuses the
   same purple-wash + gradient-ring chrome as the IQ card so the swap
   feels native to the existing hero, with cyan/magenta/violet/green/
   amber section accents picking up the brand vocabulary.
   ═══════════════════════════════════════════════════════════════════ */

.beez-paths-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(16px, 1.8vw, 22px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.7) 100%);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 36px 90px -30px rgba(115, 0, 231, 0.6),
    0 28px 70px -28px rgba(255, 0, 204, 0.35);
  overflow: hidden;
  z-index: 3;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: beezSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.beez-paths-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(115, 0, 231, 0.6), rgba(255, 0, 204, 0.4) 50%, rgba(0, 229, 255, 0.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* ─── Header row: eyebrow tag + count chip ──────────────────── */

.beez-paths-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.beez-paths-head-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.beez-paths-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beez-cyan, #00E5FF);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
  flex-shrink: 0;
  animation: beezPathsPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes beezPathsPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.7); }
  50%      { box-shadow: 0 0 18px rgba(0, 229, 255, 1); }
}

.beez-paths-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beez-paths-tag-sep {
  color: rgba(0, 229, 255, 0.7);
  margin: 0 4px;
}

.beez-paths-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.32);
  color: var(--beez-cyan, #00E5FF);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.beez-paths-count strong {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  color: #fff;
}

/* ─── Scrollable list area ──────────────────────────────────── */

.beez-paths-list {
  list-style: none;
  margin: 0;
  padding: 6px 4px 6px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
  /* Soft fade-out at top + bottom so content doesn't slam into the
     card edges when scrolled. */
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.beez-paths-list::-webkit-scrollbar { width: 6px; }
.beez-paths-list::-webkit-scrollbar-track { background: transparent; }
.beez-paths-list::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.3);
  border-radius: 999px;
}
.beez-paths-list::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.5); }

/* ─── Section blocks ────────────────────────────────────────── */

.beez-paths-section {
  list-style: none;
  padding: 12px 0 6px;
}

.beez-paths-section + .beez-paths-section {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 6px;
}

.beez-paths-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 10px;
}

.beez-paths-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.beez-paths-section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.beez-paths-section-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

.beez-paths-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Individual path row ───────────────────────────────────── */
/* Each row is its own glass-bordered card. Hairline border at rest,
   warming to a low-saturation violet on hover so the box echoes the
   "Try now" pill without competing with it. */

.beez-paths-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition:
    background 200ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 200ms ease;
}

.beez-paths-row::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--beez-cyan, #00E5FF), #ff00cc);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.beez-paths-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(168, 85, 247, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px -12px rgba(115, 0, 231, 0.38),
    0 4px 14px -10px rgba(0, 229, 255, 0.18);
}

.beez-paths-row:hover::before { height: 60%; }

.beez-paths-row-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  font-variant-numeric: tabular-nums;
}

.beez-paths-row:hover .beez-paths-row-num { color: var(--beez-cyan, #00E5FF); }

.beez-paths-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.beez-paths-row-title {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
  line-height: 1.25;
}

.beez-paths-row-sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ─── "Try now →" pill — outline default, gradient on hover ── */

.beez-paths-row-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.32);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms ease;
}

.beez-paths-row-cta svg {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.beez-paths-row-cta:hover,
.beez-paths-row:hover .beez-paths-row-cta {
  background: linear-gradient(135deg, #7300e7 0%, #ff00cc 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 10px 24px -10px rgba(255, 0, 204, 0.6),
    0 6px 18px -10px rgba(115, 0, 231, 0.7);
  transform: translateY(-1px);
}

.beez-paths-row-cta:hover svg,
.beez-paths-row:hover .beez-paths-row-cta svg {
  transform: translateX(3px);
}

.beez-paths-row-cta:focus-visible {
  outline: 2px solid var(--beez-cyan, #00E5FF);
  outline-offset: 3px;
}

/* ─── Responsive — stacked single-column hero ───────────────── */

@media (max-width: 1100px) {
  .beez-paths-card {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 620px;
    margin: 12px auto 0;
    max-height: 620px;
  }
}

@media (max-width: 560px) {
  .beez-paths-card {
    padding: 20px 16px 16px;
    border-radius: 22px;
    max-height: 560px;
  }
  .beez-paths-tag { font-size: 10.5px; letter-spacing: 0.14em; }
  .beez-paths-row { grid-template-columns: 22px 1fr auto; gap: 10px; padding: 10px 9px; border-radius: 10px; }
  .beez-paths-row-num { font-size: 11px; }
  .beez-paths-row-title { font-size: 13.5px; }
  .beez-paths-row-sub { font-size: 11.5px; }
  .beez-paths-row-cta {
    padding: 6px 11px;
    font-size: 11.5px;
  }
  .beez-paths-section-label { font-size: 9.5px; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .beez-paths-card,
  .beez-paths-row,
  .beez-paths-row-cta,
  .beez-paths-row-cta svg,
  .beez-paths-eyebrow-dot,
  .beez-paths-row::before {
    animation: none !important;
    transition: none !important;
  }
  .beez-paths-row:hover { transform: none; }
  .beez-paths-row-cta:hover,
  .beez-paths-row:hover .beez-paths-row-cta { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   IQ PITCH — "Why take the test" section
   ───────────────────────────────────────────────────────────────────
   Editorial headline with cyan + violet phrase highlights, a short
   sub, a 3-up feature grid, and the gradient CTA. Theme: pure brand
   purple/magenta/cyan — uses the --beez-* variables.
   ═══════════════════════════════════════════════════════════════════ */

.beez-iq-pitch {
  padding: 88px 0 96px;
  /* No local vignette — `overflow: hidden` on this section would
     clip the radial-gradient to the section bounds, which (a) ADDS
     darkness on top of the hero's own bottom vignette at the seam
     and (b) ends abruptly above the un-vignetted pillars below,
     producing a visible darker rectangle sandwiched between the
     two. Leaving this transparent lets the page's spinning conic
     gradient flow through continuously from hero-bottom into the
     pillars, matching how the pillars themselves render. */
}

@media (max-width: 980px) {
  .beez-iq-pitch { padding: 64px 0 72px; }
}

/* Atmospheric wrapper kept for the React tree (so the existing JSX
   still resolves), but rendered as a no-op — no glows, no overflow,
   no background. */
.beez-iq-pitch-atmos { display: none; }

.beez-iq-pitch-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}

.beez-iq-pitch-title {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--beez-text-hi);
  margin: 0 auto 22px;
  max-width: 22ch;
  text-wrap: balance;
}

.beez-iq-pitch-line { display: block; }

.beez-iq-pitch-accent {
  font-weight: 800;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.beez-iq-pitch-accent--cyan {
  background-image: linear-gradient(180deg, #66f3ff 0%, #00E5FF 60%, #00b5cf 100%);
}

.beez-iq-pitch-accent--violet {
  background-image: linear-gradient(135deg, #b388ff 0%, #7300e7 55%, #ff00cc 100%);
}

.beez-iq-pitch-sub {
  max-width: 60ch;
  margin: 0 auto 56px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--beez-text-soft);
}

@media (max-width: 980px) {
  .beez-iq-pitch-sub { margin-bottom: 44px; }
}

/* ─── 3-up feature grid ─────────────────────────────────────── */

.beez-iq-pitch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 52px;
  text-align: left;
}

@media (max-width: 980px) {
  .beez-iq-pitch-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 40px;
  }
}

.beez-iq-feature {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(45, 22, 88, 0.55) 0%, rgba(20, 10, 38, 0.78) 100%);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 50px -28px rgba(0, 0, 0, 0.6);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms ease,
              box-shadow 220ms ease;
  overflow: hidden;
}

.beez-iq-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(0, 229, 255, 0.32) 0%,
    transparent 40%,
    rgba(115, 0, 231, 0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.beez-iq-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -28px rgba(0, 229, 255, 0.4),
    0 24px 50px -28px rgba(115, 0, 231, 0.45);
}

.beez-iq-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.32);
  color: var(--beez-cyan);
  margin-bottom: 22px;
  box-shadow: 0 0 24px -8px rgba(0, 229, 255, 0.45);
}

.beez-iq-feature-title {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--beez-text-hi);
  margin: 0 0 10px;
}

.beez-iq-feature-desc {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--beez-text-soft);
  margin: 0;
}

/* ─── CTA button ────────────────────────────────────────────── */

.beez-iq-pitch-cta-row {
  display: flex;
  justify-content: center;
}

.beez-iq-pitch-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7300e7 0%, #ff00cc 100%);
  color: #fff;
  text-decoration: none;
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 22px 50px -16px rgba(255, 0, 204, 0.6),
    0 16px 40px -16px rgba(115, 0, 231, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  isolation: isolate;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms ease, filter 220ms ease;
}

.beez-iq-pitch-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 80% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(140% 80% at 100% 100%, rgba(0, 229, 255, 0.22), transparent 60%);
  opacity: 0.8;
  z-index: -1;
}

.beez-iq-pitch-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #fff;
  box-shadow:
    0 28px 60px -16px rgba(255, 0, 204, 0.72),
    0 20px 50px -16px rgba(115, 0, 231, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.beez-iq-pitch-cta:active { transform: translateY(0); }

.beez-iq-pitch-cta:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .beez-iq-feature,
  .beez-iq-pitch-cta {
    transition: none;
  }
  .beez-iq-feature:hover,
  .beez-iq-pitch-cta:hover { transform: none; }
}