@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #4b26e7;
  --secondary-color: #10143a;
  --pale-lavender: #e9e5ff;
  --light-color: #f3f1ff;
  --white-color: #fefefe;
  --para-color: #323232;
  --muted-color: #6b6f85;
  --border-color: #ecebf5;
  --sora-font: "Sora", sans-serif;
  --inter-font: "Inter", sans-serif;
  --serif-font: "Instrument Serif", serif;
  --header-height: 76px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sora-font);
}

body {
  font-family: var(--inter-font);
}

/* Keep in-page anchor targets clear of the sticky header */
section[id] {
  scroll-margin-top: var(--header-height);
}

a {
  text-decoration: none;
}

p {
  margin-bottom: 30px;
  color: var(--secondary-color);
  /* color: var(--para-color); */
}

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white-color);
  transition: box-shadow 0.25s ease;
  border-bottom: 1px solid #eaeaea;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(16, 20, 58, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: 24px;
}

/* Logo */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* Nav */
.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

.menu {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.menu-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.menu-item.has-mega {
  position: static;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--inter-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-color);
  cursor: pointer;
  transition: color 0.2s ease;
}

.menu-link .bi {
  font-size: 9px;
  -webkit-text-stroke: 1px;
  transition: transform 0.25s ease;
  margin-top: 4px;
}

.menu-link-ai {
  gap: 7px;
}

.menu-ai-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.menu-link-ai:hover .menu-ai-icon {
  transform: rotate(20deg) scale(1.1);
}

@media (max-width: 991.98px) {
  .menu-link.menu-link-ai {
    justify-content: flex-start;
  }
}

.menu-link:hover,
.menu-item.is-open > .menu-link {
  color: var(--primary-color);
}

/* Dropdown panels (shared) */
.dropdown-panel {
  position: absolute;
  top: 100%;
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.mega-panel {
  left: 0;
  right: 0;
  border-top: 1px solid var(--border-color);
  box-shadow: 0 24px 40px rgba(16, 20, 58, 0.08);
  padding: 32px 0 36px;
}

.simple-panel {
  left: -20px;
  width: 300px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 24px 40px rgba(16, 20, 58, 0.1);
}

.simple-panel .mega-label {
  padding-left: 12px;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.8fr;
  gap: 24px;
}

.mega-grid.mega-grid-even {
  grid-template-columns: repeat(4, 1fr);
}

.mega-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  /* color: var(--muted-color); */
  color: var(--secondary-color);
  margin-bottom: 14px;
}

.mega-link {
  display: block;
  padding: 9px 12px;
  margin: 0 -12px 4px;
  border-radius: 10px;
  /* transition: background-color 0.2s ease; */
  transition: 0.2s ease-in-out;
  border: 1px solid var(--white-color);
}

.simple-panel .mega-link {
  margin: 0 0 2px;
}

.mega-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary-color);
  margin-bottom: 3px;
  transition: color 0.2s ease;
}

.mega-desc {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-color);
  max-width: 290px;
}

.mega-link:hover {
  background: var(--light-color);
  border: 1px solid #4d26e738;
  transition: 0.2s ease-in-out;
}

.mega-link:hover .mega-title {
  color: var(--primary-color);
}

/* Mega links with icon (Resources) */
.mega-grid.mega-grid-resources {
  grid-template-columns: repeat(3, 1fr) 1.25fr;
}

.mega-link.has-icon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mega-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--light-color);
  color: var(--primary-color);
  font-size: 19px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mega-link.has-icon:hover .mega-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

/* Free demo card */
.mega-demo {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 0;
  border-radius: 22px;
  background: var(--light-color);
  overflow: hidden;
}

.mega-demo-title {
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 6px;
}

.mega-demo-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-color);
  margin-bottom: 16px;
}

.mega-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 20px;
  transition: color 0.2s ease;
}

.mega-demo-link .bi {
  font-size: 13px;
  color: var(--primary-color);
  -webkit-text-stroke: 1px;
  transition: transform 0.25s ease;
}

.mega-demo-link:hover {
  color: var(--primary-color);
}

.mega-demo-link:hover .bi {
  transform: translateX(4px);
}

.mega-demo-media {
  display: block;
  margin-top: auto;
}

.mega-demo-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  transition: transform 0.3s ease;
}

.mega-demo:hover .mega-demo-media img {
  transform: translateY(-4px);
}

/* Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--primary-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-demo:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white-color);
  box-shadow: 0 8px 20px rgba(75, 38, 231, 0.25);
}

.login-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-color);
  transition: color 0.2s ease;
}

.login-link:hover {
  color: var(--primary-color);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--white-color);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--secondary-color);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop: open on hover, click or keyboard */
@media (min-width: 992px) {
  .menu-item.has-dropdown:hover > .dropdown-panel,
  .menu-item.is-open > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu-item.has-dropdown:hover > .menu-link .bi,
  .menu-item.is-open > .menu-link .bi {
    transform: rotate(180deg);
  }
}

/* Small desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .menu {
    gap: 16px;
  }

  .menu-link,
  .login-link {
    font-size: 15px;
  }

  .header-actions {
    gap: 16px;
  }

  .btn-demo {
    padding: 10px 18px;
  }

  .mega-grid,
  .mega-grid.mega-grid-even,
  .mega-grid.mega-grid-resources {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
  }
}

/* Tablet & mobile */
@media (max-width: 991.98px) {
  :root {
    --header-height: 68px;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--white-color);
    border-top: 1px solid var(--border-color);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    margin: 0;
    padding: 8px 20px;
  }

  .menu-item {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
  }

  .menu-link {
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    font-size: 17px;
  }

  .menu-item.is-open > .menu-link .bi {
    transform: rotate(180deg);
  }

  .dropdown-panel,
  .mega-panel,
  .simple-panel {
    position: static;
    display: none;
    width: auto;
    padding: 4px 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu-item.is-open > .dropdown-panel {
    display: block;
  }

  .mega-panel .container {
    padding: 0;
  }

  .mega-grid,
  .mega-grid.mega-grid-even,
  .mega-grid.mega-grid-resources {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
  }

  .simple-panel .mega-label {
    padding-left: 0;
  }

  .mega-link,
  .simple-panel .mega-link {
    margin: 0 -12px 2px;
  }

  .mega-desc {
    max-width: none;
  }

  .header-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    padding: 24px 20px 32px;
    margin-top: auto;
  }

  .btn-demo,
  .login-link {
    justify-content: center;
    padding: 13px 24px;
  }

  .login-link {
    border: 1px solid var(--border-color);
    border-radius: 50px;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 575.98px) {
  .mega-grid,
  .mega-grid.mega-grid-even,
  .mega-grid.mega-grid-resources {
    grid-template-columns: 1fr;
  }

  .brand-logo {
    height: 38px;
  }
}

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 60px;
  background: linear-gradient(180deg, #faf9ff 0%, var(--white-color) 100%);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero-blob-1 {
  width: 520px;
  height: 520px;
  top: -80px;
  left: -120px;
  background: rgba(75, 38, 231, 0.16);
}

.hero-blob-2 {
  width: 560px;
  height: 560px;
  top: 40px;
  right: -140px;
  background: rgba(122, 92, 255, 0.14);
}

.hero-blob-3 {
  width: 420px;
  height: 420px;
  bottom: -220px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(233, 229, 255, 0.9);
}

.hero-content {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-size: 66px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--secondary-color);
  margin-bottom: 28px;
  position: relative;
}

.hero-title-accent {
  display: block;
  font-family: var(--serif-font);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -1px;
  color: var(--primary-color);
}

.hero-star {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.12em;
  vertical-align: 0.05em;
  animation: star-spin-pop 3s ease-in-out infinite;
  position: absolute;
  bottom: 58px;
  left: 78px;
}

@keyframes star-spin-pop {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(0);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-star {
    animation: none;
  }
}

.hero-text {
  max-width: 870px;
  margin: 0 auto 40px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--secondary-color);
  /* color: var(--muted-color); */
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.hero-media {
  position: relative;
  max-width: 1200px;
  /* margin: 60px auto 0; */
  margin-top: 40px;
}

.hero-banner {
  display: block;
  /* width: 100%;
  height: auto; */
}

/* Grows to full size on the first scroll (classes set by JS) */
.hero-media.is-scroll-animated {
  margin-left: auto;
  margin-right: auto;
  transform: scale(0.8);
  transform-origin: center top;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-media.is-scroll-animated.is-expanded {
  transform: scale(1);
}

.btn-trial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 500;
  /* border: 1px solid rgba(254, 254, 254, 0.35); */
  /* box-shadow: 0 0 0 1px var(--pale-lavender), 0 14px 30px rgba(75, 38, 231, 0.22); */
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-trial:hover {
  background: var(--secondary-color);
  color: var(--white-color);
  transform: translateY(-2px);
  /* box-shadow: 0 0 0 1px var(--pale-lavender), 0 16px 32px rgba(16, 20, 58, 0.25); */
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: color 0.2s ease;
}

.link-arrow .bi {
  font-size: 18px;
  -webkit-text-stroke: 1px;
  transition: transform 0.25s ease;
}

.link-arrow:hover {
  color: var(--primary-color);
}

.link-arrow:hover .bi {
  transform: translateX(4px);
}

@media (max-width: 1199.98px) {
  .hero-title {
    font-size: 58px;
  }
}

@media (max-width: 991.98px) {
  .hero {
    padding: 80px 0 50px;
  }

  .hero-media {
    margin-top: 48px;
  }

  .hero-title {
    font-size: 46px;
    letter-spacing: -1.5px;
  }

  .hero-text {
    font-size: 16px;
  }

  .btn-trial,
  .link-arrow {
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .hero {
    padding: 60px 0 40px;
  }

  .hero-media {
    margin-top: 36px;
  }

  .hero-title {
    font-size: 34px;
    letter-spacing: -1px;
    margin-bottom: 20px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-trial {
    width: 100%;
    padding: 14px 24px;
  }

  .link-arrow {
    font-size: 16px;
  }

  .hero-text {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .hero-blob-1,
  .hero-blob-2 {
    width: 320px;
    height: 320px;
  }
}

/* ==========================================================
   Shared section styles
   ========================================================== */
.section-padding {
  padding: 110px 0;
}

.section-head {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 18px;
  border-radius: 50px;
  background: var(--light-color);
  border: 1px solid var(--pale-lavender);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.section-text {
  max-width: 750px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted-color);
}

/* Arrow icon inside pill buttons */
.btn-trial .bi {
  margin-left: 10px;
  font-size: 17px;
  transition: transform 0.25s ease;
}

.btn-trial:hover .bi {
  transform: translateX(4px);
}

/* ==========================================================
   Modules (tabs)
   ========================================================== */
.module-tabs {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.module-tabs::-webkit-scrollbar {
  display: none;
}

.module-tab {
  position: relative;
  padding: 0 4px 20px;
  border: 0;
  background: none;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.module-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.module-tab:hover,
.module-tab.active {
  color: var(--primary-color);
}

.module-tab.active::after {
  transform: scaleX(1);
}

.module-content {
  padding-top: 50px;
}

.module-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--secondary-color);
  margin-bottom: 18px;
}

.module-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--para-color);
  margin-bottom: 28px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--para-color);
}

.check-list li:last-child {
  margin-bottom: 0;
}

.check-list .bi {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  color: var(--primary-color);
}

.module-media img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-left: auto;
}

@media (max-width: 1199.98px) {
  .module-tab {
    font-size: 16px;
  }

  .section-title {
    font-size: 38px;
  }
}

@media (max-width: 991.98px) {
  .section-padding {
    padding: 80px 0;
  }

  .section-head {
    margin-bottom: 44px;
  }

  .section-title {
    font-size: 32px;
  }

  .section-text {
    font-size: 16px;
  }

  .module-tabs {
    justify-content: flex-start;
    gap: 28px;
  }

  .module-content {
    padding-top: 44px;
  }

  .module-title {
    font-size: 28px;
  }

  .module-media img {
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .section-padding {
    padding: 60px 0;
  }

  .section-title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .module-tab {
    font-size: 15px;
    padding-bottom: 16px;
  }

  .module-title {
    font-size: 24px;
  }

  .module-text,
  .check-list li {
    font-size: 15px;
  }

  .check-list li {
    padding-left: 34px;
  }

  .check-list .bi {
    font-size: 20px;
  }
}

/* ==========================================================
   AI Tools
   ========================================================== */
.ai-tools {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse 75% 45% at 50% 0%, #4a24c9 0%, #2f1a86 35%, #1c1250 65%, transparent 100%),
    linear-gradient(180deg, #1c1250 0%, #150f36 45%, #110c28 75%, #0e0a20 100%);
}

/* Dark vignette on the side edges */
.ai-tools::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #0b081a99 0%, transparent 25%, transparent 75%, #0b081a99 100%);
}

.ai-tools .section-eyebrow {
  background: #ffffff14;
  border-color: #ffffff2e;
  color: #c9bbff;
}

.ai-tools .section-title {
  color: #fefefe;
}

.ai-tools .section-text {
  color: #b9bbd6;
}

/* ---------- Stacked AI cards ---------- */
.ai-stack-item {
  position: sticky;
  top: calc(var(--header-height) + 30px + var(--i, 0) * 18px);
  padding-bottom: 40px;
}

.ai-stack-item:last-child {
  padding-bottom: 0;
}

.ai-stack-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 60px;
  border-radius: 28px;
  border: 1px solid #ffffff47;
  /* background: linear-gradient(135deg, #f7f5ff 0%, #ece8ff 55%, #e0d8ff 100%); */
  /* box-shadow: 0 -10px 40px #05071c59, 0 30px 60px #05071c66; */
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

  background: rgba(19, 13, 49, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Pop-in on scroll (state set by JS) */
.ai-stack.is-animated .ai-stack-card {
  opacity: 0;
  transform: translateY(80px) scale(0.94);
}

.ai-stack.is-animated .ai-stack-card.is-visible {
  opacity: 1;
  transform: none;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin-bottom: 25px;
  border-radius: 50px;
  background: #4b26e7;
  color: #fefefe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px #4b26e74d;
}

.ai-stack-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 18px;
}

.ai-stack-text {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--white-color);
  margin-bottom: 22px;
}

.ai-stack-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.ai-stack-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--white-color);
}

.ai-stack-list li + li {
  margin-top: 12px;
}

.ai-stack-list .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4ddff;
  color: #4b26e7;
  font-size: 16px;
}

.ai-stack-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  transition: color 0.2s ease;
}

.ai-stack-link .bi {
  transition: transform 0.25s ease;
}

.ai-stack-link:hover {
  color: #4b26e7;
}

.ai-stack-link:hover .bi {
  transform: translateX(4px);
}

.ai-stack-media img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-left: auto;
}

@media (max-width: 1199.98px) {
  .ai-stack-card {
    padding: 48px;
  }

  .ai-stack-title {
    font-size: 34px;
  }
}

/* Tablet & mobile: cards are too tall to stack, so show them in a list */
@media (max-width: 991.98px) {
  .ai-stack-item {
    position: static;
    padding-bottom: 24px;
  }

  .ai-stack-card {
    padding: 40px 32px;
  }

  .ai-stack-media img {
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .ai-stack-card {
    padding: 32px 22px;
    border-radius: 20px;
  }

  .ai-stack-title {
    font-size: 28px;
  }

  .ai-stack-text {
    font-size: 15px;
  }

  .ai-stack-list li {
    font-size: 15px;
  }
}

/* ==========================================================
   Roles
   ========================================================== */
.roles {
  background: var(--white-color);
}

.text-accent {
  color: var(--primary-color);
}

/* Role tabs */
.role-tabs {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.role-tabs::-webkit-scrollbar {
  display: none;
}

.role-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 150px;
  height: 140px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Auto-play progress (driven by JS): the active tab's background fills with lavender
   and a thin purple bar runs along the bottom */
.role-tab::before,
.role-tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.role-tab::before {
  top: 0;
  bottom: 0;
  background: var(--pale-lavender);
}

.role-tab::after {
  bottom: 0;
  height: 3px;
  background: var(--primary-color);
}

.role-tab.is-progress::before {
  animation: role-progress var(--role-duration, 6s) linear forwards;
}

.role-tab.is-progress::after {
  animation: role-progress-bar var(--role-duration, 6s) linear forwards;
}

.role-tabs.is-paused .role-tab.is-progress::before,
.role-tabs.is-paused .role-tab.is-progress::after {
  animation-play-state: paused;
}

@keyframes role-progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes role-progress-bar {
  to {
    transform: scaleX(1);
  }
}

.role-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--light-color);
  color: var(--primary-color);
  font-size: 26px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.role-tab:hover {
  border-color: #c9bbff;
  transform: translateY(-3px);
}

.role-tab.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color), 0 14px 30px #4b26e71f;
  color: var(--primary-color);
}

.role-tab.active .role-tab-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

/* Role panels */
.role-card {
  flex: 1;
  padding: 34px 32px;
  border-radius: 18px;
}

.role-card-without {
  background: var(--white-color);
  border: 1px solid var(--border-color);
}

.role-card-with {
  background: var(--light-color);
  border: 1px solid var(--pale-lavender);
}

.role-card-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 18px;
}

.role-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.role-points li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  color: var(--muted-color);
}

.role-points li + li {
  margin-top: 14px;
}

.role-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9bbff;
}

/* "With BuzyTeam" list: darker text and brand-purple bullets */
.role-points-with li {
  color: var(--secondary-color);
}

.role-points-with li::before {
  background: var(--primary-color);
}

.role-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-height: 420px;
  padding: 32px 32px 0;
  border-radius: 18px;
  background: var(--light-color);
  border: 1px solid var(--pale-lavender);
  overflow: hidden;
}

.role-media img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

@media (max-width: 991.98px) {
  .role-tabs {
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }

  .role-tab {
    flex-shrink: 0;
    width: 132px;
    height: 124px;
    font-size: 14px;
  }

  .role-media {
    min-height: 0;
  }
}

@media (max-width: 575.98px) {
  .role-tab {
    width: 116px;
    height: 112px;
    gap: 10px;
  }

  .role-tab-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .role-card {
    padding: 26px 22px;
  }

  .role-card-title {
    font-size: 19px;
  }

  .role-points li {
    font-size: 15px;
  }

  .role-media {
    padding: 22px 22px 0;
  }
}

/* ==========================================================
   Calculator
   ========================================================== */
.calculator {
  background: #f7f5ff;
  border-top: 1px solid #ecebf5;
  border-bottom: 1px solid #ecebf5;
}

.calc-intro {
  margin-bottom: 40px;
}

.calc-intro .section-text {
  margin: 0;
}

/* Sliders */
.calc-field {
  margin-bottom: 30px;
}

.calc-field:last-child {
  margin-bottom: 0;
}

.calc-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.calc-field-head label {
  font-size: 16px;
  font-weight: 600;
  color: #10143a;
}

.calc-value {
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: #4b26e7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-hint {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #6b6f85;
}

.calc-range {
  --fill: 0%;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.calc-range:focus {
  outline: none;
}

.calc-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #4b26e7 var(--fill), #e4ddff var(--fill));
}

.calc-range::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: #e4ddff;
}

.calc-range::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: #4b26e7;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #4b26e7;
  border: 4px solid #fefefe;
  box-shadow: 0 0 0 1px #c9bbff, 0 4px 10px #4b26e759;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4b26e7;
  border: 4px solid #fefefe;
  box-shadow: 0 0 0 1px #c9bbff, 0 4px 10px #4b26e759;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-range:hover::-webkit-slider-thumb,
.calc-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.calc-range:hover::-moz-range-thumb,
.calc-range:active::-moz-range-thumb {
  transform: scale(1.12);
}

.calc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #c9bbff, 0 0 0 6px #4b26e740;
}

.calc-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px #c9bbff, 0 0 0 6px #4b26e740;
}

/* Result card */
.calc-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 48px 40px 40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 55% at 20% 0%, #2f1a86 0%, transparent 70%),
    linear-gradient(180deg, #1c1250 0%, #150f36 55%, #110c28 100%);
  box-shadow: 0 30px 60px #10143a40;
}

.calc-card-label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.calc-total {
  font-family: var(--sora-font);
  font-size: 76px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #b7a6ff 0%, #e4ddff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calc-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #b9bbd6;
  margin-bottom: 30px;
}

.calc-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  border-radius: 14px;
  border: 1px solid #ffffff1f;
  background: #ffffff0a;
}

.calc-breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 15px;
  color: #b9bbd6;
}

.calc-breakdown li + li {
  border-top: 1px solid #ffffff1a;
}

.calc-breakdown strong {
  font-family: var(--sora-font);
  font-weight: 600;
  color: #fefefe;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: #fefefe;
  color: #10143a;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.calc-btn:hover {
  background: #4b26e7;
  color: #fefefe;
}

.calc-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a8cab;
}

@media (max-width: 1199.98px) {
  .calc-total {
    font-size: 64px;
  }
}

@media (max-width: 991.98px) {
  .calc-intro {
    margin-bottom: 32px;
  }
}

@media (max-width: 575.98px) {
  .calc-card {
    padding: 36px 22px 28px;
    border-radius: 20px;
  }

  .calc-total {
    font-size: 48px;
    letter-spacing: -1px;
  }

  .calc-summary {
    font-size: 15px;
  }

  .calc-breakdown li {
    padding: 14px 16px;
    font-size: 14px;
  }
}

