/* ============================================
   BrainsMingle Suite — Vertical / Industry Pages
   Shared layout for all 8 ICP pages
   ============================================ */

/* --- Page hero (split band + white "Built for" card) ---
   Band + card are theme-independent: fixed --vert-band-* tokens,
   card hardcoded white with dark text. The toggle does not affect them. */
.vert-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(0,0,0,0) 28%, rgba(8,8,18,0.55) 100%),
    linear-gradient(330deg, rgba(0,0,0,0) 55%, rgba(8,8,18,0.40) 100%),
    var(--vert-band, var(--vert-band-purple));
  padding: var(--space-2xl) 0;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
}
.vert-hero.vert--purple { --vert-band: var(--vert-band-purple); }
.vert-hero.vert--cyan   { --vert-band: var(--vert-band-cyan); }
.vert-hero.vert--pink   { --vert-band: var(--vert-band-pink); }
.vert-hero.vert--amber  { --vert-band: var(--vert-band-amber); }

.vert-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  align-items: center;
}
.vert-hero__copy { max-width: 560px; }


/* Pill - translucent white on the band, icon forced white */
.vert-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.vert-hero__tag .icon,
.vert-hero__tag svg { color: #fff; width: 18px; height: 18px; }

.vert-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--space-md);
}
.vert-hero__sub {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--leading-normal);
  max-width: 52ch;
  margin: 0;
}
.vert-hero__cta {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Buttons on the band - dark primary, outline-white secondary.
   High specificity (3 classes) beats the .vert--{color} .btn--primary rules below. */
.vert-hero .vert-hero__cta .btn--primary {
  background: #fff;
  color: var(--vert-band);
  border-color: #fff;
}
.vert-hero .vert-hero__cta .btn--primary:hover { background: rgba(255,255,255,0.9); }
.vert-hero .vert-hero__cta .btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.vert-hero .vert-hero__cta .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.vert-hero .vert-hero__cta .btn--secondary svg { color: #fff; }

/* White "Built for" card - stays white in both themes */
.vert-hero__panel {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
}
.vert-hero__panel-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-band);
  margin-bottom: var(--space-md);
}
.vert-hero__personas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.vert-hero__persona {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: #0A0A14;
}
.vert-hero__persona .icon { color: var(--vert-band); flex-shrink: 0; }
.vert-hero__persona .icon svg { width: 22px; height: 22px; display: block; }

@media (max-width: 860px) {
  .vert-hero__content { grid-template-columns: 1fr; gap: var(--space-xl); }
  .vert-hero__copy { max-width: none; }
  .vert-hero__title { font-size: var(--text-4xl); }
}
@media (max-width: 480px) {
  .vert-hero__cta { flex-direction: column; align-items: stretch; }
}

/* ============================================
   Client Logos Strip
   ============================================ */
.vert-logos {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2xl) 0;
  background: var(--bg-alt);
  transition: background var(--duration-med);
}
.vert-logos__label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}
.vert-logos__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  flex-wrap: wrap;
}
.vert-logos__item {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  opacity: 0.4;
  letter-spacing: 0.04em;
  transition: opacity var(--duration-fast);
}
.vert-logos__item img {
  height: 28px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity var(--duration-fast), filter var(--duration-fast);
}
[data-theme="light"] .vert-logos__item img {
  filter: grayscale(100%) brightness(0.4);
}

/* ============================================
   Who It's Built For — 3×2 compact card grid
   ============================================ */
.vert-audience {
  padding: var(--space-4xl) 0;
}
.vert-audience__headline {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.vert-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.vert-audience__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color var(--duration-fast), background var(--duration-med);
}
.vert-audience__card:hover {
  border-color: var(--border-accent);
}
.vert-audience__card-icon {
  margin-bottom: var(--space-sm);
}
.vert-audience__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: 4px;
}
.vert-audience__card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ============================================
   Problem — Named-tool displacement grid
   (with accent icons and colored tool labels)
   ============================================ */
