@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); */
}

/* Wider site container on large screens (Bootstrap default is 1320px) */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1400px;
  }
}

/* ==========================================================
   Top bar (BuzyTeam Brain announcement)
   ========================================================== */
.top-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 35% 160% at 50% 0%, #4b26e766, transparent 70%),
    linear-gradient(90deg, #0b0d29, var(--secondary-color) 50%, #0b0d29);
  color: #ffffffcc;
  transition: margin-top 0.35s ease, opacity 0.35s ease;
  padding: 4px 0;
}

/* Soft light sweep across the bar */
.top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, #ffffff12 50%, transparent 70%);
  transform: translateX(-100%);
  animation: top-bar-sweep 7s ease-in-out infinite;
}

/* Animated gradient line along the bottom edge */
.top-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7c5cff, #22d3ee, #a78bfa, transparent);
  background-size: 200% 100%;
  animation: top-bar-line 6s linear infinite;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 42px;
  padding: 6px 40px;
  font-size: 15px;
  text-align: center;
}

.top-bar-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 16px;
  border-radius: 50px;
  background: linear-gradient(90deg, #8b6cff 0%, #c58bb0 55%, #f6a95a 100%);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-color);
  box-shadow: 0 4px 14px #8b6cff40;
}

.top-bar-text {
  margin: 0;
  color: #ffffffcc;
}

.top-bar-name {
  font-weight: 700;
  background: linear-gradient(90deg, #c9bbff, #67e8f9, #c9bbff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: top-bar-line 5s linear infinite;
}

.top-bar-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  border-radius: 50px;
  border: 1px solid #ffffff2e;
  background: #ffffff14;
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.top-bar-link-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 12px;
  transition: transform 0.25s ease;
}

.top-bar-link:hover,
.top-bar-link:focus-visible {
  border-color: #a78bfa;
  background: #4b26e766;
  box-shadow: 0 0 18px #7c5cff66;
  color: var(--white-color);
}

.top-bar-link:hover .top-bar-link-arrow,
.top-bar-link:focus-visible .top-bar-link-arrow {
  transform: translateX(3px);
}

.top-bar-close {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  color: #ffffff99;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.top-bar-close:hover,
.top-bar-close:focus-visible {
  background: #ffffff1a;
  color: var(--white-color);
}

/* Dismissed: slide the bar up out of view */
.top-bar.is-closing {
  opacity: 0;
}

.top-bar.is-hidden {
  display: none;
}

@keyframes top-bar-sweep {
  0%,
  55% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes top-bar-line {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-bar::before,
  .top-bar::after,
  .top-bar-name {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .top-bar-text {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .top-bar-inner {
    gap: 10px;
    padding: 6px 34px;
    font-size: 13px;
  }

  .top-bar-badge {
    display: none;
  }

  .top-bar-close {
    right: 8px;
  }
}

/* ==========================================================
   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.menu-link-ai .bi-chevron-down {
    margin-left: auto;
  }
}

.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 */
.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);
}

/* AI Meeting Notetaker keeps its sparkle on a soft gradient tile */
.mega-icon-ai {
  background: linear-gradient(140deg, #efeaff, #e2dbff);
}

.mega-link.has-icon:hover .mega-icon-ai {
  background: linear-gradient(140deg, #e2dbff, #cfc4ff);
}

.mega-link-body {
  min-width: 0;
}

/* 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: 10px 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);
}

/* ==========================================================
   BuzyTeam Brain flagship button + hover preview (header)
   ========================================================== */
@property --brain-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.brain-cta {
  position: relative;
  display: flex;
  align-items: center;
}

.brain-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  height: 42px;
  padding: 0 18px 0 5px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--secondary-color);
  transition: box-shadow 0.3s ease;
}

/* Rotating gradient border */
.brain-pill::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--brain-angle), #4b26e7, #22d3ee, #a78bfa, #f6a95a, #4b26e7);
  animation: brain-angle 4s linear infinite;
}

/* Gradient inner fill (matches the INTRODUCING pill) */
.brain-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pale-lavender);
  /* background: linear-gradient(90deg, #8b6cff 0%, #c58bb0 55%, #f6a95a 100%); */
}

/* Soft glow behind */
.brain-pill-glow {
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from var(--brain-angle), #4b26e7, #22d3ee, #a78bfa, #f6a95a, #4b26e7);
  filter: blur(12px);
  opacity: 0.45;
  animation: brain-angle 4s linear infinite;
  transition: opacity 0.3s ease;
}

.brain-pill-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff59;
  box-shadow: inset 0 0 0 1px #ffffff80;
}

.brain-pill-logo img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  transition: transform 0.35s ease;
}

.brain-pill-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--white-color);
  animation: brain-ping 2.4s ease-out infinite;
}

.brain-pill-label {
  font-weight: 700;
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--secondary-color) 38%, #4b26e7 50%, var(--secondary-color) 62%, var(--secondary-color) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brain-shimmer 4s linear infinite;
}

.brain-pill:hover,
.brain-pill:focus-visible,
.brain-cta:focus-within .brain-pill {
  box-shadow: 0 10px 30px #c58bb066;
  color: var(--secondary-color);
}

.brain-pill:hover .brain-pill-glow,
.brain-pill:focus-visible .brain-pill-glow,
.brain-cta:focus-within .brain-pill-glow {
  opacity: 0.85;
}


.brain-pill:focus-visible .brain-pill-logo img {
  transform: rotate(-8deg) scale(1.08);
}

.brain-pill:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
}

/* Compact (icon-only) version */
.brain-pill.is-compact {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* ---------- Hover preview card ---------- */
.brain-pop {
  position: absolute;
  top: calc(100% + 16px);
  right: 50%;
  z-index: 30;
  width: 330px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #ffffff1a;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #4b26e752, transparent 70%),
    var(--secondary-color);
  box-shadow: 0 30px 60px #10143a59;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Hover bridge across the gap */
.brain-pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

/* Pointer */
.brain-pop::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-top: 1px solid #ffffff1a;
  border-left: 1px solid #ffffff1a;
  background: #1d1a5a;
  transform: translateX(-50%) rotate(45deg);
}

.brain-cta:hover .brain-pop,
.brain-cta:focus-within .brain-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, 0);
}

.brain-pop-net {
  position: relative;
  height: 140px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #ffffff12;
  background:
    radial-gradient(circle at 50% 50%, #4b26e740, transparent 60%),
    radial-gradient(#ffffff14 1px, transparent 1px) 0 0 / 14px 14px;
}

.brain-pop-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
}

.brain-pop-lines path {
  stroke: #a78bfa55;
  stroke-width: 1.5;
}

.brain-pop-lines path.is-flow {
  stroke: #67e8f9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 14;
  animation: brain-flow 1.4s linear infinite;
}

.brain-node {
  position: absolute;
  width: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 0 0 3px #ffffff14;
  animation: brain-node 4s ease-in-out infinite;
}

.brain-node img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.brain-node-1 { left: 19px; top: 17px; }
.brain-node-2 { left: 19px; top: 89px; animation-delay: 1s; }
.brain-node-3 { left: 241px; top: 17px; animation-delay: 2s; }
.brain-node-4 { left: 241px; top: 89px; animation-delay: 3s; }

.brain-core {
  position: absolute;
  isolation: isolate;
  left: 120px;
  top: 43px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--secondary-color);
  box-shadow: 0 0 24px #4b26e7aa;
}

.brain-core::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from var(--brain-angle), #22d3ee, #a78bfa, #4b26e7, transparent 70%, #22d3ee);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: brain-angle 2.4s linear infinite;
}

.brain-core img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.brain-pop-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 50px;
  background: linear-gradient(90deg, #8b6cff 0%, #c58bb0 55%, #f6a95a 100%);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-color);
}

.brain-pop-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sora-font);
  font-size: 19px;
  font-weight: 700;
  color: var(--white-color);
}

.brain-pop-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #ffffffb3;
}

.brain-pop-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 16px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.brain-pop-link span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff26;
  transition: transform 0.25s ease;
}

.brain-pop-link:hover,
.brain-pop-link:focus-visible {
  background: #5d3af0;
  box-shadow: 0 8px 22px #4b26e766;
  color: var(--white-color);
}

.brain-pop-link:hover span,
.brain-pop-link:focus-visible span {
  transform: translateX(3px);
}

@keyframes brain-angle {
  to {
    --brain-angle: 360deg;
  }
}

@keyframes brain-shimmer {
  to {
    background-position: -250% 0;
  }
}

@keyframes brain-ping {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes brain-flow {
  to {
    stroke-dashoffset: -36;
  }
}

@keyframes brain-node {
  0%,
  70%,
  100% {
    box-shadow: 0 0 0 3px #ffffff14;
  }

  80% {
    box-shadow: 0 0 0 3px #67e8f9, 0 0 18px 4px #67e8f988;
  }
}

/* Smaller desktops: icon-only pill */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .header-actions .brain-pill {
    justify-content: center;
    width: 44px;
    padding: 0;
  }

  .header-actions .brain-pill-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brain-pill::before,
  .brain-pill-glow,
  .brain-pill-logo::after,
  .brain-pill-label,
  .brain-pop-lines path.is-flow,
  .brain-node,
  .brain-core::before {
    animation: none;
  }
}

/* Mobile header actions (shown beside the toggle below 992px) */
.header-actions-mobile {
  display: none;
}

/* 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: 14px;
    margin-right: 12px;
  }

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

  .header-actions {
    gap: 14px;
  }

  .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;
    border: none;
  }

  .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;
  }

  .header-inner {
    gap: 14px;
  }

  .header-actions-mobile {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
  }

  .header-actions-mobile .btn-demo {
    padding: 8px 18px;
    font-size: 14px;
    white-space: nowrap;
  }

  .header-actions-mobile .login-link {
    font-size: 15px;
    padding: 0;
    border: 0;
  }

  .header-actions-mobile + .nav-toggle {
    margin-left: 0;
  }

  /* Both buttons sit in the header bar, so the drawer doesn't repeat them */
  .main-nav .header-actions {
    display: none;
  }
}

/* Mobile: Book A Demo only in the header bar, Login moves back into the drawer */
@media (max-width: 767.98px) {
  .header-actions-mobile .login-link {
    display: none;
  }

  .main-nav .header-actions {
    display: flex;
  }

  .main-nav .header-actions .btn-demo,
  .main-nav .header-actions .brain-cta {
    display: none;
  }

  .header-actions-mobile {
    gap: 10px;
  }

  .header-actions-mobile .brain-pill.is-compact {
    width: 38px;
    height: 38px;
  }

  .header-actions-mobile .brain-pill-logo {
    width: 30px;
    height: 30px;
  }

  .header-inner {
    gap: 10px;
  }

  .header-actions-mobile .btn-demo {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@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: 64px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
  color: var(--secondary-color);
  margin-bottom: 20px;
  position: relative;
}

.hero-title-accent {
  display: block;
  font-family: var(--serif-font);
  font-style: italic;
  font-weight: 400;
  font-size: 58px;
  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: 28px;
  left: 38px;
}

@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;
  display: flex;
  justify-content: center;
}

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

.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 */
/* Before / after comparison */
.role-compare {
  position: relative;
}

.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 34px 32px;
  border-radius: 24px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.role-card-without {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 14px 40px #10143a0d;
}

.role-card-with {
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0%, #6a4bffb3 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, #4b26e766 0%, transparent 50%),
    var(--secondary-color);
  box-shadow: 0 30px 70px #4b26e740;
}

/* Faint grid texture on the featured card */
.role-card-with::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.role-card:hover {
  transform: translateY(-4px);
}

.role-card-without:hover {
  box-shadow: 0 22px 50px #10143a14;
}

.role-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}

.role-card-with .role-card-head {
  border-bottom-color: #ffffff1a;
}

.role-card-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fdecec;
  font-size: 21px;
  color: #e5484d;
}

.role-card-icon img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 20px #4b26e780;
}

.role-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--secondary-color);
}

.role-card-with .role-card-title {
  color: var(--white-color);
}

.role-card-count {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 50px;
  background: #f6f6f9;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted-color);
}

.role-card-with .role-card-count {
  background: #ffffff14;
  color: #e6dcff;
}

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