/* ==========================================================
   Outcomes (stats)
   ========================================================== */
.outcomes {
  background: var(--white-color);
}

.stat-card {
  height: 100%;
  padding: 28px 28px 30px;
  border-radius: 20px;
  background: var(--light-color);
  border: 1px solid var(--pale-lavender);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px #4b26e71a;
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 30px;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 19px;
}

.stat-tag {
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.stat-number {
  font-family: var(--sora-font);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

.stat-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 22px;
}

.stat-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--pale-lavender);
  overflow: hidden;
}

.stat-bar span {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: 6px;
  background: var(--primary-color);
  transition: width 1.2s ease;
}

/* Before the section scrolls into view (set by JS) */
.outcomes.is-waiting .stat-bar span {
  width: 0;
}

@media (max-width: 1199.98px) {
  .stat-card {
    padding: 24px 22px 26px;
  }

  .stat-number {
    font-size: 50px;
  }

  .stat-label {
    font-size: 16px;
  }
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq {
  background: #f7f5ff;
}

/* White version, used when the section above is already lavender */
.faq.faq-white {
  background: var(--white-color);
}

.faq .section-eyebrow .bi {
  margin-right: 4px;
}

.faq-list {
  max-width: 960px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--white-color);
  border: 1px solid var(--pale-lavender);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item:hover {
  border-color: #c9bbff;
}

/* Open item */
.faq-item:has(.collapse.show),
.faq-item:has(.collapsing) {
  border-color: #c9bbff;
  box-shadow: 0 16px 36px #4b26e714;
}

.faq-question {
  margin: 0;
}

.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-toggle:hover,
.faq-toggle:not(.collapsed) {
  color: var(--primary-color);
}

.faq-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  border-radius: 16px;
}

/* Plus / minus icon */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--light-color);
  transition: background-color 0.25s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-color);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, background-color 0.25s ease;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-toggle:not(.collapsed) .faq-icon {
  background: var(--primary-color);
}

.faq-toggle:not(.collapsed) .faq-icon::before,
.faq-toggle:not(.collapsed) .faq-icon::after {
  background: var(--white-color);
}

.faq-toggle:not(.collapsed) .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 26px 24px;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-color);
}

.faq-answer p {
  margin: 0 0 14px;
  color: inherit;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--secondary-color);
}

.faq-points .bi {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--primary-color);
}

@media (max-width: 575.98px) {
  .faq-points {
    grid-template-columns: 1fr;
  }

  .faq-toggle {
    padding: 18px 18px;
    font-size: 16px;
  }

  .faq-icon {
    width: 32px;
    height: 32px;
  }

  .faq-answer {
    padding: 0 18px 20px;
    font-size: 15px;
  }
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 0 0;
  background:
    radial-gradient(ellipse 55% 50% at 10% 70%, #2a176f 0%, transparent 70%),
    linear-gradient(180deg, #110c28 0%, #0e0a20 100%);
  color: #b9bbd6;
}

/* CTA card */
.footer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 64px;
  border-radius: 28px;
  background: linear-gradient(135deg, #4b26e7 0%, #3a1fb8 45%, #2f1a86 100%);
  box-shadow: 0 30px 70px #4b26e740;
}

/* Light spot top right */
.footer-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: 18%;
  width: 380px;
  height: 320px;
  border-radius: 50%;
  background: #9d88ff;
  opacity: 0.35;
  filter: blur(80px);
}

/* .footer-cta-content {
  max-width: 660px;
} */

.footer-cta-eyebrow {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 18px;
  border-radius: 50px;
  background: #ffffff1f;
  border: 1px solid #ffffff38;
  color: #e4ddff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-cta-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fefefe;
  margin-bottom: 10px;
}

.footer-cta-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #d9d0ff;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 16px 30px;
  border-radius: 50px;
  background: #fefefe;
  color: #2f1a86;
  font-size: 17px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-cta-btn .bi {
  -webkit-text-stroke: 0.5px;
  transition: transform 0.25s ease;
}

.footer-cta-btn:hover {
  background: #10143a;
  color: #fefefe;
  transform: translateY(-2px);
}

.footer-cta-btn:hover .bi {
  transform: translateX(4px);
}

/* Main footer */
.footer-main {
  padding: 80px 0 60px;
}

.footer-brand {
  display: inline-block;
  margin-bottom: 22px;
}

/* White version of the logo */
.footer-logo {
  display: block;
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: 20px;
  font-weight: 600;
  color: #fefefe;
  margin-bottom: 14px;
}

.footer-about {
  max-width: 400px;
  font-size: 16px;
  line-height: 1.7;
  color: #a3a5c4;
  margin-bottom: 28px;
}

.footer-social {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #ffffff26;
  background: #ffffff08;
  color: #fefefe;
  font-size: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
  background: #4b26e7;
  border-color: #4b26e7;
  transform: translateY(-3px);
}

.footer-heading {
  font-family: var(--inter-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8cab;
  margin-bottom: 26px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li {
  margin-top: 14px;
}

.footer-links a,
.footer-legal a {
  font-size: 16px;
  color: #d4d5e8;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-legal a:hover {
  color: #b7a6ff;
}

/* Contact, social & platforms */
.footer-block + .footer-block {
  margin-top: 30px;
}

.footer-block .footer-heading {
  margin-bottom: 18px;
}

.footer-block .footer-social {
  flex-wrap: wrap;
  gap: 10px;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #d4d5e8;
  transition: color 0.2s ease;
}

.footer-contact .bi {
  font-size: 17px;
  color: #b7a6ff;
}

.footer-contact:hover {
  color: #b7a6ff;
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 26px 0 30px;
  border-top: 1px solid #ffffff1a;
}

.footer-copy {
  margin: 0;
  font-size: 15px;
  color: #a3a5c4;
}

.footer-legal {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal a {
  font-size: 15px;
}

@media (max-width: 1199.98px) {
  .footer-cta {
    padding: 52px 48px;
  }

  .footer-cta-title {
    font-size: 38px;
  }
}

@media (max-width: 991.98px) {
  .site-footer {
    padding-top: 70px;
  }

  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 36px;
  }

  .footer-cta-title {
    font-size: 32px;
  }

  .footer-main {
    padding: 64px 0 48px;
  }

  .footer-main .row {
    row-gap: 40px;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding-top: 56px;
  }

  .footer-cta {
    padding: 36px 24px;
    border-radius: 20px;
  }

  .footer-cta-title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .footer-cta-text {
    font-size: 16px;
  }

  .footer-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    gap: 24px;
  }
}


/* ==========================================================
   Back to top
   ========================================================== */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ffffff26;
  /* background: var(--secondary-color); */
  background-color: var(--primary-color);
  color: var(--white-color);
  font-family: var(--sora-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 28px #10143a4d;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--secondary-color);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .back-to-top {
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    font-size: 13px;
  }
}

/* ==========================================================
   Feature pages - hero
   ========================================================== */
.feature-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 0 100px;
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, #6a45f5 0%, #4a24c9 30%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 60%, #2f1a86 0%, transparent 70%),
    linear-gradient(135deg, #3a1fb8 0%, #1c1250 45%, #110c28 100%);
}

.feature-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 15px;
  color: #b9bbd6;
}

.feature-breadcrumb a {
  color: #b9bbd6;
  transition: color 0.2s ease;
}

.feature-breadcrumb a:hover {
  color: var(--white-color);
}

.feature-breadcrumb [aria-current="page"] {
  font-weight: 600;
  color: var(--white-color);
}

/* Plain label: no border or background */
.feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.feature-eyebrow .bi {
  font-size: 18px;
}

.feature-hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--white-color);
  margin-bottom: 24px;
}

.feature-hero-text {
  /* max-width: 560px; */
  font-size: 18px;
  line-height: 1.7;
  color: #d4d5e8;
  margin-bottom: 36px;
}

/* Optional bold line under the paragraph */
.feature-hero-tagline {
  margin: -16px 0 32px;
  font-size: 18px;
  font-weight: 600;
  color: var(--white-color);
}

.feature-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* White pill button with dark text */
.btn-light-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  border: 1px solid var(--white-color);
  background: var(--white-color);
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.btn-light-pill:hover {
  background: var(--pale-lavender);
  border-color: var(--pale-lavender);
  color: #000000;
  transform: translateY(-2px);
}

.feature-hero-media {
  text-align: center;
}

.feature-hero-img {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  height: auto;
}

@media (max-width: 1199.98px) {
  .feature-hero-title {
    font-size: 44px;
  }
}

@media (max-width: 991.98px) {
  .feature-hero {
    padding: 70px 0 80px;
  }

  .feature-hero-title {
    font-size: 38px;
  }

  .feature-hero-text {
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .feature-hero {
    padding: 50px 0 60px;
  }

  .feature-hero-title {
    font-size: 30px;
    letter-spacing: -0.5px;
  }

  .feature-hero-text {
    font-size: 16px;
  }

  .feature-hero-actions {
    flex-direction: column;
  }

  .feature-hero-actions .btn-trial,
  .btn-light-pill {
    width: 100%;
  }
}

/* ==========================================================
   Feature pages - split section (items + image)
   ========================================================== */
.feature-split {
  background: var(--white-color);
}

/* Alternate (mirrored) version: pale lavender background */
.feature-split-alt {
  background: #f7f5ff;
}

.feature-split-alt .feature-item.active {
  background: var(--white-color);
}

.feature-split-head {
  margin-bottom: 48px;
}

.feature-split-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.feature-split-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--secondary-color);
  margin: 0;
}

.feature-split-text {
  font-size: 17px;
  line-height: 1.7;
  /* color: var(--muted-color); */
  margin-bottom: 18px;
}

/* Optional short line above the paragraph */
.feature-split-subtitle {
  margin-bottom: 8px;
  font-family: var(--sora-font);
  font-size: 19px;
  font-weight: 600;
  color: var(--secondary-color);
}

.feature-split-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.feature-split-link .bi {
  transition: transform 0.25s ease;
}

.feature-split-link:hover {
  color: var(--secondary-color);
}

.feature-split-link:hover .bi {
  transform: translateX(4px);
}

/* Items (tabs) */
.feature-items {
  flex-direction: column;
  gap: 14px;
}

.feature-item {
  display: flex;
  /* align-items: center; */
  gap: 20px;
  width: 100%;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-item:hover {
  border-color: #c9bbff;
}

.feature-item.active {
  border-color: var(--primary-color);
  background: var(--light-color);
  box-shadow: 0 14px 30px #4b26e714;
}

.feature-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--light-color);
  color: var(--primary-color);
  font-size: 17px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.feature-item.active .feature-item-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.feature-item-title {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: color 0.25s ease;
}

.feature-item.active .feature-item-title {
  color: var(--primary-color);
}

.feature-item-text {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

.feature-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Image frame */
.feature-split-media {
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  box-shadow: 0 24px 50px #10143a0f;
}

.feature-split-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 1199.98px) {
  .feature-split-title {
    font-size: 38px;
  }
}

@media (max-width: 991.98px) {
  .feature-split-head {
    margin-bottom: 36px;
  }

  .feature-split-title {
    font-size: 32px;
  }
}

@media (max-width: 575.98px) {
  .feature-split-title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .feature-item {
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
  }

  .feature-item-title {
    font-size: 16px;
  }

  .feature-item-text {
    font-size: 14px;
  }

  .feature-split-media {
    padding: 8px;
    border-radius: 18px;
  }
}

/* ==========================================================
   Feature pages - comparison (without / with BuzyTeam)
   ========================================================== */
.compare {
  background: var(--white-color);
}

.compare .section-head {
  max-width: 830px;
}

.compare-card {
  height: 100%;
  padding: 36px 32px 20px;
  border-radius: 20px;
}

.compare-card-without {
  /* background: var(--white-color); */
  background-color: var(--light-color);
  border: 1px solid var(--pale-lavender);
}

.compare-card-with {
  background: linear-gradient(135deg, #2f1a86 0%, #1c1250 55%, #110c28 100%);
  border: 1px solid #2f1a86;
  box-shadow: 0 30px 60px #4b26e733;
}

.compare-title {
  padding-bottom: 20px;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--secondary-color);
  border-bottom: 1px solid var(--border-color);
}

.compare-card-with .compare-title {
  color: var(--white-color);
  border-bottom-color: #ffffff1f;
}

.compare-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.compare-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--pale-lavender);
  color: var(--secondary-color);
  font-size: 16px;
}

.compare-card-with .compare-title-icon {
  background: var(--primary-color);
  color: var(--white-color);
  box-shadow: 0 8px 20px #4b26e766;
}

@media (max-width: 575.98px) {
  .compare-title-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compare-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--para-color);
}

.compare-list li + li {
  border-top: 1px solid var(--border-color);
}

.compare-card-with .compare-list li {
  color: #e4ddff;
}

.compare-card-with .compare-list li + li {
  border-top-color: #ffffff1a;
}

.compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  -webkit-text-stroke: 0.5px;
}

/* Cross: red on a soft background */
.compare-icon.is-cross {
  background: #e5484d;
  color: var(--light-color);
}

/* Check: white circle with a green tick */
.compare-icon.is-check {
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 16px;
}

.compare-note {
  margin: 44px auto 0;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  /* color: var(--secondary-color); */
  color: var(--white-color);
  clip-path: polygon(100% 0%, 97% 49%, 100% 100%, 0 100%, 4% 50%, 0 0);
  background: #4b26e7;
  padding: 9px 50px;
  width: fit-content;
}

@media (max-width: 575.98px) {
  .compare-card {
    padding: 28px 22px 12px;
  }

  .compare-title {
    font-size: 22px;
  }

  .compare-list li {
    padding: 15px 0;
    font-size: 15px;
  }

  .compare-note {
    margin-top: 32px;
    font-size: 16px;
  }
}

/* ==========================================================
   Feature pages - payroll (image + check list)
   ========================================================== */
.payroll {
  background: var(--white-color);
}

.payroll .section-head {
  margin: 0 250px 56px 0;
  max-width: none;
  text-align: left;
  /* max-width: 900px; */
}


.payroll .section-text {
  max-width: none;
}

.payroll-list {
  margin: 0;
}

.payroll-list li {
  padding: 0 0 18px 34px;
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--secondary-color);
  border-bottom: 1px solid var(--border-color);
}

.payroll-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.payroll-list .bi {
  top: 0;
  font-size: 20px;
}

@media (max-width: 575.98px) {
  .payroll-list li {
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-size: 15px;
  }
}

/* ==========================================================
   Feature pages - journey (dark band with overlapping cards)
   ========================================================== */
.journey {
  position: relative;
  isolation: isolate;
  padding: 100px 0 40px;
  background: var(--white-color);
}

/* Dark band behind the heading and the top of the cards */
.journey::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 140px;
  background:
    linear-gradient(135deg, transparent 0 55%, #ffffff08 55% 70%, transparent 70%),
    linear-gradient(225deg, transparent 0 60%, #ffffff06 60% 78%, transparent 78%),
    radial-gradient(ellipse 60% 70% at 50% 0%, #4a24c9 0%, #2f1a86 40%, transparent 80%),
    linear-gradient(180deg, #1c1250 0%, #150f36 60%, #110c28 100%);
}

.journey-head {
  margin-bottom: 48px;
}

.journey-head .section-title {
  color: var(--white-color);
}

.journey-head .section-text {
  color: #d4d5e8;
}

/* Optional small label on the dark band */
.journey-head .feature-split-eyebrow {
  color: #c9bbff;
}

.journey-card {
  height: 100%;
  padding: 36px 26px 34px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  text-align: center;
  box-shadow: 0 24px 50px #10143a1f;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.journey-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px #4b26e729;
}

/* Diamond icon with a soft second layer behind it */
.journey-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  color: var(--white-color);
  font-size: 30px;
  isolation: isolate;
}

.journey-icon::before,
.journey-icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px;
  border-radius: 16px;
  transform: rotate(45deg);
  transition: transform 0.4s ease;
}

.journey-icon::before {
  background: #c9bbff;
  transform: rotate(45deg) translate(6px, -6px);
}

.journey-icon::after {
  background: linear-gradient(135deg, #7a5cff 0%, #4b26e7 100%);
  box-shadow: 0 10px 20px #4b26e74d;
}

.journey-card:hover .journey-icon::after {
  transform: rotate(135deg);
}

.journey-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 14px;
}

.journey-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

@media (max-width: 991.98px) {
  .journey {
    padding-top: 80px;
  }

  .journey::before {
    bottom: 50%;
  }
}

@media (max-width: 575.98px) {
  .journey {
    padding: 60px 0 30px;
  }

  .journey::before {
    bottom: 70%;
  }

  .journey-head {
    margin-bottom: 36px;
  }
}

/* ==========================================================
   Feature pages - info boxes (2 per row, no image)
   ========================================================== */
.rmt-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 30px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.rmt-box:hover {
  border-color: var(--primary-color);
  background: var(--light-color);
  /* box-shadow: 0 18px 36px #4b26e714; */
  transform: translateY(-4px);
}

.rmt-box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--light-color);
  color: var(--primary-color);
  font-size: 21px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.rmt-box:hover .rmt-box-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.rmt-box-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.rmt-box-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  /* color: var(--muted-color); */
}

@media (max-width: 575.98px) {
  .rmt-box {
    padding: 26px 22px;
  }

  .rmt-box-title {
    font-size: 18px;
  }
}

/* ==========================================================
   Feature pages - team type cards (image + text)
   ========================================================== */
.team-types {
  background: var(--white-color);
}

.team-card {
  height: 100%;
  padding: 18px 18px 26px;
  border-radius: 18px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 18px 40px #4b26e70f;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  border-color: #c9bbff;
  box-shadow: 0 26px 50px #4b26e721;
}

.team-card-media {
  overflow: hidden;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--light-color);
  aspect-ratio: 16 / 9;
}

.team-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-card-media img {
  transform: scale(1.05);
}

.team-card-title {
  padding: 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.team-card-text {
  margin: 0;
  padding: 0 6px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

@media (max-width: 575.98px) {
  .team-card-title {
    font-size: 20px;
  }
}

/* ==========================================================
   Feature pages - purple call-to-action band
   ========================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 45% 80% at 50% 50%, #9d88ff 0%, transparent 70%),
    linear-gradient(120deg, #4b26e7 0%, #6a45f5 50%, #4b26e7 100%);
}

/* Faint dot grid */
.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(#ffffff40 1px, transparent 1.4px);
  background-size: 70px 70px;
  pointer-events: none;
}

.cta-band .container {
  max-width: 900px;
}

.cta-band-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #e4ddff;
}

.cta-band-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 18px;
}

.cta-band-text {
  max-width: 720px;
  margin: 0 auto 22px;
  font-size: 17px;
  line-height: 1.7;
  color: #e9e5ff;
}

.cta-band-flow-title {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--white-color);
}

.cta-band-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.cta-band-flow li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--white-color);
}

.cta-band-flow .bi {
  font-size: 15px;
  /* -webkit-text-stroke: 0.5px; */
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.cta-band .btn-trial {
  background: var(--secondary-color);
  border-color: #ffffff38;
}

.cta-band .btn-trial:hover {
  background: #0e0a20;
}

@media (max-width: 991.98px) {
  .cta-band {
    padding: 70px 0;
  }

  .cta-band-title {
    font-size: 36px;
  }
}

@media (max-width: 575.98px) {
  .cta-band {
    padding: 56px 0;
  }

  .cta-band-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .cta-band-text {
    font-size: 15px;
  }

  .cta-band-actions {
    flex-direction: column;
  }

  .cta-band-actions .btn-trial,
  .cta-band-actions .btn-light-pill {
    width: 100%;
  }
}

/* Dark version of the CTA band, same background as the journey section */
.cta-band.cta-band-dark {
  background:
    linear-gradient(135deg, transparent 0 55%, #ffffff08 55% 70%, transparent 70%),
    linear-gradient(225deg, transparent 0 60%, #ffffff06 60% 78%, transparent 78%),
    radial-gradient(ellipse 60% 70% at 50% 0%, #4a24c9 0%, #2f1a86 40%, transparent 80%),
    linear-gradient(180deg, #1c1250 0%, #150f36 60%, #110c28 100%);
}

/* No dot grid on the dark version */
.cta-band.cta-band-dark::before {
  display: none;
}

.cta-band-dark .cta-band-eyebrow {
  color: #c9bbff;
}

.cta-band-dark .cta-band-text {
  color: #d4d5e8;
}

/* Back to the standard purple trial button on the dark background */
.cta-band-dark .btn-trial {
  background: var(--primary-color);
  border-color: rgba(254, 254, 254, 0.35);
}

.cta-band-dark .btn-trial:hover {
  background: var(--secondary-color);
}

/* ==========================================================
   Feature pages - controlled access (intro panel + settings rows)
   ========================================================== */
.access {
  background: #f7f5ff;
}

/* Dark intro panel */
.access-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 44px 40px 40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, #4a24c9 0%, transparent 70%),
    linear-gradient(160deg, #2f1a86 0%, #1c1250 55%, #110c28 100%);
  box-shadow: 0 30px 60px #4b26e72e;
}

/* Large faint shield watermark */
.access-watermark {
  position: absolute;
  z-index: -1;
  right: -40px;
  bottom: 60px;
  font-size: 260px;
  line-height: 1;
  color: #ffffff08;
  pointer-events: none;
}

.access-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 7px 14px;
  border-radius: 50px;
  background: #ffffff14;
  border: 1px solid #ffffff26;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c9bbff;
}

.access-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--white-color);
  margin-bottom: 14px;
}

.access-subtitle {
  margin-bottom: 14px;
  font-family: var(--sora-font);
  font-size: 17px;
  font-weight: 600;
  color: #e4ddff;
}

.access-text {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.75;
  color: #b9bbd6;
}

.access-text strong {
  font-weight: 600;
  color: var(--white-color);
}

/* Compliance notice pinned to the bottom of the panel */
.access-note {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-left: 3px solid #9d88ff;
}

.access-note-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.3;
  color: #c9bbff;
}

.access-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-style: italic;
  color: #d4d5e8;
}