.vert-problem {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4xl) 0;
  transition: background var(--duration-med);
}
.vert-problem__headline {
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.vert-problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.vert-problem__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color var(--duration-fast), background var(--duration-med);
}
.vert-problem__card:hover {
  border-color: var(--border-accent);
}
.vert-problem__card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.vert-problem__card-icon--purple { background: var(--purple-dim); color: var(--purple); }
.vert-problem__card-icon--cyan   { background: var(--cyan-dim);   color: var(--cyan); }
.vert-problem__card-icon--pink   { background: var(--pink-dim);   color: var(--pink); }
.vert-problem__card-icon--amber  { background: var(--amber-dim);  color: var(--amber); }

.vert-problem__card-need {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--space-xs);
}
.vert-problem__card-tool {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.vert-problem__card-tool--purple { color: var(--purple); }
.vert-problem__card-tool--cyan   { color: var(--cyan); }
.vert-problem__card-tool--pink   { color: var(--pink); }
.vert-problem__card-tool--amber  { color: var(--amber); }

.vert-problem__card-breaks {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.vert-problem__closing {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ============================================
    Accent-aware primary buttons
   ============================================ */

.vert--cyan .btn--primary {
    background: var(--cyan);
    color: var(--bg);
}

.vert--pink .btn--primary {
    background: var(--pink);
    color: var(--bg);
}

.vert--amber .btn--primary {
    background: var(--amber);
    color: var(--bg);
}

/* ============================================
   Use Cases — 4 scenario cards (2×2)
   With accent left-border
   ============================================ */
.vert-usecases {
  padding: var(--space-4xl) 0;
}
.vert-usecases__headline {
  text-align: center;
  margin-bottom: var(--space-md);
}
.vert-usecases__sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.vert-usecases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.vert-usecase {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--duration-fast), background var(--duration-med);
  position: relative;
  overflow: hidden;
}
.vert-usecase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
}
.vert--purple .vert-usecase::before { background: var(--purple); }
.vert--cyan   .vert-usecase::before { background: var(--cyan); }
.vert--pink   .vert-usecase::before { background: var(--pink); }
.vert--amber  .vert-usecase::before { background: var(--amber); }

.vert-usecase:hover {
  border-color: var(--border-accent);
}
.vert-usecase__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}
.vert--purple .vert-usecase__eyebrow { color: var(--purple); }
.vert--cyan   .vert-usecase__eyebrow { color: var(--cyan); }
.vert--pink   .vert-usecase__eyebrow { color: var(--pink); }
.vert--amber  .vert-usecase__eyebrow { color: var(--amber); }

.vert-usecase__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}
.vert-usecase__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}
.vert-usecase__highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.vert-usecase__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.vert-usecase__highlights li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.vert--purple .vert-usecase__highlights li svg { color: var(--purple); }
.vert--cyan   .vert-usecase__highlights li svg { color: var(--cyan); }
.vert--pink   .vert-usecase__highlights li svg { color: var(--pink); }
.vert--amber  .vert-usecase__highlights li svg { color: var(--amber); }

/* ============================================
   Giant Tabs — Feature capabilities
   Shared tab component for all vertical pages
   ============================================ */
.vert-tabs {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4xl) 0;
  transition: background var(--duration-med);
}
.vert-tabs__headline {
  text-align: center;
  margin-bottom: var(--space-md);
}
.vert-tabs__sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* --- Tab bar --- */
.vert-tabs__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.vert-tabs__bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.vert-tabs__bar::-webkit-scrollbar { display: none; }

.vert-tabs__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-md) var(--space-sm);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.vert-tabs__btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.vert-tabs__btn:last-child { border-right: none; }
.vert-tabs__btn:hover { color: var(--text); background: var(--bg-card); }

.vert-tabs__btn.is-active {
  color: var(--page-color);
  background: var(--bg-card);
  box-shadow: inset 0 2.5px 0 var(--page-color);
}
/* --- Tab panels --- */
.vert-tabs__panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-2xl);
}
.vert-tabs__panel.is-active { display: grid; }