.role-points li {
  position: relative;
  padding: 12px 16px 12px 46px;
  border-radius: 12px;
  background: #f8f8fb;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted-color);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

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

.role-points li:hover {
  transform: translateX(4px);
}

/* List icons: red cross for "Without", lavender patch check for "With" */
.role-points li > .bi {
  position: absolute;
  left: 16px;
  top: 14px;
  font-size: 17px;
  line-height: 1;
  color: #e5484d;
}

.role-points-with li {
  background: #ffffff0d;
  color: #ffffffe0;
}

.role-points-with li:hover {
  background: #ffffff17;
}

.role-points-with li > .bi {
  color: #b9a6ff;
}

/* Points fade in one by one when a tab opens */
.role-content .tab-pane.show .role-points li {
  animation: role-point-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.role-points li:nth-child(2) { animation-delay: 0.05s; }
.role-points li:nth-child(3) { animation-delay: 0.1s; }
.role-points li:nth-child(4) { animation-delay: 0.15s; }
.role-points li:nth-child(5) { animation-delay: 0.2s; }
.role-points li:nth-child(6) { animation-delay: 0.25s; }
.role-points li:nth-child(7) { animation-delay: 0.3s; }
.role-points li:nth-child(8) { animation-delay: 0.35s; }

@keyframes role-point-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Arrow badge between the two cards */
.role-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 6px solid var(--white-color);
  background: var(--primary-color);
  box-shadow: 0 10px 30px #4b26e766;
  font-size: 20px;
  color: var(--white-color);
  transform: translate(-50%, -50%);
}

.role-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.role-points + .role-card-cta {
  margin-top: 28px;
}

.role-card-cta:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.role-card-cta .bi {
  transition: transform 0.25s ease;
}

.role-card-cta:hover .bi {
  transform: translateX(4px);
}

@media (max-width: 991.98px) {
  .role-vs {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-content .tab-pane.show .role-points li {
    animation: none;
  }
}

@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;
  }
}

@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;
  }
}

/* ==========================================================
   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;
}

/* Platform app pages: rounded hero banner */
.pf-app-hero .feature-hero-img {
  border-radius: 20px;
}

@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;
}

/* Non-interactive feature list (static image beside it) */
.feature-item.is-static {
  cursor: default;
}

.feature-item.is-static:hover {
  border-color: var(--border-color);
}

/* 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: 900px;
  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 - 1400px) / 2 + 12px)) 10px;
  scroll-padding-left: max(12px, calc((80vw - 1400px) / 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: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--white-color);
  margin-bottom: 14px;
}

.agent-card-text {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  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: 12px;
  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 (bento layout)
   ========================================================== */
.ai-every {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 45% 40% at 85% 10%, #4b26e72e, transparent 70%),
    radial-gradient(ellipse 40% 35% at 5% 90%, #a78bfa38, transparent 70%),
    linear-gradient(180deg, #f3f1ff 0%, #ebe7ff 100%);
}

/* Faint dot grid */
.ai-every::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(#4b26e71f 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.ai-every-head {
  margin-bottom: 52px;
}

.ai-every-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid #4b26e733;
  background: var(--white-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
  box-shadow: 0 6px 18px #4b26e714;
}

.ai-every-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 0 4px #4b26e726;
}

.ai-every-title {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--secondary-color);
}

.ai-every-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted-color);
}

.every-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* display: flex; */
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid #e3ddff;
  background: var(--white-color);
  box-shadow: 0 14px 34px #4b26e70f;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.every-card:hover {
  transform: translateY(-4px);
  border-color: #b9a8ff;
  box-shadow: 0 24px 50px #4b26e724;
}

.every-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.every-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, #7a5cff, var(--primary-color));
  font-size: 22px;
  color: var(--white-color);
  box-shadow: 0 10px 22px #4b26e740;
  transition: transform 0.3s ease;
}

.every-card:hover .every-icon {
  transform: rotate(-8deg);
}

.every-num {
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid #e3ddff;
  font-family: var(--sora-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #9d88ff;
}

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

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

.every-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.every-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.every-chips .bi {
  font-size: 12px;
  color: var(--primary-color);
}

@media (max-width: 991.98px) {
  .ai-every-title {
    font-size: 36px;
  }

  .ai-every-intro {
    margin-top: 16px;
  }

}

@media (max-width: 575.98px) {
  .ai-every-title {
    font-size: 30px;
  }

  .ai-every-intro {
    font-size: 16px;
  }


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

}

@media (prefers-reduced-motion: reduce) {
  .every-card,
  .every-icon {
    transition: none;
  }

  .every-card:hover {
    transform: none;
  }
}

/* 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 - 1400px) / 2 + 12px)) 16px;
  scroll-padding-left: max(12px, calc((100vw - 1400px) / 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;
  }
}

/* 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 {
  margin-top: 56px;
}

.ab-mv-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 30px;
  border-radius: 28px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 20px 50px #4b26e714;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Spotlight that follows the cursor */
.ab-mv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), #4b26e724, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ab-mv-card:hover {
  transform: translateY(-8px);
  border-color: #c9bbff;
  box-shadow: 0 34px 70px #4b26e72e;
}

.ab-mv-card:hover::before {
  opacity: 1;
}

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

.ab-mv-num {
  position: absolute;
  top: -18px;
  right: 18px;
  z-index: -1;
  font-family: var(--sora-font);
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  color: #4b26e70d;
  transition: transform 0.5s ease, color 0.4s ease;
  pointer-events: none;
}

.ab-mv-card:hover .ab-mv-num {
  transform: translateY(8px);
  color: #4b26e714;
}

.ab-mv-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  margin-left: -10px;
}

.ab-mv-top .journey-icon {
  margin-bottom: 0;
}

.ab-mv-label {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--sora-font);
  margin-left: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.ab-mv-card h3 {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--secondary-color);
}

.ab-mv-card p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-color);
}

.ab-mv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 0;
  padding: 18px 0 0;
  list-style: none;
}

.ab-mv-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ab-mv-tags .bi {
  color: var(--primary-color);
}

.ab-mv-tags li:hover {
  transform: translateY(-2px);
  background: var(--primary-color);
  color: var(--white-color);
}

.ab-mv-tags li:hover .bi {
  color: var(--white-color);
}

/* Vision: the dark, featured card */
.ab-mv-card.is-vision {
  border-color: transparent;
  background:
    radial-gradient(circle at 100% 0%, #6a4bffb3 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, #4b26e766 0%, transparent 50%),
    var(--secondary-color);
  box-shadow: 0 30px 70px #4b26e740;
}

.ab-mv-card.is-vision::before {
  background: radial-gradient(420px circle at var(--mx) var(--my), #ffffff1f, transparent 60%);
}

.ab-mv-card.is-vision .ab-mv-num {
  color: #ffffff0d;
}

.ab-mv-card.is-vision:hover .ab-mv-num {
  color: #ffffff17;
}

.ab-mv-card.is-vision .ab-mv-label {
  color: #c9bbff;
}

.ab-mv-card.is-vision h3 {
  color: var(--white-color);
}

.ab-mv-card.is-vision p {
  color: #ffffffb8;
}

.ab-mv-card.is-vision .ab-mv-tags li {
  background: #ffffff14;
  color: var(--white-color);
}

.ab-mv-card.is-vision .ab-mv-tags .bi {
  color: #b9a6ff;
}

.ab-mv-card.is-vision .ab-mv-tags li:hover {
  background: var(--white-color);
  color: var(--primary-color);
}

.ab-mv-card.is-vision .ab-mv-tags li:hover .bi {
  color: var(--primary-color);
}

/* Cards rise into view on scroll */
.ab-mv.is-reveal .ab-mv-card {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.ab-mv.is-reveal .col-lg-6:last-child .ab-mv-card {
  transition-delay: 0.15s, 0.15s, 0s, 0s, 0s;
}

.ab-mv.is-reveal.is-in .ab-mv-card {
  opacity: 1;
  translate: 0 0;
}

@media (max-width: 575.98px) {
  .ab-mv-card {
    padding: 30px 24px;
  }

  .ab-mv-card h3 {
    font-size: 21px;
  }

  .ab-mv-num {
    font-size: 110px;
  }
}

/* Values */
/* Values: sticky intro on the left, numbered value list on the right */
.ab-values {
  position: relative;
  overflow: clip;
  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-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);
}

/* 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-impact { padding: 80px 0; }
  .ab-impact-title { font-size: 50px; }
  .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-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-head-center.bb-head-wide {
  max-width: 1080px;
}

.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: 1040px;
  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);
}

@media (max-width: 575.98px) {
  .role-card-head {
    flex-wrap: wrap;
  }

  .role-card-count {
    margin-left: 62px;
  }

  .role-points li {
    padding: 11px 14px 11px 42px;
  }

  .role-points li > .bi {
    left: 14px;
    top: 13px;
  }
}

/* ==========================================================
   Platforms & Apps page (pf-*)
   ========================================================== */

/* Shared dark platform icon (matches the footer platform icons) */
.pf-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--secondary-color);
  font-size: 20px;
  color: var(--white-color);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.pf-icon-text {
  font-family: var(--inter-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.pf-icon-lg {
  width: 58px;
  height: 58px;
  font-size: 25px;
}

.pf-icon-lg.pf-icon-text {
  font-size: 16px;
}

/* Hero */
.pf-hero {
  padding-bottom: 90px;
}

.pf-hero-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.pf-hero-content .solution-hero-text {
  margin-left: auto;
  margin-right: auto;
}

.pf-hero-content .feature-hero-actions {
  justify-content: center;
}

.pf-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.pf-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 128px;
  padding: 22px 12px 18px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: #ffffffcc;
  backdrop-filter: blur(8px);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  box-shadow: 0 10px 30px #4b26e714;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pf-chip .pf-icon {
  width: 54px;
  height: 54px;
  font-size: 24px;
  background: var(--primary-color);
}

.pf-chip:hover {
  transform: translateY(-6px);
  border-color: #c9bbff;
  box-shadow: 0 18px 40px #4b26e726;
  color: var(--secondary-color);
}

.pf-chip:hover .pf-icon {
  background: var(--secondary-color);
}

/* Platform cards */
.pf-cards {
  background: var(--white-color);
}

.pf-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  scroll-margin-top: calc(var(--header-height) + 24px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pf-card:hover,
.pf-card:target {
  transform: translateY(-5px);
  border-color: #c9bbff;
  box-shadow: 0 24px 50px #4b26e71f;
}

.pf-card:hover .pf-icon,
.pf-card:target .pf-icon {
  background: var(--primary-color);
}

.pf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.pf-tag {
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
}

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

.pf-card > p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

.pf-points {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

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

.pf-points li + li {
  margin-top: 10px;
}

.pf-points .bi {
  color: var(--primary-color);
}

.pf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color);
}

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

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

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

/* One account */
.pf-sync {
  background: var(--light-color);
}

.pf-sync-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* .pf-benefits {
  margin-top: 60px;
} */

.pf-benefit {
  height: 100%;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
}

.pf-benefit h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
}

.pf-benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

/* Work styles */
.pf-styles {
  background: var(--white-color);
}

.pf-style {
  height: 100%;
  padding: 34px 30px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pf-style:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px #4b26e71f;
}

.pf-style-icons {
  display: flex;
  margin-bottom: 26px;
}

.pf-style-icons .pf-icon {
  width: 52px;
  height: 52px;
  margin-left: -10px;
  border: 3px solid var(--white-color);
  font-size: 22px;
}

.pf-style-icons .pf-icon:first-child {
  margin-left: 0;
}

.pf-style-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.pf-style h3 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary-color);
}

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

.pf-style.is-featured {
  border-color: transparent;
  background: radial-gradient(circle at 100% 0%, #6a4bffb3, transparent 60%), var(--secondary-color);
  box-shadow: 0 30px 60px #4b26e740;
}

.pf-style.is-featured .pf-icon {
  border-color: var(--secondary-color);
  background: var(--primary-color);
}

.pf-style.is-featured .pf-style-label {
  color: #c9bbff;
}

.pf-style.is-featured h3 {
  color: var(--white-color);
}

.pf-style.is-featured p {
  color: #ffffffb8;
}

@media (max-width: 575.98px) {
  .pf-chip {
    width: calc(33.333% - 11px);
    padding: 16px 8px 14px;
    font-size: 13px;
  }

  .pf-chip .pf-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

}


/* ==========================================================
   Platform app pages (Mac, Windows, iOS ...) - shared pieces
   ========================================================== */
.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: #ffffffb3;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pf-back:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.pf-back .bi {
  transition: transform 0.25s ease;
}

.pf-back:hover .bi {
  transform: translateX(-3px);
}

.pf-app-os {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
}

.pf-app-os .bi {
  font-size: 0.9em;
}

.pf-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pf-app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-color);
}

.pf-app-meta .bi {
  margin-right: 6px;
  color: var(--primary-color);
}

/* Supported OS versions */
.pf-versions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pf-versions li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-versions li:hover {
  transform: translateY(-3px);
  border-color: #c9bbff;
  box-shadow: 0 14px 30px #4b26e71a;
}

.pf-versions-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 18px;
  color: var(--white-color);
}

.pf-versions strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-color);
}

.pf-versions li span:last-child {
  font-size: 14px;
  color: var(--muted-color);
}

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

/* Platform app pages: lavender band for the steps so sections alternate */
.process.pf-app-process {
  background: #f7f5ff;
}

/* Platforms benefits: diamond icon from the journey cards */
.pf-benefit {
  text-align: center;
}

.pf-benefit .journey-icon {
  margin-bottom: 14px;
}