.access-note strong {
  font-weight: 600;
  color: var(--white-color);
}

/* Settings-style rows */
.access-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.access-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 30px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 16px 36px #4b26e70f;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.access-item:hover {
  transform: translateX(6px);
  border-color: #c9bbff;
  box-shadow: 0 22px 44px #4b26e71f;
}

.access-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7a5cff 0%, #4b26e7 100%);
  color: var(--white-color);
  font-size: 26px;
  box-shadow: 0 10px 22px #4b26e74d;
}

.access-item-body {
  flex: 1;
}

.access-item-title {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sora-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary-color);
}

.access-item-text {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

/* Decorative "on" switch */
.access-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 50px;
  background: var(--primary-color);
  box-shadow: inset 0 0 0 1px #3a1fb8;
}

.access-switch span {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 2px 6px #10143a40;
}

@media (max-width: 1199.98px) {
  .access-title {
    font-size: 32px;
  }
}

@media (max-width: 991.98px) {
  .access-intro {
    padding: 36px 30px 32px;
  }

  .access-note {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  .access-intro {
    padding: 30px 22px 26px;
    border-radius: 20px;
  }

  .access-title {
    font-size: 26px;
  }

  .access-item {
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 20px;
  }

  .access-item-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .access-item-body {
    flex-basis: calc(100% - 66px);
  }

  .access-switch {
    display: none;
  }
}

/* ==========================================================
   Feature pages - process rail (numbered steps on a line)
   ========================================================== */
.process {
  background: var(--white-color);
}

.process-steps {
  --node: 56px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Track line and its gradient fill, running through the node centres */
.process-steps::before,
.process-steps::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 2px);
  left: 10%;
  right: 10%;
  height: 4px;
  border-radius: 4px;
}

.process-steps::before {
  background: var(--pale-lavender);
}

.process-steps::after {
  background: linear-gradient(90deg, #7a5cff 0%, #4b26e7 100%);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Before the rail scrolls into view (set by JS); hides instantly, fills with the transition */
.process-steps.is-waiting::after {
  transform: scaleX(0);
  transition: none;
}

.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--node);
  height: var(--node);
  margin-bottom: 26px;
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-color);
  box-shadow: 0 0 0 6px var(--white-color), 0 10px 22px #4b26e733;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.process-card {
  flex: 1;
  width: 100%;
  padding: 28px 22px 26px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: linear-gradient(180deg, #d2cbff 0%, var(--white-color) 60%);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 24px;
  box-shadow: 0 8px 18px #4b26e71f;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.process-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.process-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

.process-step:hover .process-node {
  background: var(--primary-color);
  color: var(--white-color);
  transform: scale(1.08);
}

.process-step:hover .process-card {
  transform: translateY(-6px);
  border-color: #c9bbff;
  box-shadow: 0 22px 44px #4b26e71f;
}

.process-step:hover .process-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

/* Tablet & mobile: vertical timeline */
@media (max-width: 991.98px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 560px;
    margin: 0 auto;
  }

  .process-steps::before,
  .process-steps::after {
    top: 10px;
    bottom: 10px;
    left: calc(var(--node) / 2 - 2px);
    right: auto;
    width: 4px;
    height: auto;
    transform-origin: center top;
  }

  .process-steps::after {
    background: linear-gradient(180deg, #7a5cff 0%, #4b26e7 100%);
    transform: scaleY(1);
  }

  .process-steps.is-waiting::after {
    transform: scaleY(0);
  }

  .process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .process-node {
    flex-shrink: 0;
    margin: 12px 0 0;
  }

  .process-card {
    text-align: left;
    padding: 22px 22px 20px;
  }

  .process-icon {
    margin-bottom: 14px;
  }
}

@media (max-width: 575.98px) {
  .process-steps {
    --node: 46px;
  }

  .process-node {
    font-size: 15px;
  }

  .process-title {
    font-size: 19px;
  }
}

/* "Coming Soon" badge next to a feature item title */
.badge-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 50px;
  background: #fff4e5;
  border: 1px solid #ffd8a8;
  color: #c2620a;
  font-family: var(--inter-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ==========================================================
   Solution pages - light hero (same background as the home hero)
   ========================================================== */
.solution-hero {
  padding: 100px 0 110px;
}

/* Keep content above the blurred background glows */
.solution-hero > .container {
  position: relative;
}

.solution-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.solution-hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--secondary-color);
  margin-bottom: 22px;
}

.solution-hero-text {
  max-width: 580px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-color);
  margin-bottom: 36px;
}

/* White demo button needs a border and shadow on the light background */
.solution-btn-light {
  border-color: var(--border-color);
  box-shadow: 0 10px 24px #10143a14;
}

.solution-hero-media {
  position: relative;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .solution-hero-title {
    font-size: 44px;
  }
}

@media (max-width: 991.98px) {
  .solution-hero {
    padding: 70px 0 80px;
  }

  .solution-hero-title {
    font-size: 38px;
  }

  .solution-hero-text {
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .solution-hero {
    padding: 50px 0 60px;
  }

  .solution-hero-title {
    font-size: 30px;
    letter-spacing: -0.5px;
  }

  .solution-hero-text {
    font-size: 16px;
  }
}

/* ==========================================================
   Solution pages - alternating text/image rows
   ========================================================== */
.zigzag {
  background: var(--white-color);
}

/* Lavender version */
.zigzag.zigzag-alt {
  background: #f7f5ff;
}

.zigzag-row + .zigzag-row {
  margin-top: 90px;
}

.zigzag-row .feature-split-title {
  margin-bottom: 18px;
}

.zigzag-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-color);
  margin-bottom: 24px;
}

.zigzag-list {
  margin-bottom: 0;
}

.zigzag-list li {
  padding-bottom: 14px;
  margin-bottom: 14px;
  font-weight: 500;
  color: var(--secondary-color);
  border-bottom: 1px solid var(--border-color);
}

.zigzag-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 991.98px) {
  .zigzag-row + .zigzag-row {
    margin-top: 60px;
  }
}

/* Bullet list inside photo cards */
.team-card-list {
  list-style: none;
  padding: 0 6px;
  margin: 18px 0 0;
}

.team-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--light-color);
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary-color);
}

.team-card-list li + li {
  margin-top: 8px;
}

.team-card-list .bi {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary-color);
}

/* ==========================================================
   Solution pages - core features (dark band + glass tiles)
   ========================================================== */
.core-features {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, transparent 0 55%, #ffffff08 55% 70%, transparent 70%),
    linear-gradient(225deg, transparent 0 60%, #ffffff06 60% 78%, transparent 78%),
    radial-gradient(ellipse 60% 70% at 20% 0%, #4a24c9 0%, #2f1a86 40%, transparent 80%),
    linear-gradient(180deg, #1c1250 0%, #150f36 60%, #110c28 100%);
}

.core-features .feature-split-eyebrow {
  color: #c9bbff;
}

.core-features-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 18px;
}

.core-features-text {
  font-size: 16px;
  line-height: 1.7;
  color: #b9bbd6;
  margin-bottom: 20px;
}

.core-features .feature-split-link {
  color: #c9bbff;
}

.core-features .feature-split-link:hover {
  color: var(--white-color);
}

.core-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.core-tile:hover {
  background: #ffffff1a;
  border-color: #9d88ff;
  transform: translateY(-4px);
}

.core-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7a5cff 0%, #4b26e7 100%);
  color: var(--white-color);
  font-size: 20px;
  box-shadow: 0 8px 20px #4b26e766;
}

.core-tile-name {
  flex: 1;
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
}

.core-tile-num {
  font-family: var(--sora-font);
  font-size: 13px;
  font-weight: 600;
  color: #8a8cab;
}

@media (max-width: 1199.98px) {
  .core-features-title {
    font-size: 34px;
  }
}

@media (max-width: 575.98px) {
  .core-features-title {
    font-size: 28px;
  }
}

/* ==========================================================
   Solution pages - numbered outcome rail
   ========================================================== */
.outcome-rail {
  background: var(--white-color);
}

.outcome-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding-bottom: 56px;
  border-bottom: 2px solid var(--secondary-color);
}

.outcome-rail-title {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--secondary-color);
}

.outcome-rail-title span {
  display: block;
  color: var(--primary-color);
}

.outcome-rail-head .btn-trial {
  flex-shrink: 0;
  gap: 10px;
}

.outcome-rail-item {
  height: 100%;
  padding: 40px 28px 20px;
  border-left: 1px solid var(--border-color);
  transition: background-color 0.3s ease;
}

.outcome-rail-row > div:first-child .outcome-rail-item {
  padding-left: 0;
  border-left: 0;
}

.outcome-rail-num {
  display: block;
  margin-bottom: 22px;
  font-family: var(--sora-font);
  font-size: 60px;
  font-weight: 300;
  line-height: 1;
  color: var(--primary-color);
  transition: transform 0.3s ease;
}

.outcome-rail-item:hover .outcome-rail-num {
  transform: translateY(-4px);
}

.outcome-rail-name {
  font-size: 21px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 14px;
}

.outcome-rail-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

@media (max-width: 1199.98px) {
  .outcome-rail-title {
    font-size: 46px;
  }
}

@media (max-width: 991.98px) {
  .outcome-rail-head {
    padding-bottom: 40px;
  }

  .outcome-rail-title {
    font-size: 38px;
  }

  .outcome-rail-row > div:nth-child(odd) .outcome-rail-item {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .outcome-rail-title {
    font-size: 30px;
    letter-spacing: -0.5px;
  }

  .outcome-rail-item,
  .outcome-rail-row > div:nth-child(odd) .outcome-rail-item {
    padding: 30px 0 24px;
    border-left: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .outcome-rail-num {
    font-size: 48px;
  }
}

/* Info box with the diamond icon from the journey cards */
.rmt-box-diamond .journey-icon {
  margin-bottom: 20px;
  margin-left: -8px;
}

.rmt-box-diamond:hover .journey-icon::after {
  transform: rotate(135deg);
}

/* ==========================================================
   Accordion points (open one at a time, image stays fixed)
   ========================================================== */
.point-accordion {
  margin-top: 30px;
  /* border-top: 1px solid #d9d2ff; */
}

.point-item:not(:last-child) {
  border-bottom: 1px solid #d9d2ff;
}

.point-heading {
  margin: 0;
}

.point-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Purple underline that grows under the open point */
.point-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.point-toggle:not(.collapsed) {
  color: var(--primary-color);
}

.point-toggle:not(.collapsed)::after {
  transform: scaleX(1);
}

.point-toggle:hover {
  color: var(--primary-color);
}

.point-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 17px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.point-toggle:not(.collapsed) .point-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.point-chevron {
  margin-left: auto;
  font-size: 15px;
  -webkit-text-stroke: 0.5px;
  transition: transform 0.3s ease;
}

.point-toggle:not(.collapsed) .point-chevron {
  transform: rotate(180deg);
}

.point-body {
  margin: 0;
  padding: 22px 0 22px 0;
  font-size: 16px;
  line-height: 1.75;
  /* color: var(--muted-color); */
}

@media (max-width: 575.98px) {
  .point-toggle {
    font-size: 16px;
  }

  .point-body {
    padding-left: 0;
    font-size: 15px;
  }
}

/* Info box with the icon inline before the title */
.rmt-box-title.rmt-box-title-icon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--primary-color);
}

.rmt-box-title-icon .rmt-box-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* Info box extra: link pinned to the bottom */
.rmt-box-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.rmt-box-link .bi {
  transition: transform 0.25s ease;
}

.rmt-box-link:hover {
  color: var(--secondary-color);
}

.rmt-box-link:hover .bi {
  transform: translateX(4px);
}

/* Info box extra: corner number */
.rmt-box {
  position: relative;
}

.rmt-box-num {
  position: absolute;
  top: 30px;
  right: 28px;
  font-family: var(--sora-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-color);
}

/* Lavender version of the photo card section */
.team-types.team-types-alt {
  background: #f7f5ff;
}

/* Paragraph that follows a list inside an alternating row */
.zigzag-text.zigzag-text-after {
  margin: 24px 0 0;
}

/* ==========================================================
   Alternating rows - extras
   ========================================================== */
.zigzag-list-intro {
  margin: 0 0 14px;
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
}

/* Two-column list for short items */
.zigzag-list.zigzag-list-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
}

.zigzag-list.zigzag-list-2col li:nth-last-child(2):nth-child(odd) {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 575.98px) {
  .zigzag-list.zigzag-list-2col {
    grid-template-columns: 1fr;
  }

  .zigzag-list.zigzag-list-2col li:nth-last-child(2):nth-child(odd) {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
  }
}

/* Highlighted closing line */
.zigzag-note {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--primary-color);
  border-radius: 0 10px 10px 0;
  background: var(--light-color);
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.zigzag-alt .zigzag-note {
  background: var(--white-color);
}

/* Step pills: Discuss. Assign. Collaborate. ... */
.step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  counter-reset: step;
}

.step-pills li {
  counter-increment: step;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 10px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  box-shadow: 0 8px 18px #4b26e70f;
}

.step-pills li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 12px;
}

/* Five-card journey rows need tighter cards */
.row-cols-lg-5 .journey-card {
  padding: 32px 20px 28px;
}

.row-cols-lg-5 .journey-title {
  font-size: 20px;
}

/* Module pills: HR, Recruitment, Training ... */
.module-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1000px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.module-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 12px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  box-shadow: 0 10px 22px #4b26e70f;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.module-pills .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--light-color);
  color: var(--primary-color);
  font-size: 16px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.module-pills li:hover {
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px #4b26e71f;
}

.module-pills li:hover .bi {
  background: var(--primary-color);
  color: var(--white-color);
}

@media (max-width: 575.98px) {
  .module-pills li {
    font-size: 14px;
    padding: 10px 16px 10px 10px;
  }
}

/* BuzyTeam Agents dropdown */
.agents-panel {
  width: 330px;
  padding: 12px;
}

.agents-panel .mega-link {
  margin: 0 0 4px;
}

.agents-panel .mega-link:last-child {
  margin-bottom: 0;
}

/* Solution hero: bold line under the heading */
.solution-hero-subtitle {
  max-width: 580px;
  margin: -8px 0 16px;
  font-family: var(--sora-font);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-color);
}

/* Short intro line above a process rail */
.process-intro {
  margin: 0 0 30px;
  font-family: var(--sora-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary-color);
}

/* Journey band that fully contains its cards (no overlap into the next section) */
.journey.journey-full {
  padding-bottom: 100px;
}

.journey.journey-full::before {
  bottom: 0;
}

@media (max-width: 991.98px) {
  .journey.journey-full {
    padding-bottom: 80px;
  }

  .journey.journey-full::before {
    bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .journey.journey-full {
    padding-bottom: 60px;
  }

  .journey.journey-full::before {
    bottom: 0;
  }
}

/* Agent image in the BuzyTeam Agents dropdown */
.mega-agent-img {
  flex-shrink: 0;
  display: block;
  width: 42px;
  height: 42px;
}

.mega-agent-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ==========================================================
   AI agent call-to-action card (dark theme)
   ========================================================== */
.agent-cta-section {
  padding: 40px 0 80px;
  background: var(--white-color);
}

.agent-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 60px 64px 0;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 40% 75% at 78% 60%, #6a45f5 0%, #4a24c9 35%, transparent 75%),
    radial-gradient(ellipse 50% 60% at 0% 0%, #3a1fb8 0%, transparent 70%),
    linear-gradient(135deg, #1c1250 0%, #150f36 55%, #0e0a20 100%);
  box-shadow: 0 30px 70px #4b26e740;
}

/* Faint dot grid on the right */
.agent-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(#ffffff26 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 45% 80% at 80% 50%, #000000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 80% at 80% 50%, #000000 0%, transparent 75%);
  pointer-events: none;
}

.agent-cta .col-lg-6:first-child {
  padding-bottom: 60px;
}

.agent-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid #ffffff2e;
  background: #ffffff14;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.agent-cta-eyebrow .bi {
  color: #e4ddff;
}

.agent-cta-title {
  max-width: 500px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 18px;
}

.agent-cta-text {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.65;
  color: #d4d5e8;
  margin-bottom: 24px;
}

/* What the agent can do */
.agent-cta-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.agent-cta-skills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
  font-size: 14px;
  font-weight: 500;
  color: var(--white-color);
}

.agent-cta-skills .bi {
  color: #b7a6ff;
}

.agent-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.agent-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--secondary-color);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 14px 30px #05071c66;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.agent-cta-btn .bi {
  color: var(--primary-color);
  transition: transform 0.25s ease, color 0.25s ease;
}

.agent-cta-btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

.agent-cta-btn:hover .bi {
  color: var(--white-color);
  transform: translateX(4px);
}

.agent-cta-note {
  font-size: 14px;
  color: #a3a5c4;
}

/* Visual: glowing arch portrait, rings and chat bubble */
.agent-cta-visual {
  position: relative;
  height: 380px;
}

.agent-cta-ring {
  position: absolute;
  z-index: -1;
  top: 55%;
  right: 45px;
  border-radius: 50%;
  border: 1px solid #ffffff1f;
  transform: translateY(-45%);
}

.agent-cta-ring-1 {
  width: 400px;
  height: 400px;
}

.agent-cta-ring-2 {
  width: 560px;
  height: 560px;
  right: -35px;
  border-color: #ffffff12;
}

.agent-cta-arch {
  position: absolute;
  right: 80px;
  bottom: 0;
  width: 270px;
  height: 350px;
  overflow: hidden;
  border-radius: 135px 135px 0 0;
  border: 3px solid #ffffff38;
  border-bottom: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, #9d88ff 0%, #6a45f5 45%, #3a1fb8 100%);
  box-shadow: 0 0 60px #7a5cff73, inset 0 0 40px #ffffff1a;
}

.agent-cta-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.agent-cta-chat {
  position: absolute;
  left: 10px;
  bottom: 70px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #ffffff2e;
  background: #ffffffeb;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px #05071c59;
  animation: agent-float 4s ease-in-out infinite;
}

.agent-cta-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.agent-cta-chat-head img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.agent-cta-chat-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-color);
}

.agent-cta-chat-head em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-style: normal;
  color: var(--muted-color);
}

.agent-cta-chat-head em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}

.agent-cta-chat-msg {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 12px 12px 12px 4px;
  background: var(--light-color);
  font-size: 14px;
  color: var(--secondary-color);
}

@keyframes agent-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-cta-chat {
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .agent-cta-title {
    font-size: 38px;
  }

  .agent-cta-arch {
    right: 30px;
  }
}

@media (max-width: 991.98px) {
  .agent-cta {
    padding: 44px 36px 0;
  }

  .agent-cta .col-lg-6:first-child {
    padding-bottom: 0;
  }

  .agent-cta-visual {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .agent-cta {
    padding: 34px 22px 0;
    border-radius: 20px;
  }

  .agent-cta-title {
    font-size: 30px;
  }

  .agent-cta-visual {
    height: 320px;
  }

  .agent-cta-arch {
    right: 0;
    width: 210px;
    height: 290px;
    border-radius: 105px 105px 0 0;
  }

  .agent-cta-chat {
    left: 0;
    width: 190px;
    bottom: 40px;
  }

  .agent-cta-ring {
    display: none;
  }
}

/* ==========================================================
   BuzyTeam AI page - hero
   ========================================================== */
.ai-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding: 110px 0 120px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 115%, #4b26e7 0%, #2f1a86 40%, transparent 75%),
    radial-gradient(ellipse 50% 45% at 50% 0%, #1c1250 0%, transparent 70%),
    linear-gradient(160deg, #10143a 0%, #150f36 50%, #1c1250 100%);
  text-align: center;
}

.ai-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Slowly drifting grid, fading at the edges */
.ai-hero-grid {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(#ffffff0a 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000000 0%, transparent 75%);
  animation: ai-grid-drift 24s linear infinite;
}

@keyframes ai-grid-drift {
  to {
    transform: translate(60px, 60px);
  }
}

/* Corner glows */
.ai-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}

.ai-hero-glow-1 {
  top: -200px;
  left: -160px;
  width: 560px;
  height: 560px;
  background: #4b26e7;
  opacity: 0.5;
  animation: ai-glow-pulse 8s ease-in-out infinite;
}

.ai-hero-glow-2 {
  top: -120px;
  right: -200px;
  width: 480px;
  height: 480px;
  background: #7a5cff;
  opacity: 0.35;
  animation: ai-glow-pulse 10s ease-in-out infinite reverse;
}

@keyframes ai-glow-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.5;
  }
}