/* Copy side */
.vert-tabs__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.vert--purple .vert-tabs__eyebrow { color: var(--purple); }
.vert--cyan   .vert-tabs__eyebrow { color: var(--cyan); }
.vert--pink   .vert-tabs__eyebrow { color: var(--pink); }
.vert--amber  .vert-tabs__eyebrow { color: var(--amber); }

.vert-tabs__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}
.vert-tabs__desc {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.vert-tabs__highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.vert-tabs__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.vert-tabs__highlights li svg { flex-shrink: 0; margin-top: 2px; }
.vert--purple .vert-tabs__highlights li svg { color: var(--purple); }
.vert--cyan   .vert-tabs__highlights li svg { color: var(--cyan); }
.vert--pink   .vert-tabs__highlights li svg { color: var(--pink); }
.vert--amber  .vert-tabs__highlights li svg { color: var(--amber); }

.vert-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  margin-top: var(--space-md);
  transition: gap var(--duration-fast);
}
.vert--purple .vert-tabs__link { color: var(--purple); }
.vert--cyan   .vert-tabs__link { color: var(--cyan); }
.vert--pink   .vert-tabs__link { color: var(--pink); }
.vert--amber  .vert-tabs__link { color: var(--amber); }
.vert-tabs__link:hover { gap: 10px; }

/* Media side */
.vert-tabs__media {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #08080b;
  transition: border-color var(--duration-fast);
}
.vert-tabs__media img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  display: block;
}
.vert-tabs__media-caption {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
/* Vert tabs media card: brighter border in dark mode */
[data-theme="dark"] .vert-tabs__media {
  border-color: rgba(255,255,255,0.14);
}
/* ============================================
   Deployment Strip — What's Included
   Accent-tinted pills
   ============================================ */
.vert-deploy {
  padding: var(--space-4xl) 0;
}
.vert-deploy__headline {
  text-align: center;
  margin-bottom: var(--space-md);
}
.vert-deploy__sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.vert-deploy__checklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
}
.vert-deploy__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 600;
}
.vert--purple .vert-deploy__check {
  background: var(--purple-dim);
  color: var(--purple);
  border: 1px solid var(--purple-glow);
}
.vert--cyan .vert-deploy__check {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,232,162,0.25);
}
.vert--pink .vert-deploy__check {
  background: var(--pink-dim);
  color: var(--pink);
  border: 1px solid rgba(245,62,159,0.25);
}
.vert--amber .vert-deploy__check {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(245,166,35,0.25);
}
.vert-deploy__check svg { flex-shrink: 0; }

/* Three deployment pillars */
.vert-deploy__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.vert-deploy__pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: border-color var(--duration-fast), background var(--duration-med);
}
.vert-deploy__pillar:hover { border-color: var(--border-accent); }
.vert-deploy__pillar-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.vert--purple .vert-deploy__pillar-num { color: var(--purple); }
.vert--cyan   .vert-deploy__pillar-num { color: var(--cyan); }
.vert--pink   .vert-deploy__pillar-num { color: var(--pink); }
.vert--amber  .vert-deploy__pillar-num { color: var(--amber); }

.vert-deploy__pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.vert-deploy__pillar-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .vert-hero__title { font-size: var(--text-4xl); }
  .vert-audience__grid { grid-template-columns: repeat(2, 1fr); }
  .vert-problem__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .vert-tabs__panel.is-active {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .vert-tabs__media { order: -1; }
}

@media (max-width: 768px) {
  .vert-hero { padding: calc(64px + var(--space-2xl)) 0 var(--space-2xl); }
  .vert-hero__title { font-size: var(--text-3xl); }
  .vert-audience__grid { grid-template-columns: 1fr; }
  .vert-problem__grid { grid-template-columns: 1fr; }
  .vert-usecases__grid { grid-template-columns: 1fr; }
  .vert-deploy__pillars { grid-template-columns: 1fr; }
  .vert-tabs__btn { min-width: 100px; flex: 0 0 auto; }
  .vert-tabs__title { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  .vert-hero__title { font-size: var(--text-2xl); }
  .vert-logos__strip { gap: var(--space-xl); }
  .vert-deploy__checklist { justify-content: flex-start; }
}