.pf-benefit {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.pf-benefit:hover {
  transform: translateY(-4px);
  border-color: #c9bbff;
}

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

/* About values: cards slide in one by one as they scroll into view */
.ab-values-list.is-reveal .ab-value {
  opacity: 0;
  translate: 40px 0;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ab-values-list.is-reveal .ab-value.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .ab-values-list.is-reveal .ab-value {
    opacity: 1;
    translate: none;
  }
}

/* About purpose: single centred heading */
.ab-purpose-head {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ab-purpose-head .ab-title {
  margin: 0;
}

.ab-purpose-head.ab-purpose-top {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ==========================================================
   Security page (sc-*)
   ========================================================== */
.sc-protect,
.sc-deploy {
  background: #f7f5ff;
}

.sc-services {
  background: var(--white-color);
}

/* Protection cards */
.sc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 26px;
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 18px 44px #4b26e70f;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.sc-card:hover {
  transform: translateY(-6px);
  border-color: #c9bbff;
  box-shadow: 0 28px 60px #4b26e724;
}

.sc-card-media {
  position: relative;
  margin-bottom: 30px;
}

.sc-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

.sc-card-badge {
  position: absolute;
  left: 18px;
  bottom: -22px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 3px solid var(--white-color);
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  box-shadow: 0 10px 22px #4b26e759;
  font-size: 20px;
  color: var(--white-color);
}

.sc-card h3 {
  margin-bottom: 10px;
  padding: 0 4px;
  font-size: 21px;
  font-weight: 700;
  color: var(--secondary-color);
}

.sc-card > p {
  margin-bottom: 18px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

.sc-points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-points li {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--light-color);
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.sc-points li:hover {
  transform: translateX(4px);
  background: var(--pale-lavender);
}

.sc-points .bi {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--primary-color);
}

/* Security system list */
.sc-system {
  display: grid;
  gap: 14px;
}

.sc-system-item {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.sc-system-item:hover {
  transform: translateX(6px);
  border-color: #c9bbff;
  box-shadow: 0 18px 40px #4b26e71a;
}

.sc-system-item .rmt-box-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

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

.sc-system-item h3 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
}

.sc-system-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

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

@media (max-width: 575.98px) {
  .sc-system-item {
    flex-direction: column;
    gap: 14px;
  }
}

/* ==========================================================
   Career page
   ========================================================== */
.cr-hero .ab-eyebrow {
  margin-bottom: 18px;
}

.cr-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.cr-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-color);
}

.cr-hero-points .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--pale-lavender);
  color: var(--primary-color);
  font-size: 14px;
}

/* Hero photo mosaic (tiles drift with the cursor, see main.js) */
.cr-mosaic {
  --px: 0;
  --py: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 54px);
  gap: 14px;
  padding: 10px;
}

.cr-tile {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 18px;
  border: 5px solid var(--white-color);
  background: var(--white-color);
  box-shadow: 0 22px 44px #10143a26;
  transform: translate3d(calc(var(--px) * var(--d, 10) * 1px), calc(var(--py) * var(--d, 10) * 1px), 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.cr-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cr-tile:hover {
  z-index: 3;
  box-shadow: 0 28px 54px #4b26e740;
}

.cr-tile:hover img {
  transform: scale(1.08);
}

.cr-tile-1 { grid-column: 1 / 3; grid-row: 2 / 5; }
.cr-tile-2 { grid-column: 3 / 5; grid-row: 1 / 7; z-index: 2; }
.cr-tile-3 { grid-column: 5 / 7; grid-row: 1 / 4; }
.cr-tile-4 { grid-column: 1 / 3; grid-row: 5 / 8; }
.cr-tile-5 { grid-column: 5 / 7; grid-row: 4 / 8; }

/* Accent squares behind the photos */
.cr-sq {
  position: absolute;
  z-index: 0;
  border-radius: 6px;
  pointer-events: none;
}

.cr-sq-1 { top: 18%; left: 28%; width: 34px; height: 34px; background: var(--primary-color); }
.cr-sq-2 { top: -2px; right: 2px; width: 30px; height: 30px; background: #e2457a; }
.cr-sq-3 { bottom: 4%; left: -4px; width: 34px; height: 34px; background: #f0a020; }

.cr-hiring {
  position: absolute;
  z-index: 4;
  left: 36%;
  bottom: -8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--white-color);
  box-shadow: 0 20px 44px #10143a26;
  font-size: 12px;
  color: var(--muted-color);
  animation: agent-float 6s ease-in-out infinite;
}

.cr-hiring b {
  display: block;
  font-size: 14px;
  color: var(--secondary-color);
}

.cr-hiring-dot {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
}

.cr-hiring-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: cr-ping 1.8s ease-out infinite;
}

@keyframes cr-ping {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Shared photo frame + dotted decorations */
.cr-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px #10143a1f;
}

.cr-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cr-photo:hover img {
  transform: scale(1.06);
}

.cr-dots {
  position: absolute;
  z-index: 0;
  width: 70px;
  height: 90px;
  background-image: radial-gradient(currentColor 2px, transparent 2.5px);
  background-size: 12px 12px;
  pointer-events: none;
}

/* Who we are */
.cr-who {
  background: var(--white-color);
}

.cr-who-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 20px 56px;
}

.cr-who-grid .cr-photo {
  aspect-ratio: 4 / 3.4;
}

.cr-who-grid .cr-photo:nth-of-type(2n) {
  transform: translateY(36px);
}

.cr-dots-1 { top: 22%; right: -6px; color: #4b26e766; }
.cr-dots-2 { bottom: 10%; left: -6px; color: #f0a02099; }
.cr-sq-4 { top: 2px; right: 8%; width: 34px; height: 34px; background: var(--primary-color); }
.cr-sq-5 { bottom: 20px; left: 4px; width: 38px; height: 38px; background: #e07b12; }

.cr-who-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.cr-who-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
  background: #faf9ff;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cr-who-points li:hover {
  border-color: #c9bbff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px #4b26e714;
}

.cr-who-points span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-color);
  color: var(--white-color);
}

/* Culture */
.cr-culture {
  background: var(--light-color);
}

.cr-culture-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ddd6ff;
}

.cr-culture-list li {
  display: flex;
  align-items: baseline;
  /* gap: 18px; */
  padding: 16px 0;
  border-bottom: 1px solid #ddd6ff;
  transition: padding-left 0.3s ease;
}

.cr-culture-list li:hover {
  padding-left: 10px;
}

.cr-culture-list b {
  flex: 0 0 120px;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}

.cr-culture-list span {
  font-size: 15px;
  line-height: 1.6;
  /* color: var(--muted-color); */
}

.cr-culture-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 20px;
}

.cr-photo-wide {
  grid-column: 1 / 3;
  width: 82%;
  margin-left: auto;
  aspect-ratio: 16 / 9;
}

.cr-culture-collage .cr-photo:not(.cr-photo-wide) {
  aspect-ratio: 4 / 3.2;
}

.cr-dots-3 { top: 12%; left: 4px; color: #10143a55; }
.cr-dots-4 { bottom: 10%; right: -4px; color: #f0a02099; }
.cr-sq-6 { top: 46%; left: -2px; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-color); }

.cr-culture-chip {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 0;
  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);
  animation: agent-float 7s ease-in-out infinite;
}

.cr-culture-chip b {
  display: block;
  font-size: 14px;
  color: var(--secondary-color);
}

/* Core values (theme journey section, four cards per row) */
.cr-values .journey-card {
  padding: 34px 24px 32px;
}

.cr-values .journey-title {
  font-size: 19px;
  line-height: 1.35;
}

/* Perks: arched photo in the middle, perk cards on both sides */
.cr-perks {
  background: var(--white-color);
}

.cr-perks-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px) 1fr;
  gap: 44px;
  align-items: center;
}

.cr-perk-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-perk-card {
  --c: var(--primary-color);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  box-shadow: 0 14px 30px #10143a0d;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Left column mirrors so the icons sit on the outer edge */
.cr-perk-col-left .cr-perk-card {
  flex-direction: row-reverse;
  text-align: right;
}

/* Small dot on the edge facing the photo */
.cr-perk-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 3px solid var(--white-color);
  background: var(--c);
  box-shadow: 0 0 0 1px var(--border-color);
  transition: transform 0.3s ease;
}

.cr-perk-col-left .cr-perk-card::after { right: -8px; }
.cr-perk-col-right .cr-perk-card::after { left: -8px; }

.cr-perk-card:hover {
  border-color: color-mix(in srgb, var(--c) 45%, white);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--c) 18%, transparent);
}

.cr-perk-col-left .cr-perk-card:hover { transform: translateX(8px); }
.cr-perk-col-right .cr-perk-card:hover { transform: translateX(-8px); }

.cr-perk-card:hover::after {
  transform: scale(1.35);
}

.cr-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 13%, white);
  color: var(--c);
  font-size: 22px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cr-perk-card:hover .cr-perk-icon {
  background: var(--c);
  color: var(--white-color);
  transform: rotate(-8deg) scale(1.06);
}

.cr-perk-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary-color);
}

.cr-perk-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-color);
}

/* Centre visual */
.cr-perk-visual {
  position: relative;
  isolation: isolate;
  padding: 24px 10px 10px;
}

/* Purple arch behind the photo */
.cr-perk-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 70px -6px 0 26px;
  border-radius: 999px 999px 36px 36px;
  background: linear-gradient(160deg, #7a5cff 0%, #4b26e7 60%, #2f1a86 100%);
  transform: rotate(5deg);
  box-shadow: 0 30px 60px #4b26e74d;
}

.cr-perk-ring {
  position: absolute;
  z-index: -2;
  top: -4%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  margin-left: -59%;
  border-radius: 50%;
  border: 2px dashed #c9bbff;
  animation: cr-spin 40s linear infinite;
}

@keyframes cr-spin {
  to { transform: rotate(360deg); }
}

.cr-dots-5 { bottom: 6%; left: -24px; color: #f0a02099; z-index: -1; }

.cr-perk-arch {
  overflow: hidden;
  border-radius: 999px 999px 32px 32px;
  border: 4px solid var(--white-color);
  aspect-ratio: 4 / 5.4;
  background: var(--white-color);
  box-shadow: 0 30px 60px #10143a33;
}

.cr-perk-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.cr-perk-visual:hover .cr-perk-arch img {
  transform: scale(1.06);
}

.cr-perk-badge {
  position: absolute;
  z-index: 2;
  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;
  white-space: nowrap;
  color: var(--muted-color);
  animation: agent-float 6s ease-in-out infinite;
}

.cr-perk-badge b {
  display: block;
  font-size: 14px;
  color: var(--secondary-color);
}

.cr-perk-badge-top { top: 26%; left: -34px; }
.cr-perk-badge-bottom { bottom: 34px; right: -34px; animation-delay: -3s; }
.cr-perk-badge-bottom .ab-chip-icon { background: #e2457a; }

/* Reveal on scroll (only once main.js marks the page ready) */
.cr-anim .cr-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease var(--delay, 0s), translate 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cr-anim .cr-reveal.is-in {
  opacity: 1;
  translate: none;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .cr-mosaic { grid-template-rows: repeat(8, 46px); }
  .cr-perks-layout { grid-template-columns: 1fr 300px 1fr; gap: 30px; }
  .cr-perk-card { padding: 16px; gap: 12px; }
  .cr-perk-icon { width: 46px; height: 46px; font-size: 19px; }
  .cr-perk-badge-top { left: -20px; }
  .cr-perk-badge-bottom { right: -20px; }
}

@media (max-width: 991.98px) {
  .cr-mosaic,
  .cr-who-grid,
  .cr-culture-collage { max-width: 600px; margin: 0 auto; }
  .cr-perks-layout { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cr-perk-visual { grid-column: 1 / 3; order: -1; width: 100%; max-width: 360px; margin: 0 auto 40px; }
  .cr-perk-col-left .cr-perk-card { flex-direction: row; text-align: left; }
  .cr-perk-card::after { display: none; }
  .cr-perk-col-left .cr-perk-card:hover,
  .cr-perk-col-right .cr-perk-card:hover { transform: translateY(-4px); }
}

@media (max-width: 575.98px) {
  .cr-mosaic { grid-template-rows: repeat(8, 30px); gap: 8px; padding: 6px; margin-bottom: 30px; }
  .cr-tile { border-width: 3px; border-radius: 12px; }
  .cr-sq-1, .cr-sq-2, .cr-sq-3 { width: 22px; height: 22px; }
  .cr-hiring { left: 50%; bottom: -34px; margin-left: -110px; width: 220px; padding: 10px 14px; }
  .cr-hero-points { margin-top: 26px; }
  .cr-who-grid { gap: 12px; padding: 10px 10px 36px; }
  .cr-who-grid .cr-photo:nth-of-type(2n) { transform: translateY(20px); }
  .cr-who-points { grid-template-columns: 1fr; }
  .cr-culture-collage { gap: 12px; padding: 10px 10px 40px; }
  .cr-photo-wide { width: 100%; }
  .cr-culture-chip { top: auto; bottom: 0; left: 50%; translate: -50% 0; animation: none; white-space: nowrap; }
  .cr-culture-list li { flex-direction: column; gap: 4px; }
  .cr-culture-list b { flex-basis: auto; }
  .cr-perks-layout { grid-template-columns: 1fr; gap: 12px; }
  .cr-perk-visual { grid-column: auto; max-width: 290px; }
  .cr-perk-col { gap: 12px; }
  .cr-perk-badge { padding: 10px 14px 10px 10px; }
  .cr-perk-badge .ab-chip-icon { width: 34px; height: 34px; }
  .cr-perk-badge-top { left: -16px; }
  .cr-perk-badge-bottom { right: -16px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hiring,
  .cr-culture-chip,
  .cr-perk-badge,
  .cr-perk-ring,
  .cr-hiring-dot::after { animation: none; }
  .cr-tile { transform: none; }
}

/* ==========================================================
   Contact page (ct-*) - form fields reuse the trial popup (tr-*)
   ========================================================== */
/* Form section */
.ct-main {
  background: var(--white-color);
}

.ct-topics {
  display: grid;
  gap: 12px;
  margin: 28px 0 34px;
  padding: 0;
  list-style: none;
}

.ct-topics li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
}

.ct-topics .rmt-box-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  font-size: 18px;
}

.ct-follow-label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-color);
}