/* Rising particles */
.ai-hero-particles i {
  position: absolute;
  bottom: 10%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9bbff;
  box-shadow: 0 0 10px #9d88ff;
  opacity: 0;
  animation: ai-particle 9s linear infinite;
}

.ai-hero-particles i:nth-child(1) { left: 8%; animation-delay: 0s; }
.ai-hero-particles i:nth-child(2) { left: 16%; animation-delay: 3.2s; animation-duration: 11s; }
.ai-hero-particles i:nth-child(3) { left: 24%; animation-delay: 1.4s; }
.ai-hero-particles i:nth-child(4) { left: 33%; animation-delay: 5.1s; animation-duration: 12s; }
.ai-hero-particles i:nth-child(5) { left: 42%; animation-delay: 2.3s; }
.ai-hero-particles i:nth-child(6) { left: 51%; animation-delay: 6.4s; animation-duration: 10s; }
.ai-hero-particles i:nth-child(7) { left: 59%; animation-delay: 0.8s; }
.ai-hero-particles i:nth-child(8) { left: 67%; animation-delay: 4.2s; animation-duration: 13s; }
.ai-hero-particles i:nth-child(9) { left: 75%; animation-delay: 2.9s; }
.ai-hero-particles i:nth-child(10) { left: 83%; animation-delay: 7.3s; animation-duration: 11s; }
.ai-hero-particles i:nth-child(11) { left: 90%; animation-delay: 1.9s; }
.ai-hero-particles i:nth-child(12) { left: 96%; animation-delay: 5.8s; animation-duration: 12s; }

@keyframes ai-particle {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-70vh) scale(1);
    opacity: 0;
  }
}

/* Content */
.ai-hero-content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Staggered reveal on load */
.ai-reveal {
  opacity: 0;
  animation: ai-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) forwards;
}

@keyframes ai-reveal {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.ai-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  background: #ffffff0d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9bbff;
}

.ai-hero-pill-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9d88ff;
}

.ai-hero-pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #9d88ff;
  animation: ai-ping 1.8s ease-out infinite;
}

@keyframes ai-ping {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.ai-hero-title {
  margin-bottom: 26px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
  white-space: nowrap;
  color: var(--white-color);
}

.ai-hero-title > span {
  display: inline-block;
}

/* Shimmering gradient word */
.ai-hero-shine {
  font-style: normal;
  background: linear-gradient(90deg, #9d88ff 0%, #e4ddff 25%, #7a5cff 50%, #e4ddff 75%, #9d88ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-shine 5s linear infinite;
}

@keyframes ai-shine {
  to {
    background-position: 200% center;
  }
}

.ai-hero-text {
  max-width: 790px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.7;
  color: #b9bbd6;
}

.ai-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ai-hero-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 0 0 1px #9d88ff66, 0 14px 40px #4b26e780;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Light sweep across the button */
.ai-hero-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, #ffffff59, transparent);
  transform: skewX(-20deg);
  animation: ai-sweep 3.5s ease-in-out 1.5s infinite;
}

@keyframes ai-sweep {
  0% {
    left: -60%;
  }
  40%,
  100% {
    left: 130%;
  }
}

.ai-hero-btn .bi {
  transition: transform 0.25s ease;
}

.ai-hero-btn:hover {
  color: var(--white-color);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #c9bbff, 0 18px 50px #4b26e7a6;
}

.ai-hero-btn:hover .bi {
  transform: translateX(4px);
}

.ai-hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border-radius: 50px;
  border: 1px solid #ffffff38;
  background: #ffffff0a;
  color: var(--white-color);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ai-hero-btn-ghost:hover {
  border-color: #c9bbff;
  background: #ffffff1a;
  color: var(--white-color);
}

@media (max-width: 1199.98px) {
  .ai-hero-title {
    font-size: 48px;
    letter-spacing: -1.5px;
  }
}

@media (max-width: 991.98px) {
  .ai-hero {
    min-height: 0;
    padding: 80px 0 90px;
  }

  .ai-hero-title {
    font-size: 46px;
    letter-spacing: -1.5px;
    white-space: normal;
  }

  .ai-hero-text {
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .ai-hero {
    padding: 60px 0 70px;
  }

  .ai-hero-title {
    font-size: 40px;
    letter-spacing: -1px;
  }

  .ai-hero-text {
    font-size: 16px;
  }

  .ai-hero-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Reduced motion: show everything, stop the looping effects */
@media (prefers-reduced-motion: reduce) {
  .ai-reveal {
    opacity: 1;
    animation: none;
  }

  .ai-hero-grid,
  .ai-hero-glow,
  .ai-hero-particles i,
  .ai-hero-pill-dot::after,
  .ai-hero-shine,
  .ai-hero-btn::before {
    animation: none;
  }

  .ai-hero-particles {
    display: none;
  }
}

/* ==========================================================
   BuzyTeam AI page - AI modules (filter + glass cards)
   ========================================================== */
.ai-modules {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #1c1250 0%, #150f36 50%, #10143a 100%);
}

/* Soft glow behind the grid */
.ai-modules::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 30%;
  left: 50%;
  width: 900px;
  height: 600px;
  border-radius: 50%;
  background: #4b26e7;
  opacity: 0.18;
  filter: blur(140px);
  transform: translateX(-50%);
}

.ai-modules-head {
  max-width: 700px;
  margin: 0 auto 34px;
  text-align: center;
}

.ai-modules-title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--white-color);
  margin-bottom: 16px;
}

.ai-modules-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: #b9bbd6;
}

/* Filter pills */
.ai-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}

.ai-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0a;
  font-family: var(--inter-font);
  font-size: 15px;
  font-weight: 600;
  color: #d4d5e8;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ai-filter span {
  font-weight: 500;
  color: #8a8cab;
  transition: color 0.25s ease;
}

.ai-filter:hover {
  border-color: #9d88ff;
  color: var(--white-color);
}

.ai-filter.is-active {
  border-color: var(--white-color);
  background: var(--white-color);
  color: var(--secondary-color);
}

.ai-filter.is-active span {
  color: var(--primary-color);
}

.ai-filter:focus-visible {
  outline: 2px solid #9d88ff;
  outline-offset: 2px;
}

/* Glass cards */
.ai-tool-col {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ai-tool-col.is-hidden {
  display: none;
}

.ai-tool-col.is-entering {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}

.ai-tool {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 250px;
  padding: 24px 24px 22px;
  border-radius: 20px;
  border: 1px solid #ffffff14;
  background: linear-gradient(180deg, #ffffff0f 0%, #ffffff05 100%);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

/* Light that rises from the bottom on hover */
.ai-tool::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -60%;
  width: 120%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #9d88ff 0%, #4b26e7 40%, transparent 70%);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.4s ease, bottom 0.4s ease;
}

.ai-tool:hover {
  border-color: #9d88ff66;
  transform: translateY(-6px);
}

.ai-tool:hover::before {
  opacity: 0.55;
  bottom: -45%;
}

.ai-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 40px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid #ffffff1a;
  background: #ffffff14;
  font-size: 13px;
  font-weight: 600;
  color: #e4ddff;
}

.ai-tool-badge .bi {
  color: #b7a6ff;
}

.ai-tool-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white-color);
  margin-bottom: 12px;
}

.ai-tool-text {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #a3a5c4;
}

.ai-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: #c9bbff;
}

.ai-tool-tag .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 11px;
}

@media (max-width: 991.98px) {
  .ai-modules {
    padding: 80px 0 90px;
  }

  .ai-modules-title {
    font-size: 42px;
  }
}

@media (max-width: 575.98px) {
  .ai-modules {
    padding: 60px 0 70px;
  }

  .ai-modules-title {
    font-size: 32px;
  }

  .ai-modules-text {
    font-size: 16px;
  }

  .ai-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -12px 32px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }

  .ai-filters::-webkit-scrollbar {
    display: none;
  }

  .ai-filter {
    flex-shrink: 0;
  }

  .ai-tool {
    min-height: 0;
  }

  .ai-tool-badge {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-tool-col,
  .ai-tool,
  .ai-tool::before {
    transition: none;
  }
}

/* ==========================================================
   BuzyTeam AI hero - concentric rings with orbiting dots
   ========================================================== */

/* Soft purple core glow behind the heading */
.ai-hero-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, #4b26e780 0%, #2f1a8640 40%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: ai-core-pulse 7s ease-in-out infinite;
}

@keyframes ai-core-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

/* Rings */
.ai-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid #ffffff14;
  transform: translate(-50%, -50%);
  animation: ai-orbit-spin 60s linear infinite;
}

.ai-orbit-1 {
  width: 620px;
  height: 620px;
  border: 1px dashed #ffffff26;
  animation-duration: 40s;
}

.ai-orbit-2 {
  width: 950px;
  height: 950px;
  animation-duration: 70s;
  animation-direction: reverse;
}

.ai-orbit-3 {
  width: 1300px;
  height: 1300px;
  animation-duration: 100s;
}

.ai-orbit-4 {
  width: 1700px;
  height: 1700px;
  border-color: #ffffff0d;
  animation-duration: 140s;
  animation-direction: reverse;
}

@keyframes ai-orbit-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Glowing dots sitting on the rings (they travel as the ring spins) */
.ai-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 0 10px #ffffff, 0 0 22px #9d88ff;
  animation: ai-dot-twinkle 3s ease-in-out infinite;
}

.ai-orbit-1 i {
  top: 12%;
  right: 7%;
}

.ai-orbit-2 i:nth-child(1) {
  top: 50%;
  left: -5px;
  margin-top: -5px;
}

.ai-orbit-2 i:nth-child(2) {
  bottom: 9%;
  right: 16%;
  width: 7px;
  height: 7px;
  animation-delay: 1.5s;
}

.ai-orbit-3 i {
  top: 18%;
  right: 12%;
  animation-delay: 0.8s;
}

.ai-orbit-4 i {
  bottom: 22%;
  left: 8%;
  width: 6px;
  height: 6px;
  animation-delay: 2.2s;
}

@keyframes ai-dot-twinkle {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.55;
    scale: 0.75;
  }
}

@media (max-width: 991.98px) {
  .ai-hero-core,
  .ai-orbit-1 {
    width: 460px;
    height: 460px;
  }

  .ai-orbit-2 {
    width: 700px;
    height: 700px;
  }

  .ai-orbit-3 {
    width: 960px;
    height: 960px;
  }
}

@media (max-width: 575.98px) {
  .ai-hero-core,
  .ai-orbit-1 {
    width: 320px;
    height: 320px;
  }

  .ai-orbit-2 {
    width: 520px;
    height: 520px;
  }

  .ai-orbit-3 {
    width: 720px;
    height: 720px;
  }

  .ai-orbit-4 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero-core,
  .ai-orbit,
  .ai-orbit i {
    animation: none;
  }
}

/* ==========================================================
   BuzyTeam AI page - AI agents slider
   ========================================================== */
.ai-agents {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #1c1250 0%, #150f36 100%);
}

.ai-agents::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  right: -10%;
  width: 700px;
  height: 500px;
  border-radius: 50%;
  background: #4b26e7;
  opacity: 0.22;
  filter: blur(130px);
}

.ai-agents-head {
  margin-bottom: 48px;
}

.ai-agents-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  background: #ffffff0d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9bbff;
}

.ai-agents-title {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--white-color);
}

.ai-agents-text {
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: #b9bbd6;
}

.ai-agents-nav {
  display: flex;
  gap: 12px;
}

.ai-agents-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #ffffff38;
  background: #ffffff0a;
  color: var(--white-color);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.ai-agents-arrow:hover:not(:disabled) {
  border-color: var(--white-color);
  background: var(--white-color);
  color: var(--secondary-color);
}

.ai-agents-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.ai-agents-arrow:focus-visible {
  outline: 2px solid #9d88ff;
  outline-offset: 3px;
}

/* Track: cards line up from the container edge and the next one peeks in */
.ai-agents-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px max(12px, calc((100vw - 1320px) / 2 + 12px)) 10px;
  scroll-padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px));
  scrollbar-width: none;
}

.ai-agents-track::-webkit-scrollbar {
  display: none;
}

.ai-agents-track:focus-visible {
  outline: none;
}

.agent-card {
  flex: 0 0 min(820px, 86vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  overflow: hidden;
  min-height: 400px;
  border-radius: 24px;
  border: 1px solid #ffffff1a;
  background: linear-gradient(160deg, #ffffff12 0%, #ffffff05 100%);
  transition: border-color 0.3s ease;
}

.agent-card:hover {
  border-color: #9d88ff66;
}

.agent-card-body {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
}

.agent-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-color);
}

.agent-card-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 14px;
}

.agent-card-text {
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.65;
  color: #b9bbd6;
}

.agent-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.agent-card-skills li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
  font-size: 14px;
  font-weight: 500;
  color: var(--white-color);
}

.agent-card-skills .bi {
  color: #b7a6ff;
}

/* Right side: mock agent chat panel */
.agent-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  background:
    radial-gradient(ellipse 80% 70% at 60% 40%, #6a45f5 0%, #3a1fb8 45%, #1c1250 100%);
}

.agent-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff2e 1px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000000 0%, transparent 80%);
}

.agent-chat {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 18px;
  border-radius: 18px;
  background: var(--white-color);
  box-shadow: 0 24px 50px #05071c73;
  transition: transform 0.4s ease;
}

.agent-card:hover .agent-chat {
  transform: translateY(-6px);
}

.agent-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.agent-chat-head img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.agent-chat-head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-color);
}

.agent-chat-head em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-style: normal;
  color: var(--muted-color);
}

.agent-chat-head em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}

.agent-chat-q {
  margin-bottom: 12px;
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-color);
}

.agent-chat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.agent-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-color);
}

.agent-tile .bi-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 12px;
}

.agent-tile .bi-arrow-right {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted-color);
  font-size: 11px;
}

.agent-chat-foot {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--muted-color);
}

@media (max-width: 991.98px) {
  .ai-agents {
    padding: 80px 0 90px;
  }

  .ai-agents-title {
    font-size: 40px;
  }

  .agent-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .ai-agents {
    padding: 60px 0 70px;
  }

  .ai-agents-title {
    font-size: 30px;
  }

  .agent-card-body {
    padding: 26px 22px;
  }

  .agent-card-title {
    font-size: 28px;
  }

  .agent-chat-tiles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-agents-track {
    scroll-behavior: auto;
  }
}

/* Agent card call-to-action button */
.agent-card-skills {
  margin-bottom: 26px;
}

.agent-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 12px 26px #4b26e740;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.agent-card-btn .bi {
  transition: transform 0.25s ease;
}

.agent-card-btn:hover {
  background: var(--secondary-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

.agent-card-btn:hover .bi {
  transform: translateX(4px);
}

/* ==========================================================
   BuzyTeam AI page - AI for every kind of work
   ========================================================== */
.ai-every {
  background: #f7f5ff;
}

.ai-every-head {
  margin-bottom: 56px;
}

.ai-every-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ai-every-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--primary-color);
}

.ai-every-title {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--secondary-color);
}

.ai-every-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted-color);
}

/* Columns separated by thin lines */
.every-grid {
  border-top: 1px solid var(--pale-lavender);
  border-bottom: 1px solid var(--pale-lavender);
}

.every-grid > .col + .col .every-item {
  border-left: 1px solid var(--pale-lavender);
}

.every-item {
  height: 100%;
  padding: 34px 22px 36px;
  transition: background-color 0.3s ease;
}

.every-grid > .col:first-child .every-item {
  padding-left: 0;
}

.every-item:hover {
  background: var(--white-color);
}

.every-num {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #9d88ff;
}

.every-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--pale-lavender);
  color: var(--primary-color);
  font-size: 19px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.every-item:hover .every-icon {
  background: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-3px);
}

.every-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 12px;
}

.every-text {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

.every-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.every-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-color);
}

.every-list li + li {
  margin-top: 8px;
}

.every-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

/* Below 6 columns: draw lines between wrapped rows instead */
@media (max-width: 1199.98px) {
  .every-grid > .col .every-item,
  .every-grid > .col:first-child .every-item {
    padding: 30px 22px;
    border-left: 0;
    border-bottom: 1px solid var(--pale-lavender);
  }

  .every-title {
    font-size: 19px;
  }
}

@media (max-width: 991.98px) {
  .ai-every-title {
    font-size: 44px;
  }
}

@media (max-width: 575.98px) {
  .ai-every-title {
    font-size: 34px;
  }

  .ai-every-intro {
    font-size: 16px;
  }
}

/* AI modules - light version */
.ai-modules {
  background: #f7f5ff;
}

.ai-modules::before {
  background: #c9bbff;
  opacity: 0.4;
}

.ai-modules-title {
  color: var(--secondary-color);
}

.ai-modules-text {
  color: var(--muted-color);
}

.ai-filter {
  border-color: var(--pale-lavender);
  background: var(--white-color);
  color: var(--secondary-color);
}

.ai-filter span {
  color: var(--muted-color);
}

.ai-filter:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.ai-filter.is-active {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: var(--white-color);
}

.ai-filter.is-active span {
  color: #c9bbff;
}

.ai-filter:focus-visible {
  outline-color: var(--primary-color);
}

.ai-tool {
  border-color: var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 14px 32px #4b26e70d;
}

/* Soft lavender light rising on hover */
.ai-tool::before {
  background: radial-gradient(ellipse at center, #e4ddff 0%, #f3f1ff 45%, transparent 70%);
}

.ai-tool:hover {
  border-color: #c9bbff;
  box-shadow: 0 22px 44px #4b26e71f;
}

.ai-tool:hover::before {
  opacity: 1;
}

.ai-tool-badge {
  border-color: var(--pale-lavender);
  background: var(--light-color);
  color: var(--secondary-color);
}

.ai-tool-badge .bi {
  color: var(--primary-color);
}

.ai-tool-title {
  color: var(--secondary-color);
}

.ai-tool-text {
  color: var(--muted-color);
}

.ai-tool-tag {
  color: var(--primary-color);
}

/* AI modules - glass cards on a softly coloured background */
.ai-modules::before {
  top: 25%;
  left: 18%;
  width: 620px;
  height: 520px;
  background: #9d88ff;
  opacity: 0.45;
  filter: blur(120px);
  transform: none;
}

.ai-modules::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 5%;
  right: 10%;
  width: 560px;
  height: 460px;
  border-radius: 50%;
  background: #f0abfc;
  opacity: 0.35;
  filter: blur(120px);
}

.ai-tool {
  border: 1px solid #ffffffcc;
  background: linear-gradient(145deg, #ffffffb3 0%, #ffffff66 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 36px #4b26e714, inset 0 1px 0 #ffffffe6;
}

.ai-tool:hover {
  border-color: #ffffff;
  background: linear-gradient(145deg, #ffffffd9 0%, #ffffff8c 100%);
  box-shadow: 0 24px 48px #4b26e726, inset 0 1px 0 #ffffff;
}

.ai-tool-badge {
  border-color: #ffffffcc;
  background: #ffffff99;
}

.ai-filter {
  border-color: #ffffffcc;
  background: #ffffffa6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Agent button on the dark section: hover to white so it stays visible */
.ai-agents .agent-card-btn:hover {
  background: var(--white-color);
  color: var(--secondary-color);
}

/* Agent cards: light cards that stand out on the dark purple section */
.ai-agents .agent-card {
  border-color: #ffffff;
  background: var(--white-color);
  box-shadow: 0 30px 60px #05071c80;
}

.ai-agents .agent-card:hover {
  border-color: #c9bbff;
  box-shadow: 0 34px 70px #4b26e766;
}

.ai-agents .agent-card-title {
  color: var(--secondary-color);
}

.ai-agents .agent-card-text {
  color: var(--muted-color);
}

.ai-agents .agent-card-skills li {
  border-color: var(--pale-lavender);
  background: var(--light-color);
  color: var(--secondary-color);
}

.ai-agents .agent-card-skills .bi {
  color: var(--primary-color);
}

.ai-agents .agent-card-btn:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

/* ==========================================================
   BuzyTeam Brain page
   ========================================================== */

/* ---------- Shared ---------- */
.br-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0;
}

.br-white {
  background: var(--white-color);
}

.br-lavender {
  background: #f3f1ff;
}

.br-dark {
  background:
    radial-gradient(ellipse 60% 60% at 75% 50%, #3a1fb866 0%, transparent 70%),
    linear-gradient(180deg, #0e0a20 0%, #150f36 60%, #1c1250 100%);
  color: var(--white-color);
}

.br-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.br-head {
  margin-bottom: 52px;
}

.br-head-center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.br-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.br-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}

.br-dark .br-eyebrow {
  color: #b7a6ff;
}

.br-title {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--secondary-color);
}

.br-dark .br-title {
  color: var(--white-color);
}

.br-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-color);
}

.br-head-center .br-lead {
  margin-top: 18px;
}

.br-dark .br-lead {
  color: #b9bbd6;
}

.br-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.br-link .bi {
  transition: transform 0.25s ease;
}

.br-link:hover {
  color: var(--secondary-color);
}

.br-link:hover .bi {
  transform: translateX(4px);
}

.br-link-light {
  color: #c9bbff;
}

.br-link-light:hover {
  color: var(--white-color);
}

