/* hero block — colours come from Phase 6 template.css tokens */

/* --- Breadcrumb nav appended after the sec-masthead band (style-4) --- */
.acm-breadcrumb {
  background: transparent;
  padding: 12px 0;
}

.nx-bc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-family: var(--t4-font-family-base, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.5;
}

.nx-bc-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Separator chevron (dark mode first — separator is white/grey) */
.nx-bc-item:not(.nx-bc-current)::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  flex-shrink: 0;
}

.nx-bc-link,
.nx-bc-text {
  color: var(--color-text-dim, #888EA6);
  text-decoration: none;
  transition: color 0.15s;
}

.nx-bc-link:hover {
  color: var(--color-text, #E8EAF6);
  text-decoration: none;
}

.nx-bc-current .nx-bc-text {
  color: var(--color-text, #E8EAF6);
}

/* ===== Home-2 SplitHero (.acm-hero.hero-split) — nexora.pen node ieto1 =====
   Two-column split: copy left (~520px, left-aligned) + visual/mock panel right
   (fill, height ~420, $bg-elev + 1px $border + radius-lg + accent glow). Fully
   token-driven so it flips in light mode. Self-contained (no reliance on the
   template scss .sec-shero rules). Stacks (text above visual) below ~900px. */
.acm-hero.hero-split {
  position: relative;
  overflow: clip;
  padding-block: 88px 96px;
}
.acm-hero.hero-split::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(40% 45% at 15% 10%, rgb(var(--color-primary-rgb, 59 130 246) / 0.5), transparent 70%);
}
html:not([data-bs-theme="dark"]) .acm-hero.hero-split::before { opacity: 0.5; }

.acm-hero.hero-split .hs-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 64px;
  align-items: center;
}

/* --- copy (left) --- */
.acm-hero.hero-split .hs-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 26px;
  max-width: 520px;
}
.acm-hero.hero-split .hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--color-surface, #13142A);
  border: 1px solid var(--color-border, #262945);
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-size: 12.5px;
  color: var(--color-muted, #A2A8C0);
  text-decoration: none;
}
.acm-hero.hero-split .hs-eyebrow .hs-dot {
  width: 7px;
  height: 7px;
  border-radius: 100px;
  background: var(--color-accent-3, #10B981);
  flex: 0 0 7px;
}
.acm-hero.hero-split .hs-title {
  margin: 0;
  font-family: var(--font-heading, 'Geist', sans-serif);
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: var(--color-heading, #FFFFFF);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.acm-hero.hero-split .hs-lead {
  margin: 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-muted, #A2A8C0);
  max-width: 480px;
}
.acm-hero.hero-split .hs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
}
.acm-hero.hero-split .hs-actions .btn {
  font-family: var(--font-heading, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius, 10px);
}
.acm-hero.hero-split .hs-actions .btn-primary {
  background: var(--color-primary, #3B82F6) !important;
  background-image: none !important;
  background-color: var(--color-primary, #3B82F6) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.acm-hero.hero-split .hs-actions .btn-primary:hover {
  background: var(--color-primary-hover, #2563EB) !important;
  background-image: none !important;
  background-color: var(--color-primary-hover, #2563EB) !important;
  transform: none !important;
  box-shadow: none !important;
}
.acm-hero.hero-split .hs-actions .btn-ghost {
  background: transparent;
  color: var(--color-heading, #FFFFFF);
  border: 1px solid var(--color-border, #262945);
}
.acm-hero.hero-split .hs-actions .btn-ghost:hover {
  background: var(--color-surface-2, #181A33);
  color: var(--color-heading, #FFFFFF);
}

/* --- visual / mock panel (right) --- */
.acm-hero.hero-split .hs-visual {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 16px;
  overflow: clip;
  background:
    radial-gradient(81% 81% at 70% 20%, rgb(var(--color-secondary-rgb, 99 102 241) / 0.45), transparent 100%),
    var(--color-bg-alt, #101023);
  border: 1px solid var(--color-border, #262945);
  box-shadow: 0 20px 70px -10px rgba(59, 130, 246, 0.2);
}
/* When a real image is set, let it cover the whole panel edge-to-edge (no inner
   float/empty band) so any owner-supplied image fills the card. The panel keeps
   its rounded corners + shadow; the image is clipped to them. */
.acm-hero.hero-split .hs-visual:has(.hs-visual-img) {
  padding: 0;
  position: relative;
  background: var(--color-bg-alt, #101023);
}
.acm-hero.hero-split .hs-visual-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
}

/* stack (text above visual) below ~900px; no overflow at 390 */
@media (max-width: 899.98px) {
  .acm-hero.hero-split { padding-block: 56px 48px; }
  .acm-hero.hero-split .hs-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .acm-hero.hero-split .hs-copy { max-width: 100%; }
  .acm-hero.hero-split .hs-title { font-size: 40px; }
  .acm-hero.hero-split .hs-lead { font-size: 15px; }
  .acm-hero.hero-split .hs-visual { min-height: 300px; }
}
@media (max-width: 480px) {
  .acm-hero.hero-split .hs-title { font-size: 32px; letter-spacing: -1px; }
  .acm-hero.hero-split .hs-actions .btn { width: 100%; justify-content: center; }
}