.ct-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 18px;
  color: var(--primary-color);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ct-social a:hover {
  transform: translateY(-3px);
  background: var(--primary-color);
  color: var(--white-color);
}

.ct-card {
  position: relative;
  padding: 40px;
  border-radius: 28px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 30px 80px #4b26e724;
}

.ct-card::before {
  content: "";
  position: absolute;
  inset: 0 40px auto;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #7a5cff, var(--primary-color));
}

.ct-card .section-eyebrow {
  margin-bottom: 14px;
}

.ct-card-title {
  margin-bottom: 6px;
  font-size: 32px;
  font-weight: 700;
  color: var(--secondary-color);
}

.ct-card-sub {
  margin-bottom: 26px;
  font-size: 15px;
  color: var(--muted-color);
}

.ct-textarea > .bi {
  top: 16px;
  transform: none;
}

.ct-textarea textarea {
  width: 100%;
  min-height: 130px;
  padding: 12px 14px 12px 40px;
  border: 1px solid #e3e1ee;
  border-radius: 10px;
  font-size: 14px;
  color: var(--secondary-color);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-textarea textarea::placeholder {
  color: #9a9cb3;
}

.ct-textarea textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px #4b26e71f;
}

.tr-field.is-invalid textarea {
  border-color: #dc2626;
}

.ct-form .tr-submit {
  margin-top: 6px;
}

.ct-success {
  min-height: 420px;
}

.ct-again {
  margin-top: 8px;
  border: 1px solid var(--pale-lavender);
}

/* Contact details */
.ct-details-wrap {
  padding: 0 0 110px;
  background: var(--white-color);
}

.ct-detail {
  height: 100%;
  padding: 40px 30px;
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct-detail:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px #4b26e71f;
}

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

.ct-detail .journey-icon {
  margin-bottom: 16px;
}

.ct-detail h3 {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary-color);
}

.ct-detail p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-color);
}

.ct-detail a {
  font-weight: 600;
  color: var(--primary-color);
}

.ct-detail a:hover {
  text-decoration: underline;
}

@media (max-width: 991.98px) {

  .ct-details-wrap {
    padding-bottom: 80px;
  }
}

@media (max-width: 575.98px) {
  .ct-card {
    padding: 28px 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ct-bubble,
  .ct-info {
    animation: none;
  }
}

/* Contact hero visual: tilted gradient panel, framed photo, floating info cards */
.ct-visual {
  position: relative;
  max-width: 540px;
  margin: 30px auto 40px;
  padding: 0 40px;
}

.ct-visual-panel {
  position: absolute;
  inset: -24px 20px -24px 60px;
  z-index: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 80% 15%, #ffffff33, transparent 45%),
    linear-gradient(150deg, #7a5cff 0%, var(--primary-color) 55%, #2a1290 100%);
  box-shadow: 0 40px 80px #4b26e74d;
  transform: rotate(4deg);
}

.ct-visual-dots {
  position: absolute;
  left: 0;
  bottom: -40px;
  z-index: 0;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(var(--primary-color) 2px, transparent 2.5px);
  background-size: 16px 16px;
  opacity: 0.5;
}

.ct-visual-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 26px;
  border: 6px solid var(--white-color);
  box-shadow: 0 24px 50px #10143a33;
}

.ct-bubble {
  position: absolute;
  left: 0;
  top: 8%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 270px;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--white-color);
  box-shadow: 0 18px 40px #10143a2e;
  animation: ct-bob 6s ease-in-out infinite;
}

.ct-bubble-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--secondary-color);
  font-size: 18px;
  color: var(--white-color);
}

.ct-bubble strong {
  display: block;
  font-size: 13px;
  color: var(--secondary-color);
}

.ct-bubble div > span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-color);
}

.ct-info {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: var(--white-color);
  box-shadow: 0 18px 40px #10143a2e;
  animation: ct-bob 7s ease-in-out infinite;
}

.ct-info-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--light-color);
  font-size: 18px;
  color: var(--primary-color);
}

.ct-info div > span {
  display: block;
  font-size: 12px;
  color: var(--muted-color);
}

.ct-info strong {
  font-size: 14px;
  color: var(--secondary-color);
}

.ct-info-mail {
  right: 0;
  top: 46%;
  animation-delay: -2s;
}

.ct-info-hours {
  left: 10px;
  bottom: 8%;
  animation-delay: -4s;
}

@keyframes ct-bob {
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 575.98px) {
  .ct-visual {
    padding: 0 12px;
  }

  .ct-visual-panel {
    inset: -16px 0 -16px 30px;
  }

  .ct-bubble {
    left: -4px;
    max-width: 220px;
  }

  .ct-info-mail {
    right: -4px;
  }

  .ct-info-hours {
    left: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-visual .ct-bubble,
  .ct-visual .ct-info {
    animation: none;
  }
}

/* ==========================================================
   FAQ page (fq-*) - search, topic sidebar, grouped accordions
   ========================================================== */
.fq-hero {
  padding-bottom: 90px;
}

.fq-hero-content {
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

.fq-hero-content .solution-hero-text {
  margin-left: auto;
  margin-right: auto;
}

.fq-search {
  position: relative;
  max-width: 640px;
  margin: 34px auto 0;
}

.fq-search .bi {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--primary-color);
  pointer-events: none;
}

.fq-search input {
  width: 100%;
  height: 62px;
  padding: 0 24px 0 56px;
  border: 1px solid var(--pale-lavender);
  border-radius: 50px;
  background: var(--white-color);
  box-shadow: 0 18px 40px #4b26e71f;
  font-size: 16px;
  color: var(--secondary-color);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fq-search input::placeholder {
  color: #9a9cb3;
}

.fq-search input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px #4b26e71f, 0 18px 40px #4b26e71f;
}

.fq-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.fq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: #ffffffcc;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fq-chip .bi {
  color: var(--primary-color);
  transition: color 0.25s ease;
}

.fq-chip:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
}

.fq-chip:hover .bi {
  color: var(--white-color);
}

/* Body */
.fq-body {
  background: var(--white-color);
}

.fq-side {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.fq-side-label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-color);
}

.fq-nav {
  display: grid;
  gap: 4px;
  margin-bottom: 26px;
}

.fq-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.fq-nav-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--light-color);
  font-size: 15px;
  color: var(--primary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.fq-nav-name {
  flex: 1;
}

.fq-nav-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--muted-color);
}

.fq-nav-link:hover {
  background: var(--light-color);
  color: var(--secondary-color);
}

.fq-nav-link.is-active {
  background: var(--secondary-color);
  color: var(--white-color);
}

.fq-nav-link.is-active .fq-nav-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.fq-nav-link.is-active .fq-nav-count {
  background: #ffffff1f;
  color: var(--white-color);
}

.fq-nav-link.is-hidden {
  display: none;
}

.fq-help {
  padding: 26px;
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0%, #6a4bffb3, transparent 60%), var(--secondary-color);
  text-align: center;
  color: var(--white-color);
}

.fq-help-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--white-color);
  font-size: 20px;
  color: var(--primary-color);
}

.fq-help h3 {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--white-color);
}

.fq-help p {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffffb8;
}

/* Groups */
.fq-group {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.fq-group + .fq-group {
  margin-top: 56px;
}

.fq-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.fq-group-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  box-shadow: 0 10px 22px #4b26e740;
  font-size: 20px;
  color: var(--white-color);
}

.fq-group-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--secondary-color);
}

.fq-group-count {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--primary-color);
}

.fq-list {
  max-width: none;
}

.fq-num {
  flex-shrink: 0;
  margin-right: 12px;
  font-family: var(--sora-font);
  font-size: 13px;
  font-weight: 700;
  color: #a996ff;
}

.fq-list .faq-item.is-hidden,
.fq-group.is-hidden {
  display: none;
}

.fq-empty {
  padding: 60px 30px;
  border-radius: 24px;
  border: 1px dashed #c9bbff;
  background: var(--light-color);
  text-align: center;
}

.fq-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--white-color);
  font-size: 22px;
  color: var(--primary-color);
}

.fq-empty h3 {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary-color);
}

.fq-empty p {
  margin: 0;
  color: var(--muted-color);
}

.fq-empty a {
  font-weight: 600;
  color: var(--primary-color);
}

@media (max-width: 991.98px) {
  .fq-side {
    position: static;
  }

  .fq-nav {
    display: none;
  }

  .fq-side-label {
    display: none;
  }

  .fq-help {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .fq-group-head {
    flex-wrap: wrap;
  }

  .fq-group-head h2 {
    font-size: 22px;
  }

  .fq-group-count {
    margin-left: 60px;
  }

  .fq-search input {
    height: 54px;
    font-size: 15px;
  }
}

/* FAQ page: keep number + question together on the left, icon on the right */
.fq-list .faq-toggle {
  justify-content: flex-start;
  gap: 0;
  font-size: 17px;
}

.fq-list .faq-toggle .faq-icon {
  margin-left: auto;
  padding-left: 0;
}

.fq-list .faq-toggle .fq-num {
  min-width: 30px;
}

.fq-list .faq-toggle .faq-icon {
  margin-left: auto;
}

.fq-list .faq-answer {
  padding-left: 68px;
}

/* FAQ sidebar: scroll inside when the topic list is taller than the screen */
.fq-side {
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9bbff transparent;
  padding-right: 4px;
}

@media (max-width: 991.98px) {
  .fq-side {
    max-height: none;
    overflow: visible;
  }
}

/* ==========================================================
   FAQ page - richer look: dark hero, dark sidebar, topic banners
   ========================================================== */
.fq-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 100px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 110%, #4b26e7b3 0%, #2e1490 40%, transparent 75%),
    radial-gradient(ellipse 40% 50% at 10% 10%, #6a4bff40 0%, transparent 70%),
    linear-gradient(180deg, #08051a 0%, #100a2e 60%, #180b42 100%);
  color: var(--white-color);
}

.fq-hero .solution-eyebrow {
  color: #c9bbff;
}

.fq-hero .solution-hero-title {
  color: var(--white-color);
}

.fq-hero .solution-hero-text {
  color: #ffffffb8;
}

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

.fq-glow {
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: min(1000px, 90%);
  height: 90%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 45%, #e6dcff 0%, #b997ff 20%, #8250ff 40%, transparent 72%);
  filter: blur(40px);
  opacity: 0.55;
}

.fq-q {
  position: absolute;
  font-family: var(--sora-font);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #8b74ff66;
  animation: fq-drift 9s ease-in-out infinite;
}

.fq-q-1 {
  left: 6%;
  top: 14%;
  font-size: 220px;
  transform: rotate(-14deg);
}

.fq-q-2 {
  right: 7%;
  top: 8%;
  font-size: 150px;
  -webkit-text-stroke-color: #c9bbff4d;
  animation-delay: -3s;
}

.fq-q-3 {
  right: 16%;
  bottom: 6%;
  font-size: 110px;
  -webkit-text-stroke-color: #2dd4bf40;
  animation-delay: -6s;
}

@keyframes fq-drift {
  50% {
    translate: 0 -16px;
  }
}


.fq-hero .fq-chip {
  border-color: #ffffff1f;
  background: #ffffff0f;
  backdrop-filter: blur(8px);
  color: var(--white-color);
}

.fq-hero .fq-chip .bi {
  color: #b9a6ff;
}

.fq-hero .fq-chip:hover {
  border-color: var(--white-color);
  background: var(--white-color);
  color: var(--primary-color);
}

.fq-hero .fq-chip:hover .bi {
  color: var(--primary-color);
}

/* Body */
.fq-body {
  background:
    radial-gradient(ellipse 50% 30% at 100% 0%, #e9e5ff 0%, transparent 70%),
    linear-gradient(180deg, #f7f5ff 0%, var(--white-color) 40%);
}

/* Dark sidebar panel */
.fq-side {
  padding: 22px 16px 16px;
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, #4b26e766, transparent 55%), var(--secondary-color);
  box-shadow: 0 30px 60px #10143a33;
}

.fq-side-label {
  padding-left: 8px;
  color: #ffffff80;
}

.fq-nav-link {
  color: #ffffffcc;
}

.fq-nav-icon {
  background: #ffffff12;
  color: #c9bbff;
}

.fq-nav-count {
  background: #ffffff12;
  color: #ffffffa6;
}

.fq-nav-link:hover {
  background: #ffffff12;
  color: var(--white-color);
}

.fq-nav-link.is-active {
  background: var(--white-color);
  color: var(--secondary-color);
}

.fq-nav-link.is-active .fq-nav-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.fq-nav-link.is-active .fq-nav-count {
  background: var(--light-color);
  color: var(--primary-color);
}

.fq-help {
  background: linear-gradient(150deg, #6a4bff, var(--primary-color));
}

.fq-side {
  scrollbar-color: #ffffff33 transparent;
}

/* Topic banners */
.fq-group-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--secondary-color) 0%, #2a1290 60%, var(--primary-color) 100%);
  box-shadow: 0 18px 40px #4b26e72e;
}

.fq-group-head::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 30px solid #ffffff0d;
}

.fq-group-icon {
  background: var(--white-color);
  box-shadow: none;
  color: var(--primary-color);
}

.fq-group-head h2 {
  font-size: 24px;
  color: var(--white-color);
}

.fq-group-count {
  background: #ffffff1f;
  color: var(--white-color);
}

/* Questions */
.fq-list .faq-item {
  margin-bottom: 10px;
  border-color: var(--border-color);
  box-shadow: 0 6px 18px #10143a08;
}

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

.fq-list .faq-item:has(.collapse.show) {
  border-color: transparent;
  background: linear-gradient(90deg, #f3f1ff, var(--white-color) 70%);
  box-shadow: inset 4px 0 0 var(--primary-color), 0 16px 34px #4b26e71f;
}

.fq-list .faq-item:has(.collapse.show) .fq-num {
  color: var(--primary-color);
}

@media (max-width: 991.98px) {
  .fq-q-1 {
    font-size: 140px;
  }

  .fq-q-2,
  .fq-q-3 {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .fq-group-head {
    padding: 16px;
  }

  .fq-group-head::after {
    display: none;
  }
}

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


/* ==========================================================
   Blog page (bl-*)
   ========================================================== */
.bl-hero {
  padding-bottom: 80px;
}

.bl-hero-content {
  max-width: 820px;
  margin: 0 auto 50px;
  text-align: center;
}

.bl-hero-content .solution-hero-text {
  margin-left: auto;
  margin-right: auto;
}

.bl-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--white-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--primary-color);
}

.bl-tag-soft {
  background: var(--light-color);
}

.bl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted-color);
}