.br-grad {
  font-style: normal;
  background: linear-gradient(90deg, #c9bbff 0%, #9d88ff 50%, #e4ddff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-shine 6s linear infinite;
}

/* Glowing orb */
.br-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9bbff 0%, #7a5cff 30%, #4b26e7 60%, #2f1a86 100%);
  box-shadow: 0 0 40px #7a5cffb3, 0 0 90px #4b26e780;
  transform: translate(-50%, -50%);
  animation: br-orb-pulse 4s ease-in-out infinite;
}

.br-orb-lg { width: 120px; height: 120px; }
.br-orb-md { width: 90px; height: 90px; }
.br-orb-sm { width: 46px; height: 46px; }

.br-orb-xs {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transform: none;
  box-shadow: 0 0 12px #7a5cffb3;
  animation-name: br-orb-pulse-static;
}

@keyframes br-orb-pulse {
  0%, 100% { box-shadow: 0 0 40px #7a5cffb3, 0 0 90px #4b26e780; transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 0 60px #9d88ffcc, 0 0 130px #4b26e7a6; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes br-orb-pulse-static {
  0%, 100% { box-shadow: 0 0 10px #7a5cffb3; }
  50% { box-shadow: 0 0 18px #9d88ffe6; }
}

.br-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ffffff1f;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.br-ring-1 {
  width: 260px;
  height: 260px;
  border-style: dashed;
  border-color: #ffffff26;
  animation: br-spin 40s linear infinite;
}

.br-ring-2 {
  width: 400px;
  height: 400px;
  animation: br-spin 70s linear infinite reverse;
}

@keyframes br-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Animated connecting lines */
.br-net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.br-net-lines path {
  fill: none;
  stroke: #b7a6ff;
  stroke-opacity: 0.55;
  stroke-width: 1.4;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  animation: br-flow 2.4s linear infinite;
}

@keyframes br-flow {
  to { stroke-dashoffset: -28; }
}

.br-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 0 10px #c9bbff;
  animation: ai-dot-twinkle 3s ease-in-out infinite;
}

.br-spark:nth-of-type(2n) { animation-delay: 1s; }
.br-spark:nth-of-type(3n) { animation-delay: 2s; }

/* Agent node (avatar + label) */
.br-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
  animation: br-bob 6s ease-in-out infinite;
}

.br-node:nth-of-type(2n) { animation-delay: 1.5s; }

@keyframes br-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

.br-node-img {
  display: block;
  width: 116px;
  height: 116px;
  padding: 6px;
  border-radius: 50%;
  background: #1c1250;
  border: 1px solid #9d88ff80;
  box-shadow: 0 0 0 8px #4b26e71f, 0 0 40px #4b26e766;
}

.br-node-img img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(160deg, #ffffff 0%, #e4ddff 100%);
}

.br-node-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  background: #0e0a20cc;
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
  white-space: nowrap;
}

.br-node-label img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.br-node-sm .br-node-img {
  width: 84px;
  height: 84px;
}

.br-node-sm i {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: var(--white-color);
}

/* ---------- 1. Hero & final CTA ---------- */
.br-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, #2f1a86 0%, transparent 70%),
    linear-gradient(180deg, #10143a 0%, #0e0a20 100%);
}

.br-hero-content {
  position: relative;
  z-index: 3;
  max-width: 1080px;
  margin: 0 auto;
}

.br-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.br-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff2e;
  background: #ffffff0d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e4ddff;
}

.br-pill-solid {
  border-color: var(--primary-color);
  background: var(--primary-color);
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--white-color);
}

.br-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9bbff;
  animation: ai-ping-soft 1.8s ease-in-out infinite;
}

@keyframes ai-ping-soft {
  50% { opacity: 0.4; }
}

.br-hero-title {
  margin-bottom: 24px;
  font-size: 76px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -2.5px;
  color: var(--white-color);
}

.br-hero-title > span {
  display: block;
}

.br-hero-text {
  max-width: 660px;
  margin: 0 auto 18px;
  font-size: 19px;
  line-height: 1.65;
  color: #b9bbd6;
}

.br-hero-tagline {
  margin-bottom: 34px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #b7a6ff;
}

.br-hero-tagline span {
  margin: 0 8px;
  color: #6a45f5;
}

.br-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.br-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--secondary-color);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.br-btn-white:hover {
  background: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

/* Network visual under the hero */
.br-net {
  position: relative;
  height: 460px;
  margin-top: 40px;
}

.br-net-horizon {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 170%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, #4b26e7 0%, #2f1a86 18%, #1c1250 40%, #0e0a20 60%);
  box-shadow: 0 -2px 0 #c9bbffb3, 0 -24px 70px #7a5cff66;
}

.br-net .br-ring,
.br-net .br-orb,
.br-net .br-net-lines {
  z-index: 1;
}

.br-cta {
  padding-top: 120px;
}

.br-cta-title {
  font-size: 64px;
}

/* ---------- 2. AI workforce cards ---------- */
.br-agents-grid {
  position: relative;
}

.br-agent {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--pale-lavender);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.br-agent:hover {
  transform: translateY(-6px);
  border-color: #9d88ff;
  box-shadow: 0 26px 50px #4b26e72e;
}

.br-agent-pink { background: linear-gradient(135deg, #fdf2ff 0%, #f3f1ff 100%); }
.br-agent-lavender { background: linear-gradient(135deg, #f3f1ff 0%, #e9e5ff 100%); }
.br-agent-peach { background: linear-gradient(135deg, #fff6ee 0%, #fdf2ff 100%); }
.br-agent-blue { background: linear-gradient(135deg, #eef2ff 0%, #f3f1ff 100%); }

.br-agent-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 18px 0;
}

.br-agent-art::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 30px;
  bottom: 0;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(180deg, #ffffffb3 0%, #e4ddff 100%);
}

.br-agent-art img {
  position: relative;
  width: 170px;
  height: 170px;
  margin-bottom: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 16px 30px #4b26e733;
  transition: transform 0.4s ease;
}

.br-agent:hover .br-agent-art img {
  transform: scale(1.05);
}

.br-agent-body {
  padding: 32px 30px 30px 6px;
}

.br-agent-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-color);
}

.br-agent-label b {
  margin-right: 6px;
  color: var(--primary-color);
}

.br-agent-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.br-agent-text {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

.br-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.br-tags li {
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary-color);
}

.br-tags-dot li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--light-color);
}

.br-tags-dot li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.br-agents-hub {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.br-agents-hub .br-orb {
  position: relative;
  transform: none;
  animation-name: br-orb-pulse-static;
}

.br-hub-label {
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--secondary-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-color);
}

/* ---------- 3. Connected intelligence ---------- */
.br-knows {
  list-style: none;
  padding: 0;
  margin: 32px 0 26px;
}

.br-knows li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  color: #e4ddff;
}

.br-knows li + li {
  margin-top: 14px;
}

.br-knows img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #9d88ff80;
}

.br-connects {
  margin-bottom: 30px;
  font-family: var(--sora-font);
  font-size: 24px;
  font-weight: 700;
  color: #b7a6ff;
}

.br-planned {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.br-planned span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a8cab;
}

.br-planned em {
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  font-size: 13px;
  font-style: normal;
  color: #d4d5e8;
}

.br-web {
  position: relative;
  height: 560px;
}

.br-web .br-ring-1 { width: 200px; height: 200px; }
.br-web .br-ring-2 { width: 300px; height: 300px; }

.br-signal {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid #ffffff2e;
  background: #0e0a20e6;
  font-size: 12px;
  font-weight: 600;
  color: var(--white-color);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.br-signal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7a6ff;
}

.br-brief-pop {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 320px;
  max-width: 92%;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--white-color);
  text-align: left;
  box-shadow: 0 0 40px #7a5cff66, 0 20px 40px #05071c80;
  transform: translateX(-50%);
  animation: agent-float 5s ease-in-out infinite;
}

.br-tag-solid {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-color);
}

.br-brief-pop p {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--secondary-color);
}

.br-brief-pop small {
  font-size: 12px;
  color: var(--primary-color);
}

/* ---------- 4 & 8. Stepper ---------- */
.br-steptrack {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  margin: 0 auto 40px;
}

.br-steptrack::before,
.br-stepfill {
  content: "";
  position: absolute;
  top: 50%;
  left: 22px;
  height: 2px;
  transform: translateY(-50%);
}

.br-steptrack::before {
  right: 22px;
  background: var(--pale-lavender);
}

.br-stepfill {
  width: calc((100% - 44px) * var(--progress-ratio, 0.5));
  background: var(--primary-color);
  transition: width 0.6s ease;
}

.br-stepnode {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-color);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.br-stepnode.is-done {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: var(--white-color);
}

.br-stepnode.is-active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
  box-shadow: 0 0 0 6px #4b26e72e, 0 10px 24px #4b26e766;
}

.br-stepcards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.br-stepcard {
  padding: 26px 22px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: #f8f7ff;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.br-stepcard h3 {
  margin-bottom: 12px;
  font-size: 23px;
  font-weight: 700;
  color: var(--secondary-color);
  transition: color 0.4s ease;
}

.br-stepcard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-color);
  transition: color 0.4s ease;
}

.br-step-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
  transition: color 0.4s ease;
}

.br-stepcard.is-active {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  transform: translateY(-8px);
  box-shadow: 0 26px 50px #10143a40;
}

.br-stepcard.is-active h3 { color: var(--white-color); }
.br-stepcard.is-active p { color: #b9bbd6; }
.br-stepcard.is-active .br-step-kicker { color: #b7a6ff; }

.br-mini {
  margin: 16px 0 0;
  padding: 12px 14px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--pale-lavender);
  font-size: 13px;
  color: var(--muted-color);
}

.br-stepcard.is-active .br-mini {
  border-color: #ffffff1f;
  background: #ffffff0d;
  color: var(--white-color);
}

.br-mini li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-mini li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9d88ff;
}

/* Time variant (A day with your brain) */
.br-stepper-time .br-steptrack {
  max-width: none;
}

.br-stepper-time .br-stepnode {
  width: 28px;
  height: 28px;
  font-size: 0;
}

.br-stepper-time .br-stepnode::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9bbff;
}

.br-stepper-time .br-stepnode.is-done::after,
.br-stepper-time .br-stepnode.is-active::after {
  background: var(--white-color);
}

.br-stepper-time .br-stepnode.is-done {
  border-color: var(--primary-color);
  background: var(--primary-color);
}

.br-stepper-time .br-steptrack::before,
.br-stepper-time .br-stepfill {
  left: 14px;
}

.br-stepper-time .br-steptrack::before {
  right: 14px;
}

.br-stepper-time .br-stepfill {
  width: calc((100% - 28px) * var(--progress-ratio, 0.5));
}

.br-stepper-time .br-stepcard {
  background: var(--white-color);
}

.br-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.br-day-top .br-step-kicker {
  margin: 0;
  letter-spacing: 0.3px;
}

.br-day-av img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.br-stepper-time .br-stepcard h3 {
  margin: 12px 0;
  font-size: 19px;
}

.br-quote {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--light-color);
  font-size: 13px !important;
  color: var(--secondary-color) !important;
}

.br-stepcard.is-active .br-quote {
  background: #ffffff14;
  color: var(--white-color) !important;
}

/* ---------- 5. Capabilities slider ---------- */
.br-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.br-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  color: var(--secondary-color);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.br-arrow:hover:not(:disabled) {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: var(--white-color);
}

.br-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.br-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px max(12px, calc((100vw - 1320px) / 2 + 12px)) 16px;
  scroll-padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px));
  scrollbar-width: none;
}

.br-track::-webkit-scrollbar {
  display: none;
}

.br-track:focus-visible {
  outline: none;
}

.br-cap {
  position: relative;
  overflow: hidden;
  flex: 0 0 min(400px, 82vw);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  scroll-snap-align: start;
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.br-cap:hover,
.br-cap.is-dark {
  border-color: #2f1a86;
  background: linear-gradient(160deg, #1c1250 0%, #0e0a20 100%);
  box-shadow: 0 26px 50px #10143a40;
}

.br-cap:hover {
  transform: translateY(-6px);
}

.br-cap-num {
  position: absolute;
  top: 6px;
  right: 22px;
  font-family: var(--sora-font);
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: #4b26e714;
  transition: color 0.4s ease;
}

.br-cap:hover .br-cap-num,
.br-cap.is-dark .br-cap-num {
  color: #ffffff12;
}

.br-cap-art {
  position: absolute;
  top: 60px;
  left: 50px;
  width: 120px;
  height: 120px;
}

.br-cap-art .br-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  animation-name: br-orb-pulse;
}

.br-cap-art::before,
.br-cap-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.br-cap-rings::before {
  border: 1px solid #9d88ff66;
}

.br-cap-rings::after {
  inset: 16px;
  border: 1px dashed #9d88ff80;
  animation: br-spin-plain 20s linear infinite;
}

.br-cap-glow::before {
  inset: -20px;
  background: radial-gradient(circle, #9d88ff66 0%, transparent 65%);
}

.br-cap-cross::before {
  inset: 58px -20px auto;
  height: 1px;
  border-radius: 0;
  background: #9d88ff;
  transform: rotate(-30deg);
}

.br-cap-cross::after {
  inset: 58px -20px auto;
  height: 1px;
  border-radius: 0;
  background: #9d88ff;
  transform: rotate(30deg);
}

@keyframes br-spin-plain {
  to { transform: rotate(360deg); }
}

.br-cap h3 {
  position: relative;
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 700;
  color: var(--secondary-color);
  transition: color 0.4s ease;
}

.br-cap p {
  position: relative;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
  transition: color 0.4s ease;
}

.br-cap:hover h3,
.br-cap.is-dark h3 {
  color: var(--white-color);
}

.br-cap:hover p,
.br-cap.is-dark p {
  color: #b9bbd6;
}

/* ---------- 6. Cross-agent scenarios ---------- */
.br-scenarios {
  flex-direction: column;
  gap: 12px;
  margin: 34px 0 28px;
}

.br-scenario {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid #ffffff1a;
  background: #ffffff08;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #d4d5e8;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.br-scenario b {
  font-size: 13px;
  color: #8a8cab;
}

.br-scenario:hover {
  border-color: #9d88ff80;
  color: var(--white-color);
}

.br-scenario.active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
  box-shadow: 0 14px 30px #4b26e766;
}

.br-scenario.active b {
  color: #e4ddff;
}

.br-flow-panel {
  padding: 28px;
  border-radius: 24px;
  border: 1px solid #ffffff1f;
  background: #ffffff0a;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.br-flow {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-flow::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 37px;
  width: 2px;
  background: linear-gradient(180deg, #7a5cff 0%, #4b26e7 100%);
}

.br-flow-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #ffffff1a;
  background: #1c1250e6;
  opacity: 0;
  transform: translateX(20px);
}

.tab-pane.active .br-flow-row {
  animation: br-row-in 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.18s);
}

@keyframes br-row-in {
  to { opacity: 1; transform: none; }
}

.br-flow-row + .br-flow-row {
  margin-top: 16px;
}

.br-flow-row.is-brain {
  border-color: #9d88ff;
  background: linear-gradient(90deg, #3a1fb8 0%, #2f1a86 100%);
}

.br-flow-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.br-flow-av img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.br-flow-row > span:nth-child(2) {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--white-color);
}

.br-flow-row small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b7a6ff;
}

.br-flow-row em {
  font-size: 12px;
  font-style: normal;
  color: #8a8cab;
}

.br-flow-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #d4d5e8;
}

.br-flow-foot .bi {
  color: #b7a6ff;
}

/* ---------- 7. Role-specific ---------- */
.br-segs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 50px;
  padding: 6px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.br-seg {
  padding: 12px 34px;
  border: 0;
  border-radius: 50px;
  background: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-color);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.br-seg:hover {
  color: var(--secondary-color);
}

.br-seg.active {
  background: var(--secondary-color);
  color: var(--white-color);
}

.br-role-title {
  margin-bottom: 18px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--secondary-color);
}

.br-role-content .br-lead {
  margin-bottom: 20px;
}

.br-brief-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, #4b26e7 0%, transparent 70%),
    linear-gradient(160deg, #1c1250 0%, #0e0a20 100%);
  box-shadow: 0 30px 60px #10143a4d;
}

.br-brief-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.br-brief-head > span:nth-child(2) {
  flex: 1;
  font-size: 13px;
  color: #b9bbd6;
}

.br-brief-head b {
  display: block;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.br-avatars {
  display: inline-flex;
}

.br-avatars img {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #1c1250;
  object-fit: cover;
}

.br-brief-card h4 {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--white-color);
}

.br-brief-items {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.br-brief-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ffffff1a;
  background: #ffffff0a;
  font-size: 14px;
  color: var(--white-color);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.br-brief-items li:hover {
  border-color: #9d88ff80;
  background: #ffffff14;
}

.br-brief-items li + li {
  margin-top: 12px;
}

.br-brief-items span {
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 11px;
  font-weight: 700;
}

.br-brief-items .bi {
  margin-left: auto;
  color: #b7a6ff;
}

.br-brief-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.br-brief-btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

/* ---------- 9. Brain brief document ---------- */
.br-doc {
  overflow: hidden;
  border-radius: 26px;
  background: var(--white-color);
  box-shadow: 0 30px 70px #05071c80;
}

.br-doc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  background: #f8f7ff;
  border-bottom: 1px solid var(--pale-lavender);
}

.br-doc-head > span:nth-child(2) {
  flex: 1;
  font-size: 13px;
  color: var(--muted-color);
}

.br-doc-head b {
  display: block;
  font-size: 15px;
  color: var(--secondary-color);
}

.br-checked {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.br-checked small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-color);
}

.br-checked .br-avatars img {
  border-color: #f8f7ff;
}

.br-doc-body {
  padding: 28px;
}

.br-doc-body h3 {
  margin-bottom: 22px;
  font-size: 28px;
  font-weight: 700;
  color: var(--secondary-color);
}

.br-doc-label {
  display: block;
  margin: 24px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.br-decisions,
.br-suggest {
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-decisions li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
  background: #f8f7ff;
}

.br-decisions li + li {
  margin-top: 10px;
}

.br-decisions b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--secondary-color);
  font-size: 13px;
  color: var(--white-color);
}

.br-decisions span,
.br-happened span {
  font-size: 13px;
  color: var(--muted-color);
}

.br-decisions strong,
.br-happened strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
}

.br-happened {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.br-happened > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
}

.br-happened img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.br-suggest li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--secondary-color);
}

.br-suggest li + li {
  margin-top: 8px;
}

.br-suggest b {
  color: var(--primary-color);
}

/* Chat beside the brief */
.br-chat {
  padding-top: 40px;
}

.br-bubble {
  max-width: 92%;
  margin-bottom: 18px;
}

.br-bubble small {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b7a6ff;
}

.br-bubble p {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--white-color);
}

.br-bubble-me {
  margin-left: auto;
  text-align: right;
}

.br-bubble-me p {
  display: inline-block;
  border-radius: 16px 16px 4px 16px;
  background: var(--primary-color);
}

.br-bubble-brain p {
  border-radius: 16px 16px 16px 4px;
  border: 1px solid #ffffff26;
  background: #ffffff0d;
}

.br-bubble-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.br-bubble-actions span {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid #ffffff38;
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
}

.br-bubble-actions .is-primary {
  border-color: var(--white-color);
  background: var(--white-color);
  color: var(--secondary-color);
}

.br-chat-note {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #a3a5c4;
}

.br-chat-note .bi {
  color: #b7a6ff;
}

/* ---------- 10. FAQ ---------- */
.br-faq-intro {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.br-faq-intro .br-lead {
  margin-top: 20px;
}

.br-faq.faq-list {
  max-width: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .br-hero-title { font-size: 62px; }
  .br-title { font-size: 44px; }
  .br-agent { grid-template-columns: 180px 1fr; }
  .br-agent-art img { width: 140px; height: 140px; }
  .br-stepcards { gap: 12px; }
  .br-stepcard { padding: 22px 16px; }
}

@media (max-width: 991.98px) {
  .br-section { padding: 80px 0; }
  .br-hero { padding-top: 80px; }
  .br-hero-title { font-size: 48px; letter-spacing: -1.5px; }
  .br-cta-title { font-size: 44px; }
  .br-title { font-size: 38px; }
  .br-net { height: 380px; }
  .br-node-img { width: 86px; height: 86px; }
  .br-agents-hub { display: none; }
  .br-stepcards { grid-template-columns: 1fr; }
  .br-steptrack { display: none; }
  .br-stepcard.is-active { transform: none; }
  .br-faq-intro { position: static; }
}

@media (max-width: 575.98px) {
  .br-section { padding: 60px 0; }
  .br-hero-title { font-size: 36px; letter-spacing: -1px; }
  .br-cta-title { font-size: 32px; }
  .br-hero-text { font-size: 16px; }
  .br-title { font-size: 30px; letter-spacing: -0.5px; }
  .br-lead { font-size: 16px; }
  .br-actions a { width: 100%; justify-content: center; }
  .br-net { height: 300px; }
  .br-node-img { width: 62px; height: 62px; padding: 3px; }
  .br-node-label { font-size: 11px; }
  .br-node-label img { display: none; }
  .br-ring-2 { display: none; }
  .br-orb-lg { width: 80px; height: 80px; }
  .br-agent { grid-template-columns: 1fr; }
  .br-agent-art { height: 180px; }
  .br-agent-body { padding: 24px; }
  .br-web { height: 460px; }
  .br-node-sm .br-node-img { width: 62px; height: 62px; }
  .br-signal { font-size: 10px; }
  .br-segs { display: flex; }
  .br-seg { flex: 1; padding: 12px 10px; font-size: 13px; }
  .br-role-title { font-size: 30px; }
  .br-happened { grid-template-columns: 1fr; }
  .br-doc-head { flex-wrap: wrap; }
  .br-cap-num { font-size: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-orb, .br-ring, .br-net-lines path, .br-spark, .br-node, .br-brief-pop, .br-grad, .br-dot, .br-cap-rings::after {
    animation: none;
  }

  .br-flow-row {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .br-track {
    scroll-behavior: auto;
  }
}

/* Business Brain overview link at the top of the BuzyTeam Brain dropdown */
.mega-link-brain {
  margin-bottom: 8px;
  border-color: var(--pale-lavender);
  background: var(--light-color);
}

.mega-brain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--secondary-color);
}

.mega-brain-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 0;
}

/* Brain hero and final CTA without the network visual */
.br-hero {
  padding-bottom: 120px;
}

@media (max-width: 991.98px) {
  .br-hero {
    padding-bottom: 90px;
  }
}

@media (max-width: 575.98px) {
  .br-hero {
    padding-bottom: 70px;
  }
}

/* Brain hero: deep blue aurora gradient */
.br-hero#brain-hero {
  background:
    radial-gradient(ellipse 22% 30% at 2% 38%, #e6edff 0%, #a9c1ff 22%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 4% 78%, #c9d7ff 0%, #5b8cff 30%, transparent 72%),
    radial-gradient(ellipse 45% 30% at 22% 22%, #1e4fd8cc 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 55% 105%, #1238c6 0%, #0b2391 35%, transparent 75%),
    radial-gradient(ellipse 50% 45% at 30% 60%, #1a46d6 0%, #0a1f7a 45%, transparent 75%),
    linear-gradient(180deg, #000000 0%, #02040f 45%, #050d3a 100%);
}

/* Slow drifting light layer for a living, aurora feel */
.br-hero#brain-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10%;
  background:
    radial-gradient(ellipse 30% 25% at 20% 30%, #3b6bff66 0%, transparent 70%),
    radial-gradient(ellipse 35% 30% at 70% 85%, #1d3fd966 0%, transparent 70%);
  filter: blur(40px);
  animation: br-aurora 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes br-aurora {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4%, -3%) scale(1.08); }
}

/* Keep the grid subtle on the brighter blue */
.br-hero#brain-hero .br-grid {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .br-hero#brain-hero::before {
    animation: none;
  }
}

/* Fix: keep the active card dark in the "A day with your Brain" timeline
   (the white card background was overriding the active state) */
.br-stepper-time .br-stepcard.is-active {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
}

.br-stepper-time .br-stepcard.is-active h3 {
  color: var(--white-color);
}

.br-stepper-time .br-stepcard.is-active .br-quote {
  background: #ffffff1a;
  color: var(--white-color) !important;
}

.br-stepper-time .br-stepcard.is-active .br-step-kicker {
  color: #b7a6ff;
}

/* Feature hero: small perks line under the buttons */
.feature-hero-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #d4d5e8;
}

.feature-hero-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feature-hero-perks .bi {
  color: #c9bbff;
}

/* Task Management: glass cards on a softly coloured background */
#efficient-planning {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#efficient-planning::before,
#efficient-planning::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

#efficient-planning::before {
  top: 20%;
  left: 10%;
  width: 620px;
  height: 520px;
  background: #9d88ff;
  opacity: 0.45;
}

#efficient-planning::after {
  bottom: 5%;
  right: 8%;
  width: 560px;
  height: 460px;
  background: #f0abfc;
  opacity: 0.35;
}

#efficient-planning .team-card {
  border: 1px solid #ffffffcc;
  background: linear-gradient(145deg, #ffffffb3 0%, #ffffff66 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 36px #4b26e714, inset 0 1px 0 #ffffffe6;
}

#efficient-planning .team-card:hover {
  border-color: #ffffff;
  background: linear-gradient(145deg, #ffffffd9 0%, #ffffff8c 100%);
  box-shadow: 0 24px 48px #4b26e726, inset 0 1px 0 #ffffff;
}

#efficient-planning .team-card-media {
  background: #ffffff80;
}

/* ==========================================================
   About us page
   ========================================================== */
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ab-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}

.ab-eyebrow-light {
  color: #c9bbff;
}

.ab-title {
  margin-bottom: 20px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.2px;
  color: var(--secondary-color);
}

.ab-lead {
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted-color);
}

/* Hero collage */
.ab-hero .container {
  position: relative;
}

.ab-collage {
  position: relative;
  padding: 0 0 70px 60px;
}

.ab-collage-main img,
.ab-collage-small img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.ab-collage-main {
  overflow: hidden;
  border-radius: 28px;
  aspect-ratio: 5 / 5.4;
  box-shadow: 0 30px 60px #4b26e72e;
}

.ab-collage-main img {
  height: 100%;
}

.ab-collage-small {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  overflow: hidden;
  border-radius: 22px;
  border: 8px solid var(--white-color);
  aspect-ratio: 1;
  box-shadow: 0 24px 50px #10143a33;
  animation: agent-float 6s ease-in-out infinite;
}

.ab-collage-small img {
  height: 100%;
}

.ab-collage-chip {
  position: absolute;
  right: -10px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: var(--white-color);
  box-shadow: 0 20px 44px #10143a26;
  font-size: 12px;
  color: var(--muted-color);
}

.ab-collage-chip b {
  display: block;
  font-size: 14px;
  color: var(--secondary-color);
}

.ab-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--primary-color);
  color: var(--white-color);
}

/* Story */
.ab-story {
  background: var(--white-color);
}

.ab-story-media {
  position: relative;
  padding: 0 40px 40px 0;
}

.ab-story-media img {
  display: block;
  width: 100%;
  border-radius: 28px;
  aspect-ratio: 5 / 5;
  object-fit: cover;
}

.ab-years {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--primary-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white-color);
  text-align: center;
  box-shadow: 0 24px 50px #4b26e766;
}

.ab-years b {
  display: block;
  font-family: var(--sora-font);
  font-size: 46px;
  line-height: 1;
}

.ab-checks {
  margin-bottom: 26px;
}

/* Purpose */
.ab-purpose {
  background: var(--light-color);
}

.ab-purpose-top {
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid var(--border-color);
}

.ab-statement {
  margin-bottom: 20px;
  font-family: var(--sora-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary-color);
}

.ab-statement span {
  color: var(--primary-color);
}

.ab-mv-item {
  height: 100%;
  padding: 0 40px 0 0;
}

.ab-mv > div:last-child .ab-mv-item {
  padding: 0 0 0 40px;
  border-left: 1px solid var(--border-color);
}

.ab-mv-label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ab-mv-label em {
  margin-right: 8px;
  font-style: normal;
  color: var(--muted-color);
}

.ab-mv-item h3 {
  margin-bottom: 16px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary-color);
}

.ab-mv-item p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

/* Values */
/* Values: sticky intro on the left, numbered value list on the right */
.ab-values {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 45% 60% at 10% 10%, #2f1a86 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 95% 90%, #4b26e74d 0%, transparent 70%),
    var(--secondary-color);
}

.ab-values-intro {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.ab-values .ab-title {
  color: var(--white-color);
}

.ab-values .ab-lead {
  margin-bottom: 34px;
  color: #b9bbd6;
}

.ab-values-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-value {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 14px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ab-value:last-child {
  margin-bottom: 0;
}

/* Purple bar that grows on hover */
.ab-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: #8b74ff;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.ab-value:hover {
  transform: translateX(6px);
  border-color: #8b74ff66;
  background: #ffffff12;
}

.ab-value:hover::before {
  transform: scaleY(1);
}

.ab-value-num {
  flex-shrink: 0;
  width: 34px;
  padding-top: 12px;
  font-family: var(--sora-font);
  font-size: 15px;
  font-weight: 700;
  color: #8b74ff;
}

.ab-value-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #4b26e740;
  font-size: 21px;
  color: #c9bbff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ab-value:hover .ab-value-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.ab-value h3 {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 600;
  color: var(--white-color);
}

.ab-value p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #b9bbd6;
}

@media (max-width: 991.98px) {
  .ab-values-intro {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .ab-value {
    flex-wrap: wrap;
    gap: 14px;
    padding: 22px;
  }

  .ab-value-num {
    width: auto;
  }
}

/* How we work */
.ab-how {
  background: var(--white-color);
}

.ab-how-media {
  position: relative;
  padding: 0 0 50px 60px;
}

.ab-how-media::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 60%;
  border-radius: 28px;
  background: var(--primary-color);
}

.ab-how-media img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 28px;
  aspect-ratio: 5 / 5;
  object-fit: cover;
}

.ab-quote {
  position: absolute;
  left: 0;
  bottom: 70px;
  max-width: 300px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--white-color);
  font-family: var(--sora-font);
  font-size: 17px;
  line-height: 1.45;
  color: var(--secondary-color);
  box-shadow: 0 20px 44px #10143a26;
}

.ab-quote small {
  display: block;
  margin-top: 10px;
  font-family: var(--inter-font);
  font-size: 13px;
  color: var(--muted-color);
}

.ab-principles {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.ab-principles li {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--border-color);
}

.ab-principles b {
  font-family: var(--sora-font);
  font-size: 15px;
  color: var(--primary-color);
}

.ab-principles span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

.ab-principles strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sora-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Impact */
.ab-impact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0;
  background:
    radial-gradient(circle at 95% 15%, #4b26e7 0%, #2f1a86 22%, transparent 48%),
    #10143a;
}

.ab-impact::before,
.ab-impact::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -12%;
  border-radius: 50%;
  border: 1px solid #ffffff14;
}

.ab-impact::before { width: 640px; height: 640px; }
.ab-impact::after { width: 900px; height: 900px; top: -30%; right: -25%; }

.ab-impact-head {
  margin-bottom: 56px;
}

.ab-impact-title {
  margin: 0;
  font-size: 76px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: var(--white-color);
}

.ab-impact-title span {
  color: #c9bbff;
}

.ab-impact-head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #b9bbd6;
}

.ab-impact-item {
  padding-top: 30px;
  border-top: 1px solid #ffffff26;
}

.ab-impact-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid #ffffff38;
  font-size: 18px;
  color: var(--white-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ab-impact-item:hover > span {
  border-color: var(--primary-color);
  background: var(--primary-color);
}

.ab-impact-item h3 {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--white-color);
}

.ab-impact-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #b9bbd6;
}

/* Next level photo cards */
.ab-next {
  background: #f7f5ff;
}

.ab-photo-card {
  position: relative;
  overflow: hidden;
  height: 340px;
  border-radius: 22px;
}

.ab-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ab-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, #10143ae6 100%);
}

.ab-photo-card h3 {
  position: absolute;
  z-index: 1;
  left: 28px;
  right: 28px;
  bottom: 26px;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white-color);
}

.ab-photo-card:hover img {
  transform: scale(1.06);
}

/* Culture */
.ab-culture {
  background: var(--white-color);
}

.ab-culture-head {
  margin-bottom: 50px;
}

.ab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ab-tags li {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ab-gallery {
  display: grid;
  grid-template-columns: 1.15fr 0.6fr 0.32fr;
  grid-template-rows: 320px 300px;
  gap: 24px;
}

.ab-g {
  overflow: hidden;
  border-radius: 24px;
}

.ab-g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ab-g:hover img {
  transform: scale(1.05);
}

.ab-g-1 { grid-row: 1 / 3; grid-column: 1; }
.ab-g-2 { grid-row: 1; grid-column: 2 / 4; }
.ab-g-3 { grid-row: 2; grid-column: 2; }

.ab-g-4 {
  grid-row: 2;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 22px;
  background: linear-gradient(160deg, #6a45f5 0%, #4b26e7 55%, #3a1fb8 100%);
  color: var(--white-color);
}

.ab-g-4 .bi {
  font-size: 22px;
}

.ab-g-4 span {
  font-family: var(--sora-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

/* CTA */
.ab-cta-wrap {
  background: var(--white-color);
}

.ab-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 40px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(135deg, #5a33e0 0%, #4b26e7 45%, #2f1a86 100%);
  box-shadow: 0 30px 70px #4b26e74d;
}

.ab-cta::before,
.ab-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: #ffffff0f;
}

.ab-cta::before { width: 420px; height: 420px; top: -180px; left: -100px; }
.ab-cta::after { width: 360px; height: 360px; bottom: -160px; right: -60px; }

.ab-cta h2 {
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: var(--white-color);
}

.ab-cta p {
  margin-bottom: 32px;
  font-size: 18px;
  color: #e4ddff;
}

.ab-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ab-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border-radius: 50px;
  border: 1px solid #ffffff73;
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ab-btn-outline:hover {
  background: var(--white-color);
  color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .ab-title { font-size: 40px; }
  .ab-impact-title { font-size: 62px; }
}

@media (max-width: 991.98px) {
  .ab-title { font-size: 34px; }
  .ab-statement { font-size: 26px; }
  .ab-mv-item, .ab-mv > div:last-child .ab-mv-item { padding: 0; border-left: 0; }
  .ab-mv > div:last-child .ab-mv-item { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--border-color); }
  .ab-impact { padding: 80px 0; }
  .ab-impact-title { font-size: 50px; }
  .ab-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 240px 240px; }
  .ab-g-1 { grid-row: 1; grid-column: 1 / 3; }
  .ab-g-2 { grid-row: 2; grid-column: 1 / 3; }
  .ab-g-3 { grid-row: 3; grid-column: 1; }
  .ab-g-4 { grid-row: 3; grid-column: 2; }
  .ab-cta h2 { font-size: 40px; }
}

@media (max-width: 575.98px) {
  .ab-title { font-size: 28px; }
  .ab-collage { padding: 0 0 50px 30px; }
  .ab-collage-chip { position: relative; right: auto; bottom: auto; margin-top: 16px; }
  .ab-statement { font-size: 21px; }
  .ab-how-media { padding: 0 0 40px 24px; }
  .ab-quote { position: relative; bottom: auto; margin-top: -30px; }
  .ab-impact-title { font-size: 40px; }
  .ab-photo-card { height: 260px; }
  .ab-cta { padding: 60px 22px; border-radius: 22px; }
  .ab-cta h2 { font-size: 30px; }
  .ab-cta-actions a { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-collage-small { animation: none; }
}

/* ==========================================================
   BuzyTeam Brain page (bb-*)
   ========================================================== */
.bb-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0;
}

.bb-dark {
  background: #070920;
  color: var(--white-color);
}

.bb-navy {
  background: var(--secondary-color);
  color: var(--white-color);
}

.bb-light {
  background: var(--light-color);
}

.bb-white {
  background: var(--white-color);
}

/* Soft brand glows behind dark sections */
.bb-glow-right::before,
.bb-glow-left::before,
.bb-glow-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.bb-glow-right::before {
  right: -260px;
  top: 30%;
  background: radial-gradient(circle, #4b26e74d, transparent 65%);
}

.bb-glow-left::before {
  left: -300px;
  top: 25%;
  background: radial-gradient(circle, #2dd4bf26, transparent 65%);
}

.bb-glow-top::before {
  left: 50%;
  top: -320px;
  transform: translateX(-20%);
  background: radial-gradient(circle, #4b26e766, transparent 65%);
}

/* Heads */
.bb-head {
  margin-bottom: 60px;
}

.bb-head-center {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

.bb-eyebrow-plain {
  margin-bottom: 10px;
  font-size: 12px;
  opacity: 0.65;
}

.bb-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b74ff;
  box-shadow: 0 0 10px #8b74ff;
}

.bb-light .bb-dot,
.bb-white .bb-dot {
  background: var(--primary-color);
  box-shadow: none;
}

.bb-dot-live,
.bb-light .bb-dot-live,
.bb-white .bb-dot-live {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e99;
}

.bb-dot-amber,
.bb-light .bb-dot-amber {
  background: #f5a524;
  box-shadow: 0 0 8px #f5a52499;
}

.bb-dot-grey,
.bb-light .bb-dot-grey {
  background: #a6a9bd;
  box-shadow: none;
}

.bb-title {
  margin: 0;
  font-size: 58px;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white-color);
}

.bb-light .bb-title,
.bb-white .bb-title,
.bb-title-dark {
  color: var(--secondary-color);
}

.bb-title .bb-muted,
.bb-hero-title .bb-muted {
  display: block;
}

.bb-muted {
  color: #ffffff80;
}

.bb-light .bb-muted,
.bb-white .bb-muted,
.bb-title-dark .bb-muted {
  color: #10143a73;
}

.bb-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #ffffffa6;
}

.bb-head-center .bb-lead {
  margin-top: 24px;
}

.bb-lead-wide {
  max-width: 720px;
  margin-top: 24px;
}

.bb-light .bb-lead,
.bb-white .bb-lead {
  color: var(--muted-color);
}

.bb-mono {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff73;
}

.bb-light .bb-mono,
.bb-white .bb-mono {
  color: var(--muted-color);
}

.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-color);
  white-space: nowrap;
}

.bb-badge-light {
  border-color: var(--pale-lavender);
  background: var(--light-color);
  color: var(--secondary-color);
}

/* Hero */
.bb-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 90px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 72%, #4b26e766, transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 80%, #2dd4bf26, transparent 70%),
    #070920;
  color: var(--white-color);
  text-align: center;
}

.bb-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.bb-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  background: #ffffff0d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bb-hero-title {
  margin: 30px 0 28px;
  font-size: 84px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.bb-hero-title > span {
  display: block;
}

.bb-hero-text {
  max-width: 780px;
  margin: 0 auto 36px;
  font-size: 19px;
  line-height: 1.65;
  color: #ffffffb3;
}

.bb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Stats strip */
.bb-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
  padding: 36px 0;
  border-radius: 24px;
  border: 1px solid #ffffff1a;
  background: #0a0d2bcc;
  backdrop-filter: blur(12px);
  text-align: left;
}

.bb-stat {
  padding: 4px 36px;
  border-left: 1px solid #ffffff1a;
}

.bb-stat:first-child {
  border-left: 0;
}

.bb-stat strong {
  display: block;
  font-family: var(--sora-font);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.1;
}

.bb-stat span {
  font-size: 15px;
  color: #ffffffa6;
}

/* How it works: glass stage cards */
.bb-stages {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Colour glows behind the cards so the glass blur has something to frost */
.bb-stages::before,
.bb-stages::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 260px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.bb-stages::before {
  left: 8%;
  top: 10%;
  background: #4b26e799;
}

.bb-stages::after {
  right: 6%;
  bottom: 0;
  background: #2dd4bf40;
}

.bb-stage {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 30px;
  border-radius: 22px;
  border: 1px solid #ffffff1f;
  background: linear-gradient(160deg, #ffffff17, #ffffff05);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 20px 50px #0000004d;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Glass highlight along the top edge */
.bb-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9bbffb3, transparent);
}

.bb-stage:hover {
  transform: translateY(-4px);
  border-color: #8b74ff80;
}

.bb-stage-num {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 1px solid #8b74ff80;
  background: #4b26e726;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #c9bbff;
}

.bb-stage h3 {
  margin-bottom: 14px;
  font-size: 19px;
  font-weight: 500;
}

.bb-stage p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #ffffffa6;
}

/* Four agents */
.bb-agent {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px;
  border-radius: 24px;
  background: var(--white-color);
  color: var(--secondary-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bb-agent:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px #4b26e74d;
}

.bb-agent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.bb-agent-img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.bb-agent h3 {
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 400;
}

.bb-agent > p {
  margin: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-color);
}

.bb-dash-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* Agent card CTA, pinned to the bottom so all four line up */
.bb-agent-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 13px 24px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.bb-agent .bb-dash-list {
  margin-bottom: 28px;
}

.bb-agent-btn .bi {
  transition: transform 0.25s ease;
}

.bb-agent-btn:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.bb-agent-btn:hover .bi {
  transform: translateX(4px);
}

.bb-dash-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.bb-dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-color);
}

/* Domain coverage */
.bb-domain {
  height: 100%;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.bb-domain:hover {
  border-color: #c9bbff;
  transform: translateY(-3px);
}

.bb-domain-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.bb-domain h3 {
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 400;
  color: var(--secondary-color);
}

.bb-domain p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

.bb-domain.is-planned {
  border: 1.5px dashed #b9b0e6;
  background: transparent;
}

.bb-domain.is-planned h3,
.bb-domain.is-planned p {
  opacity: 0.6;
}

.bb-flows {
  margin-top: 80px;
}

.bb-flows-title {
  margin-bottom: 24px;
  font-size: 30px;
  font-weight: 400;
  color: var(--secondary-color);
}

.bb-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
}

.bb-flow .bb-mono {
  margin-right: 4px;
}

.bb-chip {
  padding: 10px 16px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 15px;
  color: var(--secondary-color);
}

.bb-flow .bi {
  color: var(--primary-color);
}