.bl-meta .bi {
  margin-right: 4px;
  color: var(--primary-color);
}

/* Toolbar + filters */
.bl-posts {
  background: var(--white-color);
}

.bl-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}

/* Post cards */
.bl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.bl-card:hover {
  transform: translateY(-6px);
  border-color: #c9bbff;
  box-shadow: 0 26px 55px #4b26e724;
}

.bl-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.bl-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bl-card:hover .bl-card-media img {
  transform: scale(1.06);
}

.bl-card-media .bl-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  box-shadow: 0 6px 16px #10143a26;
}

.bl-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.bl-card h3 {
  margin: 12px 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.bl-card-body > p {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

.bl-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color);
}

.bl-read .bi {
  transition: transform 0.25s ease;
}

.bl-read:hover {
  color: var(--primary-color);
}

.bl-read:hover .bi,
.bl-card:hover .bl-read .bi {
  transform: translateX(4px);
}

[data-bl-cat].is-hidden {
  display: none;
}

[data-bl-cat].is-shown .bl-card {
  animation: bl-in 0.45s ease both;
}

@keyframes bl-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}


@media (prefers-reduced-motion: reduce) {
  [data-bl-cat].is-shown .bl-card {
    animation: none;
  }
}

/* Blog pagination */
.bl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 56px;
}

.bl-page-list {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.bl-page {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  font-family: var(--sora-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.bl-page:hover:not(:disabled) {
  background: var(--white-color);
  color: var(--primary-color);
}

.bl-page.is-active {
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  box-shadow: 0 10px 22px #4b26e759;
  color: var(--white-color);
}

.bl-page.is-active:hover {
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  color: var(--white-color);
}

.bl-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-family: var(--inter-font);
}

.bl-page-nav:hover:not(:disabled) {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
}

.bl-page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bl-page-dots {
  padding: 0 4px;
  color: var(--muted-color);
}

.bl-page-info {
  flex-basis: 100%;
  font-size: 13px;
  text-align: center;
  color: var(--muted-color);
}

@media (max-width: 575.98px) {
  .bl-page-nav span {
    display: none;
  }

  .bl-page-nav {
    width: 52px;
    padding: 0;
    justify-content: center;
  }
}

/* Blog card titles: navy with an underline sweep on hover */
.bl-card h3 a {
  color: var(--secondary-color);
  background-image: linear-gradient(var(--primary-color), var(--primary-color));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease, color 0.25s ease;
}

.bl-card h3 a:hover {
  color: var(--primary-color);
  background-size: 100% 2px;
}

.bl-hero .bl-hero-content {
  margin-bottom: 0;
}

/* Static blog pager links */
a.bl-page {
  text-decoration: none;
}

a.bl-page:hover:not(.is-disabled):not(.is-active) {
  background: var(--white-color);
  color: var(--primary-color);
}

a.bl-page-nav:hover:not(.is-disabled) {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
}

.bl-page-nav.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================
   Blog hero slider (Swiper) and list-style posts
   ========================================================== */
.bl-hero-slider {
  position: relative;
  overflow: hidden;
  padding: 60px 0 70px;
  background:
    radial-gradient(ellipse 45% 70% at 0% 0%, #e9e5ff 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 100%, #efe9ff 0%, transparent 70%),
    #f6f5fb;
}

.bl-hero-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.bl-swiper {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.bl-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 420px;
  border-radius: 28px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  overflow: hidden;
}

.bl-slide-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px 50px 96px;
}

.bl-slide-cat {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

.bl-slide-title {
  margin-bottom: 18px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.5px;
}

.bl-slide-title a,
.bl-row-title a {
  color: var(--secondary-color);
  transition: color 0.25s ease;
}

.bl-slide-title a:hover,
.bl-row-title a:hover {
  color: var(--primary-color);
}

.bl-slide-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-color);
}

.bl-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
}

.bl-slide-link .bi {
  transition: transform 0.25s ease;
}

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

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

.bl-slide-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--secondary-color);
}

.bl-slide-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}

.swiper-slide-active .bl-slide-media img {
  transform: scale(1.06);
}

/* Slider controls sit on the text side */
.bl-swiper-nav {
  position: absolute;
  left: 50px;
  right: calc(50% + 50px);
  bottom: 38px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bl-swiper-dots {
  display: flex;
  gap: 10px;
}

.bl-swiper-dots .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 !important;
  border: 2px solid var(--secondary-color);
  background: transparent;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.bl-swiper-dots .swiper-pagination-bullet-active {
  width: 30px;
  border-color: var(--primary-color);
  border-radius: 10px;
  background: var(--primary-color);
}

.bl-swiper-arrows {
  display: flex;
  gap: 8px;
}

.bl-swiper-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--pale-lavender);
  border-radius: 50%;
  background: var(--white-color);
  font-size: 16px;
  color: var(--secondary-color);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bl-swiper-btn:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
}

/* List-style posts */
.bl-rows {
  --bs-gutter-x: 40px;
}

.bl-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border-color);
}

.bl-row-media {
  flex-shrink: 0;
  display: block;
  width: 210px;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: 12px;
}

.bl-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bl-row:hover .bl-row-media img {
  transform: scale(1.06);
}

.bl-row-body {
  flex: 1;
  min-width: 0;
}

.bl-row-cat {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.bl-row-title {
  margin-bottom: 18px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.bl-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.bl-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-color);
}

.bl-author-icon {
  display: inline-flex;
  font-size: 18px;
  line-height: 1;
  color: #323232;
}

.bl-date {
  font-weight: 500;
  color: var(--muted-color);
}

@media (max-width: 991.98px) {
  .bl-slide {
    grid-template-columns: 1fr;
  }

  .bl-slide-media {
    order: -1;
    min-height: 240px;
  }

  .bl-slide-body {
    padding: 32px 30px 90px;
  }

  .bl-swiper-nav {
    left: 30px;
    right: 30px;
    bottom: 30px;
  }

  .bl-slide-title {
    font-size: 28px;
  }
}

@media (max-width: 575.98px) {
  .bl-row {
    align-items: flex-start;
    gap: 16px;
  }

  .bl-row-media {
    width: 110px;
  }

  .bl-row-title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .bl-row-meta {
    flex-wrap: wrap;
  }

  .bl-slide-title {
    font-size: 23px;
  }
}

/* ==========================================================
   Blog detail page (bd-*)
   ========================================================== */
.bd-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  background: linear-gradient(135deg, #f3f1ff 0%, #e9e5ff 100%);
}

.bd-hero-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 60px 56px 60px 24px;
}

.bd-hero-inner {
  width: 100%;
  max-width: 600px;
}

.bd-title {
  margin-bottom: 22px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--secondary-color);
}

.bd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--para-color);
}

.bd-meta .bi {
  margin-right: 4px;
  color: #323232;
}

.bd-author {
  font-weight: 600;
  color: var(--secondary-color);
}

.bd-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9a9cb3;
}

.bd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bd-hero-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--secondary-color);
}

.bd-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
.bd-body {
  padding: 70px 0 110px;
  background: var(--white-color);
}

.bd-toc {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9bbff transparent;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.bd-progress {
  height: 4px;
  margin-bottom: 20px;
  border-radius: 4px;
  background: var(--pale-lavender);
  overflow: hidden;
}

.bd-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7a5cff, var(--primary-color));
  transition: width 0.15s linear;
}

.bd-toc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--sora-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-color);
}

.bd-toc-label .bi {
  color: var(--primary-color);
}

.bd-toc-nav {
  display: grid;
}

.bd-toc-nav a {
  padding: 11px 0 11px 14px;
  border-left: 2px solid var(--pale-lavender);
  font-size: 14px;
  line-height: 1.45;
  /* color: var(--muted-color); */
  color: var(--secondary-color);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.bd-toc-nav a:hover {
  color: var(--secondary-color);
}

.bd-toc-nav a.is-active {
  border-left-color: var(--primary-color);
  font-weight: 600;
  color: var(--primary-color);
}

/* Article typography */
.bd-article {
  font-size: 17px;
  line-height: 1.8;
  color: var(--para-color);
}

.bd-article p {
  margin-bottom: 20px;
  color: var(--para-color);
}

.bd-article h2 {
  margin: 48px 0 18px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary-color);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.bd-num {
  color: var(--primary-color);
}

.bd-article a:not([class]) {
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bd-lead {
  font-size: 19px;
  font-weight: 500;
  color: var(--secondary-color) !important;
}

.bd-kicker {
  font-family: var(--sora-font);
  font-weight: 700;
  color: var(--primary-color) !important;
}

.bd-takeaways {
  margin-bottom: 36px;
  padding: 30px 32px;
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0%, #6a4bffb3, transparent 55%), var(--secondary-color);
  color: var(--white-color);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.bd-article .bd-takeaways h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 22px;
  color: var(--white-color);
}

.bd-takeaways h2 .bi {
  color: #fbbf24;
}

.bd-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-takeaways li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.7;
  color: #ffffffd9;
}

.bd-takeaways li + li {
  margin-top: 12px;
}

.bd-takeaways li::before {
  content: "\F26A";
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "bootstrap-icons";
  font-size: 18px;
  color: #b9a6ff;
}

.bd-quote {
  position: relative;
  margin: 26px 0;
  padding: 24px 28px 24px 70px;
  border-radius: 18px;
  border-left: 4px solid var(--primary-color);
  background: var(--light-color);
}

.bd-quote .bi {
  position: absolute;
  left: 22px;
  top: 14px;
  font-size: 38px;
  color: #c9bbff;
}

.bd-article .bd-quote p {
  margin: 0;
  font-family: var(--sora-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--secondary-color);
}

.bd-list {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.bd-list li {
  position: relative;
  padding: 12px 16px 12px 46px;
  border-radius: 12px;
  background: #f8f8fb;
  font-size: 16px;
  line-height: 1.5;
}

.bd-list li::before {
  content: "\F4B5";
  position: absolute;
  left: 16px;
  top: 12px;
  font-family: "bootstrap-icons";
  font-size: 17px;
  color: var(--primary-color);
}

.bd-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: bd-step;
}

.bd-flow li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-color);
  counter-increment: bd-step;
}