/* Sample briefs */
.bb-brief-slide {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  padding: 50px;
  border-radius: 28px;
  border: 1px solid #ffffff14;
  background: linear-gradient(160deg, #4b26e759, #070920 45%);
}

.bb-brief-slide.is-active {
  animation: bb-brief-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bb-brief-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.bb-brief-side {
  align-self: start;
  position: sticky;
  top: calc(var(--header-height) + 30px);
}

.bb-brief-count {
  font-family: var(--sora-font);
  font-size: 30px;
  font-weight: 300;
  color: #ffffff66;
}

.bb-brief-count span {
  color: var(--white-color);
}

.bb-brief-bars {
  display: flex;
  gap: 6px;
  margin: 12px 0 28px;
}

.bb-brief-bars span {
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: #ffffff2e;
}

.bb-brief-bars span.is-active {
  width: 48px;
  background: #8b74ff;
}

.bb-brief-role {
  margin: 18px 0 10px;
  font-size: 60px;
  font-weight: 300;
}

.bb-brief-time {
  margin-bottom: 22px;
  font-size: 19px;
  color: #c9bbff;
}

.bb-brief-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #ffffffa6;
}

.bb-brief-note {
  font-size: 14px;
  color: #ffffff66;
}

.bb-brief-next {
  cursor: pointer;
}

.bb-brief-card {
  padding: 36px;
  border-radius: 22px;
  border: 1px solid #ffffff14;
  background: #11143a;
  color: var(--white-color);
}

.bb-brief-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.bb-brief-hello {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--white-color);
}

.bb-brief-checked {
  margin-bottom: 22px;
  font-size: 14px;
  color: #ffffff80;
}

.bb-brief-label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff73;
}

.bb-brief-label-accent {
  color: #a996ff;
}

.bb-brief-headline {
  margin-bottom: 0;
  padding-bottom: 26px;
  font-family: var(--sora-font);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--white-color);
}

.bb-brief-block {
  padding: 24px 0 4px;
  border-top: 1px solid #ffffff14;
}

.bb-brief-bullets {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.bb-brief-bullets li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffb3;
}

.bb-brief-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5a524;
}

.bb-brief-row {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffb3;
}

.bb-brief-row strong {
  margin-right: 6px;
  color: var(--white-color);
  font-weight: 600;
}

.bb-brief-actions {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: bb-action;
}

.bb-brief-actions li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 50px;
  border: 1px solid #ffffff14;
  background: #ffffff0a;
  font-size: 15px;
  counter-increment: bb-action;
}

.bb-brief-actions li::before {
  content: counter(bb-action);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
}

.bb-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}

.bb-msg {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
}

.bb-msg span {
  display: block;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.bb-msg-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--primary-color);
}

.bb-msg-brain {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid #ffffff14;
  background: #ffffff0d;
}

.bb-msg-brain span {
  color: #a996ff;
  opacity: 1;
}

/* Brief anatomy */
.bb-anatomy-mock {
  padding: 36px;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 40%, #4b26e766, transparent 60%), var(--secondary-color);
}

.bb-brief-card-mini {
  padding: 26px;
}

.bb-brief-card-mini .bb-brief-headline {
  font-size: 19px;
}

.bb-brief-card-mini .bb-brief-bullets li,
.bb-brief-card-mini .bb-brief-row,
.bb-brief-card-mini .bb-brief-actions li {
  font-size: 14px;
}

.bb-anatomy-badge {
  display: flex;
  width: fit-content;
  margin: 10px 0 20px;
}

.bb-anatomy {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-color);
}

.bb-anatomy li {
  display: flex;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border-color);
  transition: padding-left 0.3s ease;
}

.bb-anatomy li:hover {
  padding-left: 10px;
}

.bb-anatomy .bb-mono {
  flex-shrink: 0;
  padding-top: 8px;
  color: var(--primary-color);
}

.bb-anatomy h3 {
  margin-bottom: 6px;
  font-size: 28px;
  font-weight: 400;
  color: var(--secondary-color);
}

.bb-anatomy p {
  margin: 0;
  font-size: 15px;
  color: var(--muted-color);
}

.bb-anatomy-note {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--muted-color);
}

/* Roles */
.bb-role {
  height: 100%;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid #ffffff14;
  background: linear-gradient(180deg, #ffffff0d, #ffffff05);
  transition: border-color 0.3s ease;
}

.bb-role:hover {
  border-color: #8b74ff80;
}

.bb-role h3 {
  margin: 18px 0 14px;
  font-size: 32px;
  font-weight: 400;
}

.bb-role p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #ffffffa6;
}

.bb-role .bb-role-scope {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ffffff1a;
  color: #ffffffcc;
}

.bb-freq {
  margin-top: 40px;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
}

.bb-freq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}

.bb-freq-text {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--white-color);
}

.bb-freq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border-radius: 50px;
  border: 1px solid #ffffff1a;
  background: #ffffff0a;
}

.bb-freq-pill {
  padding: 10px 18px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #ffffffa6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bb-freq-pill:hover {
  color: var(--white-color);
}

.bb-freq-pill.is-active {
  background: var(--white-color);
  color: var(--secondary-color);
}

.bb-freq-table-wrap {
  border-radius: 16px;
  border: 1px solid #ffffff14;
}

.bb-freq-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}

.bb-freq-table th,
.bb-freq-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #ffffff14;
  color: #ffffffa6;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bb-freq-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff73;
}

.bb-freq-table tbody th {
  font-weight: 600;
  color: var(--white-color);
}

.bb-freq-table tbody tr:last-child th,
.bb-freq-table tbody tr:last-child td {
  border-bottom: 0;
}

.bb-freq-table tbody tr.is-active th,
.bb-freq-table tbody tr.is-active td {
  background: #4b26e740;
  color: var(--white-color);
}

.bb-freq-note {
  margin: 22px 0 0;
  font-size: 14px;
  color: #ffffff80;
}

/* In control: autonomy scale */
.bb-scale {
  margin-bottom: 40px;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
}

.bb-scale-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.bb-levels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.bb-level {
  min-height: 220px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
}

.bb-level-num {
  display: block;
  margin-bottom: 18px;
  font-family: var(--sora-font);
  font-size: 32px;
  font-weight: 300;
  color: #ffffff59;
}

.bb-level strong {
  display: block;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 500;
}

.bb-level p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffffa6;
}

.bb-level.is-default {
  border-color: transparent;
  background: linear-gradient(160deg, #6a4bff, var(--primary-color));
  box-shadow: 0 20px 50px #4b26e773;
}

.bb-level.is-default .bb-level-num {
  color: var(--white-color);
}

.bb-level.is-default p {
  color: #ffffffd9;
}

.bb-level.is-optional {
  border-style: dashed;
  border-color: #ffffff40;
}

.bb-level.is-optional .bb-level-num {
  color: var(--white-color);
}

.bb-scale-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid #f5a52480;
  font-size: 15px;
  font-weight: 500;
  color: var(--white-color);
}

.bb-promise {
  height: 100%;
  padding: 34px;
  border-radius: 24px;
  background: var(--white-color);
  color: var(--secondary-color);
}

.bb-promise-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--pale-lavender);
  font-size: 22px;
  color: var(--primary-color);
}

.bb-promise h3 {
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 400;
}

.bb-promise p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

/* FAQ (split layout) */
.bb-faq-head {
  position: sticky;
  top: calc(var(--header-height) + 30px);
}

.bb-faq-head .section-eyebrow {
  margin-bottom: 20px;
}

/* Final CTA with early access form */
.bb-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 130px 0;
  background: radial-gradient(ellipse 55% 70% at 55% 60%, #4b26e773, transparent 70%), #070920;
  color: var(--white-color);
  text-align: center;
}

.bb-cta-title {
  margin: 0 0 24px;
  font-size: 96px;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.bb-cta-text {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.65;
  color: #ffffffb3;
}

.bb-cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  max-width: 920px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
}

.bb-cta-form input,
.bb-cta-form select {
  width: 100%;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 50px;
  background: #ffffff12;
  font-size: 15px;
  color: var(--white-color);
  outline: none;
  transition: border-color 0.25s ease;
}

.bb-cta-form input::placeholder {
  color: #ffffff8c;
}

.bb-cta-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff99' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.6a.6.6 0 0 1 .8 0L8 10.2l5.6-5.6a.6.6 0 1 1 .8.8l-6 6a.6.6 0 0 1-.8 0l-6-6a.6.6 0 0 1 0-.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  color: #ffffffb3;
}

.bb-cta-form select option {
  color: var(--secondary-color);
}

.bb-cta-form input:focus,
.bb-cta-form select:focus {
  border-color: #8b74ff;
}

.bb-cta-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 50px;
  background: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bb-cta-submit:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-title {
    font-size: 48px;
  }

  .bb-hero-title {
    font-size: 68px;
  }

  .bb-stages {
    grid-template-columns: repeat(3, 1fr);
  }

  .bb-levels {
    grid-template-columns: repeat(3, 1fr);
  }

  .bb-level {
    min-height: 160px;
  }
}

@media (max-width: 991.98px) {
  .bb-section {
    padding: 90px 0;
  }

  .bb-head .col-lg-4 .bb-lead {
    margin-top: 22px;
  }

  .bb-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }

  .bb-stat:nth-child(3) {
    border-left: 0;
  }

  .bb-brief-slide {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .bb-brief-side,
  .bb-faq-head {
    position: static;
  }

  .bb-cta-form {
    grid-template-columns: 1fr 1fr;
    border-radius: 28px;
  }

  .bb-cta-title {
    font-size: 72px;
  }
}

@media (max-width: 767.98px) {
  .bb-title {
    font-size: 36px;
  }

  .bb-hero {
    padding: 90px 0 70px;
  }

  .bb-hero-title {
    font-size: 46px;
  }

  .bb-hero-text {
    font-size: 17px;
  }

  .bb-stat {
    padding: 4px 22px;
  }

  .bb-stat strong {
    font-size: 40px;
  }

  .bb-stages {
    grid-template-columns: 1fr 1fr;
  }

  .bb-levels {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-brief-slide {
    padding: 22px;
  }

  .bb-brief-card {
    padding: 24px;
  }

  .bb-brief-role {
    font-size: 44px;
  }

  .bb-brief-headline {
    font-size: 22px;
  }

  .bb-msg {
    max-width: 92%;
  }

  .bb-freq,
  .bb-scale {
    padding: 24px;
  }

  .bb-freq-pills {
    border-radius: 20px;
  }

  .bb-anatomy h3,
  .bb-domain h3,
  .bb-agent h3 {
    font-size: 24px;
  }

  .bb-cta-form {
    grid-template-columns: 1fr;
  }

  .bb-cta-title {
    font-size: 54px;
  }
}

@media (max-width: 575.98px) {
  .bb-stages {
    grid-template-columns: 1fr;
  }

  .bb-stats {
    grid-template-columns: 1fr;
  }

  .bb-stat,
  .bb-stat:nth-child(3) {
    border-left: 0;
  }

  .bb-agent,
  .bb-promise {
    padding: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-brief-slide.is-active {
    animation: none;
  }
}

/* ==========================================================
   AI Agent pages (ag-*), built on the Brain page bb-* theme
   ========================================================== */

/* Sticky agent sub navigation */
.ag-subnav {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  border-bottom: 1px solid #ffffff14;
  background: #0b0e2be6;
  backdrop-filter: blur(14px);
}

.ag-subnav-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 60px;
}

.ag-subnav-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
}

.ag-subnav-name img {
  border-radius: 50%;
}

.ag-subnav-links {
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ag-subnav-links::-webkit-scrollbar {
  display: none;
}

.ag-subnav-links a {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffffa6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ag-subnav-links a:hover {
  color: var(--white-color);
}

.ag-subnav-links a.is-active {
  background: #ffffff1a;
  color: var(--white-color);
}

.ag-subnav-btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 9px 18px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease;
}

.ag-subnav-btn:hover {
  background: #6a4bff;
  color: var(--white-color);
}

/* Keep anchor targets clear of header + sub nav */
.ag-page section[id] {
  scroll-margin-top: calc(var(--header-height) + 60px);
}

/* Hero (centered, no image) */
.ag-hero {
  padding: 130px 0 120px;
}

.ag-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ag-pill-solid {
  border-color: transparent;
  background: #4b26e766;
}

.ag-accent {
  font-style: normal;
  background: linear-gradient(90deg, #c9bbff, #8b74ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ag-hero-checks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #ffffffa6;
}

.ag-hero-checks .bi {
  margin-right: 6px;
  color: #a996ff;
}

/* Floating HR chips around the hero content */
.ag-hero-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ag-float,
.ag-float-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: ag-float 6s ease-in-out infinite;
}

.ag-float {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0d;
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 500;
  color: var(--white-color);
}

.ag-float-card {
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
  background: var(--white-color);
  box-shadow: 0 20px 40px #00000059;
  text-align: left;
}

.ag-float-card .bi {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--pale-lavender);
  font-size: 18px;
  color: var(--primary-color);
}

.ag-float-card span {
  font-size: 12px;
  color: var(--muted-color);
}

.ag-float-card strong {
  display: block;
  font-size: 14px;
  color: var(--secondary-color);
}

.ag-float-1 { left: 9%; top: 26%; }
.ag-float-2 { right: 9%; top: 22%; animation-delay: -1.5s; }
.ag-float-3 { left: 6%; top: 62%; animation-delay: -3s; }
.ag-float-4 { right: 7%; top: 58%; animation-delay: -4.5s; }
.ag-float-5 { left: 12%; top: 42%; animation-delay: -2s; }
.ag-float-6 { right: 11%; top: 76%; animation-delay: -3.5s; }

@keyframes ag-float {
  50% {
    transform: translateY(-12px);
  }
}

/* Character in an arch frame */
.ag-arch {
  overflow: hidden;
  border-radius: 200px 200px 28px 28px;
  background: var(--pale-lavender);
}

.ag-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chat mock */
.ag-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 30px 70px #4b26e72e;
}

.ag-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.ag-chat-head img {
  border-radius: 50%;
}

.ag-chat-head strong {
  display: block;
  font-size: 15px;
  color: var(--secondary-color);
}

.ag-chat-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted-color);
}

.ag-msg {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
}

.ag-msg-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--primary-color);
  color: var(--white-color);
}

.ag-msg-agent {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  color: var(--secondary-color);
}

.ag-req-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ag-req-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-size: 12px;
  color: var(--muted-color);
}

.ag-req-list strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ag-tag {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--pale-lavender);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: var(--primary-color);
}

.ag-tag-dark {
  background: var(--secondary-color);
  color: var(--white-color);
}

/* Intro */
.ag-intro-visual {
  position: relative;
  padding-left: 22%;
}

.ag-intro-visual .ag-arch {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  aspect-ratio: 3 / 4;
}

.ag-intro-chat {
  position: relative;
  z-index: 1;
}

.ag-lead-gap {
  margin: 24px 0 30px;
}

.ag-feature {
  display: flex;
  gap: 18px;
  margin-bottom: 16px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  transition: border-color 0.3s ease;
}

.ag-feature:hover {
  border-color: #c9bbff;
}

.ag-feature-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-color);
  font-size: 20px;
  color: var(--white-color);
}

.ag-feature h3 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ag-feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

/* Capabilities */
.ag-cap {
  height: 100%;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ag-cap:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px #4b26e71f;
}

.ag-cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.ag-cap-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--pale-lavender);
  font-size: 21px;
  color: var(--primary-color);
}

.ag-cap-num {
  font-family: var(--sora-font);
  font-size: 14px;
  font-weight: 600;
  color: #a996ff;
}

.ag-cap h3 {
  margin-bottom: 18px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary-color);
}

.ag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ag-chips span {
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 14px;
  color: var(--secondary-color);
}

.ag-cap.is-featured {
  border-color: transparent;
  background: radial-gradient(circle at 90% 10%, #4b26e7b3, transparent 60%), var(--secondary-color);
  box-shadow: 0 24px 50px #10143a40;
}

.ag-cap.is-featured .ag-cap-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.ag-cap.is-featured h3 {
  color: var(--white-color);
}

.ag-cap.is-featured .ag-chips span {
  border-color: #ffffff26;
  background: #ffffff0d;
  color: var(--white-color);
}

/* Use cases */
.ag-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 50px;
  padding: 5px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.ag-tabs button {
  padding: 12px 32px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ag-tabs button:hover {
  color: var(--secondary-color);
}

.ag-tabs button.active {
  background: var(--secondary-color);
  color: var(--white-color);
}

.ag-uc-label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ag-uc-title {
  margin-bottom: 24px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary-color);
}

.ag-dot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ag-dot-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  font-size: 13px;
  color: var(--secondary-color);
}

.ag-dot-chips span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.ag-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.ag-flow-step {
  flex: 1;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
}

.ag-flow-step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--secondary-color);
}

.ag-flow-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ag-flow-label img {
  border-radius: 50%;
}

.ag-flow-step.is-action {
  border-color: transparent;
  background: var(--secondary-color);
}

.ag-flow-step.is-action p {
  color: var(--white-color);
}

.ag-flow-step.is-action .ag-flow-label {
  color: #c9bbff;
}

.ag-flow-step.is-result {
  border-color: transparent;
  background: var(--light-color);
}

.ag-flow-arrow {
  align-self: center;
  color: #a996ff;
}

/* Read & Write */
.ag-rw-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 30px;
  padding: 5px;
  border-radius: 50px;
  border: 1px solid #ffffff1f;
  background: #ffffff0a;
}

.ag-rw-toggle button {
  padding: 10px 28px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffffa6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ag-rw-toggle button.is-active {
  background: var(--primary-color);
  color: var(--white-color);
}

.ag-rw {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: stretch;
}

.ag-rw-panel {
  padding: 34px 30px;
  border-radius: 24px;
  border: 1px solid #ffffff14;
  background: linear-gradient(180deg, #ffffff0d, #ffffff05);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.ag-rw[data-active="read"] [data-rw-panel="read"],
.ag-rw[data-active="write"] [data-rw-panel="write"] {
  border-color: #8b74ff80;
  box-shadow: 0 0 60px #4b26e740;
}

.ag-rw[data-active="read"] [data-rw-panel="write"],
.ag-rw[data-active="write"] [data-rw-panel="read"] {
  opacity: 0.55;
}

.ag-rw-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ag-rw-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9bbff;
}

.ag-rw-count {
  font-size: 13px;
  color: #ffffff80;
}

.ag-rw-panel h3 {
  margin-bottom: 26px;
  font-size: 26px;
  font-weight: 400;
}

.ag-rw-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #8b74ff59;
}

.ag-rw-list li {
  position: relative;
  padding: 16px 110px 16px 20px;
  border-bottom: 1px solid #ffffff14;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffd9;
}

.ag-rw-list li > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff99;
}

.ag-rw-list-extra {
  margin-top: 18px;
  border-left: 0;
}

.ag-rw-list-extra li {
  padding: 10px 20px;
  border-bottom: 0;
  font-size: 14px;
  color: #ffffffa6;
}

.ag-confirm {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid #ffffff26;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffffa6;
}

.ag-rw-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ag-rw-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, #8b74ff00, #8b74ff, #8b74ff00);
}

.ag-rw-link span {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 30px;
  border-radius: 50%;
  border: 4px solid var(--primary-color);
  background: var(--white-color);
  box-shadow: 0 0 20px #8b74ff;
  animation: bb-core-pulse 3s ease-in-out infinite;
}

.ag-rw-link em {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff99;
}

.ag-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-top: 30px;
  padding: 22px 26px;
  border-radius: 20px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
}

.ag-control-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid #8b74ff;
  background: #4b26e740;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ag-control p {
  flex: 1;
  min-width: 260px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffa6;
}

.ag-control-stats {
  display: flex;
}

.ag-control-stats div {
  padding: 0 24px;
  border-left: 1px solid #ffffff1a;
}

.ag-control-stats div:first-child {
  border-left: 0;
}

.ag-control-stats strong {
  display: block;
  font-family: var(--sora-font);
  font-size: 26px;
  font-weight: 400;
}

.ag-control-stats span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff99;
}

/* How it works */
.ag-steps {
  position: relative;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.ag-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--secondary-color), var(--primary-color));
  opacity: 0.35;
}

.ag-steps li {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
}

.ag-step-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--secondary-color);
  font-size: 13px;
  font-weight: 700;
  color: var(--white-color);
}

.ag-steps li.is-final .ag-step-num {
  background: var(--primary-color);
  box-shadow: 0 0 0 6px #4b26e726;
}

.ag-steps h3 {
  margin: 6px 0 4px;
  font-size: 21px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ag-steps p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--secondary-color);
}

.ag-confirm-card {
  padding: 16px;
  border-radius: 16px;
  border: 1.5px solid #a996ff;
  background: var(--white-color);
  box-shadow: 0 10px 30px #4b26e71f;
}

.ag-confirm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted-color);
}

.ag-confirm-badge {
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-color);
}

.ag-confirm-card p {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-color);
}

.ag-confirm-btns {
  display: flex;
  gap: 8px;
}

.ag-confirm-btns span {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ag-confirm-btns span.is-primary {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
}

.ag-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
  font-size: 14px;
  color: var(--muted-color);
}

.ag-chat-send {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
}

/* Workspace mock */
.ag-workspace {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 16px;
  padding: 16px;
  border-radius: 28px;
  background: #e9e5ffe6;
  box-shadow: 0 40px 90px #00000066;
}

.ag-ws-main,
.ag-ws-side {
  padding: 26px;
  border-radius: 20px;
  background: var(--white-color);
  color: var(--secondary-color);
}

.ag-ws-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ag-ws-head img {
  border-radius: 50%;
}

.ag-ws-head div > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ag-ws-head strong {
  font-size: 18px;
  font-weight: 600;
}

.ag-ws-review {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
}

.ag-ws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.ag-ws-stats div {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.ag-ws-stats strong {
  display: block;
  font-family: var(--sora-font);
  font-size: 28px;
  color: var(--primary-color);
}

.ag-ws-stats span {
  font-size: 13px;
  color: var(--muted-color);
}

.ag-ws-stats div.is-dark {
  border-color: transparent;
  background: var(--secondary-color);
}

.ag-ws-stats div.is-dark strong,
.ag-ws-stats div.is-dark span {
  color: var(--white-color);
}

.ag-ws-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ag-ws-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.ag-ws-side h3 {
  margin: 8px 0 18px;
  font-size: 20px;
  font-weight: 600;
}

.ag-ws-list {
  margin: 0 0 20px;
}

.ag-ws-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
}

.ag-ws-list dt {
  font-weight: 400;
  color: var(--muted-color);
}

.ag-ws-list dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.ag-ws-perm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--light-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
}

/* Final CTA */
.ag-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0;
  background: radial-gradient(ellipse 45% 70% at 80% 50%, #4b26e780, transparent 70%), #070920;
  color: var(--white-color);
}

.ag-cta-title {
  margin-bottom: 24px;
  font-size: 64px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ag-cta-title span {
  display: block;
  background: linear-gradient(90deg, #c9bbff, #8b74ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ag-cta-text {
  margin-bottom: 34px;
  font-size: 19px;
  line-height: 1.6;
  color: #ffffffb3;
}

.ag-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ag-cta-arch {
  width: min(320px, 80%);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  box-shadow: 0 0 0 12px #ffffff0d, 0 0 120px #4b26e799;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .ag-float-1, .ag-float-3, .ag-float-5 { left: 3%; }
  .ag-float-2, .ag-float-4, .ag-float-6 { right: 3%; }
}

@media (max-width: 1199.98px) {
  .ag-hero-chips {
    display: none;
  }

  .ag-rw {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ag-rw-link {
    display: none;
  }

  .ag-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .ag-subnav-btn {
    display: none;
  }

  .ag-flow {
    flex-direction: column;
  }

  .ag-flow-arrow {
    transform: rotate(90deg);
  }

  .ag-cta-title {
    font-size: 48px;
  }
}

@media (max-width: 767.98px) {
  .ag-subnav-name {
    display: none;
  }

  .ag-hero {
    padding: 90px 0 80px;
  }

  .ag-intro-visual {
    padding-left: 0;
  }

  .ag-intro-visual .ag-arch {
    display: none;
  }

  .ag-uc-title {
    font-size: 26px;
  }

  .ag-tabs button {
    padding: 10px 20px;
  }

  .ag-rw-list li {
    padding-right: 20px;
  }

  .ag-confirm {
    position: static;
    display: inline-block;
    margin-top: 8px;
    transform: none;
  }

  .ag-control-stats div {
    padding: 0 14px;
  }

  .ag-ws-stats {
    grid-template-columns: 1fr;
  }

  .ag-ws-head {
    flex-wrap: wrap;
  }

  .ag-msg {
    max-width: 92%;
  }

  .ag-cta-title {
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-float,
  .ag-float-card,
  .ag-rw-link span {
    animation: none;
  }
}

/* Agent pages: compact Read & Write variant (simple lists, avatar link) */
.ag-rw-compact {
  grid-template-columns: 1fr 140px 1fr;
}

.ag-rw-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ag-rw-head h3 {
  margin: 4px 0 0;
}

.ag-rw-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff14;
  font-size: 20px;
  color: var(--white-color);
}

.ag-rw-icon.is-solid {
  background: var(--primary-color);
}

.ag-rw-simple {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-rw-simple li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #ffffff0d;
  font-size: 15px;
  color: var(--white-color);
}

.ag-rw-simple li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a996ff;
}

.ag-rw-simple em {
  margin-left: auto;
  padding: 3px 12px;
  border-radius: 50px;
  background: var(--white-color);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: var(--primary-color);
}

.ag-rw-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ag-rw-avatar img {
  border-radius: 50%;
  border: 4px solid var(--white-color);
  box-shadow: 0 0 0 8px #4b26e740, 0 0 50px #8b74ffb3;
  animation: bb-core-pulse 3s ease-in-out infinite;
}

.ag-rw-avatar .bi {
  font-size: 24px;
  color: #c9bbff;
}

.ag-control-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 12px 24px 12px 12px;
  border-radius: 50px;
  background: var(--white-color);
}

.ag-control-pill .ag-confirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
}

.ag-control-pill p {
  margin: 0;
  font-size: 15px;
  color: var(--secondary-color);
}

@media (max-width: 1199.98px) {
  .ag-rw-compact {
    grid-template-columns: 1fr;
  }

  .ag-rw-avatar {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .ag-control-pill {
    border-radius: 20px;
    padding: 16px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-rw-avatar img {
    animation: none;
  }
}


/* Agent intro: single image version (no avatar, no coded chat) */
.ag-intro-visual-img {
  padding-left: 0;
}

.ag-intro-visual-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Agent pages: hero background - glowing purple dome rising from the bottom */
.ag-hero {
  background:
    radial-gradient(ellipse 75% 70% at 50% 105%, #4b26e7cc 0%, #2e1490 40%, #1a0b4f 65%, transparent 85%),
    linear-gradient(180deg, #08051a 0%, #0f0828 50%, #180b42 100%);
}

/* The dome itself, soft and blurred */
.ag-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -50%;
  width: min(1100px, 92%);
  height: 95%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 42%, #e6dcff 0%, #b997ff 18%, #8250ff 38%, #5a2ef0 58%, #4b26e700 76%);
  filter: blur(36px);
  opacity: 0.9;
  pointer-events: none;
}

/* Faint horizontal light bands across the dome */
.ag-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: min(900px, 80%);
  height: 70%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, transparent 0 34px, #ffffff1f 44px, transparent 58px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* ==========================================================
   Free trial popup (tr-*), opened from every "Free 14-Day Trial" button
   ========================================================== */
.tr-modal .modal-dialog {
  max-width: 1000px;
}

.tr-modal .modal-content {
  overflow: hidden;
  border: 1px solid #ffffffb3;
  border-radius: 24px;
  background: #ece8ff;
  box-shadow: 0 40px 100px #10143a59;
}

.tr-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 600px;
}

/* Left: brand panel */
.tr-side {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 44px 40px;
  background:
    radial-gradient(ellipse 80% 50% at 0% 100%, #ffffff1f 0%, transparent 60%),
    linear-gradient(160deg, #5a33f0 0%, #4b26e7 40%, #2a1290 100%);
  color: var(--white-color);
}

.tr-side::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%;
  bottom: -35%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff14;
}

.tr-logo {
  display: block;
  width: 130px;
  margin-bottom: 28px;
  filter: brightness(0) invert(1);
}

.tr-side h2 {
  margin-bottom: 14px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white-color);
}

.tr-side p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffd9;
}

/* Floating glass cards */
.tr-visual {
  position: relative;
  height: 290px;
  margin-top: 40px;
}

.tr-card {
  position: absolute;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #ffffff59;
  background: linear-gradient(160deg, #ffffffd9, #ffffffa6);
  box-shadow: 0 20px 40px #1c0c6b4d;
  backdrop-filter: blur(8px);
  color: var(--secondary-color);
  animation: tr-float 6s ease-in-out infinite;
}

.tr-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
}

.tr-card-title .bi {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--primary-color);
  font-size: 12px;
  color: var(--white-color);
}

.tr-card-chart {
  top: 0;
  right: 0;
  width: 190px;
  transform: rotate(6deg);
}

.tr-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 70px;
}

.tr-bars span {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #8b74ff, #4b26e7);
}

.tr-card-team {
  top: 90px;
  left: 0;
  width: 170px;
  animation-delay: -2s;
}

.tr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.tr-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f2d6c9;
  font-size: 9px;
  font-weight: 700;
  color: var(--secondary-color);
}

.tr-row:nth-child(3) .tr-avatar { background: #cfd8f7; }
.tr-row:nth-child(4) .tr-avatar { background: #e9cbe0; }

.tr-line {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: #10143a1a;
}

.tr-status {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.tr-status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.tr-status.is-working { color: #16a34a; }
.tr-status.is-meeting { color: var(--primary-color); }

.tr-card-attendance {
  bottom: 0;
  left: 110px;
  width: 170px;
  transform: rotate(8deg);
  animation-delay: -4s;
}

.tr-stack {
  display: flex;
  align-items: center;
}

.tr-stack .tr-avatar {
  margin-left: -6px;
  border: 2px solid var(--white-color);
}

.tr-stack .tr-avatar:first-child {
  margin-left: 0;
}

.tr-stack .tr-more {
  background: var(--white-color);
  border-color: var(--pale-lavender);
  font-size: 8px;
}

.tr-orb {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #c9bbff 60%, #8b74ff);
  box-shadow: 0 0 20px #ffffff99;
}

.tr-orb-1 { top: 10px; left: 20px; }
.tr-orb-2 { bottom: 70px; right: 40px; width: 16px; height: 16px; }

@keyframes tr-float {
  50% {
    translate: 0 -8px;
  }
}

/* Right: form panel */
.tr-main {
  position: relative;
  margin: 18px;
  padding: 36px 40px 30px;
  border-radius: 18px;
  background: var(--white-color);
}

.tr-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--pale-lavender);
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 6px 16px #10143a1f;
  font-size: 16px;
  color: var(--secondary-color);
  transition: background-color 0.2s ease;
}

.tr-close:hover {
  background: var(--light-color);
}

.tr-main h2 {
  margin-bottom: 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--secondary-color);
}

.tr-main h2 span {
  color: var(--primary-color);
}

.tr-sub {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--muted-color);
}

.tr-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
}

.tr-field {
  min-width: 0;
}

.tr-field.is-full {
  grid-column: 1 / -1;
}

.tr-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary-color);
}

.tr-field label em {
  font-style: normal;
  color: var(--primary-color);
}

.tr-input {
  position: relative;
}

.tr-input > .bi {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted-color);
  pointer-events: none;
}

.tr-input input,
.tr-input select {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid #e3e1ee;
  border-radius: 10px;
  background-color: var(--white-color);
  font-size: 14px;
  color: var(--secondary-color);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tr-input select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2310143a' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.6a.6.6 0 0 1 .8 0L8 10.2l5.6-5.6a.6.6 0 1 1 .8.8l-6 6a.6.6 0 0 1-.8 0l-6-6a.6.6 0 0 1 0-.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.tr-input input::placeholder {
  color: #9a9cb3;
}

.tr-input input:focus,
.tr-input select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px #4b26e71f;
}

.tr-field.is-invalid input,
.tr-field.is-invalid select {
  border-color: #dc2626;
}

.tr-error {
  display: none;
  margin-top: 5px;
  font-size: 12px;
  color: #dc2626;
}

.tr-field.is-invalid .tr-error {
  display: block;
}

.tr-phone {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}

.tr-phone .tr-code select {
  padding-left: 14px;
}

.tr-terms {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted-color);
}

.tr-terms input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
}

.tr-terms a {
  color: var(--primary-color);
  text-decoration: underline;
}

.tr-terms.is-invalid {
  color: #dc2626;
}

.tr-submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--primary-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.2s ease;
}

.tr-submit:hover {
  background: #3d1dc4;
}

.tr-submit .bi {
  transition: transform 0.2s ease;
}

.tr-submit:hover .bi {
  transform: translateX(4px);
}

.tr-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted-color);
}

.tr-note .bi {
  margin-right: 4px;
  color: #16a34a;
}

/* Success state */
.tr-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  text-align: center;
}

.tr-success-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--pale-lavender);
  font-size: 34px;
  color: var(--primary-color);
}

.tr-success p {
  max-width: 380px;
  font-size: 15px;
  color: var(--muted-color);
}

@media (max-width: 991.98px) {
  .tr-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tr-side {
    padding: 32px;
  }

  .tr-visual {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .tr-main {
    margin: 10px;
    padding: 28px 20px 22px;
  }

  .tr-form {
    grid-template-columns: 1fr;
  }

  .tr-side h2 {
    font-size: 24px;
  }

  .tr-main h2 {
    font-size: 22px;
  }

  .tr-close {
    top: 6px;
    right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-card {
    animation: none;
  }
}

/* Brain hero: agents connected to the Business Brain hub */
.bb-network {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  height: 320px;
  margin: 60px auto 0;
}

.bb-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bb-network-lines path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.bb-net-base path {
  stroke-width: 1.5;
}

/* Short bright segments travelling from each agent into the hub */
.bb-net-pulse path {
  stroke: #e6dcff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 40 400;
  stroke-dashoffset: 440;
  filter: drop-shadow(0 0 6px #a996ff);
  animation: bb-net-flow 3.2s linear infinite;
}

.bb-net-pulse path:nth-child(2) { animation-delay: -0.8s; }
.bb-net-pulse path:nth-child(3) { animation-delay: -1.6s; }
.bb-net-pulse path:nth-child(4) { animation-delay: -2.4s; }

@keyframes bb-net-flow {
  to {
    stroke-dashoffset: 0;
  }
}

.bb-node {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 210px;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  border: 1px solid #ffffff26;
  background: #ffffff12;
  backdrop-filter: blur(10px);
  text-align: left;
  color: var(--white-color);
  transform: translateY(-50%);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.bb-node:hover {
  border-color: #a996ff;
  background: #ffffff1f;
  box-shadow: 0 0 30px #4b26e766;
  color: var(--white-color);
}

.bb-node img {
  flex-shrink: 0;
  border-radius: 12px;
}

.bb-node strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.bb-node em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-style: normal;
  color: #ffffffa6;
}

/* Node positions match the SVG line ends (230 / 770 of 1000, 80 / 240 of 320) */
.bb-node-1 { left: 0; top: 25%; width: 23%; min-width: 200px; }
.bb-node-2 { left: 0; top: 75%; width: 23%; min-width: 200px; }
.bb-node-3 { right: 0; top: 25%; width: 23%; min-width: 200px; }
.bb-node-4 { right: 0; top: 75%; width: 23%; min-width: 200px; }

.bb-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.bb-hub-core {
  position: relative;
  z-index: 1;
  display: block;
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #c9bbff99;
  background: #0b0e2b;
  box-shadow: 0 0 0 8px #4b26e726, 0 0 60px #4b26e7b3;
}

.bb-hub-core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}

.bb-hub-ring {
  position: absolute;
  top: 65px;
  left: 50%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid #a996ff80;
  transform: translate(-50%, -50%);
  animation: bb-hub-ripple 3s ease-out infinite;
  pointer-events: none;
}

.bb-hub-ring-2 {
  animation-delay: -1.5s;
}

@keyframes bb-hub-ripple {
  from {
    width: 130px;
    height: 130px;
    opacity: 0.9;
  }
  to {
    width: 260px;
    height: 260px;
    opacity: 0;
  }
}

.bb-hub-label {
  margin-top: 14px;
  padding: 6px 22px;
  /* border-radius: 50px; */
  border: 1px solid #ffffff26;
  background: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  text-transform: uppercase;
  white-space: nowrap;
}

.bb-network + .bb-stats {
  margin-top: 60px;
}

/* Tablet and phone: hub on top, agents in a 2 x 2 grid, no lines */
@media (max-width: 991.98px) {
  .bb-network {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: auto;
    margin-top: 50px;
  }

  .bb-network-lines {
    display: none;
  }

  .bb-hub {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 20px;
    transform: none;
  }

  .bb-node,
  .bb-node-1,
  .bb-node-2,
  .bb-node-3,
  .bb-node-4 {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .bb-network {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-net-pulse path,
  .bb-hub-ring {
    animation: none;
  }

  .bb-net-pulse {
    display: none;
  }
}

/* ==========================================================
   Brain page typography: aligned with the site theme
   Headings Sora (bold), body Inter, brand purple accents
   instead of thin weights and grey second lines.
   ========================================================== */
.brain-page {
  --bp-text-dark: #ffffffb8;
  --bp-text-light: var(--muted-color);
  --bp-accent-dark: #b9a6ff;
}

/* Section headings */
.brain-page .bb-title,
.brain-page .bb-hero-title,
.brain-page .bb-cta-title,
.brain-page .bb-brief-role,
.brain-page .bb-stat strong {
  font-family: var(--sora-font);
  font-weight: 700;
}

.brain-page .bb-title {
  font-size: 46px;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

.brain-page .bb-hero-title {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: -2px;
}

/* Second line of a heading: brand accent rather than grey */
.brain-page .bb-muted {
  color: var(--bp-accent-dark);
}

.brain-page .bb-light .bb-muted,
.brain-page .bb-white .bb-muted {
  color: var(--primary-color);
}

/* Lead / intro paragraphs */
.brain-page .bb-lead,
.brain-page .bb-hero-text,
.brain-page .bb-cta-text {
  font-family: var(--inter-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bp-text-dark);
}

.brain-page .bb-hero-text {
  font-size: 18px;
}

.brain-page .bb-light .bb-lead,
.brain-page .bb-white .bb-lead {
  color: var(--bp-text-light);
}

/* Eyebrows */
.brain-page .bb-eyebrow,
.brain-page .bb-status,
.brain-page .bb-hub-label {
  font-family: var(--inter-font);
  font-weight: 600;
}

.brain-page .bb-eyebrow {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #c9bbff;
  opacity: 1;
}

.brain-page .bb-light .bb-eyebrow,
.brain-page .bb-white .bb-eyebrow {
  color: var(--primary-color);
}

.brain-page .bb-eyebrow-plain {
  font-size: 12px;
  color: var(--muted-color);
}

/* Stats strip */
.brain-page .bb-stat strong {
  font-size: 44px;
  letter-spacing: -1px;
}

.brain-page .bb-stat span {
  font-size: 15px;
  color: var(--bp-text-dark);
}

/* Card and item headings */
.brain-page .bb-stage h3,
.brain-page .bb-agent h3,
.brain-page .bb-domain h3,
.brain-page .bb-flows-title {
  font-family: var(--sora-font);
  font-weight: 600;
  letter-spacing: -0.3px;
}

.brain-page .bb-stage h3 {
  font-size: 19px;
  color: var(--white-color);
}

.brain-page .bb-agent h3 {
  font-size: 24px;
  color: var(--secondary-color);
}

.brain-page .bb-domain h3 {
  font-size: 22px;
  color: var(--secondary-color);
}

.brain-page .bb-flows-title {
  font-size: 26px;
  color: var(--secondary-color);
}

/* Card body text */
.brain-page .bb-stage p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bp-text-dark);
}

.brain-page .bb-agent > p,
.brain-page .bb-domain p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bp-text-light);
}

.brain-page .bb-dash-list li {
  font-size: 15px;
  color: var(--secondary-color);
}

.brain-page .bb-chip {
  font-size: 14px;
  font-weight: 500;
}

/* Sample briefs */
.brain-page .bb-brief-role {
  font-size: 48px;
  letter-spacing: -1px;
}

.brain-page .bb-brief-count {
  font-family: var(--sora-font);
  font-weight: 600;
}

.brain-page .bb-brief-time {
  font-weight: 600;
  color: var(--bp-accent-dark);
}

.brain-page .bb-brief-desc {
  font-size: 15px;
  color: var(--bp-text-dark);
}

.brain-page .bb-brief-headline {
  font-family: var(--sora-font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.brain-page .bb-brief-label {
  font-family: var(--inter-font);
  font-weight: 600;
  letter-spacing: 1.5px;
}

.brain-page .bb-brief-label-accent {
  color: var(--bp-accent-dark);
}

/* Final CTA */
.brain-page .bb-cta-title {
  font-size: 72px;
  letter-spacing: -2px;
}

@media (max-width: 1199.98px) {
  .brain-page .bb-hero-title { font-size: 60px; }
  .brain-page .bb-title { font-size: 40px; }
}

@media (max-width: 991.98px) {
  .brain-page .bb-cta-title { font-size: 56px; }
  .brain-page .bb-title { font-size: 34px; }
}

@media (max-width: 767.98px) {
  .brain-page .bb-hero-title { font-size: 42px; letter-spacing: -1px; }
  .brain-page .bb-title { font-size: 30px; letter-spacing: -0.8px; }
  .brain-page .bb-cta-title { font-size: 44px; }
  .brain-page .bb-brief-role { font-size: 38px; }
  .brain-page .bb-brief-headline { font-size: 20px; }
  .brain-page .bb-stat strong { font-size: 36px; }
}

@media (max-width: 575.98px) {
  .brain-page .bb-title { font-size: 28px; }
}

/* Brain hub: show the BuzyTeam Brain icon whole, centred in the glowing circle */
.bb-hub-core {
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #2a1a7a 0%, #0b0e2b 75%);
}

.bb-hub-core img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  transform: none;
  border-radius: 18px;
  filter: drop-shadow(0 6px 18px #4b26e799);
}