.bd-flow li::before {
  content: counter(bd-step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  color: var(--white-color);
}

.bd-flow li:not(:last-child)::after {
  content: "\F138";
  margin-left: 4px;
  font-family: "bootstrap-icons";
  font-size: 13px;
  color: #a996ff;
}

.bd-callout {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid #c9bbff;
  background: linear-gradient(90deg, #f3f1ff, var(--white-color));
}

.bd-callout-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);
}

.bd-article .bd-callout p {
  margin: 0;
  font-size: 16px;
}

.bd-features {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.bd-feature {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.bd-feature:hover {
  transform: translateX(4px);
  border-color: #c9bbff;
}

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

.bd-feature h3 {
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--secondary-color);
}

.bd-article .bd-feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-color);
}

.bd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0 10px;
  padding: 30px 32px;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--secondary-color) 0%, #2a1290 60%, var(--primary-color) 100%);
}

.bd-cta h3 {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--white-color);
}

.bd-article .bd-cta p {
  margin: 0;
  font-size: 15px;
  color: #ffffffb8;
}

.bd-faq {
  max-width: none;
}

.bd-article .bd-faq .faq-answer p {
  margin: 0;
  font-size: 16px;
}

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

@media (max-width: 991.98px) {
  .bd-hero {
    grid-template-columns: 1fr;
  }

  .bd-hero-text {
    justify-content: flex-start;
    padding: 50px 24px;
  }

  .bd-hero-media {
    min-height: 280px;
  }

  .bd-toc {
    position: static;
    max-height: none;
  }

  .bd-toc-nav {
    max-height: 260px;
    overflow-y: auto;
  }
}

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

  .bd-article {
    font-size: 16px;
  }

  .bd-article h2 {
    font-size: 23px;
  }

  .bd-takeaways,
  .bd-cta {
    padding: 24px 20px;
  }

  .bd-quote {
    padding: 20px 20px 20px 56px;
  }
}

/* Breadcrumb */
.bd-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--muted-color);
}

.bd-crumbs a {
  color: var(--muted-color);
  transition: color 0.2s ease;
}

.bd-crumbs a:hover {
  color: var(--primary-color);
}

.bd-crumbs .bi {
  font-size: 10px;
}

.bd-crumbs span {
  font-weight: 600;
  color: var(--secondary-color);
}

.bl-hero-slider .bd-crumbs + .bl-hero-label {
  display: none;
}

.bd-crumbs .bd-crumb-sep {
  font-weight: 400;
  color: #9a9cb3;
}

.bd-hero .bd-crumbs a:last-child {
  font-weight: 600;
  color: var(--primary-color);
}

/* ==========================================================
   Partner page (pt-*)
   ========================================================== */
.pt-hero-visual {
  position: relative;
  max-width: 560px;
  margin: 20px auto 30px;
  padding: 0 30px;
}

.pt-hero-panel {
  position: absolute;
  inset: -22px 0 -22px 70px;
  z-index: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 80% 15%, #ffffff33, transparent 45%),
    linear-gradient(150deg, #7a5cff 0%, var(--primary-color) 55%, #2a1290 100%);
  box-shadow: 0 40px 80px #4b26e74d;
  transform: rotate(-3deg);
}

.pt-hero-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 26px;
  border: 6px solid var(--white-color);
  box-shadow: 0 24px 50px #10143a33;
}

.pt-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: var(--white-color);
  box-shadow: 0 18px 40px #10143a2e;
  animation: pt-bob 7s ease-in-out infinite;
}

.pt-float-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-color);
  font-size: 19px;
  color: var(--white-color);
}

.pt-float strong {
  display: block;
  font-size: 15px;
  color: var(--secondary-color);
}

.pt-float div > span {
  font-size: 12px;
  color: var(--muted-color);
}

.pt-float-1 {
  left: 0;
  top: 10%;
}

.pt-float-2 {
  right: -10px;
  bottom: 8%;
  animation-delay: -3.5s;
}

@keyframes pt-bob {
  50% {
    transform: translateY(-10px);
  }
}

/* Programs */
.pt-programs {
  background: #f7f5ff;
}

.pt-program {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 30px 30px;
  border-radius: 26px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 18px 44px #4b26e70f;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.pt-program:hover {
  transform: translateY(-8px);
  border-color: #c9bbff;
  box-shadow: 0 30px 60px #4b26e72e;
}

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

.pt-program-num {
  position: absolute;
  top: -10px;
  right: 18px;
  z-index: -1;
  font-family: var(--sora-font);
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: #4b26e70d;
}

.pt-program .journey-icon {
  margin: 0 0 18px -8px;
}

.pt-program h3 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary-color);
}

.pt-program > p {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-color);
}

.pt-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--border-color);
}

.pt-points li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--secondary-color);
}

.pt-points .bi {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary-color);
}

/* Featured (middle) program */
.pt-program.is-featured {
  border-color: transparent;
  background:
    radial-gradient(circle at 100% 0%, #6a4bffb3 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, #4b26e766 0%, transparent 50%),
    var(--secondary-color);
  box-shadow: 0 34px 70px #4b26e74d;
}

.pt-program.is-featured .pt-program-num {
  color: #ffffff0d;
}

.pt-program.is-featured h3 {
  color: var(--white-color);
}

.pt-program.is-featured > p {
  color: #ffffffb8;
}

.pt-program.is-featured .pt-points {
  border-top-color: #ffffff1a;
}

.pt-program.is-featured .pt-points li {
  color: #ffffffe0;
}

.pt-program.is-featured .pt-points .bi {
  color: #b9a6ff;
}


.pt-badge {
  position: absolute;
  top: 30px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 50px;
  background: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Benefits */
.pt-benefits {
  background: var(--white-color);
}

.pt-benefit {
  position: relative;
  height: 100%;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pt-benefit::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #7a5cff, var(--primary-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.pt-benefit:hover {
  transform: translateY(-5px);
  border-color: #c9bbff;
  box-shadow: 0 24px 50px #4b26e71f;
}

.pt-benefit:hover::before {
  transform: scaleX(1);
}

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

.pt-benefit h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary-color);
}

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

/* Commission (dark) */
.pt-commission {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 70% at 100% 0%, #4b26e780 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 100%, #2e149080 0%, transparent 70%),
    var(--secondary-color);
  color: var(--white-color);
}

.pt-commission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

.pt-commission-head {
  margin-bottom: 50px;
}

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

.pt-commission-title {
  margin-bottom: 14px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white-color);
}

.pt-commission-text {
  margin: 0;
  font-size: 18px;
  color: #ffffffb8;
}

.pt-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.pt-rate-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffffa6;
}

.pt-rate-num {
  font-family: var(--sora-font);
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #b9a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pt-rate-num sup {
  font-size: 0.45em;
  top: -1em;
}

.pt-earn {
  height: 100%;
  padding: 32px 30px;
  border-radius: 24px;
  border: 1px solid #ffffff1a;
  background: linear-gradient(160deg, #ffffff12, #ffffff05);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.pt-earn:hover {
  transform: translateY(-6px);
  border-color: #8b74ff80;
}

.pt-earn-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  box-shadow: 0 12px 26px #4b26e766;
  font-size: 22px;
  color: var(--white-color);
}

.pt-earn h3 {
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--white-color);
}

.pt-earn p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #ffffffb8;
}

@media (max-width: 991.98px) {
  .pt-rate {
    align-items: flex-start;
    text-align: left;
  }

  .pt-rate-num {
    font-size: 110px;
  }

  .pt-commission-title {
    font-size: 34px;
  }
}

@media (max-width: 575.98px) {
  .pt-hero-visual {
    padding: 0 10px;
  }

  .pt-hero-panel {
    inset: -14px 0 -14px 30px;
  }

  .pt-float-1 {
    left: -6px;
  }

  .pt-float-2 {
    right: -6px;
  }

  .pt-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 14px;
  }
}

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

/* Header: highlighted new module link (AI Meeting Notetaker) */
.mega-link.mega-link-new {
  position: relative;
  margin-top: 8px;
  border: 1px solid #c9bbff;
  background: linear-gradient(135deg, #f3f1ff 0%, #e9e5ff 100%);
  box-shadow: 0 8px 20px #4b26e71f;
}

.mega-link.mega-link-new:hover {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #ece8ff 0%, #ddd5ff 100%);
}

.mega-link-new .mega-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary-color);
}

.mega-new-icon {
  flex-shrink: 0;
}

.mega-new-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 50px;
  background: linear-gradient(135deg, #7a5cff, var(--primary-color));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white-color);
  animation: mega-new-pulse 2.4s ease-in-out infinite;
}

@keyframes mega-new-pulse {
  50% {
    box-shadow: 0 0 0 4px #4b26e726;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-new-badge {
    animation: none;
  }
}

/* ==========================================================
   AI Meeting Notetaker page (mn-*)
   ========================================================== */
.mn-sec { position: relative; overflow: hidden; }
.mn-white { background: var(--white-color); }
.mn-light { background: #f3f1ff; }
.mn-dark {
  background:
    radial-gradient(ellipse 40% 60% at 0% 40%, #4b26e74d 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, #2e14904d 0%, transparent 70%),
    #0b0820;
  color: var(--white-color);
}

.mn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}
.mn-pill.is-dark { border-color: #ffffff26; background: #ffffff0d; color: var(--white-color); }
.mn-pill.is-glass { border-color: #ffffff40; background: #ffffff14; color: var(--white-color); }
.mn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.mn-title {
  margin-bottom: 20px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--secondary-color);
}
.mn-title span { display: block; color: var(--primary-color); }
.mn-title span.is-inline { display: inline; }
.mn-dark .mn-title { color: var(--white-color); }
.mn-dark .mn-title span { color: #b9a6ff; }

.mn-text { margin-bottom: 30px; font-size: 17px; line-height: 1.75; color: var(--muted-color); }
.mn-dark .mn-text { color: #ffffffb8; }

.mn-head { max-width: 860px; margin: 0 auto 50px; text-align: center; }
.mn-head .mn-text { margin-bottom: 0; }

.mn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Shared bits */
.mn-feats { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.mn-feats li { display: flex; gap: 16px; }
.mn-feat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--light-color);
  font-size: 19px;
  color: var(--primary-color);
}
.mn-dark .mn-feat-icon { background: #ffffff12; color: #c9bbff; }
.mn-feats h3 { margin-bottom: 4px; font-size: 18px; font-weight: 700; color: var(--secondary-color); }
.mn-feats p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-color); }
.mn-dark .mn-feats h3 { color: var(--white-color); }
.mn-dark .mn-feats p { color: #ffffffa6; }

.mn-card {
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 30px 70px #4b26e71f;
}
.mn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mn-card-head strong, .mn-card-title strong { display: block; font-size: 17px; color: var(--secondary-color); }
.mn-card-head span, .mn-card-title span { font-size: 13px; color: var(--muted-color); }
.mn-card-title { display: flex; align-items: center; gap: 12px; }

.mn-app-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--light-color);
  font-size: 18px;
  color: var(--primary-color);
}

.mn-av {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--white-color);
}
.mn-av.is-xs { width: 20px; height: 20px; font-size: 8px; vertical-align: middle; }
.av-1 { background: var(--primary-color); color: var(--white-color); }
.av-2 { background: var(--secondary-color); color: var(--white-color); }
.av-3 { background: #ddd5ff; color: var(--primary-color); }
.av-4 { background: #1d1a3a; color: var(--white-color); }

.mn-avatars { display: flex; }
.mn-avatars span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid var(--white-color);
  font-size: 11px;
  font-weight: 700;
}
.mn-avatars span:first-child { margin-left: 0; }
.mn-avatars .av-more { background: var(--light-color); color: var(--primary-color); }
.mn-avatars.is-sm span { width: 28px; height: 28px; font-size: 10px; border-color: #1a1640; }

.mn-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-color);
  vertical-align: middle;
}
.mn-rec-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.mn-line { display: flex; gap: 14px; padding: 14px 16px; border-radius: 14px; transition: background-color 0.25s ease, opacity 0.25s ease; }
.mn-line strong { font-size: 14px; color: var(--secondary-color); }
.mn-line strong.is-accent { color: var(--primary-color); }
.mn-line time { margin-left: 4px; font-size: 12px; color: var(--muted-color); }
.mn-line p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--para-color); }
.mn-line.is-marked { background: var(--light-color); border: 1px solid var(--pale-lavender); }
.mn-line.is-current { box-shadow: inset 3px 0 0 var(--primary-color); background: #faf9ff; }
.mn-line.is-hidden { display: none; }

.mn-chips-sm { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-chips-sm span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  background: #f1f0f6;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-color);
}
.mn-chips-sm span.is-ai { background: var(--light-color); color: var(--primary-color); }

.mn-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
}

.mn-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-topics.is-col { flex-direction: column; align-items: flex-start; }
.mn-topics span {
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
}

/* Hero */
.mn-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 110px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 45%, #e2dbff 0%, transparent 70%),
    linear-gradient(180deg, #f3f1ff 0%, var(--white-color) 100%);
}
.mn-hero-head { max-width: 1040px; margin: 0 auto 56px; text-align: center; }
.mn-hero-title {
  margin-bottom: 22px;
  font-size: 62px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--secondary-color);
}
.mn-hero-title span {
  display: block;
  background: linear-gradient(90deg, #6a4bff, var(--primary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mn-hero-text { max-width: 860px; margin: 0 auto 32px; font-size: 18px; line-height: 1.7; color: var(--muted-color); }

.mn-app {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 40px 90px #4b26e72e;
  overflow: hidden;
}
.mn-app-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
}
.mn-app-title { flex: 1; min-width: 180px; }
.mn-app-title strong { display: block; font-size: 18px; color: var(--secondary-color); }
.mn-app-title span { font-size: 13px; color: var(--muted-color); }
.mn-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
}
.mn-rec .mn-rec-dot { background: #ef4444; animation: mn-blink 1.4s ease-in-out infinite; }
@keyframes mn-blink { 50% { opacity: 0.3; } }

.mn-app-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; padding: 24px; }
.mn-panel { padding: 18px; border-radius: 18px; border: 1px solid var(--border-color); background: var(--white-color); }
.mn-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--secondary-color); }
.mn-panel-head .bi { margin-right: 6px; color: var(--primary-color); }
.mn-live-tag, .mn-good {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--white-color);
}
.mn-live .mn-line { padding: 12px; }
.mn-live .mn-line + .mn-line { margin-top: 6px; }

.mn-side { display: grid; gap: 18px; align-content: start; }
.mn-summary {
  padding: 22px;
  border-radius: 18px;
  background: radial-gradient(circle at 100% 0%, #7a5cffb3, transparent 60%), linear-gradient(160deg, #4b26e7, #2a1290);
  color: var(--white-color);
}
.mn-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.mn-summary p { margin-bottom: 16px; font-size: 14px; line-height: 1.6; color: #ffffffd9; }
.mn-actionbox { padding: 14px; border-radius: 12px; background: #ffffff1a; }
.mn-actionbox > span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffffa6; }
.mn-actionbox label { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.mn-actionbox em { margin-left: auto; font-style: normal; color: #ffffffa6; }

.mn-meter + .mn-meter { margin-top: 12px; }
.mn-meter div { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--para-color); }
.mn-meter b { color: var(--primary-color); }
.mn-meter i { display: block; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--primary-color) var(--w), var(--pale-lavender) var(--w)); }

/* Transcript card */
.mn-transcript { padding: 22px; }
.mn-search-sm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--pale-lavender);
  font-size: 14px;
  color: #9a9cb3;
}
.mn-search-sm .bi { color: var(--primary-color); }
.mn-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.mn-filters button {
  padding: 7px 14px;
  border: 0;
  border-radius: 50px;
  background: #f1f0f6;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mn-filters button:hover { background: var(--pale-lavender); }
.mn-filters button.is-active { background: var(--primary-color); color: var(--white-color); }
.mn-lines { display: grid; gap: 6px; }

/* Call quality card */
.mn-cq {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #ffffff1a;
  background: #15123a;
  box-shadow: 0 40px 80px #00000066;
}
.mn-cq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -22px -22px 22px; padding: 18px 22px; border-bottom: 1px solid #ffffff14; }
.mn-cq-head strong { display: block; font-size: 17px; }
.mn-cq-head span { font-size: 13px; color: #ffffffa6; }
.mn-cq-head > div { flex: 1; }
.mn-cq-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #ffffff12; font-size: 18px; color: #c9bbff; }
.mn-cq-time { padding: 4px 12px; border-radius: 50px; border: 1px solid #ffffff33; font-size: 12px !important; font-weight: 600; color: var(--white-color) !important; }
.mn-cq-box { padding: 20px; border-radius: 18px; border: 1px solid #ffffff14; background: #1d1a4a; }
.mn-cq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; font-size: 15px; }
.mn-seg { display: inline-flex; padding: 4px; border-radius: 50px; background: #0f0c2b; font-size: 12px; font-weight: 600; }
.mn-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 50px; color: #ffffffa6; }
.mn-seg span.is-on { background: var(--primary-color); color: var(--white-color); }
.mn-health { display: flex; align-items: center; gap: 16px; }
.mn-health-ring { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--primary-color); font-size: 26px; color: #c9bbff; }
.mn-health strong { font-size: 22px; }
.mn-health p { margin: 2px 0 0; font-size: 14px; color: #ffffffa6; }
.mn-cq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.mn-cq-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #ffffffcc; }
.mn-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-bottom: 8px; }
.mn-bars i { width: 8px; border-radius: 3px; background: var(--primary-color); }
.mn-bars i:nth-child(1) { height: 30%; }
.mn-bars i:nth-child(2) { height: 50%; }
.mn-bars i:nth-child(3) { height: 70%; }
.mn-bars i:nth-child(4) { height: 88%; }
.mn-bars i:nth-child(5) { height: 100%; }
.mn-bars i.is-off { background: #ffffff33; }
.mn-cq-box .mn-avatars { margin-bottom: 10px; }
.mn-cq-val { display: block; font-size: 18px; }
.mn-cq-list { margin: 0; padding: 4px 20px; list-style: none; border-radius: 18px; border: 1px solid #ffffff14; background: #1d1a4a; }
.mn-cq-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; font-size: 14px; color: #ffffffd9; }
.mn-cq-list li + li { border-top: 1px solid #ffffff14; }
.mn-cq-list li span .bi { margin-right: 10px; color: #c9bbff; }
.mn-cq-list em { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 50px; background: var(--primary-color); font-size: 12px; font-style: normal; font-weight: 600; }

/* Summary report */
.mn-report {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 30px 70px #4b26e71f;
}
.mn-report-nav { display: grid; align-content: start; gap: 4px; padding: 26px 16px; border-right: 1px solid var(--border-color); background: #faf9ff; }
.mn-report-label { margin: 0 0 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-color); }
.mn-report-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--para-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mn-report-nav button:hover { background: var(--white-color); }
.mn-report-nav button.is-active { border-color: var(--pale-lavender); background: var(--white-color); box-shadow: inset -3px 0 0 var(--primary-color), 0 6px 14px #4b26e714; font-weight: 600; color: var(--primary-color); }
.mn-report-body { padding: 32px 40px; }
.mn-report-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.mn-report-top strong { display: block; font-size: 22px; color: var(--secondary-color); }
.mn-report-top span:not(.mn-ai-tag) { font-size: 14px; color: var(--muted-color); }
.mn-report-h { display: block; margin: 20px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-color); }
.mn-report-pane > .mn-report-h:first-child { margin-top: 0; }
.mn-report-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--secondary-color); }
.mn-report-pane ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mn-report-pane ul li { position: relative; padding-left: 18px; font-size: 15px; color: var(--para-color); }
.mn-report-pane ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }
.mn-report-pane .mn-report-tasks li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--light-color); }
.mn-report-pane .mn-report-tasks li::before { display: none; }
.mn-report-tasks em { margin-left: auto; font-size: 13px; font-style: normal; color: var(--muted-color); }
.mn-report-pane:not([hidden]) { animation: mn-fade 0.35s ease; }
@keyframes mn-fade { from { opacity: 0; transform: translateY(6px); } }

/* Steps */
.mn-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.mn-steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
.mn-steps li::before { content: ""; position: absolute; top: 16px; left: 50%; width: calc(100% + 20px); height: 2px; background: var(--pale-lavender); z-index: 0; }
.mn-steps li:last-child::before { display: none; }
.mn-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 26px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: var(--white-color);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mn-steps li:first-child .mn-step-num, .mn-steps li:hover .mn-step-num { background: var(--primary-color); color: var(--white-color); }
.mn-step {
  width: 100%;
  height: 100%;
  padding: 26px 22px;
  border-radius: 20px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mn-steps li:hover .mn-step { transform: translateY(-5px); box-shadow: 0 22px 44px #4b26e71f; }
.mn-step .mn-feat-icon { margin-bottom: 18px; }
.mn-step h3 { margin-bottom: 10px; font-size: 17px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--secondary-color); }
.mn-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-color); }

/* Training card */
.mn-review { padding: 22px; }
.mn-player { display: flex; align-items: center; gap: 16px; margin: 20px 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pale-lavender); background: var(--light-color); }
.mn-play { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary-color); font-size: 20px; color: var(--white-color); }
.mn-wave {
  flex: 1;
  height: 32px;
  background:
    repeating-linear-gradient(90deg, var(--primary-color) 0 3px, transparent 3px 9px) left center / 45% 100% no-repeat,
    repeating-linear-gradient(90deg, #c9bbff 0 3px, transparent 3px 9px) right center / 55% 100% no-repeat;
}
.mn-player time { font-size: 13px; color: var(--muted-color); white-space: nowrap; }
.mn-review-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.mn-review-col { display: grid; gap: 14px; }
.mn-review-box { padding: 18px; border-radius: 16px; border: 1px solid var(--border-color); }
.mn-review-box > strong { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 15px; color: var(--secondary-color); }
.mn-review-box p { margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: var(--muted-color); }
.mn-coach { display: flex; gap: 10px; font-size: 14px; color: var(--secondary-color); }
.mn-coach + .mn-coach { margin-top: 14px; }
.mn-coach > .bi { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--light-color); color: var(--primary-color); }
.mn-coach em { display: table; margin-top: 6px; padding: 2px 10px; border-radius: 50px; background: var(--light-color); font-size: 12px; font-style: normal; font-weight: 600; color: var(--primary-color); }
.mn-coach em.is-focus { background: #f1f0f6; color: var(--secondary-color); }
.mn-mgr .mn-av { width: 26px; height: 26px; font-size: 9px; }
.mn-at { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 50px; border: 1px solid var(--border-color); font-size: 12px; font-weight: 600; color: var(--secondary-color); }

/* Search card */
.mn-searchbox { max-width: 880px; margin: 0 auto; padding: 24px; }
.mn-search-lg { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--primary-color); font-size: 16px; color: #9a9cb3; }
.mn-search-lg > .bi { color: var(--primary-color); }
.mn-search-lg em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 50px; background: var(--light-color); font-size: 13px; font-style: normal; font-weight: 600; color: var(--primary-color); }
.mn-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; font-size: 14px; font-weight: 600; color: var(--muted-color); }
.mn-result { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border-color); transition: border-color 0.25s ease; }
.mn-result + .mn-result { margin-top: 12px; }
.mn-result:hover, .mn-result.is-open { border-color: var(--primary-color); }
.mn-result-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mn-result-top > div { flex: 1; }
.mn-result-top strong { display: block; font-size: 16px; color: var(--secondary-color); }
.mn-result-top span { font-size: 13px; color: var(--muted-color); }
.mn-result-top time { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; background: #f1f0f6; font-size: 13px; font-weight: 600; color: var(--secondary-color); }
.mn-result > p { margin: 0; font-size: 15px; color: var(--para-color); }
.mn-result mark { padding: 0; background: none; font-weight: 600; color: var(--primary-color); }
.mn-context { margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-color); background: #faf9ff; }
.mn-context p { margin-bottom: 8px; font-size: 14px; color: var(--muted-color); }
.mn-play-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary-color); }

/* Tiles */
.mn-tile {
  height: 100%;
  padding: 28px 26px;
  border-radius: 22px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mn-tile:hover { transform: translateY(-5px); box-shadow: 0 24px 50px #4b26e71f; }
.mn-tile:hover .mn-feat-icon { background: var(--primary-color); color: var(--white-color); }
.mn-tile .mn-feat-icon { margin-bottom: 20px; transition: background-color 0.25s ease, color 0.25s ease; }
.mn-tile h3 { margin-bottom: 10px; font-size: 20px; font-weight: 700; color: var(--secondary-color); }
.mn-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-color); }

/* CTA */
.mn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0;
  background: linear-gradient(135deg, #5a33f0 0%, #3d1dc4 50%, #2a1290 100%);
  text-align: center;
  color: var(--white-color);
}
.mn-cta-ring { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid #ffffff26; }
.mn-cta-ring-1 { left: -180px; top: -260px; width: 560px; height: 560px; background: #ffffff0d; }
.mn-cta-ring-2 { right: -240px; top: 20px; width: 720px; height: 720px; }
.mn-cta-title { margin-bottom: 18px; font-size: 54px; font-weight: 700; letter-spacing: -1px; color: var(--white-color); }
.mn-cta-text { max-width: 640px; margin: 0 auto 32px; font-size: 18px; line-height: 1.7; color: #ffffffcc; }

/* Responsive */
@media (max-width: 1199.98px) {
  .mn-hero-title { font-size: 52px; }
  .mn-title { font-size: 40px; }
  .mn-steps { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .mn-steps li::before { display: none; }
}
@media (max-width: 991.98px) {
  .mn-app-body { grid-template-columns: 1fr; }
  .mn-report { grid-template-columns: 1fr; }
  .mn-report-nav { grid-auto-flow: column; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-color); }
  .mn-report-label { display: none; }
  .mn-report-nav button { white-space: nowrap; }
  .mn-cta-title { font-size: 42px; }
}
@media (max-width: 767.98px) {
  .mn-hero { padding: 70px 0 80px; }
  .mn-hero-title { font-size: 38px; }
  .mn-title { font-size: 32px; }
  .mn-steps { grid-template-columns: 1fr 1fr; }
  .mn-review-grid, .mn-cq-grid { grid-template-columns: 1fr; }
  .mn-report-body { padding: 24px; }
  .mn-cta-title { font-size: 34px; }
}
@media (max-width: 575.98px) {
  .mn-steps { grid-template-columns: 1fr; }
  .mn-app-bar .mn-avatars { display: none; }
  .mn-app-body, .mn-transcript, .mn-cq, .mn-review, .mn-searchbox { padding: 16px; }
  .mn-cq-head { margin: -16px -16px 16px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-rec .mn-rec-dot, .mn-report-pane:not([hidden]) { animation: none; }
}

/* AI hero: two stacked lines, 64px on desktop */
.ai-hero-title {
  font-size: 64px;
}

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

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

@media (max-width: 991.98px) {
  .ai-hero-title {
    font-size: 46px;
  }
}

@media (max-width: 575.98px) {
  .ai-hero-title {
    font-size: 36px;
  }
}

/* "AI for every kind of work" heading is now a longer sentence */
.ai-every-title {
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -1px;
}

@media (max-width: 991.98px) {
  .ai-every-title {
    font-size: 36px;
  }
}

@media (max-width: 575.98px) {
  .ai-every-title {
    font-size: 30px;
  }
}



/* ==========================================================
   Pricing page (pq-*)
   ========================================================== */
.pq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.pq-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* Hero (dark, matches AI pages) */
.pq-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0;
  background:
    radial-gradient(ellipse 50% 70% at 85% 50%, #4b26e773 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 0%, #2e149066 0%, transparent 70%),
    #0b0820;
  color: var(--white-color);
}

.pq-hero-title {
  margin-bottom: 22px;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--white-color);
}

.pq-hero-title span {
  display: block;
  background: linear-gradient(90deg, #c9bbff, #8b74ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pq-hero-text {
  margin-bottom: 32px;
  font-size: 17px;
  line-height: 1.75;
  color: #ffffffb8;
}

.pq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pq-perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pq-perks-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid #ffffff1a;
  background: linear-gradient(160deg, #ffffff12, #ffffff05);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.pq-perks-grid li:hover {
  transform: translateY(-3px);
  border-color: #8b74ff80;
}

.pq-perks-grid li.is-wide {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, #4b26e7, #6a4bff);
  border-color: transparent;
}

.pq-perk-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff14;
  font-size: 19px;
  color: #c9bbff;
}

.pq-perks-grid li.is-wide .pq-perk-icon {
  background: var(--white-color);
  color: var(--primary-color);
}

.pq-perks-grid strong {
  display: block;
  font-size: 15px;
  color: var(--white-color);
}

.pq-perks-grid span:not(.pq-perk-icon) {
  font-size: 13px;
  color: #ffffffa6;
}

/* Plan picker */
.pq-picker {
  background: var(--white-color);
}

.pq-picker-box {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

.pq-tabs {
  display: grid;
  gap: 12px;
}

.pq-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pq-tab:hover {
  border-color: #c9bbff;
  transform: translateX(4px);
}

.pq-tab-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--light-color);
  font-size: 20px;
  color: var(--primary-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pq-tab-body {
  flex: 1;
  min-width: 0;
}

.pq-tab-body strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--sora-font);
  font-size: 18px;
  color: var(--secondary-color);
}

.pq-tab-body > span {
  font-size: 13px;
  color: var(--muted-color);
}

.pq-pop {
  padding: 2px 8px;
  border-radius: 50px;
  background: #fbbf24;
  font-family: var(--inter-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--secondary-color);
}

.pq-tab em {
  flex-shrink: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--muted-color);
}

.pq-tab.is-active {
  border-color: transparent;
  background: var(--secondary-color);
  box-shadow: 0 20px 44px #10143a33;
  transform: none;
}

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

.pq-tab.is-active .pq-tab-body strong {
  color: var(--white-color);
}

.pq-tab.is-active .pq-tab-body > span,
.pq-tab.is-active em {
  color: #ffffffa6;
}

.pq-panel {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  box-shadow: 0 24px 60px #4b26e714;
}

.pq-panel:not([hidden]) {
  animation: pq-in 0.4s ease;
}

@keyframes pq-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.pq-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 30px 32px;
  background:
    radial-gradient(circle at 100% 0%, #8b74ff80, transparent 55%),
    linear-gradient(135deg, #4b26e7, #2a1290);
  color: var(--white-color);
}

.pq-panel-head > div:first-child {
  flex: 1;
  min-width: 260px;
}

.pq-panel-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bbff;
}

.pq-panel-head h3 {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white-color);
}

.pq-onboard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: #2dd4bf;
  font-size: 13px;
  font-weight: 700;
  color: #063b3a;
}

.pq-panel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pq-panel-cta .btn-trial {
  background: var(--white-color);
  color: var(--primary-color);
}

.pq-panel-cta .btn-trial:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.pq-panel-cta span {
  font-size: 12px;
  color: #ffffffb3;
}

.pq-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 28px 32px 32px;
}

.pq-feat {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: #faf9ff;
}

.pq-feat h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-color);
}

.pq-feat h4 .bi {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--pale-lavender);
  font-size: 14px;
  color: var(--primary-color);
}

.pq-feat ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pq-feat li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--para-color);
}

.pq-feat li::before {
  content: "\F4B5";
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "bootstrap-icons";
  font-size: 14px;
  color: var(--primary-color);
}

.pq-feat.pq-offer {
  border-color: transparent;
  background: linear-gradient(150deg, #fff7db, #fef3c7);
}

.pq-feat.pq-offer h4 .bi {
  background: #fbbf24;
  color: var(--secondary-color);
}

.pq-soon,
.pq-free {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.pq-soon {
  background: var(--light-color);
  color: var(--primary-color);
}

.pq-free {
  background: #dcfce7;
  color: #15803d;
}

/* Custom package builder */
.pq-custom {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 70% at 100% 50%, #4b26e766 0%, transparent 70%),
    var(--secondary-color);
  color: var(--white-color);
}

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

.pq-custom-text {
  margin-bottom: 24px;
  font-size: 17px;
  color: #ffffffb8;
}

.pq-custom-ticks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--white-color);
}

.pq-custom-ticks .bi {
  margin-right: 8px;
  color: #b9a6ff;
}

.pq-builder {
  padding: 28px;
  border-radius: 26px;
  background: var(--white-color);
  box-shadow: 0 30px 70px #00000059;
}

.pq-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.pq-builder-head strong {
  font-family: var(--sora-font);
  font-size: 20px;
  color: var(--secondary-color);
}

.pq-builder-head span {
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--light-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
}

.pq-mods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pq-mod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--pale-lavender);
  background: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--secondary-color);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pq-mod .bi {
  color: var(--primary-color);
}

.pq-mod::after {
  content: "\F64D";
  margin-left: auto;
  font-family: "bootstrap-icons";
  font-size: 16px;
  color: #c9c7d8;
}

.pq-mod:hover {
  border-color: #c9bbff;
}

.pq-mod.is-on {
  border-color: var(--primary-color);
  background: var(--light-color);
}

.pq-mod.is-on::after {
  content: "\F26A";
  color: var(--primary-color);
}

.pq-builder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 24px;
  border-radius: 50px;
  background: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  transition: background-color 0.25s ease;
}

.pq-builder-btn:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

/* Why */
.pq-why {
  background: var(--white-color);
}

.pq-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 24px;
  border: 1px solid var(--pale-lavender);
  overflow: hidden;
}

.pq-why-item {
  position: relative;
  padding: 34px 28px;
  border-left: 1px solid var(--pale-lavender);
  transition: background-color 0.3s ease;
}

.pq-why-item:first-child {
  border-left: 0;
}

.pq-why-item:hover {
  background: var(--light-color);
}

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

.pq-why-num {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: var(--sora-font);
  font-size: 14px;
  font-weight: 700;
  color: #a996ff;
}

.pq-why-item h3 {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--secondary-color);
}

.pq-why-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-color);
}

@media (max-width: 1199.98px) {
  .pq-picker-box {
    grid-template-columns: 1fr;
  }

  .pq-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .pq-tab:hover {
    transform: none;
  }

  .pq-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pq-why-item:nth-child(3) {
    border-left: 0;
  }

  .pq-why-item:nth-child(n + 3) {
    border-top: 1px solid var(--pale-lavender);
  }
}

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

  .pq-custom-title {
    font-size: 30px;
  }
}

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

  .pq-hero-title {
    font-size: 36px;
  }

  .pq-perks-grid,
  .pq-tabs,
  .pq-features,
  .pq-mods,
  .pq-custom-ticks {
    grid-template-columns: 1fr;
  }

  .pq-panel-head,
  .pq-features {
    padding: 22px;
  }

  .pq-why-grid {
    grid-template-columns: 1fr;
  }

  .pq-why-item {
    border-left: 0;
  }

  .pq-why-item + .pq-why-item {
    border-top: 1px solid var(--pale-lavender);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pq-panel:not([hidden]) {
    animation: none;
  }
}




@media (max-width:767px){
  .hero-media {
    display: none;
  }

  .btn-trial {
    padding: 10px 30px;
    width: fit-content;
    font-size: 16px;
  }

  .hero-title-accent {
    font-size: 34px;
  }

  .hero-title {
    font-size: 24px;
    line-height: 1.3;
  }

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

  .role-card-count {
    margin-left: 25px;
  }

  .footer-cta-btn {
    padding: 12px 10px;
    font-size: 16px;
  }

  .module-media img {
    display: none;
  }


}


@media (min-width:768px) and (max-width:991px) {
  .hero-title, .hero-title-accent {
    font-size: 40px;
  }
}

@media (max-width:991px){
  .agent-cta-visual {
    display: none;
  }
}





/* New CSS  */


@media (max-width:767px){
  .module-media img, .feature-hero-media img {
    display: none;
  }

  .ai-stack-media {
    margin-top: 16px;
  }

  .solution-hero-media img {
    display: none;
  }

  

  
}


@media (max-width:991px) {
  .payroll-list {
    margin-top: 20px;
  }

  .ct-visual {
    display: none;
  }

  .fq-side {
    display: none;
  }

  .ct-card {
    margin-top: 30px;
  }
  
  .ab-story-media, .ab-how-media {
    margin-bottom: 30px;
  }


  .bd-toc {
    margin-bottom: 30px;
  }
  
 
  .ab-values-list {
    margin-top: 30px;
  }

  .mn-transcript, .mn-cq {
    margin-top: 30px;
  }

  .mn-review {
    margin-bottom: 30px;
  }

}

@media (min-width:768px) and (max-width:991px) {
  .feature-hero-media img {
    margin-top: 30px;
  }
}
/* ==========================================================
   Legal pages (Terms of Service)
   ========================================================== */
.legal-hero-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.legal-hero-content .solution-hero-text {
  margin-left: auto;
  margin-right: auto;
}

.legal-hero-content .feature-hero-actions {
  justify-content: center;
}

.legal-page {
  background: var(--white-color);
}

/* Sticky "On this page" list */
.legal-toc {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  padding: 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--pale-lavender);
  background: var(--light-color);
}

.legal-toc-label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.legal-toc-nav {
  display: flex;
  flex-direction: column;
}

.legal-toc-nav a {
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--pale-lavender);
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-color);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-toc-nav a:hover {
  color: var(--primary-color);
}

.legal-toc-nav a.is-active {
  border-left-color: var(--primary-color);
  font-weight: 600;
  color: var(--primary-color);
}

/* Document body */
.legal-content {
  max-width: 860px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--para-color);
}

.legal-section {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.legal-section + .legal-section {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--pale-lavender);
}

.legal-content h2 {
  margin-bottom: 18px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--secondary-color);
}

.legal-content p {
  margin-bottom: 16px;
}

.legal-content strong {
  font-weight: 600;
  color: var(--secondary-color);
}

.legal-content a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.legal-content ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.legal-content li {
  position: relative;
  padding-left: 22px;
}

.legal-content li + li {
  margin-top: 8px;
}

.legal-content li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
}

@media (max-width: 991.98px) {
  .legal-toc {
    position: static;
    max-height: none;
  }

  .legal-content h2 {
    font-size: 24px;
  }
}

@media (max-width: 575.98px) {
  .legal-content {
    font-size: 15px;
  }

  .legal-section + .legal-section {
    margin-top: 32px;
    padding-top: 32px;
  }
}