:root {
  --ink: #0F172A;
  --ink-2: #1E293B;
  --muted: #64748B;
  --paper: #F8FAFC;
  --paper-2: #F1F5F9;
  --white: #ffffff;
  --lime: #2563EB;
  --lime-2: #06B6D4;
  --blue: #2563EB;
  --teal: #06B6D4;
  --accent: #7C3AED;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --coral: #7C3AED;
  --line: #E2E8F0;
  --dark-line: rgba(255, 255, 255, .14);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --font-head: "Manrope", "Arial", sans-serif;
  --font-body: "DM Sans", "Arial", sans-serif;
  --brand-gradient: linear-gradient(135deg, #2563EB, #06B6D4 52%, #7C3AED);
  --voice-glow: 0 0 40px rgba(6, 182, 212, .25);
  --shadow: 0 28px 80px rgba(15, 23, 42, .11);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html.page-is-hidden *,
html.page-is-hidden *::before,
html.page-is-hidden *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

p,
h1,
h2,
h3,
blockquote {
  margin-top: 0;
}

.container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.section {
  padding: 120px 0;
}

#vision {
  scroll-margin-top: 110px;
  background:
    radial-gradient(circle at 8% 12%, rgba(6, 182, 212, .1), transparent 34%),
    radial-gradient(circle at 92% 82%, rgba(37, 99, 235, .1), transparent 38%),
    linear-gradient(180deg, #F1F8FF 0%, #EAF4FF 100%);
}

.skip-link {
  position: fixed;
  z-index: 2000;
  left: 18px;
  top: -60px;
  background: var(--lime);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  transition: top .2s;
}

.skip-link:focus {
  top: 18px;
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  transition: padding .3s ease;
}

.site-header.scrolled {
  padding-top: 9px;
}

.nav-shell {
  width: min(1240px, 100%);
  height: 68px;
  margin: 0 auto;
  padding: 0 12px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(17, 24, 15, .1);
  border-radius: 18px;
  background: rgba(249, 250, 247, .84);
  box-shadow: 0 12px 40px rgba(30, 42, 28, .06);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 11px;
  background: var(--ink);
}

.brand-mark span {
  width: 3px;
  border-radius: 5px;
  background: var(--lime);
  animation: logo-wave 1.2s ease-in-out infinite alternate;
}

.brand-mark span:nth-child(1) {
  height: 9px;
}

.brand-mark span:nth-child(2) {
  height: 17px;
  animation-delay: -.4s;
}

.brand-mark span:nth-child(3) {
  height: 12px;
  animation-delay: -.8s;
}

@keyframes logo-wave {
  to {
    transform: scaleY(.55);
  }
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.desktop-nav a,
.desktop-nav>button:not(.nav-guide-trigger) {
  border: 0;
  padding: 0;
  color: #485445;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
}

.desktop-nav a:hover,
.desktop-nav>button:not(.nav-guide-trigger):hover {
  color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-cta {
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  color: var(--white);
  background: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: #263322;
}

.nav-cta span {
  color: var(--lime);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--white);
  transition: transform .25s;
}

.menu-toggle.active span:first-child {
  transform: translateY(3.2px) rotate(45deg);
}

.menu-toggle.active span:last-child {
  transform: translateY(-3.2px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  min-height: 920px;
  padding: 170px 0 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgba(17, 24, 15, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 24, 15, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.hero-orb-one {
  width: 560px;
  height: 560px;
  right: -220px;
  top: -210px;
  background: radial-gradient(circle, rgba(201, 255, 99, .16), transparent 69%);
}

.hero-orb-two {
  width: 430px;
  height: 430px;
  left: -240px;
  bottom: -240px;
  background: radial-gradient(circle, rgba(37, 99, 235, .12), transparent 68%);
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(480px, 1.07fr);
  align-items: center;
  gap: 70px;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #495445;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 25px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(14, 165, 164, .13);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(14, 165, 164, 0);
  }
}

.hero h1 {
  max-width: 650px;
  margin-bottom: 26px;
  font-family: var(--font-head);
  font-size: clamp(53px, 5.4vw, 78px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.065em;
}

.hero h1 em {
  display: inline-block;
  color: var(--teal);
  font-style: normal;
  position: relative;
  white-space: nowrap;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -8px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg width='300' height='9' viewBox='0 0 300 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7C58 1 111 2 150 4c52 2 99-4 148-2' fill='none' stroke='%23a9d94e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.hero-lead {
  max-width: 590px;
  margin-bottom: 32px;
  color: #5a6556;
  font-size: 18px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, background .22s, border-color .22s;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--ink);
  background: var(--lime);
  box-shadow: 0 12px 30px rgba(119, 159, 42, .17);
}

.button-primary:hover {
  background: #d4ff82;
  box-shadow: 0 15px 34px rgba(119, 159, 42, .25);
}

.button-ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, .55);
}

.button-ghost:hover,
.button-outline:hover {
  border-color: rgba(17, 24, 15, .3);
  background: var(--white);
}

.button-outline {
  border-color: var(--line);
  background: transparent;
}

.button-light {
  color: var(--ink);
  background: var(--white);
}

.button-light:hover {
  background: var(--lime);
}

.button.full {
  width: 100%;
}

.play-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding-left: 2px;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  font-size: 9px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  color: #667262;
  font-size: 12px;
  font-weight: 600;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-proof i {
  color: var(--teal);
  font-style: normal;
  font-weight: 800;
}

.hero-product {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
}

.product-glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 255, 99, .2), rgba(14, 165, 164, .07) 48%, transparent 70%);
}

.browser-card {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(16, 24, 32, .13);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 38px 90px rgba(16, 24, 32, .18), 0 3px 0 rgba(255, 255, 255, .8) inset;
  transform: rotate(.5deg);
}

.browser-topbar {
  height: 46px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  border-bottom: 1px solid #e9ece6;
  background: #f7f8f5;
}

.browser-dots {
  display: flex;
  gap: 5px;
}

.browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6dcd2;
}

.browser-url {
  justify-self: center;
  width: 190px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e2e6df;
  border-radius: 7px;
  color: #7a8476;
  background: var(--white);
  font-size: 9px;
}

.lock {
  width: 5px;
  height: 5px;
  color: #6aa520;
  font-size: 18px;
  line-height: 0;
}

.browser-more {
  justify-self: end;
  color: #8a9387;
  font-size: 8px;
  letter-spacing: 2px;
}

.browser-page {
  position: relative;
  height: 450px;
  padding: 25px;
  overflow: hidden;
  background: linear-gradient(135deg, #f6f8f3 50%, #eef3e9);
}

.mini-nav {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.mini-nav span:not(.mini-logo) {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: #d2d8cf;
}

.mini-logo {
  width: 48px;
  height: 10px;
  margin-right: auto;
  border-radius: 4px;
  background: var(--ink);
}

.mini-content {
  padding-top: 80px;
}

.mini-kicker {
  width: 75px;
  height: 7px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: var(--lime-2);
}

.mini-heading {
  width: 53%;
  height: 24px;
  margin-bottom: 9px;
  border-radius: 4px;
  background: #253022;
}

.mini-heading.short {
  width: 38%;
}

.mini-line {
  width: 39%;
  height: 6px;
  margin-top: 18px;
  border-radius: 3px;
  background: #cbd2c7;
}

.mini-line.small {
  width: 29%;
  margin-top: 8px;
}

.mini-button {
  width: 82px;
  height: 28px;
  margin-top: 22px;
  border-radius: 6px;
  background: var(--ink);
}

.assistant-panel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 292px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 32, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 55px rgba(16, 24, 32, .15);
}

.assistant-head {
  height: 56px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #edf0eb;
}

.assistant-avatar {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  background: var(--ink);
}

.assistant-avatar span {
  width: 2px;
  border-radius: 2px;
  background: var(--lime);
}

.assistant-avatar span:nth-child(1) {
  height: 8px;
}

.assistant-avatar span:nth-child(2) {
  height: 15px;
}

.assistant-avatar span:nth-child(3) {
  height: 10px;
}

.assistant-head>div:nth-child(2) {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.assistant-head strong {
  font-size: 12px;
}

.assistant-head small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #758071;
  font-size: 8px;
}

.assistant-head small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #79bc29;
}

.assistant-head button {
  margin-left: auto;
  border: 0;
  color: #8a9387;
  background: none;
  font-size: 8px;
}

.assistant-body {
  min-height: 186px;
  padding: 14px;
}

.message {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.5;
}

.message-user {
  max-width: 72%;
  margin-left: auto;
  color: #374034;
  background: #eff2ec;
  border-bottom-right-radius: 3px;
}

.message-bolo {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  padding: 0;
}

.message-bolo p {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e4e9df;
  border-radius: 3px 10px 10px 10px;
  background: var(--white);
}

.tiny-logo {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--lime);
  background: var(--ink);
  font-size: 8px;
  font-weight: 800;
}

.action-chip {
  width: max-content;
  margin: 11px 0 0 27px;
  padding: 5px 8px;
  border-radius: 6px;
  color: #075e5d;
  background: rgba(14, 165, 164, .12);
  font-size: 8px;
  font-weight: 700;
}

.action-chip span {
  margin-left: 5px;
}

.assistant-mode-row {
  padding: 9px 9px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-top: 1px solid #edf0eb;
}

.assistant-mode-row span {
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #edf0eb;
  border-radius: 8px;
  color: #7a8476;
  background: #f8faf6;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.assistant-mode-row .active {
  color: #075e5d;
  border-color: rgba(14, 165, 164, .16);
  background: rgba(14, 165, 164, .12);
}

.assistant-text-composer {
  min-height: 32px;
  margin: 8px 9px 0;
  padding: 0 5px 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #edf0eb;
  border-radius: 9px;
  background: #f9faf7;
}

.assistant-text-composer span {
  flex: 1;
  overflow: hidden;
  color: #8b9588;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-text-composer button {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: var(--lime);
  font-size: 10px;
  font-weight: 800;
}

.voice-bar {
  height: 54px;
  padding: 0 9px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #edf0eb;
}

.voice-status {
  flex: 1;
  color: #90988e;
  font-size: 8px;
}

.waveform {
  display: flex;
  align-items: center;
  gap: 2px;
}

.waveform i {
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: #8c9a85;
  animation: wave .85s ease-in-out infinite alternate;
}

.waveform i:nth-child(2) {
  height: 14px;
  animation-delay: -.2s;
}

.waveform i:nth-child(3) {
  height: 8px;
  animation-delay: -.4s;
}

.waveform i:nth-child(4) {
  height: 12px;
  animation-delay: -.6s;
}

.waveform i:nth-child(5) {
  height: 6px;
  animation-delay: -.8s;
}

@keyframes wave {
  to {
    transform: scaleY(.45);
  }
}

.voice-bar button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--lime);
}

.mic-dot {
  width: 8px;
  height: 13px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  position: relative;
}

.mic-dot::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 6px;
  left: -3px;
  bottom: -4px;
  border: 1.5px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid rgba(17, 24, 15, .11);
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 40px rgba(39, 55, 35, .12);
  backdrop-filter: blur(10px);
  animation: float-card 4s ease-in-out infinite;
}

.floating-card>span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf7dc;
  font-size: 13px;
  font-weight: 800;
}

.floating-card div {
  display: flex;
  flex-direction: column;
}

.floating-card strong {
  font-size: 10px;
}

.floating-card small {
  color: #7b8578;
  font-size: 8px;
}

.floating-card-one {
  right: -17px;
  top: 95px;
}

.floating-card-two {
  left: -18px;
  bottom: 82px;
  animation-delay: -2s;
}

@keyframes float-card {
  50% {
    transform: translateY(-8px);
  }
}

.usecase-strip {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #eef2e9;
}

.usecase-strip::before,
.usecase-strip::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 92px;
  pointer-events: none;
}

.usecase-strip::before {
  left: 0;
  background: linear-gradient(90deg, #eef2e9, rgba(238, 242, 233, 0));
}

.usecase-strip::after {
  right: 0;
  background: linear-gradient(270deg, #eef2e9, rgba(238, 242, 233, 0));
}

.strip-track {
  width: max-content;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  white-space: nowrap;
  color: #495445;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: strip-marquee 28s linear infinite;
  will-change: transform;
}

.strip-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 31px;
  padding-right: 31px;
}

.strip-track i {
  color: var(--teal);
  font-style: normal;
  font-size: 10px;
}

.usecase-strip:hover .strip-track {
  animation-play-state: paused;
}

@keyframes strip-marquee {
  to {
    transform: translateX(-50%);
  }
}

.section-heading {
  margin-bottom: 55px;
}

.section-heading h2,
.experience h2,
.demo-heading h2,
.faq-heading h2,
.cta-card h2 {
  margin: 15px 0 0;
  font-family: var(--font-head);
  font-size: clamp(40px, 4.7vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.section-heading p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.split-heading {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  align-items: end;
  gap: 90px;
}

.split-heading h2 {
  max-width: 720px;
}

.split-heading>p {
  margin: 0 0 5px;
}

.center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center p {
  max-width: 640px;
  margin: 18px auto 0;
}

.problem {
  background: #fbfcf9;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.problem-card {
  position: relative;
  min-height: 315px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .25s, box-shadow .25s;
}

.problem-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.card-number {
  position: absolute;
  top: 25px;
  right: 26px;
  color: #a4ada1;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
}

.icon-box {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 48px;
  border-radius: 12px;
}

.icon-box svg {
  width: 25px;
}

.icon-coral {
  background: #fff0ec;
  color: #df674f;
}

.icon-blue {
  background: #eaf0ff;
  color: var(--blue);
}

.icon-lime {
  background: #e7fbf7;
  color: var(--teal);
}

.problem-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: 23px;
  letter-spacing: -.03em;
}

.problem-card p {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 15px;
}

.problem-tag {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 6px;
  color: #576252;
  background: #f1f4ee;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.problem-intro-copy {
  display: grid;
  gap: 12px;
}

.problem-intro-copy p {
  margin: 0;
}

.problem-story-grid {
  align-items: stretch;
}

.problem-story-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .07), transparent 34%),
    var(--white);
}

.problem-story-card .icon-box {
  margin-bottom: 34px;
}

.problem-story-card p {
  margin-bottom: 14px;
  line-height: 1.68;
}

.problem-result {
  margin-top: auto;
  padding: 14px 15px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(6, 182, 212, .12), transparent 42%),
    rgba(248, 250, 252, .86);
}

.problem-result small {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.problem-result strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

html[data-theme="dark"] .problem-story-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .13), transparent 36%),
    #13202b;
}

html[data-theme="dark"] .problem-result {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 100% 0%, rgba(6, 182, 212, .12), transparent 42%),
    rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .problem-result small {
  color: #67e8f9;
}

html[data-theme="dark"] .problem-result strong {
  color: #E5EDF7;
}

.experience {
  color: var(--white);
  background: var(--ink);
}

.experience-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
}

.experience-stage {
  min-height: 620px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 40%, rgba(201, 255, 99, .12), transparent 37%), linear-gradient(145deg, #1c2719, #11180f);
  position: relative;
  overflow: hidden;
}

.experience-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.stage-label {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b9c2b6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stage-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(201, 255, 99, .1);
}

.voice-orb-large {
  position: relative;
  z-index: 1;
  width: 230px;
  height: 230px;
  display: grid;
  place-items: center;
}

.orb-ring {
  position: absolute;
  border: 1px solid rgba(201, 255, 99, .2);
  border-radius: 50%;
  animation: orb-pulse 2.6s ease-out infinite;
}

.ring-one {
  inset: 14px;
}

.ring-two {
  inset: 0;
  animation-delay: -1.3s;
}

@keyframes orb-pulse {
  0% {
    transform: scale(.7);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

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

.orb-core {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0ff9f, #a9e33d 45%, #5c8118);
  box-shadow: 0 0 65px rgba(201, 255, 99, .24), inset 0 1px 1px rgba(255, 255, 255, .7);
}

.orb-core i,
.cta-orb i {
  width: 4px;
  height: 34px;
  border-radius: 4px;
  background: var(--ink);
  animation: dark-wave 1s ease-in-out infinite alternate;
}

.orb-core i:nth-child(2),
.cta-orb i:nth-child(4) {
  height: 56px;
  animation-delay: -.3s;
}

.orb-core i:nth-child(3),
.cta-orb i:nth-child(3) {
  height: 72px;
  animation-delay: -.6s;
}

.orb-core i:nth-child(4),
.cta-orb i:nth-child(2) {
  height: 48px;
  animation-delay: -.9s;
}

.orb-core i:nth-child(5),
.cta-orb i:nth-child(1) {
  height: 24px;
  animation-delay: -1.2s;
}

@keyframes dark-wave {
  to {
    transform: scaleY(.45);
    opacity: .68;
  }
}

.stage-transcript {
  position: relative;
  z-index: 1;
  margin-top: 35px;
  text-align: center;
}

.stage-transcript span {
  color: #8f9b8b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stage-transcript p {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
}

.stage-action {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(201, 255, 99, .18);
  border-radius: 9px;
  color: #cce5a0;
  background: rgba(201, 255, 99, .07);
  font-size: 11px;
}

.stage-action span {
  margin-right: 6px;
  color: var(--lime);
}

.section-kicker.light {
  color: #aebbab;
}

.experience h2 {
  margin-bottom: 25px;
}

.experience-copy>p {
  max-width: 550px;
  margin-bottom: 38px;
  color: #aeb8ab;
  font-size: 17px;
}

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

.feature-list li {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--dark-line);
}

.feature-list li:last-child {
  border-bottom: 1px solid var(--dark-line);
}

.feature-list>li>span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
  font-size: 10px;
  font-weight: 700;
}

.feature-list div {
  display: flex;
  flex-direction: column;
}

.feature-list strong {
  font-size: 15px;
}

.feature-list small {
  margin-top: 3px;
  color: #919d8e;
  font-size: 13px;
}

.how {
  background: var(--paper-2);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f9faf7;
}

.step-visual {
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #e8ede3;
  position: relative;
}

.step-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(17, 24, 15, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 24, 15, .045) 1px, transparent 1px);
  background-size: 25px 25px;
}

.code-window {
  position: relative;
  z-index: 1;
  width: 85%;
  padding: 22px;
  border: 1px solid #303b2d;
  border-radius: 13px;
  color: #bdc9b9;
  background: var(--ink);
  box-shadow: 0 17px 35px rgba(17, 24, 15, .18);
  font: 11px/1.85 monospace;
}

.code-window span {
  color: var(--lime);
}

.code-window i {
  color: #8db6ff;
  font-style: normal;
}

.knowledge-card {
  position: relative;
  z-index: 2;
  width: 165px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(33, 45, 30, .13);
  transform: rotate(-3deg);
}

.knowledge-card span {
  font-weight: 700;
  font-size: 12px;
}

.knowledge-card i {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.knowledge-card b {
  margin-top: 17px;
  font-family: var(--font-head);
  font-size: 38px;
  line-height: 1;
}

.knowledge-pulse {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(96, 141, 27, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(96, 141, 27, .05), 0 0 0 70px rgba(96, 141, 27, .025);
}

.live-widget {
  position: relative;
  z-index: 1;
  width: 84%;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(33, 45, 30, .13);
}

.mini-orb {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  background: var(--ink);
}

.mini-orb i {
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: var(--lime);
}

.mini-orb i:nth-child(2) {
  height: 17px;
}

.live-widget>div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.live-widget span {
  font-size: 11px;
  font-weight: 700;
}

.live-widget small {
  color: var(--muted);
  font-size: 8px;
}

.live-widget b {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 5px;
  color: #4e7814;
  background: #edf7dd;
  font-size: 8px;
  text-transform: uppercase;
}

.step-copy {
  padding: 28px;
}

.step-copy>span,
.bento-copy>span {
  color: #758171;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.step-copy h3 {
  margin: 10px 0 9px;
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: -.03em;
}

.step-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.bento-section {
  background: #fbfcf9;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.bento {
  min-height: 390px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  position: relative;
}

.bento-wide {
  grid-column: span 1;
}

.bento-copy {
  position: relative;
  z-index: 2;
  max-width: 470px;
}

.bento-copy h3 {
  margin: 10px 0;
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.045em;
}

.bento-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.sales-card {
  color: var(--white);
  background: var(--ink);
}

.sales-card .bento-copy>span {
  color: #aab4a7;
}

.sales-card .bento-copy p {
  color: #a7b2a4;
}

.sales-ui {
  height: 190px;
  margin-top: 25px;
  padding: 22px;
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  background: #172532;
  position: relative;
}

.intent-pill {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(201, 255, 99, .17);
  border-radius: 9px;
  color: #b7c3b3;
  background: rgba(201, 255, 99, .05);
  font-size: 10px;
}

.intent-pill b {
  color: var(--lime);
}

.recommend-card {
  position: absolute;
  left: 70px;
  right: 35px;
  bottom: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  border-radius: 13px;
  color: var(--ink);
  background: var(--lime);
  transform: rotate(-2deg);
}

.recommend-card small {
  grid-column: 1/-1;
  font-size: 8px;
  text-transform: uppercase;
}

.recommend-card strong {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1.2;
}

.recommend-card span {
  font-size: 9px;
  font-weight: 700;
}

.language-card {
  background: #eaf0ff;
}

.language-orbit {
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(76, 127, 223, .2);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 34px rgba(110, 159, 255, .07), 0 0 0 68px rgba(110, 159, 255, .035);
}

.language-orbit span {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--blue);
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
}

.language-orbit i,
.language-orbit b {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #cbdafb;
  border-radius: 14px;
  color: #4568a9;
  background: rgba(255, 255, 255, .88);
  font-style: normal;
}

.language-orbit i {
  left: -17px;
  top: 31px;
}

.language-orbit b {
  right: -10px;
  bottom: 27px;
}

.action-card {
  background: #fff5f1;
}

.action-preview {
  padding: 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.action-preview div {
  min-width: 145px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(223, 103, 79, .17);
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 12px 30px rgba(134, 74, 61, .06);
}

.action-preview div:first-child {
  transform: rotate(-3deg);
}

.action-preview div:last-child {
  transform: rotate(3deg);
}

.action-preview span {
  font-size: 12px;
  font-weight: 700;
}

.action-preview small {
  color: var(--muted);
  font-size: 9px;
}

.action-preview>i {
  color: #da6c56;
  font-style: normal;
  font-size: 25px;
}

.knowledge-card-main {
  background: #e9f8f5;
}

.source-stack {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source-stack div {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  border: 1px solid rgba(82, 108, 40, .11);
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
}

.source-stack span {
  color: #80926a;
  font-size: 9px;
}

.source-stack p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
}

.source-stack b {
  color: #6b8d34;
  font-size: 10px;
}

.demo-section {
  color: var(--white);
  background: var(--ink);
}

.demo-heading {
  margin-bottom: 45px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 70px;
}

.demo-heading h2 {
  max-width: 700px;
}

.demo-heading p {
  margin: 0 0 6px;
  color: #b7c0b3;
  font-size: 16px;
}

.video-frame {
  padding: 12px;
  border: 1px solid var(--dark-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .25);
}

.video-frame video {
  max-height: 680px;
  border-radius: 19px;
  background: #0b0f0a;
}

.pricing {
  background: var(--paper);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 18px;
}

.price-card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcf9;
}

.price-card.featured {
  color: var(--white);
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 30px 70px rgba(17, 24, 15, .2);
  transform: translateY(-12px);
}

.popular-label {
  position: absolute;
  top: 17px;
  right: 18px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--ink);
  background: var(--lime);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-top>span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
}

.price-top p {
  min-height: 72px;
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 14px;
}

.featured .price-top p {
  color: #aab5a6;
}

.price {
  min-height: 68px;
  margin-bottom: 27px;
  display: flex;
  align-items: baseline;
}

.price sup {
  margin-right: 3px;
  font-size: 17px;
  font-weight: 700;
}

.price strong {
  font-family: var(--font-head);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.05em;
}

.price>span {
  margin-left: 7px;
  color: var(--muted);
  font-size: 11px;
}

.featured .price>span {
  color: #9ba797;
}

.price.custom {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

.price.custom strong {
  font-size: 34px;
}

.price.custom span {
  margin: 0;
}

.price-card ul {
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.featured ul {
  border-color: var(--dark-line);
}

.price-card li {
  padding: 8px 0 8px 24px;
  color: #4f5b4b;
  font-size: 13px;
  position: relative;
}

.featured li {
  color: #c3ccc0;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #6e9a25;
  font-weight: 800;
}

.featured li::before {
  color: var(--lime);
}

.pricing-note {
  margin: 35px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.pricing-note button {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: none;
  font-weight: 700;
  cursor: pointer;
}

.founder {
  background: #fbfcf9;
}

.founder-layout {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  align-items: center;
  gap: 100px;
}

.founder-photo {
  position: relative;
}

.founder-photo::before {
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid #cbd4c6;
  border-radius: 30px;
}

.founder-photo img {
  position: relative;
  aspect-ratio: .88;
  object-fit: cover;
  object-position: 50% center;
  border-radius: 26px;
  filter: saturate(.82) contrast(1.03);
}

.founder-badge {
  position: absolute;
  right: -35px;
  bottom: 28px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 18px 45px rgba(30, 43, 27, .15);
  backdrop-filter: blur(10px);
}

.founder-badge span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.founder-badge strong {
  font-size: 12px;
}

.founder-copy blockquote {
  max-width: 670px;
  margin: 22px 0 28px;
  font-family: var(--font-head);
  font-size: clamp(31px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.founder-copy>p {
  max-width: 630px;
  color: var(--muted);
  font-size: 16px;
}

.founder-signoff {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.founder-signoff strong {
  font-size: 14px;
}

.founder-signoff span {
  color: var(--muted);
  font-size: 12px;
}

.founder-links {
  margin-top: 24px;
  display: flex;
  gap: 22px;
}

.founder-links a {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.faq {
  background: var(--paper-2);
}

.faq-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 110px;
}

.faq-heading {
  position: sticky;
  top: 120px;
  align-self: start;
}

.faq-heading h2 {
  margin-bottom: 24px;
  font-size: clamp(38px, 4.1vw, 56px);
}

.faq-heading p {
  color: var(--muted);
  font-size: 14px;
}

.faq-heading a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item button {
  width: 100%;
  min-height: 82px;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  text-align: left;
  background: none;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.faq-item button i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
}

.faq-item button i::before,
.faq-item button i::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 10px;
  height: 1px;
  background: var(--ink);
  transition: transform .25s;
}

.faq-item button i::after {
  transform: rotate(90deg);
}

.faq-item.open button i::after {
  transform: rotate(0);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.faq-answer p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer p {
  padding: 0 55px 25px 0;
}

.final-cta {
  padding: 90px 0;
  background: var(--paper);
}

.cta-card {
  min-height: 400px;
  padding: 58px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 70px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--white);
  background: var(--ink);
  position: relative;
}

.cta-card::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -100px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 255, 99, .17), transparent 68%);
}

.cta-card>div:not(.cta-orb) {
  position: relative;
  z-index: 2;
}

.cta-card h2 {
  max-width: 760px;
  margin-bottom: 18px;
}

.cta-card p {
  margin: 0;
  color: #aeb8ab;
  font-size: 16px;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cta-actions a {
  color: #9eaa9b;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-orb {
  position: absolute;
  right: 80px;
  top: 33px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(201, 255, 99, .18);
  border-radius: 50%;
  opacity: .42;
}

.cta-orb::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--lime);
}

.cta-orb i {
  z-index: 1;
  width: 3px;
  height: 23px;
}

.cta-orb i:nth-child(2),
.cta-orb i:nth-child(4) {
  height: 36px;
}

.cta-orb i:nth-child(3) {
  height: 46px;
}

.site-footer {
  padding-top: 65px;
  background: #e8ede3;
}

.footer-main {
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}

.footer-brand p {
  max-width: 270px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.footer-links div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.footer-links strong {
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 12px;
}

.footer-links a,
.footer-links button {
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  font-size: 12px;
  cursor: pointer;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--ink);
}

.footer-bottom {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: #6e786b;
  font-size: 11px;
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 13, 8, .72);
  backdrop-filter: blur(8px);
  animation: fade-in .2s;
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 42px;
  border-radius: 24px;
  background: #fbfcf9;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .3);
  animation: modal-in .3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
}

.modal-close {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.modal-panel h2 {
  margin: 15px 0 10px;
  font-family: var(--font-head);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.modal-panel>p {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal form>label,
.field-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
  color: #4c5749;
  font-size: 11px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}

input,
select {
  height: 48px;
  padding: 0 13px;
}

textarea {
  padding: 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7ca12e;
  box-shadow: 0 0 0 3px rgba(124, 161, 46, .1);
}

.form-note {
  display: block;
  margin-top: 12px;
  color: #818a7e;
  text-align: center;
  font-size: 9px;
}

.legal-modal .modal-panel {
  width: min(600px, 100%);
}

.legal-copy {
  color: var(--muted);
  font-size: 14px;
}

.legal-copy h3 {
  margin: 24px 0 6px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 16px;
}

.legal-copy a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
}

.journey-modal .modal-panel {
  width: min(1060px, 100%);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #f8faf5;
}

.journey-modal .modal-close {
  z-index: 4;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
}

.journey-hero {
  min-height: 310px;
  padding: 54px 58px 45px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 40px;
  overflow: hidden;
  position: relative;
}

.user-journey-hero {
  background: radial-gradient(circle at 85% 20%, rgba(114, 156, 239, .28), transparent 32%), linear-gradient(135deg, #eef4ff, #dce8ff);
}

.client-journey-hero {
  color: #f5f8f3;
  background: radial-gradient(circle at 88% 20%, rgba(201, 255, 99, .14), transparent 32%), linear-gradient(135deg, #182116, #2b3a26);
}

.journey-eyebrow {
  color: #647260;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-journey-hero .journey-eyebrow,
.journey-pricing .journey-eyebrow {
  color: var(--lime);
}

.journey-hero h2 {
  max-width: 670px;
  margin: 12px 0 15px;
  font-family: var(--font-head);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.journey-hero p {
  max-width: 650px;
  margin: 0;
  color: #60705d;
  font-size: 14px;
  line-height: 1.7;
}

.client-journey-hero p {
  color: #acb8a9;
}

.journey-orb {
  width: 190px;
  height: 190px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  border: 1px solid rgba(70, 101, 165, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 25px 70px rgba(65, 92, 150, .16);
}

.journey-orb::before,
.journey-orb::after {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(67, 102, 169, .12);
  border-radius: 50%;
}

.journey-orb::after {
  inset: 38px;
}

.journey-orb i {
  width: 7px;
  height: 28px;
  z-index: 1;
  border-radius: 8px;
  background: #587bc1;
  animation: wave .8s infinite alternate;
}

.journey-orb i:nth-child(2) {
  height: 62px;
  animation-delay: -.2s;
}

.journey-orb i:nth-child(3) {
  height: 44px;
  animation-delay: -.4s;
}

.journey-orb i:nth-child(4) {
  height: 20px;
  animation-delay: -.6s;
}

.journey-dashboard {
  width: 245px;
  min-height: 155px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201, 255, 99, .15);
  border-radius: 18px;
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 25px 65px rgba(0, 0, 0, .2);
  transform: rotate(-2deg);
}

.journey-dashboard>span {
  display: flex;
  justify-content: space-between;
  color: #97a493;
  font-size: 8px;
  text-transform: uppercase;
}

.journey-dashboard>span b {
  color: var(--lime);
}

.journey-dashboard>strong {
  margin: 20px 0 15px;
  font-family: var(--font-head);
  font-size: 19px;
}

.journey-dashboard>i {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #384534;
}

.journey-dashboard>i em {
  width: 82%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #719c2a, var(--lime));
}

.journey-dashboard>small {
  margin-top: 11px;
  color: #8f9d8b;
  font-size: 8px;
}

.journey-index {
  padding: 13px 55px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
}

.journey-index span {
  color: #707d6d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.journey-index span:not(:last-child) {
  border-right: 1px solid var(--line);
}

.journey-intro {
  padding: 48px 58px 28px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
}

.journey-intro>div {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.journey-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink);
  background: var(--lime);
  font-size: 9px;
  font-weight: 800;
}

.journey-intro small,
.journey-section-head small {
  color: #748070;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.journey-intro h3,
.journey-section-head h3,
.journey-footer h3,
.journey-pricing h3 {
  margin: 5px 0 7px;
  font-family: var(--font-head);
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.journey-intro p,
.journey-footer p,
.journey-pricing p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.journey-intro aside {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.journey-intro aside strong {
  font-size: 11px;
}

.journey-intro aside p {
  margin-top: 6px;
  font-size: 9px;
}

.journey-section {
  margin: 0 58px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.journey-section-head {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.journey-section-head h3 {
  margin-bottom: 0;
}

.journey-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.journey-steps-grid.client-steps {
  grid-template-columns: repeat(3, 1fr);
}

.journey-steps-grid article {
  min-height: 155px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--white);
}

.journey-steps-grid article b {
  width: 25px;
  height: 25px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #4265a5;
  background: #e9f0ff;
  font-size: 9px;
}

.client-steps article b {
  color: #507718;
  background: #edf7dd;
}

.journey-steps-grid article span {
  font-size: 11px;
  font-weight: 800;
}

.journey-steps-grid article p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.journey-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.journey-feature-grid article {
  padding: 17px;
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.journey-feature-grid article>i {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #4668a6;
  background: #ebf2ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.client-journey-modal .journey-feature-grid article>i {
  color: #537c18;
  background: #eef7df;
}

.journey-feature-grid article>div {
  display: flex;
  flex-direction: column;
}

.journey-feature-grid strong {
  font-size: 10px;
}

.journey-feature-grid p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.journey-tip {
  margin: 20px 58px 38px;
  padding: 20px;
  display: grid;
  grid-template-columns: .35fr 1.65fr;
  gap: 22px;
  border-radius: 15px;
  color: #f5f8f3;
  background: #1b2518;
}

.journey-tip>span {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
}

.journey-tip>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.journey-tip p {
  margin: 0;
  color: #aeb9ab;
  font-size: 8px;
  line-height: 1.55;
}

.journey-tip p b {
  color: #e9eee7;
}

.client-checklist>div {
  grid-template-columns: repeat(2, 1fr);
}

.journey-pricing {
  margin: 18px 58px 0;
  padding: 28px;
  border-radius: 18px;
  color: #f5f8f3;
  background: linear-gradient(135deg, #182116, #2a3925);
}

.journey-pricing h3 {
  margin-bottom: 5px;
}

.journey-pricing>div:first-child>p {
  color: #aeb9ab;
}

.journey-price-pills {
  margin: 22px 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 9px;
}

.journey-price-pills>span {
  padding: 13px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}

.journey-price-pills small {
  color: #929f8e;
  font-size: 7px;
  text-transform: uppercase;
}

.journey-price-pills strong {
  margin-top: 3px;
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 16px;
}

.journey-price-pills>i {
  color: #7f8b7b;
  font-style: normal;
}

.journey-pricing aside {
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.journey-pricing aside strong {
  color: var(--lime);
  font-size: 10px;
}

.journey-pricing aside p {
  margin-top: 4px;
  color: #aeb9ab;
  font-size: 8px;
}

.journey-footer {
  padding: 35px 58px 45px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.journey-footer h3 {
  margin-bottom: 6px;
}

.journey-actions {
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.journey-text-link {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-decoration: underline;
}

.toast {
  position: fixed;
  z-index: 1700;
  right: 24px;
  bottom: 24px;
  min-width: 300px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(22, 32, 20, .2);
  transform: translateY(120px);
  opacity: 0;
  transition: transform .35s, opacity .35s;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #4c7615;
  background: #eff8df;
  font-weight: 800;
}

.toast p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.toast strong {
  font-size: 12px;
}

.toast small {
  color: var(--muted);
  font-size: 10px;
}

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .3, 1);
}

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: .1s;
}

.delay-2 {
  transition-delay: .2s;
}

@media (max-width: 1080px) {
  .desktop-nav {
    gap: 22px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 115px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .hero-copy {
    max-width: 780px;
    text-align: center;
    margin-inline: auto;
  }

  .hero h1,
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-proof {
    justify-content: center;
  }

  .hero-product {
    width: min(690px, 100%);
    margin-inline: auto;
  }

  .split-heading,
  .demo-heading {
    gap: 50px;
  }

  .experience-layout {
    gap: 55px;
  }

  .founder-layout {
    gap: 65px;
  }

  .faq-layout {
    gap: 65px;
  }

  .cta-card {
    padding: 60px 48px;
  }
}

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

  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-nav {
    position: absolute;
    top: 94px;
    left: 24px;
    right: 24px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(249, 250, 247, .98);
    box-shadow: 0 25px 60px rgba(25, 35, 23, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s, visibility .25s, transform .25s;
  }

  .mobile-nav.open {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-nav a {
    padding: 13px 11px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
  }

  .mobile-nav button {
    width: 100%;
    height: 48px;
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    color: var(--ink);
    background: var(--lime);
    font-weight: 800;
  }

  .mobile-nav a.mobile-future-link {
    min-height: 48px;
    margin-top: 10px;
    padding: 0 14px;
    align-items: center;
    border-bottom: 0;
    border-radius: 12px;
    color: var(--ink);
    background: var(--lime);
    font-family: inherit;
    font-weight: 800;
  }

  .strip-track {
    padding-left: 0;
    overflow: visible;
    animation-duration: 22s;
  }

  .strip-group {
    gap: 24px;
    padding-right: 24px;
  }

  .usecase-strip::before,
  .usecase-strip::after {
    width: 38px;
  }

  .split-heading,
  .demo-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .problem-grid,
  .steps-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .problem-card {
    min-height: 320px;
  }

  .icon-box {
    margin-bottom: 45px;
  }

  .experience-layout,
  .founder-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .experience-stage {
    min-height: 530px;
  }

  .experience-copy {
    max-width: 630px;
  }

  .steps-grid {
    max-width: 620px;
    margin-inline: auto;
  }

  .bento {
    min-height: 430px;
  }

  .pricing-grid {
    max-width: 620px;
    margin-inline: auto;
    gap: 14px;
  }

  .price-card.featured {
    transform: none;
    order: -1;
  }

  .founder-photo {
    max-width: 520px;
  }

  .founder-photo img {
    aspect-ratio: 1.1;
    object-position: center 40%;
  }

  .founder-badge {
    right: 20px;
  }

  .faq-heading {
    position: static;
  }

  .cta-card {
    min-height: 480px;
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .cta-actions {
    align-items: flex-start;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 32px, 1180px);
  }

  .section {
    padding: 76px 0;
  }

  .site-header {
    padding: 10px 12px;
  }

  .nav-shell {
    height: 60px;
    padding-left: 13px;
    border-radius: 15px;
  }

  .brand {
    font-size: 18px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .nav-actions {
    gap: 6px;
  }

  .nav-guide-pills {
    gap: 4px;
  }

  .nav-guide-pill {
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 11px;
  }

  .mobile-nav {
    top: 78px;
    left: 12px;
    right: 12px;
  }

  .hero {
    padding: 130px 0 80px;
  }

  .hero-layout {
    gap: 48px;
  }

  .eyebrow {
    font-size: 10px;
  }

  .hero h1 {
    font-size: clamp(43px, 13.5vw, 62px);
  }

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

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    gap: 10px 14px;
  }

  .hero-product {
    min-height: 430px;
    width: calc(100% + 10px);
    margin-left: -5px;
  }

  .product-glow {
    width: 380px;
    height: 380px;
  }

  .browser-card {
    transform: none;
  }

  .browser-page {
    height: 342px;
    padding: 18px;
  }

  .browser-url {
    width: 135px;
  }

  .mini-content {
    padding-top: 48px;
  }

  .assistant-panel {
    right: 10px;
    bottom: 10px;
    width: 245px;
    transform: scale(.9);
    transform-origin: right bottom;
  }

  .floating-card {
    padding: 9px 11px;
  }

  .floating-card-one {
    right: -7px;
    top: 44px;
  }

  .floating-card-two {
    left: -4px;
    bottom: 35px;
  }

  .floating-card>span {
    width: 27px;
    height: 27px;
  }

  .floating-card strong {
    font-size: 9px;
  }

  .floating-card small {
    font-size: 7px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2,
  .experience h2,
  .demo-heading h2,
  .cta-card h2 {
    font-size: 38px;
  }

  .section-heading p {
    font-size: 15px;
  }

  .problem-card {
    min-height: 300px;
  }

  .experience-stage {
    min-height: 470px;
    padding: 22px;
  }

  .voice-orb-large {
    width: 185px;
    height: 185px;
  }

  .orb-core {
    width: 120px;
    height: 120px;
  }

  .orb-core i {
    transform: scale(.8);
  }

  .stage-transcript p {
    font-size: 16px;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento {
    min-height: 410px;
    padding: 26px;
  }

  .bento-copy h3 {
    font-size: 27px;
  }

  .recommend-card {
    left: 35px;
    right: 18px;
  }

  .language-orbit {
    width: 170px;
    height: 170px;
  }

  .language-orbit span {
    width: 82px;
    height: 82px;
  }

  .action-preview {
    gap: 8px;
  }

  .action-preview div {
    min-width: 116px;
    padding: 13px;
  }

  .action-preview>i {
    font-size: 18px;
  }

  .video-frame {
    padding: 6px;
    border-radius: 18px;
  }

  .video-frame video {
    border-radius: 13px;
  }

  .price-card {
    padding: 28px 24px;
  }

  .founder-layout {
    gap: 60px;
  }

  .founder-photo::before {
    inset: -10px 10px 10px -10px;
  }

  .founder-badge {
    right: 10px;
    bottom: -22px;
  }

  .founder-copy blockquote {
    font-size: 32px;
  }

  .faq-item button {
    font-size: 15px;
  }

  .faq-item.open .faq-answer p {
    padding-right: 15px;
  }

  .final-cta {
    padding: 65px 0;
  }

  .cta-card {
    min-height: 500px;
    padding: 42px 26px;
    border-radius: 25px;
    align-content: center;
  }

  .cta-orb {
    right: 12px;
    top: 18px;
    transform: scale(.75);
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    row-gap: 38px;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 15px;
    padding: 22px 0;
    flex-direction: column;
  }

  .modal {
    padding: 10px;
  }

  .modal-panel {
    padding: 34px 22px 25px;
    border-radius: 19px;
  }

  .modal-panel h2 {
    font-size: 31px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: auto;
  }
}

@media (max-width: 380px) {
  .site-header .theme-toggle {
    display: none;
  }
}

/* ============================================================
   CLIENT PORTAL
============================================================ */
.portal-body {
  min-height: 100vh;
  background: #eff2ec;
}

.portal-gate {
  min-height: 100vh;
  padding: 30px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 70% 20%, rgba(201, 255, 99, .25), transparent 32%), var(--paper);
}

.portal-gate[hidden],
.portal-app[hidden] {
  display: none;
}

.portal-gate-card {
  width: min(650px, 100%);
  padding: 55px;
  border: 1px solid var(--line);
  border-radius: 30px;
  text-align: center;
  background: var(--white);
  box-shadow: var(--shadow);
}

.portal-gate-card>.brand-mark {
  margin: 0 auto 22px;
}

.portal-gate-card h1 {
  margin: 14px 0 15px;
  font-family: var(--font-head);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.portal-gate-card p {
  max-width: 500px;
  margin: 0 auto 27px;
  color: var(--muted);
}

.portal-gate-card>div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.portal-gate-card>small {
  display: block;
  max-width: 500px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 9px;
}

.portal-app {
  min-height: 100vh;
}

.portal-sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 23px 17px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #f8faf6;
}

.portal-sidebar>.brand {
  padding: 0 8px 22px;
}

.portal-workspace {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.portal-workspace>span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ink);
  background: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.portal-workspace div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.portal-workspace strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  white-space: nowrap;
}

.portal-workspace small {
  color: var(--muted);
  font-size: 8px;
}

.portal-sidebar nav {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-sidebar nav button {
  height: 43px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  color: #5d6859;
  background: transparent;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.portal-sidebar nav button i {
  width: 23px;
  color: #798475;
  font-style: normal;
  text-align: center;
}

.portal-sidebar nav button:hover {
  background: #eef2e9;
}

.portal-sidebar nav button.active {
  color: var(--ink);
  background: var(--lime);
}

.portal-sidebar nav button.active i {
  color: var(--ink);
}

.portal-sidebar-bottom {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}

.portal-sidebar-bottom a {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.portal-sidebar-bottom a:hover {
  color: var(--ink);
}

.portal-main {
  min-height: 100vh;
  margin-left: 250px;
}

.portal-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 76px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 246, .88);
  backdrop-filter: blur(16px);
}

.portal-header>div:first-of-type {
  display: flex;
  flex-direction: column;
}

.portal-header>div:first-of-type>strong {
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  white-space: nowrap;
}

.portal-live {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5d7d2b;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78b522;
  box-shadow: 0 0 0 4px rgba(120, 181, 34, .1);
}

.portal-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-profile {
  display: flex;
  align-items: center;
  gap: 9px;
}

.portal-profile>span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink);
  background: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.portal-profile div {
  display: flex;
  flex-direction: column;
}

.portal-profile strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  white-space: nowrap;
}

.portal-profile small {
  color: var(--muted);
  font-size: 8px;
}

.portal-content {
  padding: 42px;
}

.portal-panel {
  display: none;
}

.portal-panel.active {
  display: block;
  animation: portal-panel-in .3s ease;
}

@keyframes portal-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.portal-welcome {
  margin-bottom: 25px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.portal-welcome h1,
.portal-page-heading h1 {
  margin: 10px 0 4px;
  font-family: var(--font-head);
  font-size: clamp(35px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.portal-welcome h1 span {
  color: #638b24;
}

.portal-welcome p,
.portal-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.trial-banner {
  margin-bottom: 18px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 180px 1fr auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(112, 154, 43, .18);
  border-radius: 14px;
  background: #f0f8e3;
}

.trial-banner>div:first-child {
  display: flex;
  flex-direction: column;
}

.trial-banner span {
  color: #668034;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.trial-banner strong {
  font-size: 13px;
}

.trial-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(91, 130, 31, .13);
}

.trial-progress i {
  width: 33%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #77aa27;
}

.trial-banner p {
  margin: 0;
  color: #677361;
  font-size: 9px;
}

.trial-banner button {
  border: 0;
  color: var(--ink);
  background: none;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.portal-metrics {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.portal-metrics article,
.portal-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fbfcfa;
}

.portal-metrics article {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.portal-metrics article>span {
  color: var(--muted);
  font-size: 9px;
}

.portal-metrics strong {
  margin: 5px 0 2px;
  font-family: var(--font-head);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.04em;
}

.portal-metrics small {
  color: #6c8e36;
  font-size: 8px;
}

.portal-grid-two {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}

.portal-card {
  padding: 22px;
}

.portal-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portal-card-head>div {
  display: flex;
  flex-direction: column;
}

.portal-card-head span {
  color: var(--muted);
  font-size: 8px;
}

.portal-card-head strong {
  font-size: 11px;
}

.portal-card-head button {
  border: 0;
  color: var(--muted);
  background: none;
  font-size: 8px;
  cursor: pointer;
}

.portal-chart {
  height: 200px;
  padding-top: 25px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 13px;
}

.portal-chart div {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.portal-chart i {
  width: 100%;
  max-width: 32px;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(#c9ff63, #729b31);
}

.portal-chart small {
  color: var(--muted);
  font-size: 7px;
}

.top-intents ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.top-intents li {
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: 9px;
}

.top-intents li b {
  color: #688b31;
}

.portal-page-heading {
  margin-bottom: 30px;
}

.portal-page-heading p {
  max-width: 650px;
}

.setup-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 16px;
}

.setup-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-checklist article {
  padding: 17px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 11px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcfa;
}

.setup-checklist article>span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: #eef2eb;
  font-size: 10px;
  font-weight: 800;
}

.setup-checklist article div {
  display: flex;
  flex-direction: column;
}

.setup-checklist strong {
  font-size: 11px;
}

.setup-checklist p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.setup-checklist i {
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--muted);
  background: #eef2eb;
  font-size: 7px;
  font-style: normal;
}

.setup-checklist .done>span,
.setup-checklist .active>span {
  color: var(--ink);
  background: var(--lime);
}

.setup-checklist .active {
  border-color: #9fc35c;
}

.setup-checklist .active i {
  color: #577d1e;
  background: #eff8e1;
}

.install-card h3 {
  margin: 10px 0 6px;
  font-family: var(--font-head);
  font-size: 25px;
  letter-spacing: -.04em;
}

.install-card pre {
  margin: 22px 0;
  padding: 18px;
  overflow-x: auto;
  border-radius: 11px;
  color: #c9ff63;
  background: #11180f;
  font: 10px/1.7 monospace;
}

.install-card>small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}

.knowledge-portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr;
  gap: 14px;
}

.knowledge-store>div {
  display: flex;
  justify-content: space-between;
}

.knowledge-store-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #5275bb;
  background: #edf3ff;
  font-size: 17px;
}

.sales-store .knowledge-store-icon {
  color: #628b23;
  background: #eef7df;
}

.portal-status {
  align-self: start;
  padding: 4px 7px;
  border-radius: 5px;
  color: #567923;
  background: #eff8e2;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.knowledge-store h3,
.knowledge-upload h3 {
  margin: 30px 0 6px;
  font-family: var(--font-head);
  font-size: 19px;
}

.knowledge-store p,
.knowledge-upload p {
  min-height: 45px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 9px;
}

.knowledge-store>strong {
  font-family: var(--font-head);
  font-size: 27px;
}

.knowledge-store>button {
  display: block;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.knowledge-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-upload>span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px dashed #96a391;
  border-radius: 50%;
  color: var(--muted);
  font-size: 20px;
}

.knowledge-upload h3 {
  margin-top: 16px;
}

.automation-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.automation-list article {
  display: grid;
  grid-template-columns: 80px 1.2fr 30px 65px .8fr auto;
  align-items: center;
  gap: 12px;
}

.automation-list .automation-trigger,
.automation-list .automation-action {
  color: var(--muted);
  font-size: 8px;
}

.automation-list strong,
.automation-list b {
  font-size: 10px;
}

.automation-list i {
  color: #879283;
  font-style: normal;
}

.automation-list em {
  padding: 5px 7px;
  border-radius: 5px;
  color: #5b7d27;
  background: #eef7df;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-add-automation {
  min-height: 65px;
  border: 1px dashed #9ba695;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.billing-portal-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 14px;
}

.current-bill {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.current-bill>span {
  color: var(--muted);
  font-size: 9px;
}

.current-bill>strong {
  margin: 8px 0 3px;
  font-family: var(--font-head);
  font-size: 50px;
  line-height: 1;
}

.current-bill>small {
  color: #658b2b;
  font-size: 8px;
}

.current-bill>div {
  margin: 25px 0;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.current-bill p {
  margin: 0;
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
}

.current-bill p b {
  color: var(--ink);
}

.score-card h3,
.pause-policy h3 {
  margin: 9px 0 20px;
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: -.035em;
}

.score-card>div {
  margin-top: 13px;
}

.score-card p {
  margin: 0 0 5px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8px;
}

.score-card p strong {
  color: var(--ink);
}

.score-card>div>i {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #e7ece3;
}

.score-card>div>i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #87b638;
}

.score-card>small {
  display: block;
  margin-top: 17px;
  color: var(--muted);
  font-size: 8px;
}

.pause-policy {
  color: var(--white);
  background: #1c2819;
}

.pause-policy>span {
  color: var(--lime);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.pause-policy p {
  color: #a8b4a5;
  font-size: 9px;
}

.pause-policy a {
  color: var(--lime);
  font-size: 9px;
  font-weight: 800;
}

html[data-theme="dark"] .portal-body {
  background: var(--paper);
}

html[data-theme="dark"] .portal-sidebar,
html[data-theme="dark"] .portal-header {
  background: rgba(17, 24, 15, .96);
}

html[data-theme="dark"] .portal-workspace,
html[data-theme="dark"] .portal-metrics article,
html[data-theme="dark"] .portal-card,
html[data-theme="dark"] .setup-checklist article {
  background: #151e13;
}

html[data-theme="dark"] .portal-sidebar nav button:hover {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .portal-sidebar nav button.active {
  color: #11180f;
  background: var(--lime);
}

html[data-theme="dark"] .trial-banner {
  background: rgba(201, 255, 99, .08);
}

html[data-theme="dark"] .install-card pre {
  color: var(--lime);
  background: #090d08;
}

html[data-theme="dark"] .pause-policy {
  background: #202d1c;
}

@media (max-width: 1050px) {
  .portal-sidebar {
    width: 220px;
  }

  .portal-main {
    margin-left: 220px;
  }

  .portal-content {
    padding: 28px;
  }

  .portal-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .portal-grid-two,
  .setup-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-portal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .knowledge-upload {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .portal-sidebar {
    width: 250px;
    transform: translateX(-105%);
    transition: transform .25s;
    box-shadow: 20px 0 60px rgba(0, 0, 0, .2);
  }

  .portal-sidebar.open {
    transform: translateX(0);
  }

  .portal-main {
    margin-left: 0;
  }

  .portal-menu-toggle {
    display: block;
  }

  .portal-header {
    padding: 0 16px;
  }

  .portal-header>div:first-of-type {
    display: none;
  }

  .portal-content {
    padding: 24px 16px;
  }

  .portal-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .trial-banner {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .trial-progress {
    width: 100%;
  }

  .portal-grid-two,
  .billing-portal-grid {
    grid-template-columns: 1fr;
  }

  .current-bill {
    grid-row: auto;
  }

  .knowledge-portal-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-upload {
    grid-column: auto;
  }

  .automation-list article {
    grid-template-columns: 1fr auto;
  }

  .automation-list article>i,
  .automation-list .automation-trigger,
  .automation-list .automation-action {
    display: none;
  }

  .automation-list article strong,
  .automation-list article b {
    grid-column: 1;
  }

  .automation-list article em {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 480px) {
  .portal-gate {
    padding: 14px;
  }

  .portal-gate-card {
    padding: 38px 22px;
  }

  .portal-gate-card>div {
    flex-direction: column;
  }

  .portal-gate-card .button {
    width: 100%;
  }

  .portal-profile div {
    display: none;
  }

  .portal-metrics {
    grid-template-columns: 1fr;
  }

  .portal-content {
    padding-top: 28px;
  }

  .portal-chart {
    height: 165px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   BOLOSITE 2.0 — AUDIENCE, AUTH, BILLING & THEME EXTENSIONS
============================================================ */
.is-hidden {
  display: none !important;
}

.button-dark {
  color: var(--white);
  background: var(--ink);
}

.button-dark:hover {
  background: #2a3826;
}

.nav-audience {
  padding: 8px 11px;
  border-radius: 8px;
}

.desktop-nav .nav-guide-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: #485445;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, transform .2s, box-shadow .2s;
}

.desktop-nav .nav-guide-trigger:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(25, 35, 22, .08);
}

.nav-guide-trigger i {
  padding: 3px 5px;
  border-radius: 5px;
  color: #63705f;
  background: rgba(255, 255, 255, .58);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.nav-audience-user {
  background: rgba(110, 159, 255, .1);
}

.nav-audience-client {
  background: rgba(201, 255, 99, .22);
}

.nav-guide-pills {
  display: none;
  align-items: center;
  gap: 6px;
}

.nav-guide-pill {
  height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s;
}

.nav-guide-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 24, 32, .25);
}

.nav-guide-pill.user {
  background: rgba(37, 99, 235, .1);
}

.nav-guide-pill.client {
  background: rgba(201, 255, 99, .34);
}

.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  overflow: hidden;
}

.theme-toggle span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .3s, opacity .3s;
}

.theme-moon {
  transform: translateY(34px);
  opacity: 0;
  font-size: 20px;
}

.auth-link {
  padding: 9px 6px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.nav-signup {
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--white);
  background: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.profile-wrap {
  position: relative;
}

.profile-button {
  height: 44px;
  padding: 0 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.profile-button i {
  color: var(--muted);
  font-style: normal;
}

.profile-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-avatar.large {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 15px;
}

.profile-menu {
  position: absolute;
  top: 55px;
  right: 0;
  width: 300px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 70px rgba(17, 24, 15, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s, visibility .22s, transform .22s;
}

.profile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.profile-menu-head div {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.profile-menu-head strong {
  font-size: 13px;
}

.profile-menu-head small {
  color: var(--muted);
  font-size: 10px;
  text-transform: capitalize;
}

.profile-menu dl {
  margin: 12px 0;
}

.profile-menu dl div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  padding: 6px 0;
  font-size: 10px;
}

.profile-menu dt {
  color: var(--muted);
}

.profile-menu dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  white-space: nowrap;
}

.profile-portal {
  padding: 11px 12px;
  display: flex;
  justify-content: space-between;
  border-radius: 9px;
  color: var(--ink);
  background: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.profile-logout {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  border: 0;
  color: #b84f3b;
  background: none;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-auth {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.mobile-auth button {
  height: 44px;
  margin: 0;
  border: 1px solid var(--line);
  background: transparent;
}

.mobile-auth button:last-child {
  border-color: var(--lime);
  color: var(--ink);
  background: var(--lime);
}

.mobile-theme-toggle {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 12px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .68);
  font-weight: 800;
  cursor: pointer;
}

.mobile-theme-toggle b {
  font-size: 12px;
}

.mobile-portal {
  margin-top: 8px;
  border: 0 !important;
  border-radius: 10px;
  color: var(--white);
  background: var(--ink);
}

.mobile-guide-trigger {
  width: 100%;
  padding: 12px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.mobile-guide-trigger>span {
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
}

.mobile-guide-trigger small {
  margin-bottom: 2px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-guide-trigger i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
}

.mobile-guide-trigger.user i {
  color: #385b9a;
  background: #e7efff;
}

.mobile-guide-trigger.client i {
  color: #4e7415;
  background: #eaf6d7;
}

.logo-constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
}

.logo-particle {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 14px 40px rgba(17, 24, 15, .08);
  backdrop-filter: blur(10px);
  animation: constellation-drift 8s ease-in-out infinite;
}

.logo-particle-a {
  left: 3%;
  top: 23%;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  transform: rotate(-9deg);
}

.logo-particle-a .brand-mark {
  transform: scale(.8);
}

.logo-particle-b {
  right: 4%;
  top: 18%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--lime);
  background: var(--ink);
  font-family: var(--font-head);
  font-weight: 800;
  animation-delay: -2s;
}

.logo-particle-c {
  left: 7%;
  bottom: 15%;
  width: 60px;
  height: 44px;
  display: flex;
  gap: 3px;
  border-radius: 13px;
  animation-delay: -4s;
}

.logo-particle-c i {
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: #628e1c;
  animation: logo-wave 1s ease-in-out infinite alternate;
}

.logo-particle-c i:nth-child(2) {
  height: 26px;
  animation-delay: -.3s;
}

.logo-particle-c i:nth-child(3) {
  height: 19px;
  animation-delay: -.6s;
}

.logo-particle-d {
  right: 5%;
  bottom: 10%;
  padding: 8px 13px;
  border-radius: 11px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  animation-delay: -6s;
}

@keyframes constellation-drift {
  50% {
    translate: 0 -14px;
    rotate: 5deg;
  }
}

.animated-wordmark {
  position: absolute;
  z-index: 5;
  right: 25px;
  bottom: 24px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  column-gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 15px 45px rgba(20, 30, 18, .14);
  animation: wordmark-in 5s ease-in-out infinite;
}

.animated-wordmark b {
  font-family: var(--font-head);
  font-size: 12px;
}

.animated-wordmark small {
  grid-column: 2;
  color: var(--muted);
  font-size: 7px;
}

.animated-logo-bars {
  grid-row: 1 / 3;
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  background: var(--ink);
}

.animated-logo-bars i {
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
  animation: logo-wave .8s infinite alternate;
}

.animated-logo-bars i:nth-child(2) {
  height: 15px;
  animation-delay: -.25s;
}

.animated-logo-bars i:nth-child(3) {
  height: 10px;
  animation-delay: -.5s;
}

@keyframes wordmark-in {

  0%,
  100% {
    transform: translateX(14px);
    opacity: .5;
  }

  25%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
}

.hero-paths {
  max-width: 610px;
  margin-top: 27px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-paths a {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .52);
  transition: transform .2s, background .2s;
}

.hero-paths a:hover {
  transform: translateY(-2px);
  background: var(--white);
}

.path-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf3ff;
  font-size: 13px;
}

.hero-paths a:last-child .path-icon {
  background: #ecf7db;
}

.hero-paths div {
  display: flex;
  flex-direction: column;
}

.hero-paths small {
  color: var(--muted);
  font-size: 8px;
}

.hero-paths strong {
  font-size: 10px;
}

.audience-section {
  background: #f7f9f4;
}

.what>.container>.section-heading {
  max-width: 900px;
}

.what>.container>.section-heading p {
  max-width: 760px;
  font-size: 18px;
}

.what-overview {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 22px 60px rgba(31, 45, 27, .07);
  scroll-margin-top: 105px;
}

.what-overview-brand {
  min-height: 440px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 16%, rgba(6, 182, 212, .2), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(124, 58, 237, .17), transparent 37%),
    linear-gradient(145deg, #f8fbff 0%, #eef6ff 48%, #f5f3ff 100%);
}

.what-overview-brand::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .45;
  background:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 88%);
}

.what-overview-brand::after {
  content: "";
  width: 250px;
  height: 250px;
  position: absolute;
  z-index: -1;
  right: -105px;
  bottom: -95px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(124, 58, 237, .2));
  filter: blur(25px);
}

.what-brand-stage {
  width: min(100%, 350px);
  height: 310px;
  display: grid;
  place-items: center;
  position: relative;
}

.what-logo-orb {
  width: 230px;
  height: 230px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 52px;
  background: rgba(255, 255, 255, .6);
  box-shadow:
    0 32px 80px rgba(37, 99, 235, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px);
  animation: what-logo-float 4.2s ease-in-out infinite alternate;
}

.what-logo-orb::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(37, 99, 235, .11);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .2));
}

.what-logo-orb::after {
  content: "";
  position: absolute;
  inset: -17px;
  border: 1px solid rgba(6, 182, 212, .2);
  border-radius: 66px;
  animation: what-logo-ring 3.2s ease-out infinite;
}

.what-brand-logo {
  z-index: 1;
  width: 190px;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 30px;
  mix-blend-mode: multiply;
}

.what-brand-logo-dark {
  display: none;
}

.what-logo-live {
  min-height: 28px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 13px;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 999px;
  color: #047857;
  background: rgba(236, 253, 245, .9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.what-logo-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .14);
}

.what-brand-chip {
  min-height: 35px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 13px;
  color: #1e293b;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 17px 38px rgba(37, 99, 235, .13);
  backdrop-filter: blur(14px);
  font-size: 10px;
  font-weight: 900;
}

.what-brand-chip i {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  font-size: 10px;
  font-style: normal;
}

.what-brand-chip-language {
  top: 19px;
  right: 0;
}

.what-brand-chip-voice {
  top: 19px;
  left: 0;
}

.what-brand-chip-voice i {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed);
}

.what-brand-chip-mode {
  left: 0;
  bottom: 44px;
}

.what-brand-chip-mode i {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.what-brand-wave {
  min-width: 146px;
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  z-index: 4;
  right: 1px;
  bottom: 5px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 17px 38px rgba(37, 99, 235, .12);
  backdrop-filter: blur(14px);
}

.what-brand-wave i {
  width: 3px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(to top, #7c3aed, #06b6d4);
  animation: what-wave 1.2s ease-in-out infinite alternate;
}

.what-brand-wave i:nth-child(2),
.what-brand-wave i:nth-child(6) {
  height: 19px;
  animation-delay: -.25s;
}

.what-brand-wave i:nth-child(3),
.what-brand-wave i:nth-child(5) {
  height: 26px;
  animation-delay: -.5s;
}

.what-brand-wave i:nth-child(4) {
  height: 32px;
  animation-delay: -.75s;
}

.what-brand-caption {
  margin-top: 13px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 14px;
  color: #0f172a;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .1);
  backdrop-filter: blur(14px);
}

.what-brand-caption strong {
  font-family: var(--font-head);
  font-size: 17px;
}

.what-brand-caption span {
  padding-left: 10px;
  border-left: 1px solid rgba(37, 99, 235, .14);
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

@keyframes what-logo-float {
  from {
    transform: translateY(-5px) rotate(-1.5deg);
  }

  to {
    transform: translateY(6px) rotate(1.5deg);
  }
}

@keyframes what-logo-ring {
  0% {
    opacity: .75;
    transform: scale(.94);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.09);
  }
}

@keyframes what-wave {
  from {
    transform: scaleY(.55);
  }

  to {
    transform: scaleY(1.05);
  }
}

.what-logo-orb .brand-mark {
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 17px;
}

.what-sound-wave {
  z-index: 1;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.what-sound-wave i {
  width: 4px;
  height: 19px;
  border-radius: 5px;
  background: var(--lime);
}

.what-sound-wave i:nth-child(2) {
  height: 39px;
}

.what-sound-wave i:nth-child(3) {
  height: 57px;
}

.what-sound-wave i:nth-child(4) {
  height: 33px;
}

.what-sound-wave i:nth-child(5) {
  height: 14px;
}

.what-overview-copy {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.what-overview-copy h3 {
  margin: 9px 0 14px;
  font-family: var(--font-head);
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.what-overview-copy>p {
  max-width: 680px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.what-flow {
  margin: 26px 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.what-flow>div {
  min-height: 92px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.what-flow>div>b {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink);
  background: var(--lime);
  font-size: 10px;
}

.what-flow>div>span {
  display: flex;
  flex-direction: column;
}

.what-flow strong {
  font-size: 14px;
}

.what-flow small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.what-flow>i {
  color: #929d8f;
  font-size: 14px;
  font-style: normal;
}

.what-simple-note {
  padding-top: 15px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 8px 12px;
  border-top: 1px solid var(--line);
}

.what-simple-note span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #537b18;
  background: #eef7df;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.what-simple-note p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="dark"] .what-overview-brand {
  background:
    radial-gradient(circle at 18% 16%, rgba(6, 182, 212, .2), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(124, 58, 237, .2), transparent 37%),
    linear-gradient(145deg, #111827, #07111f);
}

html[data-theme="dark"] .what-logo-orb {
  border-color: rgba(96, 165, 250, .22);
  background: rgba(15, 23, 42, .66);
  box-shadow: 0 28px 65px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .what-logo-orb::before,
html[data-theme="dark"] .what-logo-orb::after {
  border-color: rgba(34, 211, 238, .2);
}

html[data-theme="dark"] .what-logo-orb::before {
  background: linear-gradient(145deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .28));
}

html[data-theme="dark"] .what-brand-logo-light {
  display: none;
}

html[data-theme="dark"] .what-brand-logo-dark {
  display: block;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .what-brand-chip,
html[data-theme="dark"] .what-brand-wave,
html[data-theme="dark"] .what-brand-caption {
  color: #f8fafc;
  border-color: rgba(96, 165, 250, .18);
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .what-brand-caption span {
  color: #cbd5e1;
  border-left-color: rgba(96, 165, 250, .2);
}

html[data-theme="dark"] .what-logo-live {
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, .26);
  background: rgba(6, 78, 59, .76);
}

@media (prefers-reduced-motion: reduce) {

  .what-logo-orb,
  .what-logo-orb::after,
  .what-brand-wave i {
    animation: none;
  }
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.audience-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  scroll-margin-top: 110px;
}

.audience-top {
  min-height: 310px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.user-audience .audience-top {
  background: linear-gradient(145deg, #eaf1ff, #dce8ff);
}

.client-audience .audience-top {
  background: linear-gradient(145deg, #eff8df, #deefc2);
}

.audience-badge {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 7px 10px;
  border: 1px solid rgba(17, 24, 15, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.audience-illustration {
  margin: auto;
  position: relative;
}

.user-illustration {
  width: 270px;
  height: 155px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(67, 102, 169, .15);
  border-radius: 32px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 25px 55px rgba(67, 102, 169, .15);
}

.user-illustration::before,
.user-illustration::after {
  content: "";
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(78, 118, 196, .13);
  border-radius: 45px;
  animation: audience-pulse 2.8s infinite;
}

.user-illustration::after {
  inset: -42px;
  animation-delay: -1.4s;
}

@keyframes audience-pulse {
  50% {
    transform: scale(1.03);
    opacity: .4;
  }
}

.user-illustration>span {
  color: #60739a;
  font-size: 9px;
  text-transform: uppercase;
}

.user-illustration strong {
  font-family: var(--font-head);
  font-size: 25px;
}

.mini-wave {
  height: 25px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.mini-wave i {
  width: 3px;
  height: 10px;
  border-radius: 3px;
  background: #587bc1;
  animation: wave .8s infinite alternate;
}

.mini-wave i:nth-child(2) {
  height: 22px;
  animation-delay: -.2s;
}

.mini-wave i:nth-child(3) {
  height: 16px;
  animation-delay: -.4s;
}

.mini-wave i:nth-child(4) {
  height: 8px;
  animation-delay: -.6s;
}

.dashboard-illustration {
  width: 310px;
  height: 190px;
  padding: 16px;
  border: 1px solid rgba(74, 105, 30, .18);
  border-radius: 18px;
  background: #172014;
  box-shadow: 0 25px 55px rgba(47, 68, 20, .2);
  transform: rotate(-2deg);
}

.owner-billing-preview {
  height: auto;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  color: #f5f8f3;
  transform: rotate(-1.5deg);
}

.owner-billing-preview .dash-head {
  display: flex;
  align-items: center;
}

.owner-billing-preview .dash-head b {
  margin-left: auto;
  color: var(--lime);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.owner-bill-total {
  margin: 17px 0 11px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.owner-bill-total>div {
  display: flex;
  flex-direction: column;
}

.owner-bill-total small {
  color: #8f9c8b;
  font-size: 8px;
}

.owner-bill-total strong {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 1;
}

.owner-bill-total>i {
  color: #b6c0b2;
  font-size: 8px;
  font-style: normal;
}

.owner-bill-lines {
  padding-top: 9px;
  display: grid;
  gap: 5px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.owner-bill-lines span {
  display: flex;
  justify-content: space-between;
  color: #aab5a7;
  font-size: 8px;
}

.owner-bill-lines b {
  color: #eef2ec;
}

.owner-credit-bar {
  height: 5px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 5px;
  background: #33402f;
}

.owner-credit-bar i {
  width: 65%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fae31, var(--lime));
}

.owner-bill-note {
  margin-top: 7px;
  color: #82907e;
  font-size: 7px;
  text-align: right;
}

.dash-head {
  display: flex;
  gap: 5px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.dash-head span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #657061;
}

.dash-metric {
  padding: 17px 4px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
}

.dash-metric small {
  grid-column: 1/-1;
  color: #899584;
  font-size: 8px;
}

.dash-metric strong {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 27px;
}

.dash-metric i {
  align-self: center;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
  font-size: 8px;
  font-style: normal;
}

.dash-chart {
  height: 61px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.dash-chart i {
  flex: 1;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(#c9ff63, #668729);
}

.dash-chart i:nth-child(1) {
  height: 25%
}

.dash-chart i:nth-child(2) {
  height: 45%
}

.dash-chart i:nth-child(3) {
  height: 38%
}

.dash-chart i:nth-child(4) {
  height: 66%
}

.dash-chart i:nth-child(5) {
  height: 58%
}

.dash-chart i:nth-child(6) {
  height: 90%
}

.audience-copy {
  padding: 38px;
}

.audience-overline {
  margin-bottom: 8px;
  color: #72806e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.audience-copy h2 {
  margin-bottom: 15px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1.13;
  letter-spacing: -.045em;
}

.audience-copy>p:not(.audience-overline) {
  color: var(--muted);
  font-size: 15px;
}

.audience-steps {
  margin: 26px 0;
  padding: 0;
  list-style: none;
}

.audience-steps li {
  padding: 13px 0;
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.audience-steps li:last-child {
  border-bottom: 1px solid var(--line);
}

.audience-steps li>span {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #4666a0;
  background: #edf3ff;
  font-size: 9px;
  font-weight: 800;
}

.audience-steps div {
  display: flex;
  flex-direction: column;
}

.audience-steps strong {
  font-size: 12px;
}

.audience-steps small {
  color: var(--muted);
  font-size: 10px;
}

.client-benefits {
  margin: 25px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.client-benefits span {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.client-benefits i {
  margin-right: 5px;
  color: #5d891c;
  font-style: normal;
}

.owner-features {
  margin-bottom: 14px;
}

.owner-features span {
  display: flex;
  align-items: center;
  line-height: 1.4;
}

.owner-features i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: #eef7df;
  font-size: 8px;
}

.owner-payment-summary {
  margin: 0 0 20px;
  padding: 15px;
  display: grid;
  grid-template-columns: .7fr 1px 1.3fr;
  align-items: center;
  gap: 14px;
  border: 1px solid #dbe9c8;
  border-radius: 13px;
  background: linear-gradient(135deg, #f6faef, #edf6df);
}

.owner-payment-summary>div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.owner-payment-summary>i {
  width: 1px;
  height: 100%;
  min-height: 38px;
  background: #d6e4c3;
}

.owner-payment-summary small {
  color: #73806f;
  font-size: 8px;
}

.owner-payment-summary strong {
  color: #26341f;
  font-size: 10px;
  line-height: 1.45;
}

.owner-payment-summary>div:first-child strong {
  color: #577f18;
  font-family: var(--font-head);
  font-size: 16px;
}

.audience-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.account-card {
  position: relative;
  z-index: 2;
  width: 83%;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(33, 45, 30, .13);
}

.account-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ink);
  background: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.account-card div {
  display: flex;
  flex-direction: column;
}

.account-card strong {
  font-size: 11px;
}

.account-card small {
  color: var(--muted);
  font-size: 8px;
}

.account-card>i {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #557c1b;
  background: #edf7dd;
  font-size: 9px;
  font-style: normal;
}

.learning-hub {
  color: var(--white);
  background: #263221;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.video-card {
  overflow: hidden;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .055);
}

.video-player {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid var(--dark-line);
  background: #080b08;
  position: relative;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-number {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  color: var(--white);
  background: rgba(8, 12, 7, .62);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
  pointer-events: none;
}

.video-info {
  padding: 24px;
}

.video-audience {
  color: var(--lime);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.video-info h3 {
  margin: 8px 0;
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: -.03em;
}

.video-info p {
  min-height: 68px;
  margin-bottom: 18px;
  color: #abb5a8;
  font-size: 12px;
}

.video-info ul {
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-top: 1px solid var(--dark-line);
  list-style: none;
}

.video-info li {
  padding: 5px 7px;
  border-radius: 5px;
  color: #c4ccc2;
  background: rgba(255, 255, 255, .06);
  font-size: 8px;
}

.billing-journey {
  margin-bottom: 26px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fbfcf9, #f1f6ea);
  box-shadow: 0 16px 45px rgba(25, 36, 20, .05);
}

.billing-journey article {
  display: flex;
  gap: 12px;
}

.billing-journey article>span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ink);
  background: var(--lime);
  box-shadow: 0 7px 18px rgba(121, 159, 52, .2);
  font-size: 10px;
  font-weight: 800;
}

.billing-journey article div {
  display: flex;
  flex-direction: column;
}

.billing-journey small {
  color: #748070;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.billing-journey h3 {
  margin: 3px 0;
  font-family: var(--font-head);
  font-size: 15px;
}

.billing-journey p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.billing-journey>i {
  color: #87927f;
  font-style: normal;
}

.pricing-engine {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: stretch;
}

.calculator-card,
.pricing-explain {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcf9;
}

.calculator-card {
  box-shadow: 0 26px 70px rgba(25, 36, 20, .08);
}

.calculator-head h3 {
  margin: 11px 0 8px;
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -.045em;
}

.calculator-head p,
.pricing-explain>p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.pricing-rate-row {
  margin: 26px 0 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pricing-rate-row>div {
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.pricing-rate-row span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pricing-rate-row strong {
  margin: 5px 0 3px;
  font-family: var(--font-head);
  font-size: 25px;
  line-height: 1;
}

.pricing-rate-row small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.calculator-fields.usage-fields {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.usage-fields label {
  display: flex;
  flex-direction: column;
  gap: 11px;
  color: #556051;
  font-size: 10px;
  font-weight: 800;
}

.usage-fields label>span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.usage-fields output {
  min-width: 54px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--lime);
  text-align: center;
  font-family: var(--font-head);
  font-size: 11px;
}

.usage-fields input[type="range"] {
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #8eb642, #d4f897);
  accent-color: #688f24;
  cursor: pointer;
}

.estimate-box {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 17px;
  color: var(--white);
  background: linear-gradient(135deg, #182116, #2b3a26);
  box-shadow: 0 17px 35px rgba(17, 24, 15, .16);
}

.estimate-box>div {
  display: flex;
  flex-direction: column;
}

.estimate-box small {
  color: #9fab9c;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.estimate-box strong {
  margin: 5px 0;
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1.1;
}

.estimate-box strong em {
  color: #aeb9ab;
  font-family: var(--font-body);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.estimate-box>div>span {
  color: #b8c1b5;
  font-size: 9px;
}

.estimate-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.pricing-limit-card {
  overflow: hidden;
  position: relative;
  color: var(--white);
  border-color: #263522;
  background: #182116;
}

.pricing-limit-card::before {
  content: "";
  width: 190px;
  height: 190px;
  position: absolute;
  top: -85px;
  right: -65px;
  border-radius: 50%;
  background: rgba(201, 255, 99, .09);
}

.pricing-limit-card .section-kicker {
  color: var(--lime);
}

.pricing-limit-card>p {
  color: #aeb8aa;
}

.credit-limit-title {
  margin: 17px 0 9px;
  display: flex;
  align-items: end;
  gap: 10px;
}

.credit-limit-title strong {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 49px;
  line-height: .9;
  letter-spacing: -.055em;
}

.credit-limit-title span {
  max-width: 80px;
  color: #d4dbd1;
  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
}

.credit-meter {
  height: 72px;
  margin: 28px 0 17px;
  position: relative;
  border-top: 6px solid #34422f;
  border-radius: 5px;
}

.credit-meter>i {
  width: 70%;
  height: 6px;
  position: absolute;
  top: -6px;
  left: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #85b23a, var(--lime));
}

.credit-meter>span {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  color: #e5eae2;
  font-size: 9px;
  font-weight: 800;
}

.credit-meter>span::before {
  content: "";
  width: 2px;
  height: 12px;
  position: absolute;
  top: -16px;
  background: currentColor;
  opacity: .5;
}

.credit-meter small {
  margin-top: 2px;
  color: #879384;
  font-size: 7px;
  font-weight: 500;
}

.alert-70 {
  left: 70%;
  transform: translateX(-50%);
}

.alert-90 {
  left: 90%;
  transform: translateX(-60%);
}

.alert-100 {
  right: 0;
  align-items: flex-end;
}

.alert-100::before {
  right: 0;
}

.limit-benefits {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.limit-benefits li {
  padding: 9px 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.limit-benefits li>span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
}

.limit-benefits p {
  margin: 0;
  color: #b4beb1;
  font-size: 9px;
  line-height: 1.45;
}

.limit-note {
  margin: 4px 0 20px;
  padding: 13px;
  border: 1px solid rgba(201, 255, 99, .12);
  border-radius: 11px;
  background: rgba(201, 255, 99, .055);
}

.limit-note span {
  color: var(--lime);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.limit-note p {
  margin: 4px 0 0;
  color: #afbaac;
  font-size: 8px;
  line-height: 1.5;
}

.pricing-trust {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px 25px;
  color: var(--muted);
  font-size: 10px;
}

.pricing-trust span::first-letter {
  color: #5f8b1e;
}

.network-section {
  overflow: hidden;
  position: relative;
  color: #f5f8f3;
  background: #11180f;
}

.network-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.network-glow-one {
  width: 520px;
  height: 520px;
  top: -260px;
  right: -120px;
  background: radial-gradient(circle, rgba(201, 255, 99, .1), transparent 68%);
}

.network-glow-two {
  width: 430px;
  height: 430px;
  bottom: -250px;
  left: -160px;
  background: radial-gradient(circle, rgba(102, 145, 230, .1), transparent 68%);
}

.network-section .container {
  position: relative;
  z-index: 1;
}

.network-heading {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 60px;
}

.network-heading h2 {
  max-width: 740px;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: clamp(39px, 4.4vw, 61px);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.network-heading>p {
  margin: 0 0 7px;
  color: #a6b1a3;
  font-size: 14px;
  line-height: 1.7;
}

.social-network-row {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.network-social {
  min-height: 126px;
  padding: 18px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  transition: transform .2s, border-color .2s, background .2s;
}

.network-social:not(.is-coming):hover {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-3px);
}

.network-social-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #f5f8f3;
  background: rgba(255, 255, 255, .08);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
}

.network-social.instagram .network-social-icon {
  background: linear-gradient(135deg, #7d52b8, #dc657f, #f0a64b);
}

.network-social.linkedin .network-social-icon {
  background: #2468a7;
}

.network-social.twitter .network-social-icon {
  color: #11180f;
  background: #f5f8f3;
}

.network-social>div {
  display: flex;
  flex-direction: column;
}

.network-social small {
  color: #899685;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.network-social strong {
  margin: 2px 0 4px;
  font-size: 13px;
}

.network-social p {
  margin: 0;
  color: #a8b3a5;
  font-size: 8px;
  line-height: 1.5;
}

.network-social>i {
  color: var(--lime);
  font-size: 13px;
  font-style: normal;
}

.coming-pill {
  align-self: start;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.network-content-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 18px;
}

.network-blog {
  overflow: hidden;
  min-height: 530px;
  display: grid;
  grid-template-rows: 230px 1fr;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: #1a2417;
}

.blog-visual {
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(201, 255, 99, .14), transparent 38%), linear-gradient(135deg, #263621, #182216);
}

.blog-visual .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .25);
}

.blog-visual .brand-mark span {
  width: 5px;
}

.blog-voice-line {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-voice-line i {
  width: 5px;
  height: 25px;
  border-radius: 5px;
  background: var(--lime);
}

.blog-voice-line i:nth-child(2) {
  height: 48px;
}

.blog-voice-line i:nth-child(3) {
  height: 66px;
}

.blog-voice-line i:nth-child(4) {
  height: 39px;
}

.blog-voice-line i:nth-child(5) {
  height: 18px;
}

.blog-visual>small {
  position: absolute;
  left: 28px;
  bottom: 22px;
  color: #92a08e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.blog-copy {
  padding: 29px;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  color: #849181;
  font-size: 8px;
}

.blog-meta span {
  color: var(--lime);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-copy h3 {
  max-width: 580px;
  margin: 12px 0 10px;
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.blog-copy>p {
  color: #a8b3a5;
  font-size: 11px;
  line-height: 1.65;
}

.blog-note {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.blog-note summary {
  padding: 16px 0 0;
  display: flex;
  justify-content: space-between;
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.blog-note summary::-webkit-details-marker {
  display: none;
}

.blog-note[open] summary span {
  transform: rotate(180deg);
}

.blog-note summary span {
  transition: transform .2s;
}

.blog-note>div {
  padding-top: 13px;
}

.blog-note>div p {
  color: #a8b3a5;
  font-size: 10px;
  line-height: 1.7;
}

.network-message-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.network-message {
  min-height: 256px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
}

.user-message {
  background: radial-gradient(circle at 100% 0, rgba(110, 159, 255, .18), transparent 45%), #182337;
}

.client-message {
  background: radial-gradient(circle at 100% 0, rgba(201, 255, 99, .13), transparent 45%), #1d2919;
}

.message-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-top>span {
  color: #aeb9ca;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.client-message .message-top>span {
  color: #adbaa8;
}

.message-top i {
  padding: 5px 7px;
  border-radius: 999px;
  color: #bcd0f6;
  background: rgba(110, 159, 255, .1);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.client-message .message-top i {
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
}

.network-message h3 {
  max-width: 430px;
  margin: 24px 0 10px;
  font-family: var(--font-head);
  font-size: 25px;
  line-height: 1.14;
  letter-spacing: -.04em;
}

.network-message p {
  margin: 0 0 18px;
  color: #aab6c8;
  font-size: 10px;
  line-height: 1.65;
}

.client-message p {
  color: #a9b5a6;
}

.network-message>a,
.network-message>div:last-child a {
  color: #d9e6ff;
  font-size: 9px;
  font-weight: 800;
}

.client-message>div:last-child {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.client-message>div:last-child a:first-child {
  color: var(--lime);
}

.client-message>div:last-child a:last-child {
  color: #aeb9ab;
  text-decoration: underline;
}

.network-bottom {
  margin-top: 18px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
}

.network-bottom>div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.network-bottom p {
  margin: 0;
  color: #9eaa9a;
  font-size: 9px;
}

.network-bottom p strong {
  color: #e7ede4;
}

.network-bottom>a {
  padding: 9px 12px;
  border-radius: 9px;
  color: #11180f;
  background: var(--lime);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.social-feed-head {
  margin: 32px 0 17px;
  padding-top: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.social-feed-head>div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-feed-head small {
  color: #879483;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.social-feed-head h3 {
  margin-top: 3px;
  font-family: var(--font-head);
  font-size: 23px;
  letter-spacing: -.035em;
}

.feed-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.feed-labels span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #a9b4a6;
  background: rgba(255, 255, 255, .035);
  font-size: 8px;
}

.feed-labels span:first-child {
  color: #11180f;
  border-color: var(--lime);
  background: var(--lime);
  font-weight: 800;
}

.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 15px;
}

.social-post-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 21px;
  background: #192217;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.social-post-card:hover {
  border-color: rgba(255, 255, 255, .19);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .19);
  transform: translateY(-4px);
}

.post-featured {
  grid-column: span 7;
}

.post-reel {
  grid-column: span 5;
}

.post-note,
.post-update,
.post-blog {
  grid-column: span 4;
}

.post-media {
  overflow: hidden;
  position: relative;
  background: #22301e;
}

.post-media>img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-type {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #dfe7dc;
  background: rgba(12, 18, 10, .55);
  backdrop-filter: blur(9px);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.post-media-featured {
  min-height: 325px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 75% 20%, rgba(201, 255, 99, .16), transparent 35%), linear-gradient(145deg, #2d4027, #182216);
}

.post-brand-scene {
  display: flex;
  align-items: center;
  gap: 17px;
}

.post-brand-scene .brand-mark {
  width: 67px;
  height: 67px;
  border-radius: 19px;
  box-shadow: 0 17px 50px rgba(0, 0, 0, .3);
}

.post-brand-scene>div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.post-brand-scene small {
  color: #a8b4a5;
  font-size: 9px;
  text-transform: uppercase;
}

.post-brand-scene strong {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 37px;
  line-height: 1;
  letter-spacing: -.04em;
}

.scene-waves {
  height: 75px;
  margin-left: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.scene-waves i {
  width: 5px;
  height: 25px;
  border-radius: 5px;
  background: var(--lime);
}

.scene-waves i:nth-child(2) {
  height: 52px;
}

.scene-waves i:nth-child(3) {
  height: 71px;
}

.scene-waves i:nth-child(4) {
  height: 44px;
}

.scene-waves i:nth-child(5) {
  height: 18px;
}

.post-media-reel {
  min-height: 325px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, rgba(110, 159, 255, .25), transparent 38%), linear-gradient(145deg, #17243b, #101827);
}

.reel-phone {
  width: 164px;
  height: 265px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 25px;
  background: rgba(12, 18, 30, .72);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .32);
  transform: rotate(2deg);
}

.reel-phone>span {
  align-self: flex-start;
  color: #9cabc4;
  font-size: 8px;
  font-weight: 800;
}

.reel-orb {
  width: 84px;
  height: 84px;
  margin: 32px 0 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #567bc4, #263a63);
  box-shadow: 0 0 35px rgba(91, 132, 215, .28);
}

.reel-orb i {
  width: 3px;
  height: 17px;
  border-radius: 4px;
  background: #dce8ff;
}

.reel-orb i:nth-child(2) {
  height: 32px;
}

.reel-phone strong {
  font-size: 11px;
}

.reel-phone small {
  margin-top: 7px;
  color: #91a2be;
  font-size: 8px;
}

.play-chip {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #11180f;
  background: #f5f8f3;
  font-size: 8px;
}

.play-chip b {
  margin-left: 3px;
  font-size: 8px;
}

.post-body {
  padding: 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.post-meta {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.platform-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #f5f8f3;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 800;
}

.instagram-mark {
  background: linear-gradient(135deg, #7d52b8, #dc657f, #f0a64b);
}

.video-mark {
  color: #11180f;
  background: #e7efff;
}

.linkedin-mark {
  background: #2468a7;
}

.update-mark,
.blog-mark {
  color: #11180f;
  background: var(--lime);
}

.post-meta>div {
  display: flex;
  flex-direction: column;
}

.post-meta>div strong {
  font-size: 10px;
}

.post-meta>div small {
  color: #839080;
  font-size: 7px;
}

.post-meta time,
.new-post-pill {
  margin-left: auto;
  color: #8e9b8a;
  font-size: 7px;
}

.new-post-pill {
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
  font-weight: 800;
  text-transform: uppercase;
}

.post-body h3 {
  margin: 20px 0 9px;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.13;
  letter-spacing: -.04em;
}

.post-body>p {
  margin: 0 0 19px;
  color: #a6b2a3;
  font-size: 10px;
  line-height: 1.65;
}

.post-body>a {
  margin-top: auto;
  color: var(--lime);
  font-size: 9px;
  font-weight: 800;
}

.post-note {
  min-height: 350px;
  background: radial-gradient(circle at 100% 0, rgba(62, 113, 167, .2), transparent 42%), #17202a;
}

.post-note blockquote {
  margin: 27px 0 13px;
  font-family: var(--font-head);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.post-update .post-media {
  min-height: 175px;
}

.post-media-update {
  padding: 28px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 80% 10%, rgba(201, 255, 99, .14), transparent 36%), #202e1c;
}

.update-window {
  width: 90%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  background: #172015;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.update-window>div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.update-window>div i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #596654;
}

.update-window>div span {
  margin-left: auto;
  color: var(--lime);
  font-size: 7px;
  text-transform: uppercase;
}

.update-window>strong {
  margin: 17px 0 4px;
  display: block;
  font-size: 12px;
}

.update-window p {
  margin: 0;
  color: #82907e;
  font-size: 7px;
}

.update-window>b {
  height: 5px;
  margin-top: 13px;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  background: #354231;
}

.update-window>b em {
  width: 65%;
  height: 100%;
  display: block;
  background: var(--lime);
}

.post-blog {
  min-height: 350px;
  background: radial-gradient(circle at 100% 0, rgba(201, 255, 99, .08), transparent 40%), #1d2919;
}

.blog-note.compact {
  margin-top: auto;
}

.blog-note.compact>div p {
  font-size: 9px;
}

.network-bottom.modern>div:last-child {
  display: flex;
  gap: 8px;
}

.network-bottom.modern>div:last-child a {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  color: #dce5d9;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.network-bottom.modern>div:last-child a:first-child {
  color: #11180f;
  border-color: var(--lime);
  background: var(--lime);
}

.network-section {
  padding: 88px 0;
  color: var(--ink);
  background: var(--paper-2);
}

.network-section .network-glow {
  display: none;
}

.network-connect-box {
  padding: 28px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 36px;
  border-radius: 22px;
  color: #f5f8f3;
  background: linear-gradient(135deg, #172015, #263621);
  box-shadow: 0 20px 55px rgba(17, 24, 15, .14);
}

.network-connect-copy .section-kicker {
  color: var(--lime);
}

.network-connect-copy h2 {
  margin: 8px 0 7px;
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.network-connect-copy p {
  max-width: 470px;
  margin: 0;
  color: #a8b4a5;
  font-size: 11px;
  line-height: 1.6;
}

.network-link-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.network-link-list>a,
.network-link-list>div {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  transition: border-color .2s, background .2s, transform .2s;
}

.network-link-list>a:hover {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .075);
  transform: translateY(-2px);
}

.social-link-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #f5f8f3;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
}

.social-link-icon.instagram {
  background: linear-gradient(135deg, #7d52b8, #dc657f, #f0a64b);
}

.social-link-icon.linkedin {
  background: #2468a7;
}

.social-link-icon.twitter {
  color: #11180f;
  background: #f5f8f3;
}

.social-link-icon.product,
.social-link-icon.blog {
  color: #11180f;
  background: var(--lime);
}

.social-link-icon.video {
  color: #11180f;
  background: #e7efff;
}

.network-link-list>a>div,
.network-link-list>div>div {
  display: flex;
  flex-direction: column;
}

.network-link-list strong {
  font-size: 10px;
}

.network-link-list small {
  color: #8f9b8c;
  font-size: 7px;
  white-space: nowrap;
}

.network-link-list i {
  color: var(--lime);
  font-size: 9px;
  font-style: normal;
}

.social-link-soon>i {
  padding: 4px 5px;
  border-radius: 999px;
  background: rgba(201, 255, 99, .08);
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
}

.network-library {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 16px 45px rgba(30, 42, 27, .06);
}

.network-library-head {
  min-height: 58px;
  padding: 2px 3px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.network-library-head>div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.network-library-head small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.network-library-head h3 {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: -.03em;
}

.network-library-head>p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.network-scroll-list {
  height: 448px;
  margin: 12px -4px 0 0;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #96b85a transparent;
  scrollbar-width: thin;
}

.network-scroll-list::-webkit-scrollbar {
  width: 6px;
}

.network-scroll-list::-webkit-scrollbar-track {
  background: transparent;
}

.network-scroll-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #a9c776;
}

.network-content-row {
  width: 100%;
  min-height: 98px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 34px 72px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}

.network-content-row:hover,
.network-content-row:focus-visible {
  border-color: #a9ce68;
  background: var(--white);
  box-shadow: 0 8px 25px rgba(35, 49, 31, .08);
  transform: translateX(-2px);
  outline: 0;
}

.content-serial {
  color: #899584;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 800;
}

.content-thumb {
  width: 72px;
  height: 72px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #f5f8f3;
}

.content-thumb i {
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.content-thumb b {
  margin-top: 3px;
  font-size: 7px;
}

.instagram-thumb {
  background: linear-gradient(145deg, #794cb1, #d25c77, #e9a14a);
}

.linkedin-thumb {
  background: linear-gradient(145deg, #256ba9, #174a77);
}

.product-thumb {
  color: #11180f;
  background: linear-gradient(145deg, #d9ff91, #9ed13d);
}

.blog-thumb {
  background: linear-gradient(145deg, #2d4027, #172015);
}

.video-thumb {
  background: linear-gradient(145deg, #435f99, #192945);
}

.twitter-thumb {
  color: #11180f;
  background: #edf1e9;
}

.content-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content-row-copy small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
}

.content-row-copy strong {
  margin: 3px 0 2px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-row-copy p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-kind {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--white);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.content-open-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink);
  background: var(--lime);
  font-size: 9px;
  font-style: normal;
}

.network-library-foot {
  min-height: 44px;
  padding: 13px 3px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid var(--line);
}

.network-library-foot span {
  color: var(--muted);
  font-size: 8px;
}

.network-library-foot span i {
  width: 21px;
  height: 21px;
  margin-right: 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #11180f;
  background: var(--lime);
  font-style: normal;
  font-weight: 800;
}

.network-library-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.network-viewer-modal .modal-panel {
  width: min(860px, 100%);
  padding: 0;
  overflow: hidden auto;
}

.network-viewer-modal .modal-close {
  z-index: 3;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
}

.viewer-entry {
  min-height: 500px;
}

.viewer-image-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.viewer-media {
  min-height: 500px;
  padding: 35px;
  display: grid;
  place-items: center;
  position: relative;
  color: #f5f8f3;
}

.viewer-instagram-art {
  background: radial-gradient(circle at 75% 20%, rgba(201, 255, 99, .18), transparent 34%), linear-gradient(145deg, #293c24, #152013);
}

.viewer-instagram-art>div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.viewer-instagram-art .brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 17px;
}

.viewer-instagram-art strong {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 32px;
}

.viewer-instagram-art>small {
  position: absolute;
  bottom: 27px;
  color: #9aa796;
  font-size: 8px;
  text-transform: uppercase;
}

.viewer-wave {
  display: flex;
  align-items: center;
  gap: 4px;
}

.viewer-wave i {
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: var(--lime);
}

.viewer-wave i:nth-child(2) {
  height: 48px;
}

.viewer-wave i:nth-child(3) {
  height: 35px;
}

.viewer-wave i:nth-child(4) {
  height: 16px;
}

.viewer-copy {
  padding: 45px;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.viewer-platform {
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewer-platform>div {
  display: flex;
  flex-direction: column;
}

.viewer-platform strong {
  font-size: 10px;
}

.viewer-platform small {
  color: var(--muted);
  font-size: 7px;
}

.viewer-copy h2 {
  margin: 28px 0 13px;
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.viewer-copy>p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.viewer-caption {
  margin: 7px 0 24px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
}

.viewer-caption b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 8px;
  text-transform: uppercase;
}

.viewer-copy>.button {
  align-self: flex-start;
  margin-top: auto;
}

.viewer-author {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewer-author img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: cover;
}

.viewer-author>div {
  display: flex;
  flex-direction: column;
}

.viewer-author strong {
  font-size: 10px;
}

.viewer-author small {
  color: var(--muted);
  font-size: 8px;
}

.viewer-text-entry .viewer-copy,
.viewer-blog-entry .viewer-copy {
  min-height: 500px;
  padding: 48px 60px;
}

.viewer-article {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.viewer-article h3 {
  margin: 24px 0 6px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
}

.viewer-kicker {
  margin-top: 30px;
  color: #719b31;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.viewer-product-art {
  background: linear-gradient(145deg, #e7f5ce, #c7e89a);
}

.viewer-dashboard-card {
  width: 100%;
  max-width: 310px;
  padding: 22px;
  border-radius: 17px;
  color: #f5f8f3;
  background: #172015;
  box-shadow: 0 25px 55px rgba(31, 48, 22, .24);
}

.viewer-dashboard-card>span {
  display: flex;
  justify-content: space-between;
  color: #94a190;
  font-size: 8px;
  text-transform: uppercase;
}

.viewer-dashboard-card>span b {
  color: var(--lime);
}

.viewer-dashboard-card>strong {
  margin: 20px 0 2px;
  display: block;
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 38px;
}

.viewer-dashboard-card>small {
  color: #9ba797;
  font-size: 8px;
}

.viewer-dashboard-card>i {
  height: 6px;
  margin: 16px 0;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #364331;
}

.viewer-dashboard-card>i em {
  width: 65%;
  height: 100%;
  display: block;
  background: var(--lime);
}

.viewer-dashboard-card>div p {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  color: #9da99a;
  font-size: 8px;
}

.viewer-dashboard-card>div b {
  color: #edf3ea;
}

.viewer-video-art {
  background: radial-gradient(circle at 45% 30%, rgba(110, 159, 255, .28), transparent 36%), linear-gradient(145deg, #182945, #0f1828);
}

.viewer-phone {
  width: 185px;
  height: 330px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background: rgba(8, 15, 27, .73);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .32);
}

.viewer-phone>span {
  align-self: flex-start;
  color: #9aabc8;
  font-size: 8px;
}

.viewer-phone>div {
  width: 90px;
  height: 90px;
  margin: 45px 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 50%;
  background: #344f83;
}

.viewer-phone>div i {
  width: 3px;
  height: 20px;
  border-radius: 4px;
  background: #dbe7ff;
}

.viewer-phone>div i:nth-child(2) {
  height: 38px;
}

.viewer-phone>strong {
  font-size: 11px;
}

.viewer-phone>small {
  margin-top: 8px;
  color: #91a2be;
  font-size: 8px;
}

.viewer-phone>b {
  width: 35px;
  height: 35px;
  margin-top: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11180f;
  background: #f5f8f3;
  font-size: 9px;
}

.contact-section {
  color: var(--white);
  background: #182116;
}

.contact-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 85px;
  align-items: start;
}

.contact-copy h2 {
  margin: 14px 0 20px;
  font-family: var(--font-head);
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.contact-copy>p {
  color: #aab5a7;
  font-size: 15px;
}

.contact-details {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.contact-details>a,
.contact-details>div {
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--dark-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
}

.contact-details>a>span,
.contact-details>div>span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
  font-size: 12px;
}

.contact-details div div,
.contact-details a div {
  display: flex;
  flex-direction: column;
}

.contact-details small {
  color: #8f9a8c;
  font-size: 8px;
}

.contact-details strong {
  font-size: 11px;
}

.contact-form {
  padding: 32px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .055);
}

.contact-form>label,
.contact-form .field-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
  color: #c4cdc1;
  font-size: 10px;
  font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  color: var(--white);
  border-color: var(--dark-line);
  background: rgba(255, 255, 255, .06);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #7f8b7c;
}

.contact-form>small {
  display: block;
  margin-top: 10px;
  color: #7f8b7c;
  text-align: center;
  font-size: 8px;
}

.footer-main {
  grid-template-columns: .7fr 1.3fr;
}

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

.footer-socials {
  margin-top: 25px;
  display: flex;
  gap: 8px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  transition: background .2s, color .2s;
}

.footer-socials a:hover {
  color: var(--lime);
  background: var(--ink);
}

.footer-links span {
  color: var(--muted);
  font-size: 10px;
}

.footer-bottom div {
  display: flex;
  gap: 18px;
}

.footer-bottom button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-size: inherit;
  cursor: pointer;
}

.feedback-fab {
  position: fixed;
  z-index: 900;
  right: 22px;
  bottom: 22px;
  height: 48px;
  padding: 0 15px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 15px 45px rgba(17, 24, 15, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(70px);
  transition: opacity .3s, visibility .3s, transform .3s;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.feedback-fab.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.feedback-fab span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 15px;
}

.feedback-fab b {
  font-size: 11px;
}

.auth-modal .modal-panel {
  width: min(660px, 100%);
}

.auth-brand {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-brand>div {
  display: flex;
  flex-direction: column;
}

.auth-brand strong {
  font-size: 13px;
}

.auth-brand small {
  color: var(--muted);
  font-size: 9px;
}

.auth-tabs {
  margin-bottom: 28px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 11px;
  background: #edf1e9;
}

.auth-tabs button {
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.auth-tabs button.active {
  background: var(--white);
  box-shadow: 0 4px 12px rgba(17, 24, 15, .08);
}

.auth-form>label,
.auth-form .field-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
  color: #4c5749;
  font-size: 10px;
  font-weight: 700;
}

.auth-form h2 {
  margin-bottom: 24px;
}

.auth-switch {
  margin: 15px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.auth-switch button {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: none;
  font-weight: 800;
  cursor: pointer;
}

.role-selector {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.role-selector label {
  cursor: pointer;
}

.role-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-selector span {
  min-height: 66px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, background .2s;
}

.role-selector input:checked+span {
  border-color: #8eb642;
  background: #f1f8e4;
}

.role-selector b {
  font-size: 11px;
}

.role-selector small {
  color: var(--muted);
  font-size: 8px;
}

.feedback-modal .modal-panel {
  width: min(560px, 100%);
}

.feedback-modal fieldset {
  margin: 20px 0;
  padding: 0;
  border: 0;
}

.feedback-modal legend {
  margin-bottom: 9px;
  color: #4c5749;
  font-size: 10px;
  font-weight: 700;
}

.rating-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rating-options input {
  position: absolute;
  opacity: 0;
}

.rating-options span {
  min-height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  font-size: 22px;
  cursor: pointer;
}

.rating-options small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.rating-options input:checked+span {
  border-color: #8eb642;
  background: #f1f8e4;
  box-shadow: 0 0 0 3px rgba(142, 182, 66, .1);
}

.feedback-modal form>label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
  color: #4c5749;
  font-size: 10px;
  font-weight: 700;
}

.feedback-later {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: 0;
  color: var(--muted);
  background: none;
  font-size: 10px;
  cursor: pointer;
}

/* Dark theme */
html[data-theme="dark"] {
  --ink: #F8FAFC;
  --ink-2: #E2E8F0;
  --muted: #94A3B8;
  --paper: #0B1120;
  --paper-2: #111827;
  --white: #1E293B;
  --line: #334155;
  --shadow: 0 30px 90px rgba(0, 0, 0, .36);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--paper);
}

html[data-theme="dark"] #vision {
  background:
    radial-gradient(circle at 8% 12%, rgba(6, 182, 212, .12), transparent 34%),
    radial-gradient(circle at 92% 82%, rgba(37, 99, 235, .15), transparent 40%),
    linear-gradient(180deg, #0D192B 0%, #101D31 100%);
}

html[data-theme="dark"] .theme-sun {
  transform: translateY(-34px);
  opacity: 0;
}

html[data-theme="dark"] .theme-moon {
  transform: translateY(0);
  opacity: 1;
}

html[data-theme="dark"] .site-header .nav-shell,
html[data-theme="dark"] .mobile-nav {
  border-color: var(--line);
  background: rgba(17, 24, 15, .88);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .desktop-nav a,
html[data-theme="dark"] .desktop-nav>button:not(.nav-guide-trigger) {
  color: #aab5a6;
}

html[data-theme="dark"] .desktop-nav a:hover,
html[data-theme="dark"] .desktop-nav>button:not(.nav-guide-trigger):hover {
  color: var(--ink);
}

html[data-theme="dark"] .nav-audience-user {
  background: rgba(110, 159, 255, .13);
}

html[data-theme="dark"] .nav-audience-client {
  background: rgba(201, 255, 99, .1);
}

html[data-theme="dark"] .desktop-nav .nav-guide-trigger {
  color: #aab5a6;
}

html[data-theme="dark"] .nav-guide-trigger i {
  color: #aab5a6;
  background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .mobile-guide-trigger.user i,
html[data-theme="dark"] .mobile-guide-trigger.client i {
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
}

html[data-theme="dark"] .nav-guide-pill {
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .nav-guide-pill.user {
  background: rgba(37, 99, 235, .16);
}

html[data-theme="dark"] .nav-guide-pill.client {
  color: #101820;
  background: var(--lime);
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .profile-button {
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .nav-signup,
html[data-theme="dark"] .mobile-portal,
html[data-theme="dark"] .button-dark {
  color: #101820;
  background: var(--lime);
}

html[data-theme="dark"] .profile-menu {
  background: rgba(21, 30, 19, .98);
}

html[data-theme="dark"] .hero-grid {
  opacity: .22;
}

html[data-theme="dark"] .hero-orb-one {
  background: radial-gradient(circle, rgba(201, 255, 99, .12), transparent 69%);
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-kicker {
  color: #a4b0a0;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero-paths a,
html[data-theme="dark"] .logo-particle {
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .hero h1 em {
  color: var(--lime);
}

html[data-theme="dark"] .hero-lead {
  color: var(--muted);
}

html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .button-outline {
  color: var(--ink);
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .button-ghost:hover,
html[data-theme="dark"] .button-outline:hover {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .browser-card {
  background: #13202b;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .browser-topbar {
  background: #0e1720;
}

html[data-theme="dark"] .browser-url,
html[data-theme="dark"] .assistant-panel,
html[data-theme="dark"] .animated-wordmark,
html[data-theme="dark"] .floating-card {
  background: rgba(19, 32, 43, .97);
}

html[data-theme="dark"] .browser-page {
  background: linear-gradient(135deg, #14232d, #0b141d);
}

html[data-theme="dark"] .message-user {
  background: #1b2b36;
}

html[data-theme="dark"] .message-bolo p {
  border-color: var(--line);
  background: #101b24;
}

html[data-theme="dark"] .mini-heading,
html[data-theme="dark"] .mini-button {
  background: #dce7ea;
}

html[data-theme="dark"] .assistant-mode-row,
html[data-theme="dark"] .voice-bar {
  border-color: var(--line);
}

html[data-theme="dark"] .assistant-mode-row span,
html[data-theme="dark"] .assistant-text-composer {
  color: var(--muted);
  border-color: var(--line);
  background: #101b24;
}

html[data-theme="dark"] .assistant-mode-row .active,
html[data-theme="dark"] .assistant-text-composer button {
  color: #101820;
  background: var(--lime);
}

html[data-theme="dark"] .usecase-strip,
html[data-theme="dark"] .audience-section,
html[data-theme="dark"] .problem,
html[data-theme="dark"] .how,
html[data-theme="dark"] .bento-section,
html[data-theme="dark"] .pricing,
html[data-theme="dark"] .founder,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .final-cta {
  background: var(--paper);
}

html[data-theme="dark"] .usecase-strip {
  border-color: var(--line);
}

html[data-theme="dark"] .strip-track {
  color: #aab5a6;
}

html[data-theme="dark"] .usecase-strip::before {
  background: linear-gradient(90deg, var(--paper), rgba(8, 16, 24, 0));
}

html[data-theme="dark"] .usecase-strip::after {
  background: linear-gradient(270deg, var(--paper), rgba(8, 16, 24, 0));
}

html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .bento:not(.sales-card),
html[data-theme="dark"] .billing-journey,
html[data-theme="dark"] .calculator-card,
html[data-theme="dark"] .pricing-explain {
  background: #13202b;
}

html[data-theme="dark"] .quick-demo-mode,
html[data-theme="dark"] .audience-mode-note {
  background: #101820;
}

html[data-theme="dark"] .quick-demo-mode .active,
html[data-theme="dark"] .audience-mode-note span {
  color: #101820;
  background: var(--lime);
}

html[data-theme="dark"] .user-audience .audience-top {
  background: linear-gradient(145deg, #16233b, #101a2c);
}

html[data-theme="dark"] .client-audience .audience-top {
  background: linear-gradient(145deg, #1d2c16, #162111);
}

html[data-theme="dark"] .audience-badge,
html[data-theme="dark"] .user-illustration,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .live-widget {
  color: var(--ink);
  background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .owner-payment-summary {
  border-color: rgba(201, 255, 99, .12);
  background: rgba(201, 255, 99, .055);
}

html[data-theme="dark"] .owner-payment-summary>i {
  background: rgba(201, 255, 99, .14);
}

html[data-theme="dark"] .owner-payment-summary strong {
  color: #dce5d8;
}

html[data-theme="dark"] .owner-payment-summary>div:first-child strong {
  color: var(--lime);
}

html[data-theme="dark"] .step-visual {
  background: #0c1720;
}

html[data-theme="dark"] .language-card {
  background: #111d35 !important;
}

html[data-theme="dark"] .action-card {
  background: #281915 !important;
}

html[data-theme="dark"] .knowledge-card-main {
  background: #0e2827 !important;
}

html[data-theme="dark"] .pricing-engine select,
html[data-theme="dark"] .modal-panel input,
html[data-theme="dark"] .modal-panel select,
html[data-theme="dark"] .modal-panel textarea {
  color: var(--ink);
  background: #10170e;
}

html[data-theme="dark"] .estimate-box,
html[data-theme="dark"] .cta-card {
  color: #f5f8f3;
  background: #162532;
}

html[data-theme="dark"] .estimate-box .button-primary {
  color: #101820;
}

html[data-theme="dark"] .founder-photo::before {
  border-color: var(--line);
}

html[data-theme="dark"] .founder-badge {
  background: rgba(20, 29, 18, .94);
}

html[data-theme="dark"] .site-footer {
  background: #0b141d;
}

html[data-theme="dark"] .footer-socials a:hover {
  color: #101820;
  background: var(--lime);
}

html[data-theme="dark"] .feedback-fab,
html[data-theme="dark"] .modal-panel {
  color: var(--ink);
  background: #151e13;
}

html[data-theme="dark"] .auth-tabs {
  background: #0f160d;
}

html[data-theme="dark"] .auth-tabs button.active,
html[data-theme="dark"] .rating-options span {
  background: #202a1e;
}

html[data-theme="dark"] .role-selector input:checked+span,
html[data-theme="dark"] .rating-options input:checked+span {
  background: rgba(201, 255, 99, .08);
}

html[data-theme="dark"] .journey-modal .modal-panel {
  background: #10170e;
}

html[data-theme="dark"] .journey-modal .modal-close {
  color: #F8FAFC;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .88);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .journey-modal .modal-close:hover,
html[data-theme="dark"] .journey-modal .modal-close:focus-visible {
  border-color: rgba(248, 250, 252, .34);
  background: rgba(30, 41, 59, .96);
}

html[data-theme="dark"] .user-journey-hero {
  background: radial-gradient(circle at 85% 20%, rgba(94, 135, 220, .16), transparent 32%), linear-gradient(135deg, #17233a, #10192b);
}

html[data-theme="dark"] .user-journey-hero p {
  color: #a6b3c9;
}

html[data-theme="dark"] .journey-index {
  background: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .journey-orb {
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .journey-steps-grid article b {
  background: rgba(110, 159, 255, .1);
}

html[data-theme="dark"] .client-steps article b,
html[data-theme="dark"] .client-journey-modal .journey-feature-grid article>i {
  color: var(--lime);
  background: rgba(201, 255, 99, .08);
}

html[data-theme="dark"] .network-viewer-modal .modal-close {
  color: var(--ink);
  background: #202a1e;
}

html[data-theme="dark"] .auth-form>label,
html[data-theme="dark"] .auth-form .field-row label,
html[data-theme="dark"] .feedback-modal form>label,
html[data-theme="dark"] .feedback-modal legend {
  color: #bbc5b8;
}

@media (min-width: 821px) and (max-width: 1120px) {
  .desktop-nav {
    display: none;
  }

  .nav-guide-pills {
    display: inline-flex;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-nav {
    position: absolute;
    top: 94px;
    left: 24px;
    right: 24px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(249, 250, 247, .98);
    box-shadow: 0 25px 60px rgba(25, 35, 23, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s, visibility .25s, transform .25s;
  }

  .mobile-nav.open {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-nav>a {
    padding: 12px 11px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
  }
}

@media (max-width: 980px) {

  .audience-grid,
  .pricing-engine,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .what-overview {
    grid-template-columns: 1fr;
  }

  .what-overview-brand {
    min-height: 400px;
    padding: 32px;
  }

  .what-logo-orb {
    width: 220px;
    height: 220px;
  }

  .what-brand-logo {
    width: 180px;
  }

  .audience-card {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
  }

  .audience-top {
    min-height: 100%;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .video-player {
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }

  .billing-journey {
    grid-template-columns: 1fr;
  }

  .billing-journey>i {
    display: none;
  }

  .network-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .network-heading>p {
    max-width: 650px;
  }

  .network-content-grid {
    grid-template-columns: 1fr;
  }

  .network-message-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .network-message {
    min-height: 270px;
  }

  .social-feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-featured,
  .post-blog {
    grid-column: span 2;
  }

  .post-reel,
  .post-note,
  .post-update {
    grid-column: auto;
  }

  .network-connect-box {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .network-connect-copy p {
    max-width: 720px;
  }

  .contact-layout {
    gap: 45px;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .nav-guide-pills {
    display: inline-flex;
  }

  .auth-link,
  .nav-signup {
    display: none;
  }

  .profile-short-name,
  .profile-button i {
    display: none;
  }

  .profile-button {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .hero-paths {
    margin-inline: auto;
  }

  .audience-card {
    display: block;
  }

  .audience-top {
    min-height: 280px;
  }

  .calculator-fields {
    grid-template-columns: 1fr;
  }

  .estimate-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .estimate-box .button {
    width: 100%;
  }

  .journey-hero {
    min-height: 0;
    padding: 48px 30px 35px;
    grid-template-columns: 1fr;
  }

  .journey-hero> :last-child {
    display: none;
  }

  .journey-intro {
    padding: 35px 30px 22px;
    grid-template-columns: 1fr;
  }

  .journey-section {
    margin-inline: 30px;
  }

  .journey-steps-grid,
  .journey-steps-grid.client-steps,
  .journey-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .journey-tip {
    margin-inline: 30px;
    grid-template-columns: 1fr;
  }

  .journey-pricing {
    margin-inline: 30px;
  }

  .journey-footer {
    padding: 30px;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .journey-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .social-network-row {
    grid-template-columns: 1fr;
  }

  .network-social {
    min-height: 0;
  }

  .network-message-stack {
    grid-template-columns: 1fr;
  }

  .network-message {
    min-height: 245px;
  }

  .social-feed-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .feed-labels {
    justify-content: flex-start;
  }

  .network-link-list {
    grid-template-columns: 1fr;
  }

  .network-link-list>a,
  .network-link-list>div {
    min-height: 64px;
  }

  .network-content-row {
    grid-template-columns: 30px 64px minmax(0, 1fr) auto 28px;
  }

  .content-thumb {
    width: 64px;
    height: 64px;
  }

  .viewer-image-entry {
    grid-template-columns: 1fr;
  }

  .viewer-media {
    min-height: 300px;
  }

  .viewer-copy {
    min-height: 390px;
    padding: 34px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }

  .hero-paths {
    grid-template-columns: 1fr;
  }

  .logo-constellation {
    display: none;
  }

  .animated-wordmark {
    right: 7px;
    bottom: 0;
  }

  .audience-top {
    min-height: 240px;
    padding: 20px;
  }

  .audience-copy {
    padding: 28px 22px;
  }

  .audience-copy h2 {
    font-size: 29px;
  }

  .what-overview {
    border-radius: 22px;
  }

  .what-overview-brand {
    min-height: 345px;
    padding: 22px 18px;
  }

  .what-brand-stage {
    width: min(100%, 290px);
    height: 255px;
  }

  .what-logo-orb {
    width: 174px;
    height: 174px;
    border-radius: 42px;
  }

  .what-logo-orb::before {
    inset: 8px;
    border-radius: 34px;
  }

  .what-logo-orb::after {
    inset: -12px;
    border-radius: 52px;
  }

  .what-brand-logo {
    width: 144px;
    border-radius: 24px;
  }

  .what-brand-chip {
    min-height: 31px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 9px;
  }

  .what-brand-chip i {
    width: 20px;
    height: 20px;
  }

  .what-brand-chip-language {
    top: 14px;
  }

  .what-brand-chip-mode {
    bottom: 39px;
  }

  .what-brand-wave {
    min-width: 124px;
    height: 34px;
    padding-inline: 10px;
    gap: 4px;
  }

  .what-brand-caption {
    margin-top: 8px;
  }

  .what-brand-caption strong {
    font-size: 15px;
  }

  .what-brand-caption span {
    font-size: 9px;
  }

  .what-overview-copy {
    padding: 28px 22px;
  }

  .what-overview-copy h3 {
    font-size: 27px;
  }

  .what-flow {
    grid-template-columns: 1fr;
  }

  .what-flow>i {
    display: none;
  }

  .what-flow>div {
    min-height: 74px;
  }

  .what-simple-note {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .what-simple-note span {
    justify-self: start;
  }

  .what-simple-note p {
    margin-bottom: 5px;
  }

  .user-illustration {
    width: 220px;
    height: 125px;
  }

  .dashboard-illustration {
    width: 245px;
    height: 155px;
  }

  .owner-billing-preview {
    min-height: 205px;
  }

  .dash-chart {
    height: 40px;
  }

  .owner-payment-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .owner-payment-summary>i {
    width: 100%;
    height: 1px;
    min-height: 1px;
  }

  .journey-hero {
    padding: 45px 22px 28px;
  }

  .journey-hero h2 {
    font-size: 32px;
  }

  .journey-index {
    padding-inline: 18px;
    display: flex;
    gap: 0;
    overflow-x: auto;
  }

  .journey-index span {
    min-width: 100px;
    padding-inline: 10px;
  }

  .journey-intro {
    padding: 30px 22px 18px;
  }

  .journey-intro>div {
    flex-direction: column;
  }

  .journey-section {
    margin-inline: 22px;
  }

  .journey-section-head {
    flex-direction: column;
  }

  .journey-steps-grid,
  .journey-steps-grid.client-steps,
  .journey-feature-grid {
    grid-template-columns: 1fr;
  }

  .journey-steps-grid article {
    min-height: 0;
  }

  .journey-tip,
  .journey-pricing {
    margin-inline: 22px;
  }

  .journey-tip>div,
  .client-checklist>div {
    grid-template-columns: 1fr;
  }

  .journey-price-pills {
    grid-template-columns: 1fr;
  }

  .journey-price-pills>i {
    display: none;
  }

  .journey-footer {
    padding: 28px 22px 32px;
  }

  .journey-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .journey-actions .button {
    width: 100%;
  }

  .journey-text-link {
    padding: 8px;
    text-align: center;
  }

  .network-heading h2 {
    font-size: 37px;
  }

  .network-social {
    grid-template-columns: 38px 1fr auto;
    padding: 15px;
  }

  .network-social-icon {
    width: 38px;
    height: 38px;
  }

  .network-blog {
    min-height: 0;
    grid-template-rows: 190px 1fr;
  }

  .blog-copy,
  .network-message {
    padding: 22px;
  }

  .blog-copy h3 {
    font-size: 25px;
  }

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

  .network-bottom>div {
    align-items: flex-start;
  }

  .network-bottom>a {
    width: 100%;
    text-align: center;
  }

  .social-feed-grid {
    grid-template-columns: 1fr;
  }

  .post-featured,
  .post-reel,
  .post-note,
  .post-update,
  .post-blog {
    grid-column: auto;
  }

  .post-media-featured,
  .post-media-reel {
    min-height: 270px;
  }

  .post-brand-scene {
    gap: 11px;
    transform: scale(.83);
  }

  .post-body {
    padding: 21px;
  }

  .post-body h3 {
    font-size: 22px;
  }

  .network-bottom.modern>div:last-child {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .network-bottom.modern>div:last-child a {
    width: 100%;
    text-align: center;
  }

  .network-section {
    padding: 64px 0;
  }

  .network-connect-box {
    padding: 21px;
    border-radius: 18px;
  }

  .network-connect-copy h2 {
    font-size: 27px;
  }

  .network-library {
    padding: 12px;
    border-radius: 18px;
  }

  .network-library-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .network-library-head>p {
    padding-left: 19px;
  }

  .network-scroll-list {
    height: 410px;
    padding-right: 5px;
  }

  .network-content-row {
    min-height: 84px;
    padding: 9px;
    grid-template-columns: 56px minmax(0, 1fr) 27px;
    gap: 10px;
  }

  .content-serial,
  .content-kind {
    display: none;
  }

  .content-thumb {
    width: 56px;
    height: 56px;
  }

  .content-row-copy strong {
    font-size: 10px;
  }

  .content-row-copy p {
    display: none;
  }

  .network-library-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .viewer-copy,
  .viewer-text-entry .viewer-copy,
  .viewer-blog-entry .viewer-copy {
    min-height: 0;
    padding: 30px 22px;
  }

  .viewer-copy h2 {
    font-size: 27px;
  }

  .viewer-media {
    min-height: 260px;
    padding: 22px;
  }

  .viewer-instagram-art>div {
    transform: scale(.83);
  }

  .viewer-entry {
    min-height: 0;
  }

  .client-benefits {
    grid-template-columns: 1fr;
  }

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

  .audience-actions .button {
    width: 100%;
  }

  .video-card {
    display: block;
  }

  .video-player {
    min-height: 0;
    aspect-ratio: 16/9;
  }

  .video-info p {
    min-height: 0;
  }

  .calculator-card,
  .pricing-explain {
    padding: 25px 20px;
  }

  .pricing-rate-row {
    grid-template-columns: 1fr;
  }

  .pricing-rate-row>div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .pricing-rate-row strong {
    grid-row: span 2;
    grid-column: 2;
  }

  .credit-limit-title strong {
    font-size: 43px;
  }

  .billing-journey {
    padding: 20px;
  }

  .billing-journey article {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .contact-form {
    padding: 24px 18px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
  }

  .feedback-fab {
    right: 12px;
    bottom: 12px;
  }

  .feedback-fab b {
    display: none;
  }

  .feedback-fab {
    width: 48px;
    padding: 7px;
  }

  .role-selector {
    grid-template-columns: 1fr;
  }
}

/* Horizontal social content rail */
.network-scroll-list {
  height: auto;
  min-height: 252px;
  margin: 12px 0 0;
  padding: 2px 2px 13px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: #96b85a transparent;
  scrollbar-width: thin;
}

.network-scroll-list::-webkit-scrollbar {
  width: auto;
  height: 6px;
}

.network-scroll-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #a9c776;
}

.network-content-row {
  width: auto;
  min-width: 0;
  min-height: 225px;
  padding: 14px;
  flex: 0 0 310px;
  display: grid;
  grid-template-columns: 34px 64px minmax(0, 1fr);
  grid-template-rows: 64px 1fr 28px;
  align-items: center;
  gap: 10px;
  position: relative;
  scroll-snap-align: start;
}

.network-content-row:hover,
.network-content-row:focus-visible {
  transform: translateY(-2px);
}

.network-content-row .content-serial {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
}

.network-content-row .content-thumb {
  width: 64px;
  height: 64px;
  grid-column: 2;
  grid-row: 1;
}

.network-content-row .content-kind {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}

.network-content-row .content-row-copy {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  padding-top: 5px;
}

.network-content-row .content-row-copy strong {
  margin: 5px 0 4px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.network-content-row .content-row-copy p {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.network-content-row .content-open-arrow {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
}

@media (max-width: 620px) {
  .network-scroll-list {
    height: auto;
    min-height: 235px;
    padding-right: 2px;
  }

  .network-content-row {
    min-height: 210px;
    padding: 12px;
    flex-basis: min(280px, 82vw);
    grid-template-columns: 30px 58px minmax(0, 1fr);
    grid-template-rows: 58px 1fr 27px;
  }

  .network-content-row .content-serial,
  .network-content-row .content-kind {
    display: block;
  }

  .network-content-row .content-thumb {
    width: 58px;
    height: 58px;
  }

  .network-content-row .content-row-copy p {
    display: -webkit-box;
  }
}

/* Homepage conversion, trust, and readability upgrades */
.brand-logo-image {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
}

.auth-brand .brand-logo-image {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 12px;
}

.hero-discover {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.hero-discover a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

button.is-loading {
  opacity: .7;
  pointer-events: none;
}

.button:disabled {
  cursor: wait;
}

.quick-demo-section {
  color: #f5f8f3;
  background: var(--ink);
}

.quick-demo-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 72px;
}

.quick-demo-copy h2 {
  max-width: 540px;
  margin: 14px 0 15px;
  font-family: var(--font-head);
  font-size: clamp(39px, 4.6vw, 62px);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.quick-demo-copy>p {
  max-width: 530px;
  color: #b4c0c8;
  font-size: 15px;
}

.quick-demo-form {
  margin-top: 28px;
}

.quick-demo-form label {
  display: block;
  margin-bottom: 8px;
  color: #d7e0e6;
  font-size: 12px;
  font-weight: 700;
}

.quick-demo-form>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.quick-demo-form input {
  min-width: 0;
  color: #f5f8f3;
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
}

.quick-demo-form input::placeholder {
  color: #8d9ba5;
}

.quick-demo-samples {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.quick-demo-samples button {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #c2ced6;
  background: rgba(255, 255, 255, .04);
  font-size: 11px;
  cursor: pointer;
}

.quick-demo-samples button:hover {
  color: #101820;
  border-color: var(--lime);
  background: var(--lime);
}

.quick-demo-note {
  margin-top: 17px;
  display: block;
  color: #8d9ba5;
  font-size: 11px;
  line-height: 1.5;
}

.quick-demo-stage {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .04);
}

.quick-demo-browser {
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .28);
}

.quick-demo-top {
  height: 41px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.quick-demo-top i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7c0b4;
}

.quick-demo-top span {
  margin-left: 9px;
  color: var(--muted);
  font-size: 10px;
}

.quick-demo-screen {
  min-height: 400px;
  padding: 27px;
}

.quick-demo-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quick-demo-logo img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.quick-demo-logo span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
}

.quick-demo-message {
  margin: 30px 0 12px;
  padding: 13px 15px;
  border-radius: 13px 13px 4px 13px;
  background: #e9eef9;
}

.quick-demo-message small,
.quick-demo-answer small {
  color: var(--muted);
  font-size: 10px;
}

.quick-demo-message p,
.quick-demo-answer p {
  margin: 4px 0 0;
  font-size: 13px;
}

.quick-demo-answer {
  padding: 16px;
  display: flex;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px;
  background: var(--white);
}

.quick-demo-answer>span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #101820;
  background: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.quick-demo-action {
  margin-top: 12px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  color: #075e5d;
  background: rgba(14, 165, 164, .12);
}

.quick-demo-action>span {
  font-weight: 800;
}

.quick-demo-action p {
  margin: 0;
  font-size: 11px;
}

.quick-demo-action.is-fresh {
  animation: demo-action-in .45s ease;
}

@keyframes demo-action-in {
  from {
    opacity: .3;
    transform: translateY(8px);
  }
}

.quick-demo-link {
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
}

.quick-demo-mode {
  margin: 20px 0 15px;
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.quick-demo-mode span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.quick-demo-mode .active {
  color: #101820;
  background: var(--lime);
}

.industry-section {
  background: var(--paper-2);
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.industry-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.industry-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 25px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #101820;
  background: var(--lime);
  font-size: 16px;
  font-weight: 800;
}

.industry-card.education .industry-icon {
  background: #dfeaff;
  color: var(--blue);
}

.industry-card.saas .industry-icon {
  background: #ffe3dc;
  color: #df674f;
}

.industry-card>span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.industry-card h3 {
  margin: 8px 0 10px;
  font-family: var(--font-head);
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.industry-card>p {
  min-height: 83px;
  color: var(--muted);
  font-size: 13px;
}

.industry-card>div:last-child {
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.industry-card>div:last-child small {
  color: var(--muted);
  font-size: 10px;
}

.industry-card>div:last-child strong {
  margin-top: 3px;
  font-size: 12px;
}

.decision-section {
  background: var(--paper);
}

.comparison-card {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 20px 55px rgba(16, 24, 32, .06);
}

.comparison-row {
  min-width: 760px;
  min-height: 62px;
  padding: 0 21px;
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.comparison-row:last-child {
  border: 0;
}

.comparison-row>strong {
  font-size: 13px;
}

.comparison-row>span {
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.comparison-head {
  min-height: 70px;
  background: var(--paper-2);
}

.comparison-head>span {
  color: var(--ink);
  font-weight: 800;
}

.bolosite-column {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.bolosite-column img {
  width: 27px;
  height: 27px;
  border-radius: 8px;
}

.comparison-row .comparison-yes {
  color: #075e5d;
  background: rgba(14, 165, 164, .12);
  font-weight: 800;
}

.trust-block {
  margin-top: 20px;
  padding: 34px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: stretch;
  gap: 22px;
  border-radius: var(--radius-lg);
  color: #f5f8f3;
  background: var(--ink);
  overflow: hidden;
}

.trust-heading h2 {
  margin: 13px 0 11px;
  font-family: var(--font-head);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.trust-heading p {
  max-width: 390px;
  color: #b4c0c8;
  font-size: 15px;
}

.trust-console {
  margin-top: 30px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}

.trust-console-top,
.trust-toggle-row,
.trust-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trust-console-top span,
.trust-console-foot span,
.trust-flow small {
  color: #b4c0c8;
  font-size: 10px;
  font-weight: 800;
}

.trust-console-top strong {
  color: #F8FAFC;
  font-size: 13px;
}

.trust-toggle-row {
  margin-top: 20px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .34);
}

.trust-toggle-row span {
  color: #F8FAFC;
  font-size: 14px;
  font-weight: 800;
}

.trust-toggle-row i {
  padding: 6px 10px;
  border-radius: 999px;
  color: #BAE6FD;
  background: rgba(6, 182, 212, .16);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.trust-meter {
  display: grid;
  grid-template-columns: 1.4fr .9fr .6fr 1.1fr;
  gap: 6px;
  margin: 16px 0;
}

.trust-meter span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
}

.trust-meter span:nth-child(2) {
  opacity: .75;
}

.trust-meter span:nth-child(3) {
  opacity: .5;
}

.trust-meter span:nth-child(4) {
  opacity: .9;
}

.trust-control {
  display: grid;
  gap: 12px;
}

.trust-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.trust-flow>div {
  min-height: 126px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.trust-flow b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  font-size: 11px;
}

.trust-flow span {
  display: block;
  margin-top: auto;
  color: #F8FAFC;
  font-size: 14px;
  font-weight: 900;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.trust-grid article {
  min-height: 148px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.trust-grid article>span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trust-grid h3 {
  margin: 10px 0 6px;
  font-size: 15px;
  line-height: 1.25;
}

.trust-grid p {
  margin: 0;
  color: #b4c0c8;
  font-size: 12px;
  line-height: 1.55;
}

.pilot-section {
  background: var(--paper-2);
}

.pilot-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: start;
  gap: 60px;
}

.pilot-heading h2 {
  margin: 13px 0 13px;
  font-family: var(--font-head);
  font-size: clamp(37px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.pilot-heading>p {
  color: var(--muted);
  font-size: 14px;
}

.pilot-heading .button {
  margin-top: 16px;
}

.pilot-cards {
  display: grid;
  gap: 10px;
}

.pilot-cards article {
  padding: 20px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--white);
}

.pilot-cards article>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #11180f;
  background: var(--lime);
  font-size: 10px;
  font-weight: 800;
}

.pilot-cards article>div small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.pilot-cards h3 {
  margin: 3px 0;
  font-size: 14px;
}

.pilot-cards p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.pilot-cards article>b {
  padding: 6px 8px;
  border-radius: 999px;
  color: #527916;
  background: #edf7dd;
  font-size: 9px;
}

.audience-mode-note {
  margin: -6px 0 22px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.audience-mode-note span {
  padding: 6px 8px;
  border-radius: 999px;
  color: #075e5d;
  background: rgba(14, 165, 164, .12);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.audience-mode-note p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* Keep supporting text readable without making the page visually heavy. */
.audience-steps small,
.client-benefits span,
.billing-journey p,
.estimate-note,
.limit-benefits p,
.video-info p,
.step-copy p,
.bento-copy p,
.faq-answer p,
.content-row-copy p {
  font-size: max(11px, .72rem);
}

.audience-overline,
.section-kicker,
.journey-eyebrow,
.pricing-rate-row span {
  font-size: max(10px, .66rem);
}

@media (max-width: 980px) {

  .quick-demo-layout,
  .pilot-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .quick-demo-stage {
    max-width: 720px;
  }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .industry-card>p {
    min-height: 0;
  }

  .trust-block {
    grid-template-columns: 1fr;
  }

  .pilot-cards {
    max-width: 760px;
  }
}

@media (max-width: 620px) {
  .hero-discover {
    text-align: center;
  }

  .quick-demo-layout {
    gap: 30px;
  }

  .quick-demo-copy h2 {
    font-size: 38px;
  }

  .quick-demo-form>div {
    grid-template-columns: 1fr;
  }

  .quick-demo-form .button {
    width: 100%;
  }

  .quick-demo-stage {
    padding: 10px;
    border-radius: 18px;
  }

  .quick-demo-screen {
    min-height: 370px;
    padding: 19px;
  }

  .industry-card {
    padding: 23px 20px;
  }

  .comparison-card {
    border-radius: 17px;
  }

  .trust-block {
    padding: 25px 20px;
  }

  .trust-heading h2 {
    font-size: 30px;
  }

  .trust-flow {
    grid-template-columns: 1fr;
  }

  .trust-flow>div {
    min-height: 112px;
  }

  .trust-console-foot {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid article:last-child {
    grid-column: auto;
  }

  .pilot-layout {
    gap: 30px;
  }

  .pilot-cards article {
    grid-template-columns: 34px 1fr;
    padding: 16px;
  }

  .pilot-cards article>span {
    width: 34px;
    height: 34px;
  }

  .pilot-cards article>b {
    grid-column: 2;
    justify-self: start;
  }

  .pilot-cards p {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  .nav-actions {
    gap: 6px;
  }

  .nav-guide-pills {
    gap: 4px;
  }

  .nav-guide-pill {
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 11px;
  }
}

/* Clearer text for user/client guide popups */
.journey-modal .modal-panel {
  font-size: 15px;
}

.journey-hero h2 {
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.journey-hero p {
  font-size: 16px;
  line-height: 1.75;
}

.journey-eyebrow {
  font-size: 11px;
  letter-spacing: .1em;
}

.journey-index span {
  font-size: 10px;
  letter-spacing: .07em;
}

.journey-number {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 11px;
}

.journey-intro small,
.journey-section-head small {
  font-size: 10px;
  letter-spacing: .09em;
}

.journey-intro h3,
.journey-section-head h3,
.journey-footer h3,
.journey-pricing h3 {
  font-size: 28px;
  line-height: 1.18;
}

.journey-intro p,
.journey-footer p,
.journey-pricing p {
  font-size: 14px;
  line-height: 1.75;
}

.journey-intro aside strong,
.journey-pricing aside strong {
  font-size: 13px;
}

.journey-intro aside p,
.journey-pricing aside p {
  font-size: 13px;
  line-height: 1.65;
}

.journey-steps-grid article {
  min-height: 178px;
  padding: 20px;
}

.journey-steps-grid article b {
  width: 29px;
  height: 29px;
  margin-bottom: 18px;
  font-size: 11px;
}

.journey-steps-grid article span {
  font-size: 14px;
  line-height: 1.35;
}

.journey-steps-grid article p {
  font-size: 12px;
  line-height: 1.65;
}

.journey-feature-grid article {
  padding: 19px;
  gap: 13px;
}

.journey-feature-grid article>i {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 13px;
}

.journey-feature-grid strong {
  font-size: 13px;
  line-height: 1.35;
}

.journey-feature-grid p {
  font-size: 12px;
  line-height: 1.65;
}

.journey-tip>span {
  font-size: 18px;
  line-height: 1.25;
}

.journey-tip p {
  font-size: 12px;
  line-height: 1.65;
}

.journey-price-pills small {
  font-size: 9px;
}

.journey-price-pills strong {
  font-size: 20px;
}

.journey-text-link {
  font-size: 12px;
}

.journey-dashboard>span,
.journey-dashboard>small {
  font-size: 10px;
}

.journey-dashboard>strong {
  font-size: 22px;
  line-height: 1.2;
}

@media (max-width: 820px) {
  .journey-hero p {
    font-size: 15px;
  }

  .journey-index span {
    font-size: 10px;
  }

  .journey-steps-grid article {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .journey-hero h2 {
    font-size: 34px;
  }

  .journey-hero p {
    font-size: 14px;
    line-height: 1.7;
  }

  .journey-index span {
    min-width: 112px;
    font-size: 10px;
  }

  .journey-intro h3,
  .journey-section-head h3,
  .journey-footer h3,
  .journey-pricing h3 {
    font-size: 24px;
  }

  .journey-intro p,
  .journey-footer p,
  .journey-pricing p,
  .journey-intro aside p,
  .journey-pricing aside p {
    font-size: 13px;
  }

  .journey-steps-grid article {
    padding: 18px;
  }

  .journey-steps-grid article span {
    font-size: 14px;
  }

  .journey-steps-grid article p,
  .journey-feature-grid p,
  .journey-tip p {
    font-size: 13px;
  }

  .journey-feature-grid strong {
    font-size: 14px;
  }

  .journey-tip>span {
    font-size: 17px;
  }

  .journey-price-pills strong {
    font-size: 19px;
  }
}

/* 2026 BoloSite brand polish: premium AI SaaS color system */
body {
  background:
    radial-gradient(circle at 84% 4%, rgba(37, 99, 235, .13), transparent 31%),
    radial-gradient(circle at 12% 16%, rgba(6, 182, 212, .1), transparent 28%),
    var(--paper);
}

.nav-shell {
  border-color: rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.nav-audience-user,
.nav-guide-pill.user {
  color: #1E40AF;
  background: rgba(37, 99, 235, .1);
}

.nav-audience-client,
.nav-guide-pill.client {
  color: #075985;
  background: rgba(6, 182, 212, .13);
}

.nav-guide-trigger i {
  color: #334155;
  background: rgba(255, 255, 255, .72);
}

.brand-mark,
.assistant-avatar,
.tiny-logo,
.blog-visual .brand-mark,
.post-brand-scene .brand-mark {
  background: var(--brand-gradient);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .2);
}

.brand-mark span,
.assistant-avatar span,
.voice-bar button,
.cta-orb::before,
.orb-core {
  background: #E0F2FE;
}

.desktop-nav a:hover,
.hero-discover a,
.quick-demo-link,
.footer-socials a:hover,
.network-message>a,
.network-message>div:last-child a,
.post-body>a {
  color: var(--blue);
}

.logo-particle {
  border-color: rgba(226, 232, 240, .85);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 45px rgba(37, 99, 235, .12);
}

.logo-particle-b {
  color: #fff;
  background: var(--brand-gradient);
}

.logo-particle-c i,
.lock {
  background: var(--teal);
  color: var(--teal);
}

.ui-icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.industry-icon,
.icon-box,
.path-icon,
.journey-feature-grid article>i,
.contact-details>a>span,
.contact-details>div>span,
.floating-card>span {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.industry-icon::before,
.icon-box::before,
.path-icon::before,
.journey-feature-grid article>i::before,
.contact-details>a>span::before,
.contact-details>div>span::before,
.floating-card>span::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .72), transparent 28%),
    var(--brand-gradient);
  opacity: .95;
}

.industry-icon::after,
.icon-box::after,
.path-icon::after,
.journey-feature-grid article>i::after,
.contact-details>a>span::after,
.contact-details>div>span::after,
.floating-card>span::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: rgba(37, 99, 235, .18);
  filter: blur(12px);
  opacity: .55;
}

.industry-icon .ui-icon,
.icon-box .ui-icon,
.path-icon .ui-icon,
.journey-feature-grid article>i .ui-icon,
.contact-details>a>span .ui-icon,
.contact-details>div>span .ui-icon,
.floating-card>span .ui-icon {
  width: 1.18em;
  height: 1.18em;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .18));
}

.industry-icon {
  box-shadow: 0 16px 34px rgba(37, 99, 235, .18);
  transition: transform .22s ease, box-shadow .22s ease;
}

.industry-card:hover .industry-icon,
.problem-card:hover .icon-box {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 20px 42px rgba(37, 99, 235, .24);
}

.industry-card.education .industry-icon::before,
.icon-blue::before,
.path-icon::before {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .72), transparent 28%),
    linear-gradient(135deg, #2563EB, #60A5FA);
}

.industry-card.saas .industry-icon::before,
.icon-coral::before,
.hero-paths a:last-child .path-icon::before {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .72), transparent 28%),
    linear-gradient(135deg, #7C3AED, #06B6D4);
}

.icon-lime::before,
.contact-details>a>span::before,
.contact-details>div>span::before {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .72), transparent 28%),
    linear-gradient(135deg, #06B6D4, #10B981);
}

.eyebrow {
  color: #334155;
  border-color: rgba(37, 99, 235, .14);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.pulse-dot,
.assistant-head small i {
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(6, 182, 212, .14);
}

.hero {
  background:
    radial-gradient(circle at 78% 20%, rgba(37, 99, 235, .14), transparent 30%),
    radial-gradient(circle at 54% 72%, rgba(124, 58, 237, .08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(248, 250, 252, 0));
}

.hero-grid {
  opacity: .35;
  background-image:
    linear-gradient(rgba(37, 99, 235, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, .045) 1px, transparent 1px);
}

.hero-orb-one {
  background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 68%);
}

.hero-orb-two {
  background: radial-gradient(circle, rgba(6, 182, 212, .14), transparent 68%);
}

.hero h1 em {
  color: transparent;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero h1 em::after {
  background: linear-gradient(90deg, rgba(37, 99, 235, .2), rgba(6, 182, 212, .8), rgba(124, 58, 237, .25));
  border-radius: 999px;
}

.button-primary,
.nav-signup,
.mobile-portal,
.estimate-box .button-primary,
.journey-actions .button-primary,
.feedback-fab {
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 16px 38px rgba(37, 99, 235, .26);
}

.button-primary:hover,
.nav-signup:hover,
.mobile-portal:hover {
  background: linear-gradient(135deg, #1D4ED8, #0891B2 52%, #6D28D9);
  box-shadow: 0 20px 44px rgba(37, 99, 235, .34);
}

.button-ghost,
.button-outline,
.auth-link,
.theme-toggle,
.profile-button {
  border-color: rgba(226, 232, 240, .95);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.button-dark,
.menu-toggle {
  color: #fff;
  background: #0F172A;
}

.button-light:hover,
.footer-socials a:hover {
  color: #fff;
  background: var(--blue);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, .7);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.product-glow {
  background:
    radial-gradient(circle, rgba(6, 182, 212, .22), rgba(37, 99, 235, .12) 42%, rgba(124, 58, 237, .08) 62%, transparent 72%);
}

.browser-card,
.quick-demo-browser,
.comparison-card,
.what-overview,
.calculator-card,
.pricing-explain,
.problem-card,
.industry-card,
.pilot-cards article,
.contact-form,
.modal-panel {
  border-color: rgba(226, 232, 240, .96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .09);
}

.browser-page,
.step-visual {
  background: linear-gradient(135deg, #F8FAFC 45%, #E0F2FE);
}

.mini-kicker,
.mini-button,
.assistant-text-composer button,
.quick-demo-answer>span,
.pilot-cards article>span,
.industry-icon {
  color: #fff;
  background: var(--brand-gradient);
}

.floating-card>span,
.path-icon {
  color: var(--blue);
  background: #DBEAFE;
}

.hero-paths a:last-child .path-icon {
  color: var(--teal);
  background: #CFFAFE;
}

.assistant-panel,
.floating-card,
.animated-wordmark {
  border-color: rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .12);
}

.message-user {
  color: #fff;
  background: var(--blue);
}

.message-bolo p,
.quick-demo-answer {
  border-color: #DBEAFE;
  background: #EEF6FF;
}

.quick-demo-message {
  color: #0F172A;
  border: 1px solid rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .16), transparent 34%),
    linear-gradient(135deg, #EFF6FF, #F8FAFC);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .08);
}

.quick-demo-message small {
  color: #2563EB;
}

.quick-demo-message p {
  color: #0F172A;
  font-weight: 700;
}

.action-chip,
.assistant-mode-row .active,
.quick-demo-action,
.comparison-row .comparison-yes,
.audience-mode-note span {
  color: #075985;
  background: rgba(6, 182, 212, .13);
}

.assistant-text-composer button,
.voice-bar button,
.quick-demo-mode .active {
  color: #fff;
  background: var(--teal);
  box-shadow: var(--voice-glow);
}

.waveform i,
.animated-logo-bars i,
.what-sound-wave i,
.mini-wave i,
.scene-waves i,
.journey-orb i {
  background: var(--teal);
}

.usecase-strip,
.problem,
.industry-section,
.pilot-section,
.pricing,
.founder,
.faq,
.final-cta {
  background: var(--paper-2);
}

.usecase-strip::before {
  background: linear-gradient(90deg, var(--paper-2), rgba(241, 245, 249, 0));
}

.usecase-strip::after {
  background: linear-gradient(270deg, var(--paper-2), rgba(241, 245, 249, 0));
}

.strip-track i,
.section-kicker,
.video-audience {
  color: var(--teal);
}

.icon-blue,
.industry-card.education .industry-icon,
.journey-steps-grid article b {
  color: var(--blue);
  background: #DBEAFE;
}

.icon-lime,
.what-logo-orb,
.mini-orb,
.live-widget b,
.owner-payment-summary>div:first-child strong {
  color: var(--teal);
  /* background: #E0F2FE; */
}

.icon-coral,
.industry-card.saas .industry-icon,
.journey-feature-grid article>i {
  color: var(--accent);
  background: #F3E8FF;
}

.problem-tag,
.pilot-cards article>b,
.pricing-rate-row>div,
.audience-mode-note,
.role-selector input:checked+span,
.rating-options input:checked+span {
  color: #1E40AF;
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.quick-demo-section,
.learning-hub,
.contact-section,
.trust-block,
.pricing-limit-card,
.site-footer {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 84% 10%, rgba(37, 99, 235, .22), transparent 32%),
    radial-gradient(circle at 15% 90%, rgba(6, 182, 212, .16), transparent 28%),
    #0B1120;
}

.quick-demo-stage,
.video-card,
.contact-details>a,
.contact-details>div,
.contact-form,
.trust-grid article {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(14px);
}

.experience-stage,
.journey-dashboard,
.client-journey-hero {
  background:
    radial-gradient(circle at 75% 22%, rgba(6, 182, 212, .18), transparent 34%),
    linear-gradient(145deg, #111827, #0B1120);
}

.orb-ring,
.cta-orb,
.stage-action,
.intent-pill {
  border-color: rgba(6, 182, 212, .24);
  background: rgba(6, 182, 212, .07);
}

.stage-label span,
.cta-orb::before {
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(6, 182, 212, .12);
}

.orb-core {
  background: radial-gradient(circle at 35% 30%, #E0F2FE, #22D3EE 45%, #2563EB);
  box-shadow: 0 0 65px rgba(6, 182, 212, .26), inset 0 1px 1px rgba(255, 255, 255, .7);
}

.cta-card,
.estimate-box {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 88% 18%, rgba(6, 182, 212, .2), transparent 32%),
    var(--brand-gradient);
  box-shadow: 0 28px 80px rgba(37, 99, 235, .28);
}

.credit-meter>i,
.owner-credit-bar i,
.viewer-progress i {
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.language-card {
  background: #EEF6FF;
}

.action-card {
  background: #F7F2FF;
}

.knowledge-card-main {
  background: #ECFEFF;
}

.sales-card,
.network-section {
  background:
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, .2), transparent 32%),
    #0F172A;
}

.recommend-card,
.journey-price-pills span,
.pricing-rate-row output,
.usage-fields output {
  color: #fff;
  background: var(--brand-gradient);
}

.bs-logo-assembly {
  filter: drop-shadow(0 14px 25px rgba(37, 99, 235, .22));
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 85% 5%, rgba(37, 99, 235, .16), transparent 30%),
    radial-gradient(circle at 12% 20%, rgba(6, 182, 212, .09), transparent 28%),
    var(--paper);
}

html[data-theme="dark"] .nav-shell,
html[data-theme="dark"] .mobile-nav {
  border-color: rgba(51, 65, 85, .9);
  background: rgba(15, 23, 42, .68);
}

html[data-theme="dark"] .nav-audience-user,
html[data-theme="dark"] .nav-guide-pill.user {
  color: #BFDBFE;
  background: rgba(37, 99, 235, .18);
}

html[data-theme="dark"] .nav-audience-client,
html[data-theme="dark"] .nav-guide-pill.client,
html[data-theme="dark"] .mobile-guide-trigger.client i {
  color: #A5F3FC;
  background: rgba(6, 182, 212, .16);
}

html[data-theme="dark"] .nav-guide-trigger i {
  color: #CBD5E1;
  background: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .profile-button,
html[data-theme="dark"] .auth-link {
  color: var(--ink);
  border-color: rgba(51, 65, 85, .9);
  background: rgba(30, 41, 59, .58);
}

html[data-theme="dark"] .browser-card,
html[data-theme="dark"] .assistant-panel,
html[data-theme="dark"] .floating-card,
html[data-theme="dark"] .animated-wordmark,
html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .industry-card,
html[data-theme="dark"] .calculator-card,
html[data-theme="dark"] .pricing-explain,
html[data-theme="dark"] .comparison-card,
html[data-theme="dark"] .modal-panel {
  border-color: rgba(51, 65, 85, .9);
  background: rgba(30, 41, 59, .88);
}

html[data-theme="dark"] .message-bolo p,
html[data-theme="dark"] .quick-demo-answer,
html[data-theme="dark"] .assistant-text-composer,
html[data-theme="dark"] .assistant-mode-row span {
  border-color: rgba(51, 65, 85, .9);
  background: #111827;
}

html[data-theme="dark"] .quick-demo-message {
  color: #E2E8F0;
  border-color: rgba(96, 165, 250, .22);
  background:
    radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .16), transparent 34%),
    linear-gradient(135deg, #111827, #0B1120);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .quick-demo-message small {
  color: #22D3EE;
}

html[data-theme="dark"] .quick-demo-message p {
  color: #F8FAFC;
}

html[data-theme="dark"] .code-window {
  color: #CBD5E1;
  border-color: rgba(96, 165, 250, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(6, 182, 212, .12), transparent 34%),
    #0B1120;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .code-window span {
  color: #22D3EE;
}

html[data-theme="dark"] .code-window i {
  color: #93C5FD;
}

html[data-theme="dark"] .usecase-strip,
html[data-theme="dark"] .audience-section,
html[data-theme="dark"] .problem,
html[data-theme="dark"] .how,
html[data-theme="dark"] .bento-section,
html[data-theme="dark"] .pricing,
html[data-theme="dark"] .founder,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .final-cta {
  background: var(--paper);
}

/* Final icon polish layer for upgraded inline SVG symbols */
.industry-icon,
.icon-box,
.path-icon,
.journey-feature-grid article>i,
.contact-details>a>span,
.contact-details>div>span,
.floating-card>span {
  color: #fff !important;
  background: transparent !important;
  border: 0;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .16);
}

.industry-icon .ui-icon,
.icon-box .ui-icon,
.path-icon .ui-icon,
.journey-feature-grid article>i .ui-icon,
.contact-details>a>span .ui-icon,
.contact-details>div>span .ui-icon,
.floating-card>span .ui-icon {
  color: #fff !important;
}

html[data-theme="dark"] .industry-icon,
html[data-theme="dark"] .icon-box,
html[data-theme="dark"] .path-icon,
html[data-theme="dark"] .journey-feature-grid article>i,
html[data-theme="dark"] .contact-details>a>span,
html[data-theme="dark"] .contact-details>div>span,
html[data-theme="dark"] .floating-card>span {
  box-shadow: 0 16px 34px rgba(6, 182, 212, .18);
}

/* Playful transparent BoloSite logo assemblies */
.bs-logo-zone {
  position: relative;
}

.bs-logo-zone>.container,
.bs-logo-zone>.strip-track {
  position: relative;
  z-index: 2;
}

.bs-section-logo-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  --bs-logo-opacity: .18;
}

.bs-global-logo-layer {
  width: 100%;
  height: 0;
  position: absolute;
  z-index: 2147483646;
  left: 0;
  top: 0;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
}

.bs-global-logo-layer .bs-logo-assembly.is-portaled {
  z-index: 1;
  opacity: .72;
  pointer-events: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 28px rgba(15, 89, 180, .24));
}

.bs-global-logo-layer .bs-logo-assembly.is-portaled.is-dragging {
  z-index: 2;
  opacity: .92;
}

.quick-demo-section .bs-section-logo-layer,
.learning-hub .bs-section-logo-layer,
.contact-section .bs-section-logo-layer,
.final-cta .bs-section-logo-layer {
  --bs-logo-opacity: .24;
}

.bs-logo-assembly {
  --cycle: 13.5s;
  --delay: 0s;
  --size: 82px;
  --logo-x: 8%;
  --logo-y: 18%;
  --drag-x: 0px;
  --drag-y: 0px;
  --float-x: 12px;
  --float-y: -10px;
  width: var(--size);
  aspect-ratio: 140 / 185;
  position: absolute;
  left: var(--logo-x);
  top: var(--logo-y);
  opacity: var(--bs-logo-opacity);
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  cursor: pointer;
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
  filter: drop-shadow(0 12px 22px rgba(15, 89, 180, .18));
  mix-blend-mode: multiply;
  animation: bs-logo-gentle-float 6.5s ease-in-out infinite alternate;
  animation-delay: var(--delay);
  contain: layout style;
  overflow: visible;
  will-change: auto;
}

.bs-logo-live .bs-logo-assembly {
  will-change: transform;
}

.bs-logo-zone:not(.bs-logo-live) .bs-logo-assembly,
.bs-logo-zone:not(.bs-logo-live) .bs-logo-piece {
  animation-play-state: paused;
}

.quick-demo-section .bs-logo-assembly,
.learning-hub .bs-logo-assembly,
.contact-section .bs-logo-assembly,
.final-cta .bs-logo-assembly {
  mix-blend-mode: screen;
  filter: drop-shadow(0 14px 24px rgba(42, 145, 255, .22));
}

.bs-logo-assembly--movable {
  opacity: calc(var(--bs-logo-opacity) + .08);
  cursor: grab;
}

.bs-logo-assembly--fixed {
  opacity: calc(var(--bs-logo-opacity) - .02);
  cursor: grab;
}

.bs-logo-assembly.is-dragging {
  z-index: 4;
  cursor: grabbing;
  opacity: .86;
  mix-blend-mode: normal;
  animation: none;
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
}

.bs-logo-assembly.is-returning {
  animation: none;
  transition: transform .48s cubic-bezier(.2, .82, .18, 1.02);
}

.bs-logo-assembly.is-touched {
  opacity: .78;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 18px rgba(18, 148, 255, .38)) drop-shadow(0 12px 24px rgba(15, 89, 180, .16));
}

.bs-logo-piece {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: contain;
  pointer-events: auto;
  transform-origin: center;
  will-change: auto;
  animation: bs-logo-assemble var(--cycle) cubic-bezier(.62, 0, .26, 1) infinite;
  animation-delay: var(--delay);
}

.bs-logo-live .bs-logo-piece {
  will-change: transform, opacity;
}

.bs-logo-piece--b {
  --scatter-x-a: -44%;
  --scatter-y-a: -30%;
  --scatter-r-a: -24deg;
  --scatter-x-b: 35%;
  --scatter-y-b: 18%;
  --scatter-r-b: 18deg;
  --pull-x: 14%;
  --pull-y: 8%;
  --pull-r: 10deg;
  --pop-x: -42%;
  --pop-y: -28%;
  --pop-r: -34deg;
  --blast-mid-x: -176%;
  --blast-mid-y: -310%;
  --blast-mid-r: -156deg;
  --blast-x: -235%;
  --blast-y: -178%;
  --blast-r: -128deg;
  --hang-x: -258%;
  --hang-y: -204%;
  --hang-r: -188deg;
  --orbit-x: 76%;
  --orbit-y: -58%;
  --orbit-r: 48deg;
  --blast-scale: .5;
  --return-x: 38%;
  --return-y: -34%;
  --return-r: 22deg;
  --settle-x: -12%;
  --settle-y: 9%;
  --settle-r: -7deg;
  --recoil-x: 4%;
  --recoil-y: -3%;
  --recoil-r: 3deg;
  --blast-delay: 0s;
  --blast-duration: 2s;
}

.bs-logo-piece--bot {
  --scatter-x-a: 42%;
  --scatter-y-a: -34%;
  --scatter-r-a: 30deg;
  --scatter-x-b: -26%;
  --scatter-y-b: 25%;
  --scatter-r-b: -18deg;
  --pull-x: -16%;
  --pull-y: 12%;
  --pull-r: -12deg;
  --pop-x: 46%;
  --pop-y: -36%;
  --pop-r: 36deg;
  --blast-mid-x: 232%;
  --blast-mid-y: -132%;
  --blast-mid-r: 178deg;
  --blast-x: 246%;
  --blast-y: -194%;
  --blast-r: 142deg;
  --hang-x: 272%;
  --hang-y: -225%;
  --hang-r: 208deg;
  --orbit-x: -82%;
  --orbit-y: -52%;
  --orbit-r: -56deg;
  --blast-scale: .57;
  --return-x: -42%;
  --return-y: -31%;
  --return-r: -25deg;
  --settle-x: 13%;
  --settle-y: 9%;
  --settle-r: 8deg;
  --recoil-x: -4%;
  --recoil-y: -3%;
  --recoil-r: -4deg;
  --blast-delay: .08s;
  --blast-duration: 2.12s;
}

.bs-logo-piece--voice {
  --scatter-x-a: -35%;
  --scatter-y-a: 46%;
  --scatter-r-a: 24deg;
  --scatter-x-b: 28%;
  --scatter-y-b: -28%;
  --scatter-r-b: -22deg;
  --pull-x: 12%;
  --pull-y: -15%;
  --pull-r: -10deg;
  --pop-x: -42%;
  --pop-y: 45%;
  --pop-r: 38deg;
  --blast-mid-x: -238%;
  --blast-mid-y: 122%;
  --blast-mid-r: -198deg;
  --blast-x: -238%;
  --blast-y: 224%;
  --blast-r: -154deg;
  --hang-x: -272%;
  --hang-y: 255%;
  --hang-r: -222deg;
  --orbit-x: 84%;
  --orbit-y: 58%;
  --orbit-r: 54deg;
  --blast-scale: .54;
  --return-x: 42%;
  --return-y: 34%;
  --return-r: 28deg;
  --settle-x: -15%;
  --settle-y: -10%;
  --settle-r: -8deg;
  --recoil-x: 5%;
  --recoil-y: 4%;
  --recoil-r: 4deg;
  --blast-delay: .14s;
  --blast-duration: 2.06s;
}

.bs-logo-piece--word {
  --scatter-x-a: 40%;
  --scatter-y-a: 44%;
  --scatter-r-a: -18deg;
  --scatter-x-b: -30%;
  --scatter-y-b: -22%;
  --scatter-r-b: 19deg;
  --pull-x: -14%;
  --pull-y: -10%;
  --pull-r: 12deg;
  --pop-x: 38%;
  --pop-y: 40%;
  --pop-r: -30deg;
  --blast-mid-x: 172%;
  --blast-mid-y: 236%;
  --blast-mid-r: 166deg;
  --blast-x: 252%;
  --blast-y: 236%;
  --blast-r: 126deg;
  --hang-x: 286%;
  --hang-y: 260%;
  --hang-r: 196deg;
  --orbit-x: -88%;
  --orbit-y: 64%;
  --orbit-r: -50deg;
  --blast-scale: .48;
  --return-x: -48%;
  --return-y: 38%;
  --return-r: -22deg;
  --settle-x: 14%;
  --settle-y: -13%;
  --settle-r: 7deg;
  --recoil-x: -5%;
  --recoil-y: 4%;
  --recoil-r: -3deg;
  --blast-delay: .2s;
  --blast-duration: 2.2s;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .28)) drop-shadow(0 2px 4px rgba(15, 23, 42, .16));
}

html[data-theme="dark"] .bs-logo-piece--word {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .2)) drop-shadow(0 2px 8px rgba(0, 0, 0, .42));
}

.bs-logo-piece.is-manual {
  animation: none !important;
  cursor: grabbing;
}

.bs-logo-assembly.is-settled .bs-logo-piece {
  animation: none !important;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
}

.bs-logo-assembly.is-blasting .bs-logo-piece {
  animation: bs-logo-touch-blast var(--blast-duration, 2.08s) cubic-bezier(.18, .76, .16, 1) both !important;
  animation-delay: var(--blast-delay, 0s) !important;
}

.bs-logo-assembly.is-blasting {
  filter: drop-shadow(0 0 26px rgba(6, 182, 212, .34)) drop-shadow(0 18px 34px rgba(15, 89, 180, .18));
}

.bs-logo-assembly.is-blasting::after {
  content: "";
  width: 42%;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(21, 132, 255, .62);
  transform: translate(-50%, -50%);
  animation: bs-logo-ring 2.15s cubic-bezier(.18, .76, .16, 1) both;
}

.bs-logo-assembly.is-blasting::before {
  content: "";
  width: 18%;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .48), transparent 66%);
  transform: translate(-50%, -50%);
  animation: bs-logo-spark 1.9s cubic-bezier(.18, .76, .16, 1) both;
}

@keyframes bs-logo-gentle-float {
  0% {
    transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(-1.8deg);
  }

  100% {
    transform: translate3d(calc(var(--drag-x) + var(--float-x)), calc(var(--drag-y) + var(--float-y)), 0) rotate(1.8deg);
  }
}

@keyframes bs-logo-assemble {

  0%,
  100% {
    opacity: .44;
    transform: translate3d(var(--scatter-x-a), var(--scatter-y-a), 0) rotate(var(--scatter-r-a)) scale(.78);
  }

  15% {
    opacity: .66;
    transform: translate3d(var(--scatter-x-b), var(--scatter-y-b), 0) rotate(var(--scatter-r-b)) scale(.88);
  }

  28%,
  57% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }

  66% {
    opacity: .74;
    transform: translate3d(var(--scatter-x-b), var(--scatter-y-b), 0) rotate(var(--scatter-r-b)) scale(.9);
  }

  82% {
    opacity: .46;
    transform: translate3d(var(--scatter-x-a), var(--scatter-y-a), 0) rotate(var(--scatter-r-a)) scale(.78);
  }
}

@keyframes bs-logo-touch-blast {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    animation-timing-function: cubic-bezier(.3, 0, .7, 1);
  }

  7% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--pull-x), var(--pull-y), 0) rotate(var(--pull-r)) scale(.94);
    animation-timing-function: cubic-bezier(.16, .9, .24, 1.18);
  }

  17% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--pop-x), var(--pop-y), 0) rotate(var(--pop-r)) scale(1.14);
    animation-timing-function: cubic-bezier(.13, .74, .19, 1);
  }

  39% {
    opacity: .9;
    filter: blur(.55px);
    transform: translate3d(var(--blast-mid-x), var(--blast-mid-y), 0) rotate(var(--blast-mid-r)) scale(calc(var(--blast-scale) + .06));
    animation-timing-function: cubic-bezier(.26, .06, .2, 1);
  }

  56% {
    opacity: .72;
    filter: blur(1.1px);
    transform: translate3d(var(--blast-x), var(--blast-y), 0) rotate(var(--blast-r)) scale(calc(var(--blast-scale) - .08));
    animation-timing-function: cubic-bezier(.2, .68, .18, 1);
  }

  66% {
    opacity: .66;
    filter: blur(.85px);
    transform: translate3d(var(--hang-x), var(--hang-y), 0) rotate(var(--hang-r)) scale(calc(var(--blast-scale) - .03));
    animation-timing-function: cubic-bezier(.16, .86, .2, 1.08);
  }

  74% {
    opacity: .86;
    filter: blur(.35px);
    transform: translate3d(var(--orbit-x), var(--orbit-y), 0) rotate(var(--orbit-r)) scale(.9);
    animation-timing-function: cubic-bezier(.32, 0, .12, 1);
  }

  84% {
    opacity: .98;
    filter: blur(.15px);
    transform: translate3d(var(--return-x), var(--return-y), 0) rotate(var(--return-r)) scale(1.12);
    animation-timing-function: cubic-bezier(.2, .76, .18, 1);
  }

  92% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--settle-x), var(--settle-y), 0) rotate(var(--settle-r)) scale(.94);
    animation-timing-function: cubic-bezier(.18, .82, .2, 1);
  }

  97% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--recoil-x), var(--recoil-y), 0) rotate(var(--recoil-r)) scale(1.025);
    animation-timing-function: cubic-bezier(.2, .72, .2, 1);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes bs-logo-ring {
  0% {
    opacity: .5;
    transform: translate(-50%, -50%) scale(.35);
  }

  18% {
    opacity: .68;
    transform: translate(-50%, -50%) scale(1.05);
  }

  58% {
    opacity: .2;
    transform: translate(-50%, -50%) scale(4.1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(6.2);
  }
}

@keyframes bs-logo-spark {
  0% {
    opacity: .62;
    transform: translate(-50%, -50%) scale(.35);
  }

  26% {
    opacity: .42;
    transform: translate(-50%, -50%) scale(2.4);
  }

  64% {
    opacity: .14;
    transform: translate(-50%, -50%) scale(4.8);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(6.6);
  }
}

@media (max-width: 760px) {
  .bs-section-logo-layer {
    --bs-logo-opacity: .12;
  }

  .bs-logo-assembly {
    max-width: 64px;
  }

  .bs-logo-assembly:nth-child(3) {
    display: none;
  }

  .hero .bs-logo-assembly {
    max-width: 54px;
  }

  .hero .bs-logo-assembly:nth-child(3) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usecase-strip .strip-track {
    animation: none !important;
    transform: none !important;
  }

  .usecase-strip .strip-group[aria-hidden="true"] {
    display: none;
  }

  .bs-logo-assembly,
  .bs-logo-piece,
  .bs-logo-assembly.is-blasting::after {
    animation: none !important;
  }

  .bs-logo-piece {
    transform: none !important;
  }
}

/* Hero redesign: clearer product story with stronger user and owner paths. */
.hero {
  min-height: 780px;
  padding: 138px 0 56px;
  align-items: center;
  background:
    radial-gradient(circle at 72% 18%, rgba(37, 99, 235, .12), transparent 30%),
    radial-gradient(circle at 84% 70%, rgba(6, 182, 212, .12), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 70%, #F1F5F9 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(37, 99, 235, .14) 7.4% 7.9%, transparent 8.3% 14%),
    linear-gradient(90deg, transparent 0 10%, rgba(6, 182, 212, .18) 10.4% 11.1%, transparent 11.6% 18%),
    linear-gradient(90deg, transparent 0 12%, rgba(124, 58, 237, .12) 12.5% 13%, transparent 13.5% 21%);
  background-size: 210px 150px, 260px 190px, 310px 230px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  animation: hero-frequency-drift 18s linear infinite;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0), #F8FAFC);
}

@keyframes hero-frequency-drift {
  0% {
    background-position: 0 18%, 0 48%, 0 78%;
  }

  100% {
    background-position: 420px 18%, -520px 48%, 620px 78%;
  }
}

.hero-grid {
  opacity: .28;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.hero-orb {
  opacity: .55;
}

.hero-layout {
  z-index: 2;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
  gap: 58px;
}

.hero-copy {
  max-width: 690px;
}

.hero .eyebrow {
  margin-bottom: 18px;
  color: #1D4ED8;
  border-color: rgba(37, 99, 235, .16);
  background: rgba(239, 246, 255, .82);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .08);
}

.hero h1 {
  max-width: 680px;
  margin-bottom: 22px;
  font-size: 64px;
  line-height: 1.03;
  letter-spacing: 0;
}

.hero h1 em {
  background: linear-gradient(135deg, #2563EB, #06B6D4 48%, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero h1 em::after {
  bottom: -6px;
  height: 6px;
  opacity: .75;
}

.hero-lead {
  max-width: 640px;
  margin-bottom: 26px;
  color: #475569;
  font-size: 18px;
  line-height: 1.72;
}

.hero-actions {
  gap: 10px;
}

.hero-actions .button {
  min-height: 54px;
  border-radius: 13px;
}

.hero-actions .button-primary {
  padding-inline: 25px;
}

.hero-actions .button-ghost {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .16);
  background: rgba(255, 255, 255, .78);
}

.hero-discover {
  margin-top: 14px;
  font-size: 13px;
}

.hero-discover a {
  color: #2563EB;
}

.hero-paths {
  max-width: 650px;
  margin-top: 24px;
}

.hero-paths a {
  min-height: 82px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-color: rgba(37, 99, 235, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.hero-paths a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background: rgba(30, 41, 59, .72);
  transition: opacity .2s;
}

.hero-paths a>* {
  position: relative;
  z-index: 1;
}

.hero-paths a:hover {
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 20px 44px rgba(37, 99, 235, .12);
}

.hero-paths small {
  color: #64748B;
  font-size: 11px;
}

.hero-paths strong {
  margin-top: 3px;
  color: #0F172A;
  font-size: 13px;
  line-height: 1.25;
}

.hero-proof {
  max-width: 650px;
  gap: 9px;
  margin-top: 22px;
  color: #475569;
}

.hero-proof span {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
}

.hero-proof i {
  color: #10B981;
}

.hero-product {
  min-height: 530px;
}

.hero .bs-section-logo-layer {
  z-index: 3;
  --bs-logo-opacity: .17;
}

.hero .bs-logo-assembly {
  mix-blend-mode: normal;
  filter: drop-shadow(0 14px 24px rgba(15, 89, 180, .11));
}

.hero .bs-logo-assembly--movable {
  opacity: .2;
}

.hero .bs-logo-assembly--fixed {
  opacity: .16;
}

.product-glow {
  width: 520px;
  height: 520px;
  opacity: .85;
}

.hero-voice-stage {
  width: min(560px, 100%);
  min-height: 520px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(6, 182, 212, .18), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(37, 99, 235, .12), transparent 30%),
    rgba(255, 255, 255, .7);
  box-shadow: 0 32px 86px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .75);
  backdrop-filter: blur(14px);
}

.hero-voice-stage::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(37, 99, 235, .08);
  border-radius: 28px;
  background:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .72;
}

.hero-voice-stage::after {
  content: "";
  width: 370px;
  height: 370px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 212, .13);
  box-shadow: 0 0 0 42px rgba(37, 99, 235, .045), 0 0 0 88px rgba(6, 182, 212, .028);
  transform: translate(-50%, -50%);
  animation: voice-stage-pulse 4.6s ease-in-out infinite;
}

.voice-stage-orb {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(239, 246, 255, .86));
  box-shadow: 0 24px 54px rgba(37, 99, 235, .18);
  transform: translate(-50%, -50%) rotate(-2deg);
}

.voice-stage-orb img {
  width: 76px;
  height: 76px;
  border-radius: 21px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}

.voice-stage-orb span {
  position: absolute;
  right: 18px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.voice-stage-orb i {
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22D3EE, #2563EB);
  animation: voice-orb-wave .9s ease-in-out infinite alternate;
}

.voice-stage-orb i:nth-child(2) {
  height: 22px;
  animation-delay: -.14s;
}

.voice-stage-orb i:nth-child(3) {
  height: 30px;
  animation-delay: -.28s;
}

.voice-stage-orb i:nth-child(4) {
  height: 20px;
  animation-delay: -.42s;
}

.voice-stage-orb i:nth-child(5) {
  height: 12px;
  animation-delay: -.56s;
}

.voice-stage-card {
  width: 182px;
  min-height: 106px;
  position: absolute;
  z-index: 4;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .13);
  border-radius: 18px;
  color: #0F172A;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 44px rgba(37, 99, 235, .11);
  backdrop-filter: blur(12px);
}

.voice-stage-card small {
  color: #2563EB;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.voice-stage-card strong {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.2;
}

.voice-stage-card span {
  margin-top: 8px;
  color: #64748B;
  font-size: 11px;
  font-weight: 700;
}

.voice-stage-card-user {
  left: 34px;
  top: 42px;
  transform: rotate(-2deg);
}

.voice-stage-card-akash {
  right: 34px;
  top: 72px;
  transform: rotate(2deg);
}

.voice-stage-card-action {
  right: 45px;
  bottom: 62px;
  transform: rotate(-2deg);
}

.voice-stage-card-owner {
  left: 42px;
  bottom: 50px;
  transform: rotate(2deg);
}

.voice-stage-line {
  position: absolute;
  z-index: 2;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .54), rgba(6, 182, 212, .65), transparent);
  transform-origin: left center;
  animation: voice-stage-line-flow 2.8s ease-in-out infinite;
}

.voice-stage-line-one {
  width: 185px;
  left: 184px;
  top: 126px;
  transform: rotate(15deg);
}

.voice-stage-line-two {
  width: 170px;
  right: 155px;
  top: 276px;
  transform: rotate(88deg);
  animation-delay: -.8s;
}

.voice-stage-line-three {
  width: 178px;
  left: 168px;
  bottom: 128px;
  transform: rotate(-19deg);
  animation-delay: -1.6s;
}

.voice-stage-status {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 22px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 15px;
  color: #0F172A;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .1);
  transform: translateX(-50%);
  white-space: nowrap;
}

.voice-stage-status span,
.voice-stage-status b,
.voice-stage-status i {
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.voice-stage-status b {
  color: #075985;
  background: rgba(6, 182, 212, .13);
}

.voice-stage-status i {
  color: #1D4ED8;
  background: rgba(37, 99, 235, .11);
}

@keyframes voice-orb-wave {
  to {
    transform: scaleY(.45);
    opacity: .68;
  }
}

@keyframes voice-stage-pulse {
  50% {
    transform: translate(-50%, -50%) scale(1.045);
    opacity: .78;
  }
}

@keyframes voice-stage-line-flow {

  0%,
  100% {
    opacity: .28;
    filter: blur(.2px);
  }

  50% {
    opacity: .9;
    filter: blur(0);
  }
}

.browser-card {
  width: min(585px, 100%);
  border-radius: 22px;
  transform: rotate(-.6deg);
  box-shadow: 0 34px 90px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.browser-topbar {
  height: 50px;
  background: rgba(255, 255, 255, .88);
}

.browser-url {
  width: 210px;
  color: #2563EB;
  border-color: rgba(37, 99, 235, .13);
  background: #F8FAFC;
}

.browser-page {
  height: 430px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, .92), rgba(224, 242, 254, .92)),
    linear-gradient(90deg, rgba(37, 99, 235, .08) 1px, transparent 1px);
  background-size: auto, 42px 42px;
}

.mini-logo {
  background: linear-gradient(135deg, #0F172A, #2563EB);
}

.mini-kicker,
.mini-button {
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

.mini-heading {
  background: #0F172A;
}

.assistant-panel {
  right: 22px;
  bottom: 22px;
  width: 318px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .17);
}

.assistant-head {
  height: 62px;
}

.assistant-head strong {
  font-size: 13px;
}

.assistant-head small,
.assistant-text-composer span,
.voice-status {
  font-size: 9px;
}

.assistant-body {
  min-height: 188px;
}

.message {
  font-size: 10px;
}

.message-user {
  max-width: 78%;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

.message-bolo p {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  background: #F8FAFC;
}

.action-chip {
  max-width: calc(100% - 28px);
  color: #075985;
  background: rgba(6, 182, 212, .14);
}

.floating-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
}

.floating-card-one {
  right: -8px;
  top: 70px;
}

.floating-card-two {
  left: -4px;
  bottom: 76px;
}

.floating-card strong {
  color: #0F172A;
  font-size: 11px;
}

.floating-card small {
  color: #64748B;
  font-size: 9px;
}

.animated-wordmark {
  right: 30px;
  bottom: 12px;
  border-radius: 15px;
}

html[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 72% 18%, rgba(37, 99, 235, .18), transparent 30%),
    radial-gradient(circle at 84% 70%, rgba(6, 182, 212, .14), transparent 26%),
    linear-gradient(180deg, #0B1120 0%, #111827 70%, #0B1120 100%);
}

html[data-theme="dark"] .hero::before {
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(96, 165, 250, .22) 7.4% 7.9%, transparent 8.3% 14%),
    linear-gradient(90deg, transparent 0 10%, rgba(34, 211, 238, .2) 10.4% 11.1%, transparent 11.6% 18%),
    linear-gradient(90deg, transparent 0 12%, rgba(167, 139, 250, .18) 12.5% 13%, transparent 13.5% 21%);
  background-size: 210px 150px, 260px 190px, 310px 230px;
}

html[data-theme="dark"] .hero::after {
  background: linear-gradient(180deg, rgba(11, 17, 32, 0), #0B1120);
}

html[data-theme="dark"] .hero .eyebrow {
  color: #93C5FD;
  border-color: rgba(96, 165, 250, .18);
  background: rgba(30, 41, 59, .72);
}

html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .hero-proof {
  color: #CBD5E1;
}

html[data-theme="dark"] .hero-actions .button-ghost,
html[data-theme="dark"] .hero-paths a,
html[data-theme="dark"] .hero-proof span {
  color: #F8FAFC;
  border-color: rgba(51, 65, 85, .9);
  background: rgba(30, 41, 59, .68) !important;
}

html[data-theme="dark"] .hero-paths strong,
html[data-theme="dark"] .floating-card strong,
html[data-theme="dark"] .message-bolo p {
  color: #F8FAFC;
}

html[data-theme="dark"] .hero-paths small,
html[data-theme="dark"] .floating-card small {
  color: #94A3B8;
}

html[data-theme="dark"] .hero-paths a::before {
  opacity: 1;
}

html[data-theme="dark"] .hero-paths a:hover::before {
  opacity: .92;
}

html[data-theme="dark"] .browser-topbar,
html[data-theme="dark"] .browser-url {
  border-color: rgba(51, 65, 85, .9);
  background: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] .browser-page {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(8, 47, 73, .78)),
    linear-gradient(90deg, rgba(96, 165, 250, .08) 1px, transparent 1px);
  background-size: auto, 42px 42px;
}

html[data-theme="dark"] .hero-voice-stage {
  border-color: rgba(96, 165, 250, .2);
  background:
    radial-gradient(circle at 50% 48%, rgba(6, 182, 212, .14), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(37, 99, 235, .14), transparent 30%),
    rgba(15, 23, 42, .78);
  box-shadow: 0 34px 88px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .hero-voice-stage::before {
  border-color: rgba(96, 165, 250, .12);
  background:
    linear-gradient(rgba(96, 165, 250, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px);
}

html[data-theme="dark"] .hero-voice-stage::after {
  border-color: rgba(34, 211, 238, .12);
  box-shadow: 0 0 0 42px rgba(37, 99, 235, .06), 0 0 0 88px rgba(6, 182, 212, .04);
}

html[data-theme="dark"] .voice-stage-orb,
html[data-theme="dark"] .voice-stage-card,
html[data-theme="dark"] .voice-stage-status {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .2);
  background: rgba(30, 41, 59, .84);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .voice-stage-card small {
  color: #22D3EE;
}

html[data-theme="dark"] .voice-stage-card span {
  color: #CBD5E1;
}

html[data-theme="dark"] .voice-stage-status b {
  color: #A5F3FC;
  background: rgba(6, 182, 212, .16);
}

html[data-theme="dark"] .voice-stage-status i {
  color: #BFDBFE;
  background: rgba(37, 99, 235, .18);
}

@media (max-width: 1080px) {
  .hero {
    min-height: auto;
    padding-top: 134px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero-copy {
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .hero {
    padding: 112px 0 62px;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.08;
  }

  .hero-lead {
    font-size: 16px;
    line-height: 1.65;
  }

  .hero-paths a {
    min-height: 76px;
  }

  .hero-product {
    min-height: 425px;
    width: 100%;
    margin-left: 0;
  }

  .hero-voice-stage {
    width: 100%;
    min-height: 430px;
    border-radius: 24px;
  }

  .voice-stage-orb {
    width: 118px;
    height: 118px;
    border-radius: 24px;
  }

  .voice-stage-orb img {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .voice-stage-card {
    width: 150px;
    min-height: 88px;
    padding: 13px;
    border-radius: 15px;
  }

  .voice-stage-card strong {
    font-size: 12px;
  }

  .voice-stage-card small,
  .voice-stage-card span {
    font-size: 9px;
  }

  .voice-stage-card-user {
    left: 16px;
    top: 28px;
  }

  .voice-stage-card-akash {
    right: 16px;
    top: 52px;
  }

  .voice-stage-card-action {
    right: 18px;
    bottom: 56px;
  }

  .voice-stage-card-owner {
    left: 18px;
    bottom: 48px;
  }

  .voice-stage-status {
    bottom: 13px;
    gap: 5px;
    padding: 7px;
  }

  .voice-stage-status span,
  .voice-stage-status b,
  .voice-stage-status i {
    padding: 5px 6px;
    font-size: 8px;
  }

  .voice-stage-line {
    display: none;
  }

  .browser-card {
    border-radius: 18px;
    transform: none;
  }

  .browser-page {
    height: 350px;
    padding: 16px;
  }

  .assistant-panel {
    right: 8px;
    bottom: 12px;
    width: 270px;
    transform: scale(.86);
  }

  .floating-card-one {
    right: -4px;
    top: 48px;
  }

  .floating-card-two {
    left: -2px;
    bottom: 44px;
  }

  .animated-wordmark {
    right: 6px;
    bottom: -8px;
  }
}

html[data-theme="dark"] .hero .hero-paths>a {
  background: rgba(30, 41, 59, .68) !important;
}

html[data-theme="dark"] .hero .hero-paths>a:hover {
  background: rgba(30, 41, 59, .9) !important;
}

/* Final button shape polish for light and dark themes */
.button,
.hero-actions .button,
.auth-link,
.nav-signup,
.mobile-portal,
.nav-guide-pill,
.nav-audience,
.mobile-auth button,
.quick-demo-samples button,
.auth-tabs button,
.profile-logout,
.footer-links button,
.footer-bottom button,
.journey-text-link {
  border-radius: 13px !important;
}

.auth-link {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 232, 240, .95);
  color: #0F172A;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s;
}

.auth-link:hover,
.nav-guide-pill:hover,
.nav-audience:hover,
.mobile-auth button:hover,
.footer-links button:hover,
.footer-bottom button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .28);
  background: rgba(239, 246, 255, .88);
}

.theme-toggle,
.profile-button,
.menu-toggle,
.modal-close,
.assistant-head button,
.assistant-text-composer button,
.voice-bar button,
.quick-demo-answer>span,
.feedback-fab span {
  border-radius: 12px;
}

.modal-close,
.feedback-fab span {
  border-radius: 50%;
}

.profile-button {
  min-height: 44px;
  padding-inline: 6px 13px;
}

.mobile-guide-trigger {
  border-radius: 16px;
}

.mobile-auth button {
  overflow: hidden;
  font-weight: 800;
}

.profile-logout,
.footer-links button,
.footer-bottom button {
  border: 1px solid transparent;
}

html[data-theme="dark"] .auth-link,
html[data-theme="dark"] .nav-guide-pill,
html[data-theme="dark"] .mobile-theme-toggle,
html[data-theme="dark"] .mobile-auth button,
html[data-theme="dark"] .footer-links button,
html[data-theme="dark"] .footer-bottom button {
  color: #F8FAFC;
  border-color: rgba(51, 65, 85, .9);
  background-color: rgba(30, 41, 59, .62) !important;
  background-image: none !important;
}

html[data-theme="dark"] .auth-link {
  box-shadow: inset 0 0 0 999px rgba(30, 41, 59, .74), 0 8px 24px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .nav-audience,
html[data-theme="dark"] .desktop-nav .nav-guide-trigger,
html[data-theme="dark"] .desktop-nav button.nav-audience {
  color: #DCEBFF !important;
}

html[data-theme="dark"] .nav-audience span,
html[data-theme="dark"] .nav-audience i {
  color: #DCEBFF !important;
}

html[data-theme="dark"] .auth-link:hover,
html[data-theme="dark"] .nav-guide-pill:hover,
html[data-theme="dark"] .mobile-auth button:hover,
html[data-theme="dark"] .footer-links button:hover,
html[data-theme="dark"] .footer-bottom button:hover {
  border-color: rgba(96, 165, 250, .34);
  background-color: rgba(37, 99, 235, .2) !important;
  background-image: none !important;
}

html[data-theme="dark"] .auth-link:hover {
  box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .22), 0 10px 28px rgba(0, 0, 0, .22) !important;
}

/* Theme-aware action preview inside the portal control section */
.action-card {
  color: #0F172A;
  background:
    radial-gradient(circle at 18% 12%, rgba(6, 182, 212, .2), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(124, 58, 237, .14), transparent 34%),
    linear-gradient(135deg, #F8FAFC, #EEF6FF 54%, #F5F3FF) !important;
}

.action-preview {
  position: relative;
}

.action-preview div {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .9), transparent 30%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 18px 40px rgba(37, 99, 235, .11);
  backdrop-filter: blur(10px);
}

.action-preview span {
  color: #0F172A;
}

.action-preview small {
  color: #64748B;
}

.action-preview>i {
  color: #2563EB;
  text-shadow: 0 0 18px rgba(6, 182, 212, .24);
}

html[data-theme="dark"] .action-card {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 18% 12%, rgba(6, 182, 212, .16), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(124, 58, 237, .16), transparent 34%),
    linear-gradient(135deg, #111827, #0B1120 60%, #172033) !important;
}

html[data-theme="dark"] .action-card .bento-copy>span {
  color: #93C5FD;
}

html[data-theme="dark"] .action-card .bento-copy h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] .action-card .bento-copy p {
  color: #CBD5E1;
}

html[data-theme="dark"] .action-preview div {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .24);
  background:
    radial-gradient(circle at 18% 12%, rgba(148, 163, 184, .18), transparent 32%),
    rgba(30, 41, 59, .86);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .action-preview span {
  color: #F8FAFC;
}

html[data-theme="dark"] .action-preview small {
  color: #93C5FD;
}

html[data-theme="dark"] .action-preview>i {
  color: #22D3EE;
  text-shadow: 0 0 20px rgba(34, 211, 238, .26);
}

/* Comparison table polish for the BoloSite column */
.comparison-card {
  border-color: rgba(226, 232, 240, .96);
  scrollbar-color: rgba(8, 145, 178, .72) rgba(226, 232, 240, .72);
  scrollbar-width: thin;
}

.comparison-card::-webkit-scrollbar {
  height: 12px;
}

.comparison-card::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(14, 165, 164, .08), rgba(37, 99, 235, .08)),
    rgba(226, 232, 240, .72);
}

.comparison-card::-webkit-scrollbar-thumb {
  border: 3px solid rgba(248, 250, 252, .92);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #0EA5A4, #2563EB 54%, #7C3AED);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .2);
}

.comparison-scroll-roll {
  width: min(260px, 76%);
  height: 12px;
  margin: 13px auto 0;
  padding: 3px;
  border: 1px solid rgba(14, 165, 164, .14);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(236, 254, 255, .92), rgba(239, 246, 255, .92)),
    rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 30px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.comparison-scroll-roll span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #0EA5A4, #2563EB 56%, #7C3AED);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .24);
  animation: comparisonRoll 2.7s ease-in-out infinite alternate;
}

@keyframes comparisonRoll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(138%);
  }
}

.comparison-head .bolosite-column {
  min-height: 45px;
  padding: 8px 12px;
  color: #fff;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 13px;
  background: var(--brand-gradient);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .22);
}

.comparison-head .bolosite-column img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.comparison-row .comparison-yes {
  color: #075985;
  border: 1px solid rgba(6, 182, 212, .2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .82), transparent 28%),
    rgba(6, 182, 212, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

html[data-theme="dark"] .comparison-head .bolosite-column {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .26);
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, .22), transparent 36%),
    linear-gradient(135deg, #1D4ED8, #0891B2 52%, #6D28D9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .comparison-head .bolosite-column img {
  border-color: rgba(255, 255, 255, .28);
}

html[data-theme="dark"] .comparison-row .comparison-yes {
  color: #A5F3FC;
  border-color: rgba(34, 211, 238, .2);
  background:
    radial-gradient(circle at 22% 18%, rgba(148, 163, 184, .16), transparent 30%),
    rgba(8, 47, 73, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .comparison-card {
  scrollbar-color: rgba(34, 211, 238, .75) rgba(15, 23, 42, .86);
}

html[data-theme="dark"] .comparison-card::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, rgba(34, 211, 238, .08), rgba(124, 58, 237, .1)),
    rgba(15, 23, 42, .86);
}

html[data-theme="dark"] .comparison-card::-webkit-scrollbar-thumb {
  border-color: rgba(15, 23, 42, .92);
  background:
    linear-gradient(90deg, #22D3EE, #3B82F6 54%, #A78BFA);
  box-shadow: 0 8px 18px rgba(34, 211, 238, .22);
}

html[data-theme="dark"] .comparison-scroll-roll {
  border-color: rgba(34, 211, 238, .18);
  background:
    linear-gradient(90deg, rgba(8, 47, 73, .78), rgba(30, 41, 59, .9)),
    rgba(15, 23, 42, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .comparison-scroll-roll span {
  background:
    linear-gradient(90deg, #22D3EE, #3B82F6 54%, #A78BFA);
  box-shadow: 0 8px 18px rgba(34, 211, 238, .24);
}

/* Theme-aware knowledge source stack in portal control */
.knowledge-card-main {
  background:
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .14), transparent 34%),
    linear-gradient(135deg, #ECFEFF, #F8FAFC) !important;
}

.source-stack div {
  min-height: 64px;
  border-color: rgba(6, 182, 212, .16);
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, .86), transparent 34%),
    rgba(255, 255, 255, .74);
  box-shadow: 0 14px 30px rgba(6, 182, 212, .08);
}

.source-stack span {
  color: #0891B2;
  font-weight: 800;
}

.source-stack p {
  color: #0F172A;
}

.source-stack b {
  color: #0E7490;
  font-weight: 900;
}

html[data-theme="dark"] .knowledge-card-main {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 88% 12%, rgba(34, 211, 238, .15), transparent 34%),
    linear-gradient(135deg, #111827, #0B1120 62%, #082F49) !important;
}

html[data-theme="dark"] .knowledge-card-main .bento-copy>span {
  color: #22D3EE;
}

html[data-theme="dark"] .knowledge-card-main .bento-copy h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] .knowledge-card-main .bento-copy p {
  color: #CBD5E1;
}

html[data-theme="dark"] .source-stack div {
  border-color: rgba(34, 211, 238, .18);
  background:
    radial-gradient(circle at 10% 18%, rgba(148, 163, 184, .14), transparent 34%),
    rgba(30, 41, 59, .84);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .source-stack span {
  color: #67E8F9;
}

html[data-theme="dark"] .source-stack p {
  color: #F8FAFC;
}

html[data-theme="dark"] .source-stack b {
  color: #A5F3FC;
}

/* Light-mode learning hub: soft product-video surface */
html:not([data-theme="dark"]) .learning-hub {
  color: #0F172A;
  background:
    radial-gradient(circle at 14% 12%, rgba(244, 114, 182, .22), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .14), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(6, 182, 212, .12), transparent 34%),
    linear-gradient(180deg, #FFF7FB 0%, #FDF2F8 46%, #F8FAFC 100%);
}

html:not([data-theme="dark"]) .learning-hub .section-kicker.light {
  color: #BE185D;
}

html:not([data-theme="dark"]) .learning-hub .demo-heading h2 {
  color: #0F172A;
}

html:not([data-theme="dark"]) .learning-hub .demo-heading p {
  color: #64748B;
}

html:not([data-theme="dark"]) .learning-hub .video-card {
  border-color: rgba(244, 114, 182, .18);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 24px 70px rgba(190, 24, 93, .09);
  backdrop-filter: blur(14px);
}

html:not([data-theme="dark"]) .learning-hub .video-player {
  border-color: rgba(244, 114, 182, .16);
  background:
    radial-gradient(circle at 20% 18%, rgba(244, 114, 182, .14), transparent 34%),
    #0F172A;
}

html:not([data-theme="dark"]) .learning-hub .video-number {
  color: #fff;
  background: linear-gradient(135deg, #DB2777, #2563EB);
  box-shadow: 0 12px 26px rgba(219, 39, 119, .22);
}

html:not([data-theme="dark"]) .learning-hub .video-audience {
  color: #DB2777;
}

html:not([data-theme="dark"]) .learning-hub .video-info h3 {
  color: #0F172A;
}

html:not([data-theme="dark"]) .learning-hub .video-info p {
  color: #64748B;
}

html:not([data-theme="dark"]) .learning-hub .video-info ul {
  border-color: rgba(226, 232, 240, .95);
}

html:not([data-theme="dark"]) .learning-hub .video-info li {
  color: #BE185D;
  border: 1px solid rgba(244, 114, 182, .16);
  background: rgba(253, 242, 248, .9);
}

/* Light-mode pricing cleanup */
html:not([data-theme="dark"]) .pricing {
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .08), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .10), transparent 28%),
    linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}

html:not([data-theme="dark"]) .pricing .section-heading h2 {
  color: #0F172A;
}

html:not([data-theme="dark"]) .pricing .section-heading p,
html:not([data-theme="dark"]) .pricing .estimate-note,
html:not([data-theme="dark"]) .pricing-trust {
  color: #64748B;
}

html:not([data-theme="dark"]) .calculator-card,
html:not([data-theme="dark"]) .pricing-explain {
  border-color: rgba(226, 232, 240, .96);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}

html:not([data-theme="dark"]) .estimate-box {
  color: #0F172A;
  border: 1px solid rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 86% 18%, rgba(6, 182, 212, .14), transparent 34%),
    linear-gradient(135deg, #FFFFFF, #EFF6FF 62%, #F8FAFC);
  box-shadow: 0 22px 55px rgba(37, 99, 235, .12);
}

html:not([data-theme="dark"]) .estimate-box small {
  color: #2563EB;
}

html:not([data-theme="dark"]) .estimate-box strong {
  color: #2563EB;
}

html:not([data-theme="dark"]) .estimate-box strong em {
  color: #64748B;
}

html:not([data-theme="dark"]) .estimate-box>div>span {
  color: #475569;
}

html:not([data-theme="dark"]) .estimate-box .button-primary {
  color: #FFFFFF;
  background: var(--brand-gradient);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .24);
}

html:not([data-theme="dark"]) .pricing-limit-card {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .14), transparent 34%),
    linear-gradient(135deg, #FFFFFF, #F1F5F9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .pricing-limit-card::before {
  background: rgba(37, 99, 235, .08);
}

html:not([data-theme="dark"]) .pricing-limit-card .section-kicker {
  color: #2563EB;
}

html:not([data-theme="dark"]) .pricing-limit-card>p {
  color: #64748B;
}

html:not([data-theme="dark"]) .credit-limit-title strong {
  color: #2563EB;
}

html:not([data-theme="dark"]) .credit-limit-title span {
  color: #475569;
}

html:not([data-theme="dark"]) .credit-meter {
  border-top-color: #E2E8F0;
}

html:not([data-theme="dark"]) .credit-meter>i {
  background: linear-gradient(90deg, #2563EB, #06B6D4);
}

html:not([data-theme="dark"]) .credit-meter>span {
  color: #0F172A;
}

html:not([data-theme="dark"]) .credit-meter small {
  color: #64748B;
}

html:not([data-theme="dark"]) .limit-benefits li {
  border-top-color: rgba(226, 232, 240, .9);
}

html:not([data-theme="dark"]) .limit-benefits li>span {
  color: #0891B2;
}

html:not([data-theme="dark"]) .limit-benefits p {
  color: #475569;
}

html:not([data-theme="dark"]) .limit-note {
  border-color: rgba(6, 182, 212, .16);
  background: rgba(236, 254, 255, .8);
}

html:not([data-theme="dark"]) .limit-note span {
  color: #0E7490;
}

html:not([data-theme="dark"]) .limit-note p {
  color: #475569;
}

html:not([data-theme="dark"]) .pricing-limit-card .button-dark {
  color: #FFFFFF;
  background: #0F172A;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
}

/* Light-mode trust block */
html:not([data-theme="dark"]) .trust-block {
  color: #0F172A;
  border: 1px solid rgba(37, 99, 235, .12);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, .06) 1px, transparent 1px),
    linear-gradient(135deg, #FFFFFF, #F8FAFC);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .trust-block .section-kicker.light,
html:not([data-theme="dark"]) .trust-grid article>span,
html:not([data-theme="dark"]) .trust-console-top span,
html:not([data-theme="dark"]) .trust-console-foot span,
html:not([data-theme="dark"]) .trust-flow small {
  color: #2563EB;
}

html:not([data-theme="dark"]) .trust-heading p,
html:not([data-theme="dark"]) .trust-grid p {
  color: #64748B;
}

html:not([data-theme="dark"]) .trust-console,
html:not([data-theme="dark"]) .trust-flow>div,
html:not([data-theme="dark"]) .trust-grid article {
  border-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

html:not([data-theme="dark"]) .trust-console-top strong,
html:not([data-theme="dark"]) .trust-toggle-row span,
html:not([data-theme="dark"]) .trust-flow span {
  color: #0F172A;
}

html:not([data-theme="dark"]) .trust-toggle-row {
  background: #EFF6FF;
}

html:not([data-theme="dark"]) .trust-toggle-row i {
  color: #0E7490;
  background: rgba(6, 182, 212, .14);
}

/* Hero live assistant preview */
.hero-product {
  isolation: isolate;
  overflow: visible;
}

.hero-browser-card {
  width: min(600px, 100%);
  border-color: rgba(37, 99, 235, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 34px 95px rgba(15, 23, 42, .16), 0 0 0 10px rgba(255, 255, 255, .42);
  transform: rotate(-1deg);
}

.hero-browser-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 32%, rgba(236, 72, 153, .08));
}

.hero-browser-card .browser-topbar {
  position: relative;
  z-index: 2;
  height: 52px;
  border-bottom-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .88);
}

.hero-browser-card .browser-url {
  width: 216px;
  color: #2563EB;
  border-color: rgba(37, 99, 235, .15);
  background: rgba(248, 250, 252, .92);
  font-weight: 800;
}

.hero-browser-card .lock {
  width: 8px;
  height: 8px;
  position: relative;
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.hero-browser-card .lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 7px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  transform: translateX(-50%);
}

.hero-browser-card .browser-more {
  color: #0E7490;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-browser-card .browser-page {
  height: 488px;
  padding: 24px;
  background:
    radial-gradient(circle at 82% 20%, rgba(6, 182, 212, .22), transparent 30%),
    radial-gradient(circle at 16% 78%, rgba(249, 115, 22, .13), transparent 32%),
    linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 54%, #ECFEFF 100%);
}

.hero-browser-card .mini-nav {
  position: relative;
  z-index: 3;
  gap: 18px;
}

.hero-browser-card .mini-logo {
  width: 72px;
  height: 16px;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

.hero-browser-card .mini-nav span:not(.mini-logo) {
  width: 34px;
  height: 5px;
  background: rgba(100, 116, 139, .26);
}

.hero-browser-copy {
  position: absolute;
  z-index: 3;
  left: 26px;
  top: 104px;
  width: 180px;
}

.hero-browser-copy span {
  color: #EC4899;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-browser-copy h3 {
  margin: 10px 0 10px;
  color: #0F172A;
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.08;
}

.hero-browser-copy p {
  margin: 0;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.hero-signal-rail {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: 258px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 80px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 18px 44px rgba(37, 99, 235, .08);
}

.hero-signal-rail i {
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #EC4899, #06B6D4 52%, #2563EB);
  animation: hero-signal-bounce .9s ease-in-out infinite alternate;
}

.hero-signal-rail i:nth-child(1) {
  height: 24px;
}

.hero-signal-rail i:nth-child(2) {
  height: 42px;
  animation-delay: -.14s;
}

.hero-signal-rail i:nth-child(3) {
  height: 58px;
  animation-delay: -.28s;
}

.hero-signal-rail i:nth-child(4) {
  height: 36px;
  animation-delay: -.42s;
}

.hero-signal-rail i:nth-child(5) {
  height: 50px;
  animation-delay: -.56s;
}

@keyframes hero-signal-bounce {
  to {
    transform: scaleY(.55);
    opacity: .72;
  }
}

.hero-assistant-panel {
  right: 20px;
  bottom: 18px;
  width: 324px;
  z-index: 4;
  border-color: rgba(37, 99, 235, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 30px 78px rgba(15, 23, 42, .18);
}

.hero-assistant-panel .assistant-head {
  height: 64px;
  border-bottom-color: rgba(226, 232, 240, .92);
}

.hero-assistant-panel .assistant-head strong {
  color: #0F172A;
  font-size: 14px;
}

.hero-assistant-panel .assistant-head small {
  color: #64748B;
  font-size: 9px;
  font-weight: 800;
}

.assistant-more {
  margin-left: auto;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 900;
}

.hero-assistant-panel .assistant-body {
  min-height: 154px;
  padding: 15px;
}

.hero-assistant-panel .message {
  font-size: 11px;
}

.hero-assistant-panel .message-user {
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .2);
}

.hero-assistant-panel .message-bolo p {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  border-radius: 4px 14px 14px 14px;
  background: #F8FAFC;
}

.hero-assistant-panel .tiny-logo {
  color: #FFFFFF;
  background: linear-gradient(135deg, #0F172A, #2563EB);
}

.hero-assistant-panel .action-chip {
  color: #0E7490;
  background: rgba(6, 182, 212, .13);
  font-size: 9px;
}

.hero-assistant-panel .assistant-mode-row {
  border-top-color: rgba(226, 232, 240, .92);
}

.hero-assistant-panel .assistant-mode-row span {
  min-height: 28px;
  border-color: rgba(226, 232, 240, .92);
  border-radius: 10px;
  font-size: 8px;
}

.hero-assistant-panel .assistant-mode-row .active {
  color: #BE185D;
  border-color: rgba(236, 72, 153, .2);
  background: rgba(253, 242, 248, .9);
}

.hero-assistant-panel .assistant-text-composer {
  min-height: 36px;
  margin: 9px 10px 0;
  border-color: rgba(226, 232, 240, .92);
  border-radius: 12px;
}

.composer-send {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  font-size: 10px;
  font-weight: 900;
}

.hero-assistant-panel .voice-bar {
  height: 54px;
  border-top-color: rgba(226, 232, 240, .92);
}

.hero-assistant-panel .voice-status {
  color: #64748B;
  font-weight: 800;
}

.voice-trigger {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #EC4899, #F97316);
  box-shadow: 0 14px 28px rgba(236, 72, 153, .2);
}

.voice-trigger .mic-dot {
  border-color: #FFFFFF;
}

.voice-trigger .mic-dot::after {
  border-color: #FFFFFF;
}

.hero-owner-console {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
  width: 218px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .1);
  backdrop-filter: blur(14px);
}

.hero-owner-console div {
  min-width: 0;
}

.hero-owner-console small {
  display: block;
  color: #059669;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-owner-console strong {
  display: block;
  margin-top: 4px;
  color: #0F172A;
  font-size: 12px;
  line-height: 1.2;
}

.hero-owner-console>span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #10B981, #06B6D4);
  font-size: 12px;
  font-weight: 900;
}

.hero-product .floating-card-one {
  right: -8px;
  top: 88px;
}

.hero-product .floating-card-two {
  left: -6px;
  bottom: 86px;
}

.hero-product .floating-card strong {
  font-size: 12px;
}

.hero-product .floating-card small {
  font-size: 9px;
  font-weight: 800;
}

.hero-product .animated-wordmark {
  right: 32px;
  bottom: -6px;
  border-color: rgba(37, 99, 235, .14);
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
}

html[data-theme="dark"] .hero-browser-card {
  border-color: rgba(96, 165, 250, .2);
  background: rgba(15, 23, 42, .9);
  box-shadow: 0 34px 95px rgba(0, 0, 0, .32), 0 0 0 10px rgba(15, 23, 42, .28);
}

html[data-theme="dark"] .hero-browser-card::before {
  background: linear-gradient(135deg, rgba(96, 165, 250, .12), transparent 32%, rgba(236, 72, 153, .12));
}

html[data-theme="dark"] .hero-browser-card .browser-page {
  background:
    radial-gradient(circle at 82% 20%, rgba(6, 182, 212, .18), transparent 30%),
    radial-gradient(circle at 16% 78%, rgba(249, 115, 22, .12), transparent 32%),
    linear-gradient(135deg, #0F172A 0%, #111827 58%, #082F49 100%);
}

html[data-theme="dark"] .hero-browser-copy h3,
html[data-theme="dark"] .hero-assistant-panel .assistant-head strong,
html[data-theme="dark"] .hero-owner-console strong {
  color: #F8FAFC;
}

html[data-theme="dark"] .hero-browser-copy p,
html[data-theme="dark"] .hero-assistant-panel .assistant-head small,
html[data-theme="dark"] .hero-assistant-panel .voice-status {
  color: #CBD5E1;
}

html[data-theme="dark"] .hero-browser-card .browser-url,
html[data-theme="dark"] .hero-signal-rail,
html[data-theme="dark"] .hero-owner-console {
  border-color: rgba(96, 165, 250, .18);
  background: rgba(30, 41, 59, .72);
}

html[data-theme="dark"] .hero-assistant-panel {
  border-color: rgba(96, 165, 250, .2);
  background: rgba(15, 23, 42, .94);
}

html[data-theme="dark"] .hero-assistant-panel .message-bolo p,
html[data-theme="dark"] .hero-assistant-panel .assistant-text-composer,
html[data-theme="dark"] .hero-assistant-panel .assistant-mode-row span {
  color: #F8FAFC;
  border-color: rgba(51, 65, 85, .9);
  background: rgba(17, 24, 39, .92);
}

html[data-theme="dark"] .hero-assistant-panel .assistant-mode-row .active {
  color: #FBCFE8;
  border-color: rgba(236, 72, 153, .24);
  background: rgba(131, 24, 67, .34);
}

@media (max-width: 1080px) {
  .hero-browser-card {
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .hero-product {
    min-height: 650px;
  }

  .hero-browser-card {
    width: 100%;
    border-radius: 20px;
    transform: none;
  }

  .hero-browser-card .browser-topbar {
    height: 46px;
    padding: 0 10px;
    grid-template-columns: 58px 1fr 42px;
  }

  .hero-browser-card .browser-url {
    width: 150px;
    font-size: 8px;
  }

  .hero-browser-card .browser-more {
    font-size: 8px;
  }

  .hero-browser-card .browser-page {
    height: 590px;
    padding: 16px;
  }

  .hero-browser-card .mini-nav span:not(.mini-logo) {
    width: 24px;
  }

  .hero-browser-copy {
    left: 16px;
    top: 72px;
    width: calc(100% - 32px);
  }

  .hero-browser-copy h3 {
    max-width: 280px;
    font-size: 23px;
  }

  .hero-browser-copy p {
    max-width: 290px;
    font-size: 11px;
  }

  .hero-signal-rail {
    display: none;
  }

  .hero-owner-console,
  .hero-product .floating-card,
  .hero-product .animated-wordmark {
    display: none;
  }

  .hero-assistant-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: none;
  }

  .hero-assistant-panel .assistant-body {
    min-height: 128px;
  }

  .hero-assistant-panel .message {
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .hero-browser-copy h3 {
    font-size: 21px;
  }

  .hero-browser-copy p {
    font-size: 10px;
  }

  .hero-assistant-panel .assistant-head {
    padding-inline: 10px;
  }

  .hero-assistant-panel .assistant-head small {
    font-size: 8px;
  }
}

/* Light-mode Try AKASH section */
html:not([data-theme="dark"]) .quick-demo-section {
  color: #0F172A;
  background:
    radial-gradient(circle at 12% 14%, rgba(236, 72, 153, .14), transparent 32%),
    radial-gradient(circle at 84% 16%, rgba(37, 99, 235, .16), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(6, 182, 212, .13), transparent 34%),
    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 48%, #EFF6FF 100%);
}

html:not([data-theme="dark"]) .quick-demo-section .section-kicker.light {
  color: #2563EB;
}

html:not([data-theme="dark"]) .quick-demo-copy h2 {
  color: #0F172A;
}

html:not([data-theme="dark"]) .quick-demo-copy>p {
  color: #475569;
}

html:not([data-theme="dark"]) .quick-demo-form label {
  color: #1E293B;
}

html:not([data-theme="dark"]) .quick-demo-form input {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .16);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

html:not([data-theme="dark"]) .quick-demo-form input::placeholder {
  color: #94A3B8;
}

html:not([data-theme="dark"]) .quick-demo-samples button {
  color: #1D4ED8;
  border-color: rgba(37, 99, 235, .14);
  background: rgba(239, 246, 255, .86);
}

html:not([data-theme="dark"]) .quick-demo-samples button:hover {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

html:not([data-theme="dark"]) .quick-demo-note {
  color: #64748B;
}

html:not([data-theme="dark"]) .quick-demo-stage {
  border-color: rgba(37, 99, 235, .13);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(239, 246, 255, .7)),
    rgba(255, 255, 255, .78);
  box-shadow: 0 30px 90px rgba(37, 99, 235, .12);
}

html:not([data-theme="dark"]) .quick-demo-browser {
  color: #0F172A;
  border: 1px solid rgba(37, 99, 235, .12);
  background: #FFFFFF;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
}

html:not([data-theme="dark"]) .quick-demo-top {
  border-bottom-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .94);
}

html:not([data-theme="dark"]) .quick-demo-screen {
  background:
    radial-gradient(circle at 84% 14%, rgba(6, 182, 212, .14), transparent 32%),
    linear-gradient(135deg, #FFFFFF, #F8FAFC 52%, #EFF6FF);
}

html:not([data-theme="dark"]) .quick-demo-message {
  color: #0F172A;
  border: 1px solid rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 90% 10%, rgba(6, 182, 212, .16), transparent 34%),
    linear-gradient(135deg, #EFF6FF, #F8FAFC);
  box-shadow: 0 16px 36px rgba(37, 99, 235, .08);
}

html:not([data-theme="dark"]) .quick-demo-answer {
  border-color: rgba(37, 99, 235, .14);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .quick-demo-answer>span {
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

html:not([data-theme="dark"]) .quick-demo-action {
  color: #0E7490;
  border: 1px solid rgba(6, 182, 212, .16);
  background: rgba(236, 254, 255, .86);
}

html:not([data-theme="dark"]) .quick-demo-link {
  color: #2563EB;
}

/* Contact section redesign */
.contact-section {
  position: relative;
  overflow: hidden;
  color: #F8FAFC;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, .07) 1px, transparent 1px),
    linear-gradient(115deg, rgba(37, 99, 235, .22), transparent 38%),
    linear-gradient(135deg, #0B1120, #111827 58%, #082F49);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

.contact-section .container {
  position: relative;
  z-index: 2;
}

.contact-layout {
  grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr);
  gap: 48px;
  align-items: center;
}

.contact-copy h2 {
  max-width: 640px;
}

.contact-copy>p {
  max-width: 560px;
  color: #CBD5E1;
  font-size: 16px;
}

.contact-brief {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  max-width: 520px;
}

.contact-brief>div {
  padding: 15px 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
}

.contact-brief small,
.contact-form-head span {
  display: block;
  color: #67E8F9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-brief strong {
  display: block;
  margin-top: 5px;
  color: #F8FAFC;
  font-size: 14px;
  line-height: 1.35;
}

.contact-details {
  max-width: 520px;
  margin-top: 18px;
}

.contact-details>a,
.contact-details>div {
  min-height: 62px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .42);
}

.contact-details>a>span,
.contact-details>div>span {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #2563EB, #06B6D4) !important;
}

.contact-details small {
  color: #94A3B8;
}

.contact-details strong {
  color: #F8FAFC;
  font-size: 12px;
}

.contact-form {
  position: relative;
  padding: 26px;
  border-color: rgba(148, 163, 184, .26);
  border-radius: 22px;
  background: rgba(15, 23, 42, .64);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.contact-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-form-head strong {
  display: block;
  margin-top: 4px;
  color: #F8FAFC;
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.15;
}

.contact-form-head i {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #BAE6FD;
  background: rgba(6, 182, 212, .14);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.contact-progress {
  display: grid;
  grid-template-columns: 1.2fr .7fr 1fr;
  gap: 7px;
  margin-bottom: 20px;
}

.contact-progress span {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
}

.contact-progress span:nth-child(2) {
  opacity: .62;
}

.contact-progress span:nth-child(3) {
  opacity: .82;
}

.contact-form>label,
.contact-form .field-row label {
  color: #CBD5E1;
  font-size: 11px;
  letter-spacing: .02em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  color: #F8FAFC;
  border-color: rgba(148, 163, 184, .28);
  background: rgba(255, 255, 255, .07);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #94A3B8;
}

.contact-form>small {
  color: #94A3B8;
  font-size: 10px;
}

html:not([data-theme="dark"]) .contact-section {
  color: #0F172A;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(115deg, rgba(6, 182, 212, .12), transparent 38%),
    linear-gradient(135deg, #F8FAFC, #FFFFFF 52%, #EFF6FF);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

html:not([data-theme="dark"]) .contact-section .section-kicker.light,
html:not([data-theme="dark"]) .contact-brief small,
html:not([data-theme="dark"]) .contact-form-head span {
  color: #2563EB;
}

html:not([data-theme="dark"]) .contact-copy>p,
html:not([data-theme="dark"]) .contact-details small,
html:not([data-theme="dark"]) .contact-form>small {
  color: #64748B;
}

html:not([data-theme="dark"]) .contact-brief>div,
html:not([data-theme="dark"]) .contact-details>a,
html:not([data-theme="dark"]) .contact-details>div,
html:not([data-theme="dark"]) .contact-form {
  border-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .contact-brief strong,
html:not([data-theme="dark"]) .contact-details strong,
html:not([data-theme="dark"]) .contact-form-head strong,
html:not([data-theme="dark"]) .contact-form>label,
html:not([data-theme="dark"]) .contact-form .field-row label {
  color: #0F172A;
}

html:not([data-theme="dark"]) .contact-form input,
html:not([data-theme="dark"]) .contact-form select,
html:not([data-theme="dark"]) .contact-form textarea {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  background: rgba(248, 250, 252, .9);
}

html:not([data-theme="dark"]) .contact-form-head i {
  color: #0E7490;
  background: rgba(6, 182, 212, .13);
}

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contact-form {
    max-width: 720px;
  }
}

@media (max-width: 620px) {
  .contact-form-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form-head i {
    align-self: flex-start;
  }

  .contact-brief>div,
  .contact-details>a,
  .contact-details>div {
    border-radius: 14px;
  }
}

/* Final CTA and footer redesign */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 92px 0 72px;
  background:
    linear-gradient(180deg, #0B1120 0%, #111827 100%);
}

.cta-card {
  min-height: 0;
  padding: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 28px;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 26px;
  color: #F8FAFC;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(37, 99, 235, .32), rgba(15, 23, 42, .92) 46%, rgba(8, 47, 73, .92));
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .28);
}

.cta-card::before {
  right: 28%;
  top: auto;
  bottom: -180px;
  width: 520px;
  height: 520px;
  background: linear-gradient(135deg, rgba(6, 182, 212, .16), transparent 62%);
  border-radius: 999px;
}

.cta-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cta-copy h2 {
  max-width: 720px;
  margin: 15px 0 16px;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.02;
}

.cta-copy p {
  max-width: 560px;
  color: #CBD5E1;
  font-size: 17px;
}

.cta-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.cta-proof-row span {
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  color: #BAE6FD;
  background: rgba(255, 255, 255, .07);
  font-size: 11px;
  font-weight: 900;
}

.cta-launch-card {
  position: relative;
  z-index: 2;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 62px rgba(0, 0, 0, .22);
}

.cta-launch-head span {
  display: block;
  color: #67E8F9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cta-launch-head strong {
  display: block;
  margin-top: 6px;
  color: #F8FAFC;
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.18;
}

.cta-launch-steps {
  display: grid;
  gap: 9px;
}

.cta-launch-steps span {
  min-height: 48px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  color: #E2E8F0;
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
  font-weight: 800;
}

.cta-launch-steps b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  font-size: 10px;
}

.cta-launch-card .cta-actions {
  align-items: stretch;
}

.cta-launch-card .button-light {
  color: #0F172A;
  background: #FFFFFF;
  box-shadow: 0 16px 34px rgba(255, 255, 255, .14);
}

.cta-launch-card .cta-actions a {
  color: #BAE6FD;
  text-align: center;
}

.site-footer {
  color: #E2E8F0;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, .06) 1px, transparent 1px),
    #0B1120;
  background-size: 46px 46px;
}

.footer-main {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 48px;
}

.footer-brand {
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 22px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(14px);
}

.footer-brand p {
  max-width: 360px;
  color: #CBD5E1;
}

.footer-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.footer-status span {
  padding: 7px 9px;
  border-radius: 999px;
  color: #BAE6FD;
  background: rgba(6, 182, 212, .12);
  font-size: 10px;
  font-weight: 900;
}

.footer-links {
  gap: 14px;
}

.footer-links div {
  padding: 18px;
  min-height: 190px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

.footer-links strong {
  color: #F8FAFC;
  font-size: 13px;
}

.footer-links a,
.footer-links button,
.footer-links span {
  color: #CBD5E1;
}

.footer-links a:hover,
.footer-links button:hover {
  color: #67E8F9;
}

.footer-socials a {
  color: #F8FAFC;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .06);
}

.footer-socials svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials .instagram:hover {
  background: linear-gradient(135deg, #F97316, #EC4899 52%, #7C3AED);
}

.footer-socials .linkedin:hover {
  background: linear-gradient(135deg, #0A66C2, #06B6D4);
}

.footer-socials .twitter:hover {
  background: linear-gradient(135deg, #0F172A, #334155);
}

.footer-socials a:hover {
  color: #FFFFFF;
}

.footer-socials a:focus-visible,
.footer-contact-list a:focus-visible,
.footer-contact-list button:focus-visible {
  outline: 0;
  border-color: #67E8F9;
  box-shadow: 0 0 0 3px rgba(103, 232, 249, .16);
}

.footer-contact-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.footer-contact-list a,
.footer-contact-list button {
  min-width: 0;
  width: 100%;
  padding: 11px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  color: #E2E8F0;
  background: rgba(15, 23, 42, .28);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  cursor: pointer;
}

.footer-contact-list a:hover,
.footer-contact-list button:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, .34);
  background: rgba(6, 182, 212, .09);
}

.footer-contact-list a>span,
.footer-contact-list button>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
}

.footer-contact-list svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact-list div {
  min-width: 0;
}

.footer-contact-list small {
  display: block;
  color: #94A3B8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer-contact-list strong {
  display: block;
  overflow-wrap: anywhere;
  color: #F8FAFC;
  font-size: 12px;
  line-height: 1.25;
}

.footer-bottom {
  color: #CBD5E1;
  border-top-color: rgba(148, 163, 184, .22);
}

.footer-bottom a,
.footer-bottom button {
  color: #E2E8F0;
}

.footer-bottom a:hover,
.footer-bottom button:hover {
  color: #67E8F9;
}

html:not([data-theme="dark"]) .final-cta {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
}

html:not([data-theme="dark"]) .cta-card {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .14);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(135deg, #FFFFFF, #F8FAFC 54%, #EFF6FF);
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 28px 80px rgba(37, 99, 235, .12);
}

html:not([data-theme="dark"]) .cta-copy p {
  color: #475569;
}

html:not([data-theme="dark"]) .cta-proof-row span {
  color: #1D4ED8;
  border-color: rgba(37, 99, 235, .14);
  background: rgba(239, 246, 255, .86);
}

html:not([data-theme="dark"]) .cta-launch-card {
  border-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 20px 58px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .cta-launch-head span,
html:not([data-theme="dark"]) .footer-status span {
  color: #2563EB;
}

html:not([data-theme="dark"]) .cta-launch-head strong,
html:not([data-theme="dark"]) .cta-launch-steps span {
  color: #0F172A;
}

html:not([data-theme="dark"]) .cta-launch-steps span {
  border-color: rgba(226, 232, 240, .92);
  background: rgba(248, 250, 252, .92);
}

html:not([data-theme="dark"]) .cta-launch-card .button-light {
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

html:not([data-theme="dark"]) .cta-launch-card .cta-actions a {
  color: #2563EB;
}

html:not([data-theme="dark"]) .site-footer {
  color: #0F172A;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, .05) 1px, transparent 1px),
    #F8FAFC;
  background-size: 46px 46px;
}

html:not([data-theme="dark"]) .footer-brand,
html:not([data-theme="dark"]) .footer-links div {
  border-color: rgba(226, 232, 240, .92);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}

html:not([data-theme="dark"]) .footer-brand p,
html:not([data-theme="dark"]) .footer-links a,
html:not([data-theme="dark"]) .footer-links button,
html:not([data-theme="dark"]) .footer-links span,
html:not([data-theme="dark"]) .footer-bottom {
  color: #64748B;
}

html:not([data-theme="dark"]) .footer-links strong,
html:not([data-theme="dark"]) .footer-bottom a,
html:not([data-theme="dark"]) .footer-bottom button {
  color: #0F172A;
}

html:not([data-theme="dark"]) .footer-status span {
  background: rgba(239, 246, 255, .9);
}

html:not([data-theme="dark"]) .footer-socials a {
  color: #2563EB;
  border-color: rgba(37, 99, 235, .14);
  background: rgba(239, 246, 255, .84);
}

html:not([data-theme="dark"]) .footer-contact-list a,
html:not([data-theme="dark"]) .footer-contact-list button {
  color: #0F172A;
  border-color: rgba(226, 232, 240, .92);
  background: rgba(248, 250, 252, .88);
}

html:not([data-theme="dark"]) .footer-contact-list a:hover,
html:not([data-theme="dark"]) .footer-contact-list button:hover {
  border-color: rgba(37, 99, 235, .2);
  background: rgba(239, 246, 255, .92);
}

html:not([data-theme="dark"]) .footer-contact-list small {
  color: #2563EB;
}

html:not([data-theme="dark"]) .footer-contact-list strong {
  color: #0F172A;
}

@media (max-width: 820px) {
  .cta-card {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cta-card {
    padding: 24px;
    border-radius: 22px;
  }

  .cta-launch-card {
    padding: 18px;
  }

  .footer-links div {
    min-height: 0;
  }

  .footer-bottom {
    gap: 14px;
  }
}

/* Footer alignment and readability cleanup */
.site-footer {
  padding-top: 48px;
}

.footer-main {
  align-items: start;
  gap: 28px;
  padding-bottom: 38px;
}

.footer-brand {
  padding: 28px;
  border-radius: 24px;
}

.footer-brand .brand {
  margin-bottom: 18px;
}

.footer-brand p {
  margin-top: 0;
}

.footer-status {
  margin-top: 22px;
}

.footer-status span {
  padding: 8px 12px;
  background: rgba(239, 246, 255, .11);
}

.footer-socials {
  margin-top: 24px;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.footer-contact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.footer-contact-list a,
.footer-contact-list button {
  min-height: 76px;
  padding: 12px;
  border-radius: 16px;
}

.footer-contact-list .footer-share-card {
  grid-column: 1 / -1;
}

.footer-links {
  align-items: start;
  gap: 18px;
}

.footer-links div {
  min-height: 0;
  padding: 20px;
  gap: 9px;
  border-radius: 22px;
}

.footer-links strong {
  margin-bottom: 8px;
  color: #F8FAFC;
  font-size: 14px;
}

.footer-links a,
.footer-links button,
.footer-links span {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 12px;
  color: #DCE7F4;
  background: rgba(255, 255, 255, .055);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.footer-links a:hover,
.footer-links button:hover {
  transform: translateX(2px);
  color: #FFFFFF;
  border-color: rgba(103, 232, 249, .3);
  background: rgba(6, 182, 212, .1);
}

.footer-links span {
  cursor: default;
}

.footer-bottom {
  min-height: 58px;
}

html:not([data-theme="dark"]) .footer-status span {
  background: #EFF6FF;
}

html:not([data-theme="dark"]) .footer-links a,
html:not([data-theme="dark"]) .footer-links button,
html:not([data-theme="dark"]) .footer-links span {
  color: #475569;
  border-color: rgba(37, 99, 235, .10);
  background: rgba(239, 246, 255, .66);
}

html:not([data-theme="dark"]) .footer-links a:hover,
html:not([data-theme="dark"]) .footer-links button:hover {
  color: #1D4ED8;
  border-color: rgba(37, 99, 235, .18);
  background: #EFF6FF;
}

@media (max-width: 1080px) {
  .footer-contact-list {
    grid-template-columns: 1fr;
  }

  .footer-contact-list .footer-share-card {
    grid-column: auto;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .footer-brand,
  .footer-links div {
    padding: 18px;
    border-radius: 18px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* Simple footer reset */
.site-footer {
  padding-top: 65px;
  color: var(--ink);
  background: #E8EDE3;
}

.footer-main {
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: start;
  gap: 80px;
}

.footer-brand {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.footer-brand .brand {
  margin-bottom: 0;
}

.footer-brand p {
  max-width: 270px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-socials {
  margin-top: 25px;
  display: flex;
  gap: 8px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  transition: background .2s, color .2s;
}

.footer-socials a:hover {
  color: var(--white);
  background: var(--ink);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-links div {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.footer-links strong {
  margin-bottom: 6px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 12px;
}

.footer-links a,
.footer-links button,
.footer-links span {
  width: auto;
  min-height: 0;
  padding: 0;
  display: inline;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: none;
  font-size: 12px;
  font-weight: 400;
  line-height: inherit;
  transform: none;
}

.footer-links button {
  cursor: pointer;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--ink);
  background: none;
  transform: none;
}

.footer-links span {
  color: var(--muted);
  font-size: 10px;
}

.footer-bottom {
  min-height: 70px;
  border-top: 1px solid var(--line);
  color: #6E786B;
  font-size: 11px;
}

.footer-bottom a,
.footer-bottom button {
  color: inherit;
}

html[data-theme="dark"] .site-footer {
  color: #F8FAFC;
  background: #0B1120;
}

html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-links button,
html[data-theme="dark"] .footer-links span,
html[data-theme="dark"] .footer-bottom {
  color: #CBD5E1;
}

html[data-theme="dark"] .footer-links strong {
  color: #F8FAFC;
}

html[data-theme="dark"] .footer-socials a {
  color: #F8FAFC;
  border-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] .footer-socials a:hover {
  color: #0B1120;
  background: #F8FAFC;
}

@media (max-width: 820px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
  }

  .footer-bottom {
    gap: 12px;
  }
}

/* Enhanced BoloSite footer */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 46px;
  color: #102017;
  background:
    radial-gradient(circle at 8% 12%, rgba(37, 99, 235, .12), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(20, 184, 166, .14), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #edf7ef 100%);
}

.footer-main {
  padding-bottom: 32px;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 22px;
}

.footer-spotlight {
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 18px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .1);
  backdrop-filter: blur(18px);
}

.footer-spotlight p {
  max-width: 320px;
  margin-top: 12px;
  color: #4b5f53;
  font-size: 13px;
  line-height: 1.55;
}

.footer-status {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-status span {
  min-height: 28px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 999px;
  color: #1f4f3a;
  background: rgba(236, 253, 245, .72);
  font-size: 10px;
  font-weight: 800;
}

.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21c55d;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .13);
}

.footer-socials {
  margin-top: 17px;
  gap: 9px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  box-shadow: 0 16px 35px rgba(15, 23, 42, .14);
  transition: transform .22s, box-shadow .22s, filter .22s;
}

.footer-socials a:hover {
  color: #ffffff;
  box-shadow: 0 20px 42px rgba(15, 23, 42, .2);
  filter: saturate(1.08);
  transform: translateY(-3px);
}

.footer-socials svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials .instagram {
  background: linear-gradient(135deg, #6d5dfc, #e44886 52%, #f59e0b);
}

.footer-socials .linkedin {
  background: #0a66c2;
}

.footer-socials .twitter {
  background: #111827;
}

.footer-socials a.instagram:hover {
  background: linear-gradient(135deg, #6d5dfc, #e44886 52%, #f59e0b);
}

.footer-socials a.linkedin:hover {
  background: #0a66c2;
}

.footer-socials a.twitter:hover {
  background: #111827;
}

.footer-action-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.footer-social-action-row {
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .48);
}

.footer-action {
  min-height: 40px;
  padding: 6px 10px 6px 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .22s, border-color .22s, box-shadow .22s, background .22s;
}

.footer-action:hover {
  border-color: rgba(37, 99, 235, .24);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .14);
  transform: translateY(-2px);
}

.footer-action-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #ffffff;
}

.footer-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-action.instagram .footer-action-icon {
  background: linear-gradient(135deg, #6d5dfc, #e44886 52%, #f59e0b);
}

.footer-action.linkedin .footer-action-icon {
  background: #0a66c2;
}

.footer-action.twitter .footer-action-icon {
  background: #111827;
}

.footer-action.gmail .footer-action-icon {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
}

.footer-action.whatsapp .footer-action-icon {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.footer-action.bolosite-share .footer-action-icon {
  background: #0f172a;
}

.footer-connect {
  display: grid;
  gap: 16px;
}

.footer-contact-panel {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 245px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
}

.footer-eyebrow {
  display: inline-flex;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-contact-panel h2 {
  max-width: 240px;
  margin: 0;
  color: #0f172a;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.08;
}

.footer-contact-list {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.footer-contact-list a,
.footer-contact-list button {
  min-height: 72px;
  padding: 11px;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  align-content: center;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  color: #102017;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .08);
  text-align: left;
  cursor: pointer;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}

.footer-contact-list a:hover,
.footer-contact-list button:hover {
  border-color: rgba(37, 99, 235, .22);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .13);
  transform: translateY(-3px);
}

.footer-contact-icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 900;
}

.footer-contact-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-contact-icon.logo {
  background: #0f172a;
}

.footer-contact-list small {
  grid-area: label;
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.footer-contact-list strong {
  grid-area: value;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
}

.footer-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.footer-links div {
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 15px;
  background: rgba(255, 255, 255, .55);
}

.footer-links strong {
  color: #0f172a;
  font-size: 13px;
}

.footer-links a,
.footer-links button,
.footer-links span {
  color: #53635a;
  font-size: 12px;
  line-height: 1.45;
}

.footer-links a:hover,
.footer-links button:hover {
  color: #2563eb;
}

.footer-bottom {
  min-height: 58px;
  border-top-color: rgba(15, 23, 42, .1);
  color: #56645d;
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.footer-bottom a,
.footer-bottom button {
  padding: 8px 11px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .56);
  cursor: pointer;
}

html[data-theme="dark"] .site-footer {
  color: #f8fafc;
  background:
    radial-gradient(circle at 9% 8%, rgba(45, 212, 191, .13), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .18), transparent 32%),
    linear-gradient(180deg, #111827 0%, #08111f 100%);
}

html[data-theme="dark"] .footer-spotlight,
html[data-theme="dark"] .footer-action,
html[data-theme="dark"] .footer-social-action-row,
html[data-theme="dark"] .footer-contact-panel,
html[data-theme="dark"] .footer-contact-list a,
html[data-theme="dark"] .footer-contact-list button,
html[data-theme="dark"] .footer-links div {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .66);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .footer-spotlight p,
html[data-theme="dark"] .footer-action,
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-links button,
html[data-theme="dark"] .footer-links span,
html[data-theme="dark"] .footer-bottom {
  color: #cbd5e1;
}

html[data-theme="dark"] .footer-contact-panel h2,
html[data-theme="dark"] .footer-contact-list strong,
html[data-theme="dark"] .footer-links strong,
html[data-theme="dark"] .footer-bottom a,
html[data-theme="dark"] .footer-bottom button {
  color: #f8fafc;
}

html[data-theme="dark"] .footer-status span,
html[data-theme="dark"] .footer-bottom a,
html[data-theme="dark"] .footer-bottom button {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .footer-eyebrow,
html[data-theme="dark"] .footer-contact-list small,
html[data-theme="dark"] .footer-links a:hover,
html[data-theme="dark"] .footer-links button:hover {
  color: #67e8f9;
}

html[data-theme="dark"] .footer-action:hover {
  border-color: rgba(103, 232, 249, .3);
  background: rgba(30, 41, 59, .9);
}

@media (max-width: 1080px) {
  .footer-contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-share-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

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

  .footer-spotlight {
    padding: 22px;
    border-radius: 18px;
  }

  .footer-contact-panel {
    grid-template-columns: 1fr;
  }

  .footer-contact-panel h2 {
    max-width: none;
    font-size: 24px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-contact-list {
    grid-template-columns: 1fr;
  }

  .footer-share-card {
    grid-column: auto;
  }

  .footer-bottom {
    padding: 20px 0;
    align-items: flex-start;
  }

  .footer-bottom div {
    justify-content: flex-start;
  }
}

/* Feedback modal: keep the rating choices inside the panel without horizontal scrolling. */
.feedback-modal .modal-panel,
.feedback-modal form,
.feedback-modal fieldset,
.feedback-modal .rating-options {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

@media (max-width: 620px) {
  .feedback-modal .modal-panel {
    width: min(100% - 24px, 560px);
  }

  .feedback-modal .rating-options {
    grid-template-columns: 1fr;
  }

  .feedback-modal .rating-options span {
    min-height: 58px;
    padding: 0 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    font-size: 20px;
  }

  .feedback-modal .rating-options small {
    margin-top: 0;
    font-size: 11px;
  }
}

@media (max-width: 500px) {
  .nav-shell {
    padding: 0 8px 0 10px;
    gap: 6px;
  }

  .brand {
    gap: 6px;
    font-size: 0;
  }

  .brand-logo-image {
    width: 34px;
    height: 34px;
  }

  .nav-actions {
    flex: 1;
    justify-content: flex-end;
    gap: 5px;
  }

  .nav-guide-pills {
    display: inline-flex;
    margin-left: auto;
  }

  .nav-guide-pill {
    width: 70px;
    height: 36px;
    padding: 0 6px;
    font-size: 10px;
  }

  .nav-actions>.theme-toggle,
  .nav-actions>.auth-link,
  .nav-actions>.nav-signup,
  .nav-actions>.profile-wrap {
    display: none !important;
  }

  .menu-toggle {
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }

  .mobile-theme-toggle {
    display: inline-flex;
  }
}

/* Final mobile UX polish: layout only; desktop and theme palettes stay unchanged. */
@media (max-width: 620px) {
  html {
    scroll-padding-top: 84px;
  }

  body {
    overflow-x: clip;
  }

  .container {
    width: calc(100% - 28px);
  }

  .section {
    padding: 64px 0;
  }

  /* Compact, readable mobile header and menu. */
  .site-header {
    padding: 8px 10px;
  }

  .nav-shell {
    height: 58px;
    padding: 0 8px 0 10px;
    gap: 8px;
    border-radius: 16px;
  }

  .nav-shell>.brand {
    min-width: 0;
    gap: 7px;
    font-size: 18px;
  }

  .nav-shell .brand-logo-image {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .nav-guide-pills {
    display: none !important;
  }

  .nav-actions {
    flex: 0 0 auto;
    gap: 0;
  }

  .nav-actions>.theme-toggle,
  .nav-actions>.auth-link,
  .nav-actions>.nav-signup,
  .nav-actions>.profile-wrap {
    display: none !important;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center;
    position: relative;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  }

  .menu-toggle span {
    width: 18px;
    height: 2px;
    position: absolute;
    left: 11px;
    border-radius: 999px;
    background: currentColor;
  }

  .menu-toggle span:first-child {
    top: 15px;
  }

  .menu-toggle span:last-child {
    top: 24px;
  }

  .menu-toggle.active span:first-child,
  .menu-toggle.active span:last-child {
    top: 20px;
  }

  .mobile-nav {
    max-height: calc(100dvh - 88px);
    top: 74px;
    left: 10px;
    right: 10px;
    padding: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
    border-radius: 18px;
  }

  .mobile-nav.open {
    display: grid;
  }

  .mobile-guide-trigger,
  .mobile-nav>a:not(.mobile-portal),
  .mobile-theme-toggle,
  .mobile-auth button,
  .mobile-portal {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
  }

  .mobile-guide-trigger {
    min-height: 72px;
    padding: 10px;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
  }

  .mobile-guide-trigger>span {
    min-width: 0;
    font-size: 12px;
    line-height: 1.25;
  }

  .mobile-guide-trigger small {
    font-size: 7px;
  }

  .mobile-guide-trigger i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .mobile-nav>a:not(.mobile-portal) {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    font-size: 12px;
    line-height: 1.25;
  }

  .mobile-theme-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    justify-content: center;
  }

  .mobile-auth {
    margin: 0;
    display: block;
  }

  .mobile-auth button,
  .mobile-portal {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
  }

  /* Mobile type rhythm and section spacing. */
  .section-heading,
  .faq-heading,
  .pilot-heading {
    margin-bottom: 30px;
  }

  .section-heading h2,
  .experience h2,
  .demo-heading h2,
  .faq-heading h2,
  .pilot-heading h2,
  .cta-card h2 {
    font-size: clamp(29px, 9vw, 36px);
    line-height: 1.12;
    letter-spacing: -.04em;
  }

  .section-heading p,
  .faq-heading p,
  .pilot-heading p,
  .cta-copy p {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.65;
  }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .split-heading>p {
    margin: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* Hero: balanced copy, visual and side-by-side primary actions. */
  .hero {
    padding: 98px 0 58px;
  }

  .hero-layout {
    gap: 38px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero .eyebrow {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.35;
  }

  .hero h1 {
    margin-top: 17px;
    font-size: clamp(36px, 11.5vw, 46px);
    line-height: 1.07;
  }

  .hero-lead {
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.65;
  }

  .hero-actions,
  .audience-actions {
    width: 100%;
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 8px;
  }

  .hero-actions .button,
  .audience-actions .button {
    width: auto !important;
    min-width: 0;
    min-height: 48px;
    padding: 0 9px;
    flex: 1 1 0;
    justify-content: center;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .hero-discover {
    margin-top: 15px;
    font-size: 12px;
  }

  .hero-paths {
    margin-top: 20px;
    gap: 9px;
  }

  .hero-paths a {
    min-height: 68px;
    padding: 11px;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-proof span {
    min-width: 0;
    font-size: 9px;
    line-height: 1.35;
  }

  .hero-product {
    width: 100%;
    min-height: 600px;
    margin: 0;
  }

  .hero-browser-card .browser-page {
    height: 540px;
  }

  .hero-browser-copy {
    left: 15px;
    top: 70px;
    width: calc(100% - 30px);
  }

  .hero-browser-copy h3 {
    max-width: 245px;
    font-size: 22px;
  }

  .hero-browser-copy p {
    max-width: 255px;
    font-size: 11px;
    line-height: 1.55;
  }

  .hero-assistant-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  /* Cards and content blocks: consistent edges and readable density. */
  .audience-grid,
  .problem-grid,
  .steps-grid,
  .industry-grid,
  .video-grid,
  .pilot-layout,
  .contact-layout,
  .founder-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .audience-card {
    display: block;
  }

  .audience-top {
    min-height: 220px;
    padding: 18px;
  }

  .audience-copy,
  .bento,
  .problem-card,
  .step-copy,
  .contact-form,
  .calculator-card,
  .pricing-explain {
    padding: 22px;
  }

  .audience-copy h2,
  .bento-copy h3,
  .step-copy h3,
  .problem-card h3 {
    font-size: 26px;
    line-height: 1.15;
  }

  .audience-copy>p,
  .bento-copy p,
  .step-copy p,
  .problem-card p {
    font-size: 14px;
    line-height: 1.65;
  }

  .what-overview-copy {
    padding: 25px 20px;
  }

  .what-overview-copy h3 {
    font-size: 27px;
  }

  .what-overview-copy>p {
    font-size: 14px;
  }

  .what-flow {
    gap: 8px;
  }

  .what-flow>div {
    min-height: 70px;
    padding: 12px;
  }

  .comparison-card {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-row {
    min-width: 680px;
  }

  .founder-photo {
    width: 100%;
    margin: 0;
  }

  .founder-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 34%;
  }

  .founder-copy blockquote {
    font-size: 28px;
    line-height: 1.2;
  }

  .founder-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .founder-links a {
    min-width: 0;
    padding: 9px 5px;
    justify-content: center;
    font-size: 10px;
    text-align: center;
  }

  .field-row,
  .contact-form .field-row,
  .modal-panel .field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-width: 0;
  }

  .modal-panel {
    width: calc(100% - 22px);
    max-height: calc(100dvh - 22px);
    padding: 24px 18px;
    overflow-y: auto;
    border-radius: 20px;
  }

  .modal-panel h2 {
    padding-right: 34px;
    font-size: 29px;
    line-height: 1.13;
  }

  .journey-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .journey-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 9px;
    justify-content: center;
    font-size: 10px;
    text-align: center;
  }

  .journey-actions .journey-text-link {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .cta-card {
    padding: 22px;
    gap: 20px;
  }

  .cta-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .cta-actions .button,
  .cta-actions>a {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }

  .feedback-fab {
    right: 12px;
    bottom: 12px;
    min-height: 48px;
    padding: 6px 12px 6px 6px;
  }

  .feedback-fab b {
    font-size: 11px;
  }

  /* Footer: compact actions and the four link boxes in a 2 x 2 grid. */
  .site-footer {
    padding-top: 38px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-bottom: 28px;
  }

  .footer-spotlight {
    padding: 18px;
  }

  .footer-social-action-row {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .footer-action {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 6px 8px 6px 6px;
    justify-content: flex-start;
    font-size: 11px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .footer-links div {
    min-width: 0;
    padding: 13px;
    gap: 8px;
    border-radius: 15px;
  }

  .footer-links strong {
    margin-bottom: 3px;
    font-size: 12px;
  }

  .footer-links a,
  .footer-links button,
  .footer-links span {
    width: 100%;
    min-width: 0;
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    min-height: 0;
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .footer-bottom div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .footer-bottom a,
  .footer-bottom button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 370px) {
  .container {
    width: calc(100% - 22px);
  }

  .nav-shell>.brand {
    font-size: 16px;
  }

  .nav-shell .brand-logo-image {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .hero-actions .button,
  .audience-actions .button {
    padding-inline: 6px;
    font-size: 10px;
  }

  .footer-links div {
    padding: 11px;
  }

  .footer-links a,
  .footer-links button,
  .footer-links span {
    font-size: 9px;
  }
}

@media (max-width: 620px) {

  .nav-shell,
  .nav-shell>*,
  .hero-layout,
  .hero-layout>*,
  .hero-copy,
  .hero-product,
  .hero-browser-card,
  .hero-actions,
  .audience-card,
  .what-overview,
  .contact-layout,
  .footer-main,
  .footer-connect,
  .footer-links,
  .footer-links>* {
    min-width: 0;
    max-width: 100%;
  }

  .nav-shell {
    width: 100%;
  }

  .hero-layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1,
  .hero-lead,
  .hero-discover,
  .hero-paths,
  .hero-proof {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-actions .button,
  .audience-actions .button,
  .cta-actions>*,
  .journey-actions>* {
    overflow: hidden;
  }

  .hero-browser-card,
  .browser-page,
  .assistant-panel {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-nav .mobile-guide-trigger,
  .mobile-nav>a:not(.mobile-portal) {
    color: var(--ink);
    background: var(--white);
  }

  .mobile-nav .mobile-theme-toggle,
  .mobile-nav .mobile-auth button {
    color: var(--ink);
    background: var(--paper-2);
  }

  .mobile-nav .mobile-portal {
    color: var(--white);
    background: var(--ink);
  }

  .site-footer .brand {
    gap: 7px;
    font-size: 18px;
  }

  .footer-links div {
    min-height: 150px;
    height: 100%;
  }

  .cta-actions>a:not(.button) {
    border: 1px solid currentColor;
    border-radius: 13px;
  }
}

@media (max-width: 760px) {
  .nav-shell {
    gap: 6px;
  }

  .nav-shell>.brand {
    flex: 0 0 auto;
    max-width: 42px;
  }

  .nav-shell>.brand span {
    display: none;
  }

  .nav-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .nav-guide-pills {
    display: inline-flex !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 224px;
    margin-left: 0;
    gap: 5px;
  }

  .nav-guide-pill {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    gap: 5px;
    border-radius: 14px;
    font-size: 10.5px;
    line-height: 1;
  }

  .nav-guide-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-guide-pill i {
    flex: 0 0 auto;
    padding: 4px 5px;
    border-radius: 7px;
    color: #334155;
    background: rgba(255, 255, 255, .78);
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .menu-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 390px) {
  .nav-guide-pills {
    max-width: 198px;
    gap: 4px;
  }

  .nav-guide-pill {
    height: 35px;
    padding: 0 5px;
    gap: 4px;
    font-size: 9.5px;
  }

  .nav-guide-pill i {
    padding: 3px 4px;
    font-size: 6.5px;
    letter-spacing: .05em;
  }
}

@media (max-width: 760px) {
  .learning-hub {
    overflow-x: hidden;
  }

  .learning-hub .container {
    width: min(100%, calc(100vw - 20px));
  }

  .learning-hub .demo-heading {
    gap: 10px;
  }

  .learning-hub .video-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .learning-hub .video-card {
    display: block !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
  }

  .learning-hub .video-player {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-bottom: 1px solid var(--dark-line);
    background: #050807;
  }

  .learning-hub .video-player video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .learning-hub .video-number {
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 8px;
  }

  .learning-hub .video-info {
    padding: 13px;
  }

  .learning-hub .video-info h3 {
    margin: 5px 0;
    font-size: 16px;
    line-height: 1.2;
  }

  .learning-hub .video-info p {
    min-height: 0 !important;
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .learning-hub .video-info ul {
    padding-top: 10px;
    gap: 5px;
  }

  .learning-hub .video-info li {
    padding: 4px 6px;
    font-size: 7.5px;
  }
}

@media (max-width: 760px) {
  #why-bolosite .trust-block {
    margin-top: 14px;
    padding: 16px;
    display: block;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(37, 99, 235, .18), transparent 42%),
      var(--ink);
  }

  #why-bolosite .trust-heading {
    display: grid;
    gap: 12px;
  }

  #why-bolosite .trust-heading h2 {
    margin: 7px 0 4px;
    font-size: clamp(25px, 8vw, 32px);
    line-height: 1.05;
  }

  #why-bolosite .trust-heading p {
    margin: 0;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.5;
  }

  #why-bolosite .trust-console {
    margin-top: 2px;
    padding: 12px;
    border-radius: 14px;
  }

  #why-bolosite .trust-console-top,
  #why-bolosite .trust-toggle-row {
    gap: 8px;
  }

  #why-bolosite .trust-console-top {
    align-items: flex-start;
  }

  #why-bolosite .trust-console-top strong {
    max-width: 145px;
    text-align: right;
    font-size: 11px;
    line-height: 1.25;
  }

  #why-bolosite .trust-toggle-row {
    margin-top: 11px;
    padding: 9px 10px;
  }

  #why-bolosite .trust-toggle-row span {
    font-size: 12px;
  }

  #why-bolosite .trust-toggle-row i {
    padding: 5px 7px;
    font-size: 8.5px;
  }

  #why-bolosite .trust-meter {
    margin: 10px 0;
    gap: 4px;
  }

  #why-bolosite .trust-meter span {
    height: 6px;
  }

  #why-bolosite .trust-console-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  #why-bolosite .trust-console-foot span {
    min-width: 0;
    padding: 6px 4px;
    border-radius: 9px;
    text-align: center;
    background: rgba(255, 255, 255, .07);
    font-size: 7.5px;
    line-height: 1.1;
  }

  #why-bolosite .trust-control {
    margin-top: 14px;
    gap: 9px;
  }

  #why-bolosite .trust-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #why-bolosite .trust-flow>div {
    min-height: 0;
    padding: 9px 7px;
    border-radius: 13px;
    justify-content: flex-start;
    gap: 5px;
  }

  #why-bolosite .trust-flow b {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 8px;
  }

  #why-bolosite .trust-flow span {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.1;
  }

  #why-bolosite .trust-flow small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 7.5px;
    line-height: 1.25;
  }

  #why-bolosite .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  #why-bolosite .trust-grid article {
    min-height: 0;
    padding: 11px;
    border-radius: 13px;
  }

  #why-bolosite .trust-grid article>span {
    font-size: 7.5px;
    letter-spacing: .06em;
  }

  #why-bolosite .trust-grid h3 {
    margin: 5px 0 4px;
    font-size: 11.5px;
    line-height: 1.18;
  }

  #why-bolosite .trust-grid p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 9px;
    line-height: 1.35;
  }
}

@media (max-width: 370px) {
  #why-bolosite .trust-block {
    padding: 13px;
  }

  #why-bolosite .trust-flow {
    gap: 5px;
  }

  #why-bolosite .trust-flow>div,
  #why-bolosite .trust-grid article {
    padding: 8px;
  }

  #why-bolosite .trust-grid {
    gap: 6px;
  }
}

/* Trust block polish: cleaner scale and theme-aware surfaces. */
#why-bolosite .trust-block {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .11);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .22), transparent 36%),
    linear-gradient(315deg, rgba(6, 182, 212, .14), transparent 34%),
    #0F172A;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
}

#why-bolosite .trust-heading h2 {
  max-width: 520px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

#why-bolosite .trust-heading p {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.65;
}

#why-bolosite .trust-console,
#why-bolosite .trust-flow>div,
#why-bolosite .trust-grid article {
  backdrop-filter: blur(14px);
}

#why-bolosite .trust-console {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#why-bolosite .trust-grid article,
#why-bolosite .trust-flow>div {
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

#why-bolosite .trust-grid article:hover,
#why-bolosite .trust-flow>div:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .35);
  background: rgba(255, 255, 255, .075);
}

#why-bolosite .trust-grid h3 {
  color: #F8FAFC;
  font-size: 16px;
}

#why-bolosite .trust-grid p,
#why-bolosite .trust-flow small,
#why-bolosite .trust-heading p {
  color: #CBD5E1;
}

#why-bolosite .trust-grid article>span,
#why-bolosite .trust-console-top span,
#why-bolosite .trust-console-foot span {
  color: #93C5FD;
}

html:not([data-theme="dark"]) #why-bolosite .trust-block {
  color: #0F172A;
  border-color: rgba(37, 99, 235, .13);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .13), transparent 34%),
    linear-gradient(315deg, rgba(6, 182, 212, .12), transparent 34%),
    linear-gradient(180deg, #FFFFFF, #F8FAFC);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) #why-bolosite .trust-console,
html:not([data-theme="dark"]) #why-bolosite .trust-flow>div,
html:not([data-theme="dark"]) #why-bolosite .trust-grid article {
  border-color: rgba(203, 213, 225, .85);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

html:not([data-theme="dark"]) #why-bolosite .trust-grid article:hover,
html:not([data-theme="dark"]) #why-bolosite .trust-flow>div:hover {
  border-color: rgba(37, 99, 235, .24);
  background: #FFFFFF;
}

html:not([data-theme="dark"]) #why-bolosite .trust-heading p,
html:not([data-theme="dark"]) #why-bolosite .trust-grid p,
html:not([data-theme="dark"]) #why-bolosite .trust-flow small {
  color: #475569;
}

html:not([data-theme="dark"]) #why-bolosite .trust-grid h3,
html:not([data-theme="dark"]) #why-bolosite .trust-flow span,
html:not([data-theme="dark"]) #why-bolosite .trust-console-top strong,
html:not([data-theme="dark"]) #why-bolosite .trust-toggle-row span {
  color: #0F172A;
}

html:not([data-theme="dark"]) #why-bolosite .trust-grid article>span,
html:not([data-theme="dark"]) #why-bolosite .trust-console-top span,
html:not([data-theme="dark"]) #why-bolosite .trust-console-foot span {
  color: #2563EB;
}

@media (max-width: 760px) {
  #why-bolosite .trust-heading h2 {
    font-size: clamp(28px, 8.6vw, 36px);
    line-height: 1.03;
  }

  #why-bolosite .trust-heading p {
    font-size: 13px;
    line-height: 1.55;
  }

  #why-bolosite .trust-grid h3 {
    font-size: 12.5px;
  }

  #why-bolosite .trust-grid p {
    font-size: 9.5px;
  }
}

/* Portal workspace card: theme-aware dashboard surface. */
#portal-control .sales-card {
  isolation: isolate;
  color: #0F172A;
  border-color: rgba(37, 99, 235, .13);
  background:
    radial-gradient(circle at 88% 10%, rgba(6, 182, 212, .16), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(124, 58, 237, .1), transparent 30%),
    linear-gradient(180deg, #FFFFFF, #F8FAFC);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

#portal-control .sales-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(226, 232, 240, .68);
  border-radius: calc(var(--radius) - 2px);
  opacity: .82;
}

#portal-control .sales-card .bento-copy>span {
  color: #2563EB;
}

#portal-control .sales-card .bento-copy h3 {
  color: #0F172A;
}

#portal-control .sales-card .bento-copy p {
  color: #475569;
}

#portal-control .sales-ui {
  min-height: 190px;
  border-color: rgba(203, 213, 225, .78);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .88), rgba(236, 254, 255, .74)),
    rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 18px 42px rgba(15, 23, 42, .07);
}

#portal-control .sales-ui::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 84px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #2563EB 0 65%, rgba(148, 163, 184, .35) 65% 100%);
  box-shadow: 0 10px 20px rgba(37, 99, 235, .14);
}

#portal-control .intent-pill {
  position: relative;
  z-index: 2;
  align-items: center;
  color: #475569;
  border-color: rgba(37, 99, 235, .18);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
}

#portal-control .intent-pill b {
  padding: 4px 9px;
  border-radius: 999px;
  color: #075985;
  background: rgba(6, 182, 212, .14);
}

#portal-control .recommend-card {
  z-index: 2;
  color: #FFFFFF;
  background:
    linear-gradient(135deg, #2563EB, #06B6D4 58%, #7C3AED);
  box-shadow: 0 20px 42px rgba(37, 99, 235, .24);
}

#portal-control .recommend-card small,
#portal-control .recommend-card span {
  color: rgba(255, 255, 255, .82);
}

html[data-theme="dark"] #portal-control .sales-card {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .2);
  background:
    radial-gradient(circle at 88% 10%, rgba(34, 211, 238, .18), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(124, 58, 237, .15), transparent 32%),
    linear-gradient(145deg, #111827, #0B1120);
  box-shadow: 0 26px 72px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] #portal-control .sales-card::before {
  border-color: rgba(148, 163, 184, .13);
}

html[data-theme="dark"] #portal-control .sales-card .bento-copy>span {
  color: #22D3EE;
}

html[data-theme="dark"] #portal-control .sales-card .bento-copy h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] #portal-control .sales-card .bento-copy p {
  color: #CBD5E1;
}

html[data-theme="dark"] #portal-control .sales-ui {
  border-color: rgba(96, 165, 250, .18);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(8, 47, 73, .68)),
    rgba(15, 23, 42, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 48px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] #portal-control .sales-ui::before {
  background:
    linear-gradient(90deg, #22D3EE 0 65%, rgba(71, 85, 105, .72) 65% 100%);
  box-shadow: 0 10px 20px rgba(34, 211, 238, .14);
}

html[data-theme="dark"] #portal-control .intent-pill {
  color: #CBD5E1;
  border-color: rgba(34, 211, 238, .18);
  background: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] #portal-control .intent-pill b {
  color: #A5F3FC;
  background: rgba(34, 211, 238, .13);
}

html[data-theme="dark"] #portal-control .recommend-card {
  background:
    linear-gradient(135deg, #1D4ED8, #0891B2 58%, #6D28D9);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .32);
}

@media (max-width: 760px) {
  #portal-control .sales-card {
    min-height: 380px;
  }

  #portal-control .sales-card::before {
    inset: 12px;
  }

  #portal-control .sales-ui {
    min-height: 168px;
    height: auto;
    margin-top: 20px;
    padding: 16px;
  }

  #portal-control .sales-ui::before {
    left: 16px;
    right: 16px;
    top: 72px;
  }

  #portal-control .recommend-card {
    left: 26px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
    transform: rotate(-1deg);
  }
}

/* Final mobile nav repair: use the original laptop guide buttons, not duplicate pills. */
@media (max-width: 760px) {
  .nav-shell {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nav-shell>.brand {
    flex: 0 0 42px;
    max-width: 42px;
    min-width: 42px;
  }

  .nav-shell>.brand span {
    display: none;
  }

  .desktop-nav {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 5px;
  }

  .desktop-nav a,
  .desktop-nav>button:not(.nav-guide-trigger) {
    display: none !important;
  }

  .desktop-nav .nav-guide-trigger {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    font-size: 10.5px;
    line-height: 1;
  }

  .desktop-nav .nav-guide-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-nav .nav-guide-trigger i {
    flex: 0 0 auto;
    padding: 4px 5px;
    border-radius: 7px;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .nav-guide-pills {
    display: none !important;
  }

  .nav-actions {
    flex: 0 0 40px;
    min-width: 40px;
    gap: 0;
  }

  .nav-actions>.theme-toggle,
  .nav-actions>.auth-link,
  .nav-actions>.nav-signup,
  .nav-actions>.profile-wrap {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 390px) {
  .desktop-nav {
    gap: 4px;
  }

  .desktop-nav .nav-guide-trigger {
    height: 35px;
    padding: 0 5px;
    gap: 4px;
    font-size: 9.5px;
  }

  .desktop-nav .nav-guide-trigger i {
    padding: 3px 4px;
    font-size: 6.5px;
    letter-spacing: .05em;
  }
}

/* Three-line hamburger while keeping the same open/close X motion. */
.menu-toggle span:nth-child(1) {
  transform-origin: center;
}

.menu-toggle span:nth-child(2) {
  transform-origin: center;
}

.menu-toggle span:nth-child(3) {
  transform-origin: center;
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(.35);
}

@media (max-width: 760px) {
  .menu-toggle span {
    left: 50%;
    margin: 0;
    transition: transform .25s, opacity .18s;
    transform: translateX(-50%);
  }

  .menu-toggle span:nth-child(1) {
    top: 12px;
  }

  .menu-toggle span:nth-child(2) {
    top: 19px;
  }

  .menu-toggle span:nth-child(3) {
    top: 26px;
  }

  .menu-toggle.active span:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-45deg);
  }
}

/* Mobile menu panel polish: blur surface and theme-aware buttons. */
@media (max-width: 760px) {
  .mobile-nav {
    border: 1px solid rgba(226, 232, 240, .82);
    background: rgba(248, 250, 252, .78);
    box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }

  .mobile-guide-trigger,
  .mobile-nav>a:not(.mobile-portal),
  .mobile-theme-toggle,
  .mobile-auth button,
  .mobile-portal {
    border-color: rgba(203, 213, 225, .78) !important;
    background: rgba(255, 255, 255, .76) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-guide-trigger.user {
    background: linear-gradient(135deg, rgba(239, 246, 255, .88), rgba(255, 255, 255, .76)) !important;
  }

  .mobile-guide-trigger.client {
    background: linear-gradient(135deg, rgba(236, 254, 255, .88), rgba(255, 255, 255, .76)) !important;
  }

  .mobile-guide-trigger i,
  .mobile-nav>a:not(.mobile-portal)>span {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }

  .mobile-nav .mobile-theme-toggle,
  .mobile-nav .mobile-auth button {
    color: #0F172A;
    background: rgba(241, 245, 249, .82) !important;
  }

  .mobile-nav .mobile-portal {
    color: #FFFFFF;
    border-color: rgba(37, 99, 235, .22) !important;
    background: linear-gradient(135deg, #2563EB, #06B6D4 56%, #7C3AED) !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .24);
  }
}

html[data-theme="dark"] .mobile-nav {
  border-color: rgba(51, 65, 85, .82);
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .mobile-guide-trigger,
html[data-theme="dark"] .mobile-nav>a:not(.mobile-portal),
html[data-theme="dark"] .mobile-theme-toggle,
html[data-theme="dark"] .mobile-auth button {
  color: #F8FAFC;
  border-color: rgba(71, 85, 105, .88) !important;
  background: rgba(30, 41, 59, .7) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .mobile-guide-trigger.user {
  background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(30, 41, 59, .72)) !important;
}

html[data-theme="dark"] .mobile-guide-trigger.client {
  background: linear-gradient(135deg, rgba(6, 182, 212, .18), rgba(30, 41, 59, .72)) !important;
}

html[data-theme="dark"] .mobile-guide-trigger small {
  color: #94A3B8;
}

html[data-theme="dark"] .mobile-nav .mobile-portal {
  color: #FFFFFF;
  border-color: rgba(34, 211, 238, .24) !important;
  background: linear-gradient(135deg, #1D4ED8, #0891B2 56%, #6D28D9) !important;
}

/* Auth modal polish: stop bottom overflow and keep create account clean on every size. */
#authModal .modal-panel {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#authModal .auth-brand {
  margin-bottom: 16px;
}

#authModal .auth-tabs {
  margin-bottom: 18px;
}

#authModal .auth-form {
  min-width: 0;
}

#authModal .auth-form h2 {
  margin: 10px 0 16px;
  font-size: clamp(27px, 3vw, 34px);
}

#authModal .field-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#authModal .auth-form>label,
#authModal .auth-form .field-row label {
  min-width: 0;
  margin-bottom: 10px;
}

#authModal input,
#authModal select,
#authModal textarea {
  min-width: 0;
}

#signupForm .role-selector {
  margin-bottom: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#signupForm .role-selector span {
  min-height: 58px;
  padding: 10px;
}

#signupForm .button.full {
  min-height: 48px;
}

#signupForm .auth-switch {
  margin-top: 10px;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #authModal .modal-panel {
    width: min(640px, calc(100vw - 44px));
    padding: 26px;
  }
}

@media (max-width: 760px) {
  #authModal {
    align-items: center;
  }

  #authModal .modal-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 20px 16px;
    border-radius: 18px;
  }

  #authModal .auth-brand {
    margin-bottom: 12px;
  }

  #authModal .auth-tabs {
    margin-bottom: 14px;
  }

  #authModal .auth-form h2 {
    padding-right: 32px;
    margin: 8px 0 12px;
    font-size: 25px;
    line-height: 1.12;
  }

  #authModal .field-row,
  #signupForm .role-selector {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #signupForm .role-selector span {
    min-height: 52px;
  }

  #authModal .auth-form>label,
  #authModal .auth-form .field-row label {
    gap: 5px;
    margin-bottom: 8px;
  }
}

/* User/client guide popup index: moving, readable and theme-aware. */
.journey-modal .modal-panel {
  overflow-x: hidden;
}

.journey-modal .journey-index {
  position: relative;
  padding: 12px 0;
  display: block;
  overflow: hidden;
  border-top: 1px solid rgba(226, 232, 240, .82);
  border-bottom: 1px solid rgba(226, 232, 240, .82);
  background:
    linear-gradient(90deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.journey-modal .journey-index-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  align-items: center;
  animation: journey-index-scroll 22s linear infinite;
  will-change: transform;
}

.journey-modal .journey-index-set {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}

.journey-modal .journey-index:hover .journey-index-track {
  animation-play-state: paused;
}

.journey-modal .journey-index span {
  min-width: 112px;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 999px;
  color: #1E293B;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.journey-modal .journey-index span:not(:last-child) {
  border-right: 1px solid rgba(203, 213, 225, .9);
}

.user-journey-modal .journey-index span {
  border-color: rgba(37, 99, 235, .18);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .88));
}

.client-journey-modal .journey-index span {
  border-color: rgba(6, 182, 212, .2);
  background:
    linear-gradient(135deg, rgba(236, 254, 255, .95), rgba(255, 255, 255, .88));
}

@keyframes journey-index-scroll {
  to {
    transform: translateX(-50%);
  }
}

html[data-theme="dark"] .journey-modal .journey-index {
  border-color: rgba(51, 65, 85, .82);
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .9), rgba(30, 41, 59, .88), rgba(15, 23, 42, .9));
}

html[data-theme="dark"] .journey-modal .journey-index span {
  color: #F8FAFC;
  border-color: rgba(71, 85, 105, .88);
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .user-journey-modal .journey-index span {
  border-color: rgba(96, 165, 250, .28);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(15, 23, 42, .74));
}

html[data-theme="dark"] .client-journey-modal .journey-index span {
  border-color: rgba(34, 211, 238, .26);
  background:
    linear-gradient(135deg, rgba(6, 182, 212, .16), rgba(15, 23, 42, .74));
}

@media (min-width: 761px) {
  .journey-modal .journey-index {
    margin-top: -1px;
  }

  .journey-modal .journey-index-track {
    animation-duration: 26s;
  }
}

@media (max-width: 760px) {
  .journey-modal .modal-panel {
    border-radius: 18px;
  }

  .journey-modal .journey-index {
    padding: 10px 0;
  }

  .journey-modal .journey-index-track {
    animation-duration: 18s;
  }

  .journey-modal .journey-index-set {
    gap: 8px;
    padding-right: 8px;
  }

  .journey-modal .journey-index span {
    min-width: 98px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 9px;
    letter-spacing: .055em;
  }

  .journey-modal .journey-hero {
    padding-bottom: 30px;
  }
}

@media (max-width: 420px) {
  .journey-modal .journey-index span {
    min-width: 90px;
    min-height: 30px;
    font-size: 8.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-modal .journey-index-track {
    animation: none;
    transform: none;
  }
}

/* Mobile hero breathing room: keep actions and proof chips away from screen edges. */
@media (max-width: 760px) {

  #top .hero-actions,
  #top .hero-paths,
  #top .hero-proof {
    width: calc(100% - 24px);
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  #top .hero-actions {
    justify-content: center;
  }

  #top .hero-actions .button,
  #top .hero-paths a,
  #top .hero-proof span {
    min-width: 0;
  }

  #top .hero-proof {
    justify-content: center;
    gap: 8px;
  }

  #top .hero-proof span {
    padding-inline: 10px;
  }
}

@media (max-width: 390px) {

  #top .hero-actions,
  #top .hero-paths,
  #top .hero-proof {
    width: calc(100% - 18px);
  }
}

/* Footer feedback placement and floating back-to-top action. */
.footer-feedback-cta {
  width: min(100%, 320px);
  min-height: 46px;
  margin: 16px auto 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 999px;
  color: #0F172A;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  font-weight: 800;
  cursor: pointer;
}

.footer-feedback-cta span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFFFFF;
  background: var(--brand-gradient);
}

html[data-theme="dark"] .footer-feedback-cta {
  color: #F8FAFC;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .72);
}

@media (max-width: 760px) {
  .footer-feedback-cta {
    width: 100%;
    margin-top: 12px;
  }

}

/* Hero voice mic: keep the lower half-ring centered under the mic body. */
.voice-trigger .mic-dot::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ============================================================
   BOLOSITE — VOICE + TEXT INTERACTION SECTION
============================================================ */
.interaction-section {
  position: relative;
  overflow: hidden;
  color: #f8fafc;
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .26), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(6, 182, 212, .22), transparent 30%),
    linear-gradient(135deg, #07111f 0%, #0f172a 52%, #111827 100%);
}

.interaction-bg-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.interaction-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 72px;
}

.interaction-copy h2 {
  max-width: 710px;
  margin: 16px 0 18px;
  font-family: var(--font-head);
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.05;
  letter-spacing: -.06em;
}

.interaction-copy>p {
  max-width: 650px;
  margin-bottom: 30px;
  color: rgba(226, 232, 240, .78);
  font-size: 17px;
  line-height: 1.75;
}

.interaction-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.interaction-choice {
  min-height: 245px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px);
}

.interaction-choice-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
}

.voice-choice .interaction-choice-icon {
  color: #67e8f9;
  box-shadow: 0 0 42px rgba(6, 182, 212, .22);
}

.text-choice .interaction-choice-icon {
  color: #c4b5fd;
  box-shadow: 0 0 42px rgba(124, 58, 237, .24);
}

.mic-symbol {
  width: 15px;
  height: 24px;
  display: block;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
}

.mic-symbol::before {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  bottom: -8px;
  height: 12px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.mic-symbol::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}

.chat-symbol {
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  position: relative;
}

.chat-symbol::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -6px;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: #111827;
  transform: rotate(-45deg);
}

.interaction-choice>span {
  color: rgba(226, 232, 240, .6);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.interaction-choice h3 {
  margin: 8px 0 9px;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.interaction-choice p {
  margin: 0;
  color: rgba(226, 232, 240, .7);
  font-size: 14px;
  line-height: 1.65;
}

.interaction-note {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}

.interaction-note strong {
  color: #67e8f9;
  font-size: 13px;
}

.interaction-note p {
  margin: 6px 0 0;
  color: rgba(226, 232, 240, .72);
  font-size: 13px;
  line-height: 1.65;
}

.interaction-demo {
  position: relative;
}

.interaction-device {
  width: min(520px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .32), 0 0 80px rgba(6, 182, 212, .12);
  backdrop-filter: blur(16px);
}

.interaction-device-top {
  min-height: 50px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}

.interaction-device-top>span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .36);
}

.interaction-device-top b {
  margin-left: auto;
  color: rgba(226, 232, 240, .64);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.interaction-screen {
  padding: 22px;
  background:
    radial-gradient(circle at 50% 9%, rgba(6, 182, 212, .14), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(3, 7, 18, .97));
}

.interaction-agent-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.interaction-agent-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 14px;
  background: var(--brand-gradient);
  box-shadow: 0 0 38px rgba(6, 182, 212, .25);
}

.interaction-agent-logo i {
  width: 3px;
  height: 12px;
  border-radius: 4px;
  background: #fff;
  animation: interaction-wave 1s ease-in-out infinite alternate;
}

.interaction-agent-logo i:nth-child(2) {
  height: 22px;
  animation-delay: -.25s;
}

.interaction-agent-logo i:nth-child(3) {
  height: 16px;
  animation-delay: -.5s;
}

@keyframes interaction-wave {
  to {
    transform: scaleY(.48);
    opacity: .7;
  }
}

.interaction-agent-head>div:nth-child(2) {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.interaction-agent-head strong {
  font-size: 14px;
}

.interaction-agent-head small {
  color: rgba(226, 232, 240, .55);
  font-size: 10px;
}

.interaction-agent-head em {
  margin-left: auto;
  padding: 6px 8px;
  border-radius: 999px;
  color: #67e8f9;
  background: rgba(6, 182, 212, .12);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.interaction-mode-tabs {
  margin: 22px 0 18px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.interaction-mode-tabs button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  color: rgba(226, 232, 240, .66);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}

.interaction-mode-tabs button:hover {
  transform: translateY(-1px);
}

.interaction-mode-tabs button.active {
  color: #020617;
  background: #67e8f9;
  box-shadow: 0 12px 35px rgba(6, 182, 212, .22);
}

.mini-mic {
  width: 10px;
  height: 15px;
  border: 1.7px solid currentColor;
  border-radius: 8px;
}

.mini-chat {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1.7px solid currentColor;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 900;
}

.interaction-live-visual {
  min-height: 155px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  position: relative;
  overflow: hidden;
}

.voice-rings {
  width: 115px;
  height: 115px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: relative;
}

.voice-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(103, 232, 249, .32);
  border-radius: inherit;
  animation: voice-ring 2.1s ease-out infinite;
}

.voice-rings i:nth-child(2) {
  inset: 18px;
  animation-delay: -.7s;
}

.voice-rings i:nth-child(3) {
  inset: 36px;
  animation-delay: -1.4s;
  background: radial-gradient(circle, #67e8f9, #2563eb);
  box-shadow: 0 0 40px rgba(6, 182, 212, .45);
}

@keyframes voice-ring {
  0% {
    transform: scale(.72);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

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

.text-cursor-card {
  position: absolute;
  width: min(330px, calc(100% - 32px));
  padding: 17px 18px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(196, 181, 253, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 22px 70px rgba(124, 58, 237, .15);
}

.text-cursor-card span {
  color: rgba(248, 250, 252, .9);
  font-size: 13px;
  line-height: 1.45;
}

.text-cursor-card i {
  width: 2px;
  height: 22px;
  flex: 0 0 2px;
  border-radius: 2px;
  background: #c4b5fd;
  animation: text-blink .82s steps(1) infinite;
}

@keyframes text-blink {
  50% {
    opacity: 0;
  }
}

.interaction-screen[data-interaction-state="text"] .voice-rings {
  display: none;
}

.interaction-screen[data-interaction-state="text"] .text-cursor-card {
  display: flex;
}

.interaction-screen[data-interaction-state="text"] .interaction-mode-tabs button.active {
  background: #c4b5fd;
  box-shadow: 0 12px 35px rgba(124, 58, 237, .24);
}

.interaction-conversation {
  padding-top: 18px;
}

.interaction-user-bubble,
.interaction-bolo-bubble p {
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.55;
}

.interaction-user-bubble {
  max-width: 76%;
  margin-left: auto;
  padding: 11px 13px;
  color: #020617;
  background: #e0f2fe;
  border-bottom-right-radius: 5px;
}

.interaction-bolo-bubble {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.interaction-bolo-bubble span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #020617;
  background: #67e8f9;
  font-size: 11px;
  font-weight: 900;
}

.interaction-bolo-bubble p {
  margin: 0;
  padding: 11px 13px;
  color: rgba(248, 250, 252, .88);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom-left-radius: 5px;
}

.interaction-action-row {
  width: max-content;
  max-width: 100%;
  margin: 13px 0 0 37px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 12px;
  color: #bbf7d0;
  background: rgba(16, 185, 129, .1);
}

.interaction-action-row span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #022c22;
  background: #86efac;
  font-size: 10px;
  font-weight: 900;
}

.interaction-action-row p {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
}

.interaction-input-preview {
  min-height: 46px;
  margin-top: 18px;
  padding: 0 7px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  background: rgba(255, 255, 255, .06);
}

.interaction-input-preview span {
  flex: 1;
  color: rgba(226, 232, 240, .58);
  font-size: 11px;
}

.interaction-input-preview button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  color: #020617;
  background: #67e8f9;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.interaction-screen[data-interaction-state="text"] .interaction-input-preview button,
.interaction-screen[data-interaction-state="text"] .interaction-bolo-bubble span {
  background: #c4b5fd;
}

.interaction-impact-row {
  width: min(470px, calc(100% - 30px));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.interaction-impact-row span {
  padding: 11px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: rgba(226, 232, 240, .68);
  background: rgba(255, 255, 255, .06);
  text-align: center;
  font-size: 11px;
}

.interaction-impact-row b {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
}

html:not([data-theme="dark"]) .interaction-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .12), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(6, 182, 212, .16), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef6ff 52%, #f7f5ff 100%);
}

html:not([data-theme="dark"]) .interaction-bg-grid {
  opacity: .36;
  background-image:
    linear-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .07) 1px, transparent 1px);
}

html:not([data-theme="dark"]) .interaction-section .section-kicker.light {
  color: #2563eb;
}

html:not([data-theme="dark"]) .interaction-copy>p,
html:not([data-theme="dark"]) .interaction-choice p,
html:not([data-theme="dark"]) .interaction-note p,
html:not([data-theme="dark"]) .interaction-agent-head small,
html:not([data-theme="dark"]) .interaction-device-top b,
html:not([data-theme="dark"]) .interaction-input-preview span,
html:not([data-theme="dark"]) .interaction-impact-row span {
  color: var(--muted);
}

html:not([data-theme="dark"]) .interaction-choice,
html:not([data-theme="dark"]) .interaction-note,
html:not([data-theme="dark"]) .interaction-device,
html:not([data-theme="dark"]) .interaction-live-visual,
html:not([data-theme="dark"]) .interaction-input-preview,
html:not([data-theme="dark"]) .interaction-impact-row span {
  border-color: rgba(15, 23, 42, .1);
  background: rgba(255, 255, 255, .76);
}

html:not([data-theme="dark"]) .interaction-choice {
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .interaction-choice-icon,
html:not([data-theme="dark"]) .interaction-device-top,
html:not([data-theme="dark"]) .interaction-mode-tabs {
  border-color: rgba(15, 23, 42, .09);
  background: rgba(15, 23, 42, .04);
}

html:not([data-theme="dark"]) .interaction-choice>span {
  color: #64748b;
}

html:not([data-theme="dark"]) .interaction-choice h3,
html:not([data-theme="dark"]) .interaction-agent-head strong,
html:not([data-theme="dark"]) .interaction-impact-row b {
  color: var(--ink);
}

html:not([data-theme="dark"]) .chat-symbol::after {
  background: #fff;
}

html:not([data-theme="dark"]) .interaction-note strong {
  color: #2563eb;
}

html:not([data-theme="dark"]) .interaction-device {
  box-shadow: 0 40px 110px rgba(15, 23, 42, .14), 0 0 80px rgba(6, 182, 212, .12);
}

html:not([data-theme="dark"]) .interaction-device-top>span {
  background: rgba(15, 23, 42, .26);
}

html:not([data-theme="dark"]) .interaction-screen {
  background:
    radial-gradient(circle at 50% 9%, rgba(6, 182, 212, .13), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .98));
}

html:not([data-theme="dark"]) .interaction-mode-tabs button {
  color: #64748b;
}

html:not([data-theme="dark"]) .interaction-live-visual {
  background: rgba(248, 250, 252, .86);
}

html:not([data-theme="dark"]) .text-cursor-card {
  background: rgba(255, 255, 255, .92);
}

html:not([data-theme="dark"]) .text-cursor-card span,
html:not([data-theme="dark"]) .interaction-bolo-bubble p {
  color: var(--ink);
}

html:not([data-theme="dark"]) .interaction-bolo-bubble p {
  border-color: rgba(15, 23, 42, .09);
  background: rgba(255, 255, 255, .9);
}

html:not([data-theme="dark"]) .interaction-action-row {
  color: #047857;
  background: rgba(16, 185, 129, .1);
}

@media (max-width: 980px) {
  .interaction-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .interaction-copy {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .interaction-choice-grid {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
  }
}

@media (max-width: 620px) {

  .interaction-choice-grid,
  .interaction-impact-row {
    grid-template-columns: 1fr;
  }

  .interaction-copy h2 {
    font-size: 38px;
  }

  .interaction-copy>p {
    font-size: 15px;
  }

  .interaction-choice {
    min-height: auto;
  }

  .interaction-device {
    border-radius: 22px;
  }

  .interaction-screen {
    padding: 16px;
  }

  .interaction-user-bubble {
    max-width: 88%;
  }

  .interaction-action-row {
    width: 100%;
    margin-left: 0;
  }
}


/* ============================================================
   AUDIENCE BENEFIT HUB - users + owners, light/dark ready
============================================================ */
.audience-benefit-hub {
  margin-top: 34px;
  padding: 26px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(37, 99, 235, .08), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .10), transparent 34%),
    rgba(255, 255, 255, .70);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}

.audience-benefit-head {
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}

.audience-benefit-head h3 {
  margin: 13px 0 10px;
  font-family: var(--font-head);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.audience-benefit-head p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.audience-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.audience-benefit-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 240px 1fr;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.audience-benefit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, .24);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .12);
}

.audience-card-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.audience-owner-card .audience-card-visual {
  background: linear-gradient(135deg, #f0fdf4, #eff6ff);
}

.audience-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.audience-live-window {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  min-height: 165px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .13);
}

.audience-window-top {
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 252, .85);
}

.audience-window-top span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #CBD5E1;
}

.audience-window-top b {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.audience-chat-preview {
  padding: 17px;
}

.chat-bubble {
  max-width: 82%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.45;
}

.chat-bubble.user {
  margin-left: auto;
  color: #0F172A;
  background: #DBEAFE;
  border-bottom-right-radius: 4px;
}

.chat-bubble.bolo {
  margin-top: 10px;
  color: #0F172A;
  background: #ECFEFF;
  border: 1px solid rgba(6, 182, 212, .20);
  border-bottom-left-radius: 4px;
}

.mode-pills {
  margin-top: 13px;
  display: flex;
  gap: 8px;
}

.mode-pills span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #075985;
  background: rgba(14, 165, 233, .10);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.owner-agent-preview {
  padding: 17px;
  display: grid;
  gap: 9px;
}

.owner-agent-preview div {
  padding: 12px 13px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(16, 185, 129, .16);
  border-radius: 12px;
  background: rgba(236, 253, 245, .78);
}

.owner-agent-preview small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.owner-agent-preview strong {
  font-size: 11px;
  text-align: right;
}

.audience-benefit-copy {
  padding: 28px;
}

.audience-label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #1D4ED8;
  background: rgba(37, 99, 235, .10);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.audience-owner-card .audience-label {
  color: #047857;
  background: rgba(16, 185, 129, .11);
}

.audience-benefit-copy h4 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.audience-benefit-copy>p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.68;
}

.mini-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.mini-feature-grid span {
  min-height: 42px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  background: rgba(248, 250, 252, .72);
  font-size: 11px;
  font-weight: 800;
}

.mini-feature-grid span::before {
  content: "✓";
  margin-right: 7px;
  color: var(--success);
  font-weight: 900;
}

.audience-use-steps {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .82));
}

.audience-use-steps>strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.audience-use-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.audience-use-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.audience-use-steps li span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--white);
  background: var(--brand-gradient);
  font-size: 10px;
  font-weight: 900;
}

.audience-card-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.audience-small-link {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

html[data-theme="dark"] .audience-benefit-hub {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 12% 12%, rgba(37, 99, 235, .16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .13), transparent 34%),
    rgba(15, 23, 42, .38);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .audience-benefit-card,
html[data-theme="dark"] .audience-live-window {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .86);
}

html[data-theme="dark"] .audience-card-visual {
  background: linear-gradient(135deg, rgba(30, 64, 175, .30), rgba(8, 47, 73, .38));
}

html[data-theme="dark"] .audience-owner-card .audience-card-visual {
  background: linear-gradient(135deg, rgba(6, 78, 59, .32), rgba(30, 64, 175, .28));
}

html[data-theme="dark"] .audience-window-top,
html[data-theme="dark"] .audience-use-steps,
html[data-theme="dark"] .mini-feature-grid span {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .chat-bubble.user {
  color: #DBEAFE;
  background: rgba(37, 99, 235, .18);
}

html[data-theme="dark"] .chat-bubble.bolo {
  color: #CFFAFE;
  border-color: rgba(6, 182, 212, .24);
  background: rgba(6, 182, 212, .10);
}

html[data-theme="dark"] .owner-agent-preview div {
  border-color: rgba(16, 185, 129, .18);
  background: rgba(16, 185, 129, .08);
}

html[data-theme="dark"] .audience-benefit-copy>p,
html[data-theme="dark"] .audience-benefit-head p,
html[data-theme="dark"] .audience-use-steps li,
html[data-theme="dark"] .audience-small-link {
  color: #AAB6C5;
}

html[data-theme="dark"] .mini-feature-grid span {
  color: #E5EDF7;
}

@media (max-width: 900px) {
  .audience-benefit-grid {
    grid-template-columns: 1fr;
  }

  .audience-benefit-card {
    grid-template-rows: 220px 1fr;
  }
}

@media (max-width: 620px) {
  .audience-benefit-hub {
    padding: 16px;
    border-radius: 22px;
  }

  .audience-benefit-head {
    margin-bottom: 18px;
  }

  .audience-benefit-card {
    grid-template-rows: 200px 1fr;
    border-radius: 20px;
  }

  .audience-benefit-copy {
    padding: 22px;
  }

  .mini-feature-grid {
    grid-template-columns: 1fr;
  }

  .audience-card-actions .button {
    width: 100%;
  }

  .audience-small-link {
    width: 100%;
    text-align: center;
  }
}

.thinking-flow-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, .045), transparent 34%),
    var(--paper);
}

.thinking-flow-section .section-heading {
  max-width: 850px;
}

.thinking-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .88fr) minmax(430px, 1.9fr) minmax(210px, .88fr);
  align-items: stretch;
  gap: 18px;
}

.thinking-flow-panel,
.flow-step {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .075);
}

.thinking-flow-panel {
  min-height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.thinking-flow-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand-gradient);
}

.flow-panel-label {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #1D4ED8;
  background: rgba(37, 99, 235, .09);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.thinking-flow-panel h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: 0;
}

.thinking-flow-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

.intent-bubbles,
.outcome-stack {
  display: grid;
  gap: 9px;
}

.intent-bubbles span,
.outcome-stack span {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, .15);
  border-radius: 8px;
  color: #1E3A8A;
  background: rgba(37, 99, 235, .055);
  font-size: 13px;
  font-weight: 800;
}

.intent-bubbles span::after {
  content: "→";
  color: #06B6D4;
}

.outcome-stack span {
  color: #065F46;
  border-color: rgba(16, 185, 129, .18);
  background: rgba(16, 185, 129, .07);
}

.outcome-stack b {
  color: #047857;
}

.thinking-flow-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.thinking-flow-path::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  top: 46px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .16), rgba(6, 182, 212, .76), rgba(124, 58, 237, .18));
  background-size: 190% 100%;
  animation: thinking-flow-line 3.2s ease-in-out infinite;
}

.flow-step {
  z-index: 1;
  min-height: 292px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.flow-step b {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 50%;
  color: var(--white);
  background: var(--brand-gradient);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .20);
  font-size: 12px;
  font-weight: 900;
}

.flow-step span {
  margin-bottom: 10px;
  color: #2563EB;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.flow-step h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: 0;
}

.flow-step p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.flow-step::after {
  content: "→";
  position: absolute;
  top: 34px;
  right: -13px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0E7490;
  background: #ECFEFF;
  box-shadow: 0 8px 20px rgba(8, 145, 178, .15);
  font-size: 14px;
  font-weight: 900;
}

.flow-step:last-child::after {
  content: "✓";
  color: #047857;
  background: #ECFDF5;
}

.thinking-flow-proof {
  width: min(820px, 100%);
  margin: 22px auto 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .70);
}

.thinking-flow-proof span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

.thinking-flow-proof b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.thinking-flow-proof small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.thinking-flow-proof i {
  color: #06B6D4;
  font-style: normal;
  font-weight: 900;
}

html[data-theme="dark"] .thinking-flow-section {
  background:
    linear-gradient(180deg, rgba(6, 182, 212, .07), transparent 34%),
    var(--paper);
}

html[data-theme="dark"] .thinking-flow-panel,
html[data-theme="dark"] .flow-step,
html[data-theme="dark"] .thinking-flow-proof {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .flow-panel-label,
html[data-theme="dark"] .intent-bubbles span {
  color: #BFDBFE;
  border-color: rgba(96, 165, 250, .18);
  background: rgba(37, 99, 235, .16);
}

html[data-theme="dark"] .outcome-stack span {
  color: #A7F3D0;
  border-color: rgba(16, 185, 129, .18);
  background: rgba(16, 185, 129, .12);
}

html[data-theme="dark"] .outcome-stack b {
  color: #6EE7B7;
}

html[data-theme="dark"] .thinking-flow-panel h3,
html[data-theme="dark"] .flow-step h3,
html[data-theme="dark"] .thinking-flow-proof b {
  color: #F8FAFC;
}

html[data-theme="dark"] .thinking-flow-panel p,
html[data-theme="dark"] .flow-step p,
html[data-theme="dark"] .thinking-flow-proof small {
  color: #AAB6C5;
}

html[data-theme="dark"] .flow-step::after {
  color: #A5F3FC;
  background: #12343C;
}

html[data-theme="dark"] .flow-step:last-child::after {
  color: #A7F3D0;
  background: #12352D;
}

@keyframes thinking-flow-line {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@media (max-width: 1080px) {
  .thinking-flow {
    grid-template-columns: 1fr;
  }

  .thinking-flow-panel {
    min-height: auto;
  }

  .thinking-flow-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thinking-flow-path::before {
    display: none;
  }

  .flow-step {
    min-height: 230px;
  }

  .flow-step::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .thinking-flow-section {
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .thinking-flow {
    gap: 14px;
  }

  .thinking-flow-panel {
    padding: 20px;
  }

  .thinking-flow-panel h3 {
    font-size: 23px;
  }

  .thinking-flow-path {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .thinking-flow-path::before {
    display: block;
    left: 23px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, rgba(37, 99, 235, .22), rgba(6, 182, 212, .72), rgba(16, 185, 129, .22));
    animation: none;
  }

  .flow-step {
    min-height: auto;
    padding: 18px 18px 18px 66px;
  }

  .flow-step b {
    position: absolute;
    left: 14px;
    top: 18px;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 10px;
  }

  .flow-step h3 {
    font-size: 17px;
  }

  .flow-step::after,
  .flow-step:nth-child(2)::after {
    content: "↓";
    display: grid;
    top: auto;
    right: auto;
    left: 18px;
    bottom: -14px;
  }

  .flow-step:last-child::after {
    content: "✓";
  }

  .thinking-flow-proof {
    padding: 14px 16px;
    align-items: stretch;
    flex-direction: column;
  }

  .thinking-flow-proof i {
    transform: rotate(90deg);
  }
}

.thinking-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.thinking-case-card {
  position: relative;
  min-height: 380px;
  padding: 26px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)),
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, .12), transparent 28%);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.thinking-case-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand-gradient);
}

.thinking-case-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(37, 99, 235, .10);
  border-radius: 50%;
  background: rgba(37, 99, 235, .035);
}

.case-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.case-topline span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 50%;
  color: var(--white);
  background: var(--brand-gradient);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .20);
  font-size: 12px;
  font-weight: 900;
}

.case-topline b {
  min-height: 34px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 999px;
  color: #1D4ED8;
  background: rgba(37, 99, 235, .07);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.thinking-case-card h3 {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
}

.thinking-case-card p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.68;
}

.case-question-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
}

.case-question-stack span {
  min-height: 44px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, .15);
  border-radius: 8px;
  color: #0F3A8A;
  background: rgba(37, 99, 235, .055);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.case-outcome {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  padding: 14px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 8px;
  background: rgba(16, 185, 129, .075);
}

.case-outcome small {
  color: #047857;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.case-outcome strong {
  color: #064E3B;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.48;
}

.fit-case {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)),
    radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .13), transparent 28%);
}

.trust-case {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)),
    radial-gradient(circle at 92% 12%, rgba(124, 58, 237, .12), transparent 28%);
}

.action-case {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)),
    radial-gradient(circle at 92% 12%, rgba(16, 185, 129, .12), transparent 28%);
}

html[data-theme="dark"] .thinking-case-card {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .90), rgba(15, 23, 42, .72)),
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, .20), transparent 28%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .thinking-case-card h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] .thinking-case-card p {
  color: #AAB6C5;
}

html[data-theme="dark"] .case-topline b,
html[data-theme="dark"] .case-question-stack span {
  color: #BFDBFE;
  border-color: rgba(96, 165, 250, .18);
  background: rgba(37, 99, 235, .16);
}

html[data-theme="dark"] .case-outcome {
  border-color: rgba(16, 185, 129, .18);
  background: rgba(16, 185, 129, .12);
}

html[data-theme="dark"] .case-outcome small {
  color: #6EE7B7;
}

html[data-theme="dark"] .case-outcome strong {
  color: #D1FAE5;
}

@media (max-width: 900px) {
  .thinking-case-grid {
    grid-template-columns: 1fr;
  }

  .thinking-case-card {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .thinking-case-grid {
    gap: 14px;
  }

  .thinking-case-card {
    padding: 20px;
  }

  .case-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .thinking-case-card h3 {
    font-size: 22px;
  }
}

.intent-roadmap-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .10), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(6, 182, 212, .10), transparent 32%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}

.intent-roadmap-section::before {
  content: "";
  position: absolute;
  inset: 70px max(24px, calc((100vw - 1180px) / 2)) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .24), transparent);
}

.intent-roadmap-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.intent-roadmap-grid::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 45px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .18), rgba(6, 182, 212, .72), rgba(124, 58, 237, .18));
  background-size: 180% 100%;
  animation: intent-roadmap-flow 3.4s ease-in-out infinite;
}

.intent-roadmap-step {
  position: relative;
  z-index: 1;
  min-height: 246px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76));
  box-shadow: 0 22px 60px rgba(15, 23, 42, .075);
}

.intent-roadmap-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand-gradient);
  opacity: .9;
}

.intent-roadmap-step b {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .22);
  font-size: 12px;
  font-weight: 900;
}

.intent-roadmap-step span {
  margin-bottom: 10px;
  color: #2563EB;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.intent-roadmap-step h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: 0;
}

.intent-roadmap-step p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}

.intent-roadmap-summary {
  width: min(920px, 100%);
  margin: 22px auto 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .06);
}

.intent-roadmap-summary span {
  display: grid;
  gap: 2px;
  text-align: center;
}

.intent-roadmap-summary b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.intent-roadmap-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.intent-roadmap-summary i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .20), rgba(6, 182, 212, .85));
}

@keyframes intent-roadmap-flow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

html[data-theme="dark"] .intent-roadmap-section {
  background:
    radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .16), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(6, 182, 212, .14), transparent 32%),
    var(--paper);
}

html[data-theme="dark"] .intent-roadmap-step,
html[data-theme="dark"] .intent-roadmap-summary {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .intent-roadmap-step h3,
html[data-theme="dark"] .intent-roadmap-summary b {
  color: #F8FAFC;
}

html[data-theme="dark"] .intent-roadmap-step p,
html[data-theme="dark"] .intent-roadmap-summary small {
  color: #AAB6C5;
}

html[data-theme="dark"] .intent-roadmap-step span {
  color: #67E8F9;
}

@media (max-width: 980px) {
  .intent-roadmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intent-roadmap-grid::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .intent-roadmap-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .intent-roadmap-grid::before {
    display: block;
    left: 23px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, rgba(37, 99, 235, .22), rgba(6, 182, 212, .74), rgba(16, 185, 129, .22));
    animation: none;
  }

  .intent-roadmap-step {
    min-height: auto;
    padding: 18px 18px 18px 66px;
  }

  .intent-roadmap-step b {
    position: absolute;
    left: 14px;
    top: 18px;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 10px;
  }

  .intent-roadmap-step h3 {
    font-size: 17px;
  }

  .intent-roadmap-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .intent-roadmap-summary i {
    width: 2px;
    height: 18px;
    margin: 0 auto;
  }
}

.client-types-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(37, 99, 235, .08), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .08), transparent 32%),
    var(--paper-2);
}

.client-types-section .section-heading {
  position: relative;
  z-index: 1;
}

.client-type-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.client-type-card {
  position: relative;
  min-height: 330px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 20px 55px rgba(15, 23, 42, .07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.client-type-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand-gradient);
}

.client-type-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, .24);
  box-shadow: 0 30px 75px rgba(15, 23, 42, .12);
}

.client-type-card .industry-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

.client-type-card .industry-icon::before,
.client-type-card .industry-icon::after {
  content: none;
  display: none;
}

.client-type-card .industry-icon .ui-icon {
  width: 25px;
  height: 25px;
  color: #fff;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, .22));
  stroke-width: 1.9;
}

.client-type-card.saas .industry-icon {
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
  box-shadow: 0 16px 34px rgba(124, 58, 237, .22);
}

.client-type-card.education .industry-icon {
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .20);
}

.client-type-card.healthcare .industry-icon {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  box-shadow: 0 16px 34px rgba(16, 185, 129, .22);
}

.client-type-card.local .industry-icon {
  background: linear-gradient(135deg, #F59E0B, #7C3AED);
  box-shadow: 0 16px 34px rgba(245, 158, 11, .20);
}

.client-type-card.enterprise .industry-icon {
  background: linear-gradient(135deg, #0F172A, #2563EB);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .20);
}

html:not([data-theme="dark"]) .client-type-card .industry-icon {
  color: #1D4ED8 !important;
  border: 1px solid rgba(37, 99, 235, .20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(239, 246, 255, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 12px 28px rgba(37, 99, 235, .14);
}

html:not([data-theme="dark"]) .client-type-card .industry-icon .ui-icon {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1;
  filter: none;
}

html:not([data-theme="dark"]) .client-type-card.saas .industry-icon {
  color: #6D28D9 !important;
  border-color: rgba(124, 58, 237, .20);
  background: linear-gradient(180deg, #FFFFFF, #F5F3FF);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .13);
}

html:not([data-theme="dark"]) .client-type-card.education .industry-icon {
  color: #2563EB !important;
  border-color: rgba(37, 99, 235, .20);
  background: linear-gradient(180deg, #FFFFFF, #EFF6FF);
}

html:not([data-theme="dark"]) .client-type-card.healthcare .industry-icon {
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .22);
  background: linear-gradient(180deg, #FFFFFF, #ECFDF5);
  box-shadow: 0 12px 28px rgba(16, 185, 129, .13);
}

html:not([data-theme="dark"]) .client-type-card.local .industry-icon {
  color: #B45309 !important;
  border-color: rgba(245, 158, 11, .24);
  background: linear-gradient(180deg, #FFFFFF, #FFFBEB);
  box-shadow: 0 12px 28px rgba(245, 158, 11, .14);
}

html:not([data-theme="dark"]) .client-type-card.enterprise .industry-icon {
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, .20);
  background: linear-gradient(180deg, #FFFFFF, #F1F5F9);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.client-type-card>span {
  color: #2563EB;
  font-size: 11px;
  letter-spacing: .08em;
}

.client-type-card h3 {
  max-width: 360px;
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.16;
}

.client-type-card>p {
  min-height: 0;
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.62;
}

.client-type-card>div:last-child {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 8px;
  background: rgba(16, 185, 129, .065);
}

.client-type-card>div:last-child small {
  color: #047857;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.client-type-card>div:last-child strong {
  color: #064E3B;
  font-size: 12px;
  line-height: 1.38;
}

html[data-theme="dark"] .client-types-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(37, 99, 235, .16), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .14), transparent 32%),
    var(--paper);
}

html[data-theme="dark"] .client-type-card {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .80);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .client-type-card .industry-icon {
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .client-type-card .industry-icon .ui-icon {
  color: #fff;
}

html[data-theme="dark"] .client-type-card>span {
  color: #67E8F9;
}

html[data-theme="dark"] .client-type-card>div:last-child {
  border-color: rgba(16, 185, 129, .18);
  background: rgba(16, 185, 129, .12);
}

html[data-theme="dark"] .client-type-card>div:last-child small {
  color: #6EE7B7;
}

html[data-theme="dark"] .client-type-card>div:last-child strong {
  color: #D1FAE5;
}

@media (max-width: 980px) {
  .client-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .client-type-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .client-type-card {
    min-height: auto;
    padding: 22px;
  }

  .client-type-card h3 {
    font-size: 21px;
  }
}

/* Platform control room section */
.platform-control-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(37, 99, 235, .08), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .1), transparent 28%),
    linear-gradient(180deg, #FBFCFF, #F8FAFC);
}

.platform-control-section .container {
  position: relative;
  z-index: 2;
}

.platform-control-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(4px);
}

.platform-control-glow-one {
  width: 440px;
  height: 440px;
  right: -210px;
  top: 80px;
  background: radial-gradient(circle, rgba(6, 182, 212, .14), transparent 68%);
}

.platform-control-glow-two {
  width: 360px;
  height: 360px;
  left: -180px;
  bottom: 90px;
  background: radial-gradient(circle, rgba(124, 58, 237, .1), transparent 70%);
}

.platform-control-shell {
  display: grid;
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: 22px;
}

.platform-console-card,
.platform-control-card,
.platform-control-bottom {
  border: 1px solid rgba(226, 232, 240, .88);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

.platform-console-card {
  position: relative;
  min-height: 620px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 26px;
}

.platform-console-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.platform-console-card>* {
  position: relative;
  z-index: 1;
}

.platform-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.platform-console-head div {
  display: flex;
  flex-direction: column;
}

.platform-console-head span,
.platform-screen-top span,
.platform-status-stack span,
.platform-usage-card small,
.platform-control-card>span {
  color: #64748B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.platform-console-head strong {
  margin-top: 4px;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0;
}

.platform-console-head b {
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: #075985;
  background: rgba(6, 182, 212, .12);
  font-size: 10px;
}

.platform-console-head b i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #06B6D4;
  box-shadow: 0 0 0 5px rgba(6, 182, 212, .13);
  animation: pulse 1.7s infinite;
}

.platform-console-screen {
  margin: 30px 0 24px;
  padding: 20px;
  border: 1px solid rgba(203, 213, 225, .8);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 8%, rgba(37, 99, 235, .13), transparent 34%),
    linear-gradient(145deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 20px 55px rgba(15, 23, 42, .07);
}

.platform-screen-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.platform-screen-top strong {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: 0;
}

.platform-status-stack {
  margin-top: 22px;
  display: grid;
  gap: 9px;
}

.platform-status-stack div {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(226, 232, 240, .82);
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
}

.platform-status-stack b {
  padding: 5px 8px;
  border-radius: 999px;
  color: #065F46;
  background: rgba(16, 185, 129, .12);
  font-size: 10px;
}

.platform-usage-card {
  margin-top: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #06B6D4 58%, #7C3AED);
  box-shadow: 0 22px 45px rgba(37, 99, 235, .22);
}

.platform-usage-card div {
  display: flex;
  flex-direction: column;
}

.platform-usage-card small,
.platform-usage-card span {
  color: rgba(255, 255, 255, .8);
}

.platform-usage-card strong {
  margin: 4px 0 2px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.platform-usage-card span {
  font-size: 10px;
  font-weight: 700;
}

.platform-usage-card>i {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: conic-gradient(rgba(255, 255, 255, .96) 0 65%, rgba(255, 255, 255, .2) 65% 100%);
}

.platform-usage-card>i::after {
  content: "65%";
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2563EB;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}

.platform-mini-flow {
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 16px;
  background: rgba(248, 250, 252, .76);
}

.platform-mini-flow span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #334155;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.platform-mini-flow i {
  color: #94A3B8;
  font-style: normal;
  font-size: 12px;
}

.platform-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.platform-control-card {
  position: relative;
  min-height: 196px;
  padding: 22px;
  overflow: hidden;
  border-radius: 20px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.platform-control-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .12), transparent 36%);
  transition: opacity .24s ease;
}

.platform-control-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, .22);
  box-shadow: 0 28px 76px rgba(15, 23, 42, .12);
}

.platform-control-card:hover::before {
  opacity: 1;
}

.platform-control-card>* {
  position: relative;
  z-index: 1;
}

.platform-card-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #075985;
  background: rgba(6, 182, 212, .12);
  font-size: 10px;
  font-weight: 900;
}

.platform-control-card:nth-child(2n) .platform-card-icon {
  color: #4338CA;
  background: rgba(124, 58, 237, .1);
}

.platform-control-card h3 {
  margin: 8px 0;
  font-family: var(--font-head);
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: 0;
}

.platform-control-card p {
  margin: 0;
  color: #64748B;
  font-size: 13.5px;
  line-height: 1.58;
}

.platform-control-card small {
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #075985;
  background: rgba(6, 182, 212, .1);
  font-size: 10px;
  font-weight: 800;
}

.platform-control-bottom {
  margin-top: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 20px;
}

.platform-control-bottom>div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #475569;
  font-size: 14px;
}

.platform-control-bottom strong {
  color: #0F172A;
}

.platform-control-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

html[data-theme="dark"] .platform-control-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(37, 99, 235, .13), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .12), transparent 30%),
    linear-gradient(180deg, #0B1120, #08101A);
}

html[data-theme="dark"] .platform-console-card,
html[data-theme="dark"] .platform-control-card,
html[data-theme="dark"] .platform-control-bottom {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 28px 76px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .platform-console-card::before {
  background:
    linear-gradient(rgba(34, 211, 238, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .045) 1px, transparent 1px);
}

html[data-theme="dark"] .platform-console-head span,
html[data-theme="dark"] .platform-screen-top span,
html[data-theme="dark"] .platform-status-stack span,
html[data-theme="dark"] .platform-usage-card small,
html[data-theme="dark"] .platform-control-card>span {
  color: #94A3B8;
}

html[data-theme="dark"] .platform-console-head strong,
html[data-theme="dark"] .platform-screen-top strong,
html[data-theme="dark"] .platform-control-card h3,
html[data-theme="dark"] .platform-control-bottom strong {
  color: #F8FAFC;
}

html[data-theme="dark"] .platform-console-head b {
  color: #A5F3FC;
  background: rgba(34, 211, 238, .12);
}

html[data-theme="dark"] .platform-console-head b i {
  background: #22D3EE;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, .13);
}

html[data-theme="dark"] .platform-console-screen {
  border-color: rgba(148, 163, 184, .16);
  background:
    radial-gradient(circle at 84% 8%, rgba(34, 211, 238, .14), transparent 35%),
    linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(8, 47, 73, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .platform-status-stack div,
html[data-theme="dark"] .platform-mini-flow {
  border-color: rgba(148, 163, 184, .15);
  background: rgba(15, 23, 42, .68);
}

html[data-theme="dark"] .platform-status-stack b {
  color: #A7F3D0;
  background: rgba(16, 185, 129, .13);
}

html[data-theme="dark"] .platform-mini-flow span {
  color: #CBD5E1;
  background: rgba(30, 41, 59, .9);
}

html[data-theme="dark"] .platform-control-card p,
html[data-theme="dark"] .platform-control-bottom>div:first-child {
  color: #CBD5E1;
}

html[data-theme="dark"] .platform-card-icon,
html[data-theme="dark"] .platform-control-card small {
  color: #A5F3FC;
  background: rgba(34, 211, 238, .12);
}

html[data-theme="dark"] .platform-control-card:nth-child(2n) .platform-card-icon {
  color: #DDD6FE;
  background: rgba(124, 58, 237, .16);
}

@media (max-width: 980px) {
  .platform-control-shell {
    grid-template-columns: 1fr;
  }

  .platform-console-card {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .platform-controls-grid {
    grid-template-columns: 1fr;
  }

  .platform-console-card {
    padding: 18px;
    border-radius: 22px;
  }

  .platform-console-screen {
    padding: 16px;
    border-radius: 18px;
  }

  .platform-status-stack div {
    min-height: 44px;
  }

  .platform-mini-flow {
    grid-template-columns: 1fr;
  }

  .platform-mini-flow i {
    display: none;
  }

  .platform-control-card {
    min-height: auto;
    padding: 20px;
  }

  .platform-control-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-control-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .platform-control-actions .button {
    width: 100%;
  }
}

/* Verified proof / pilot section */
.pilot-layout-upgraded {
  grid-template-columns: .78fr 1.22fr;
  gap: 54px;
  align-items: stretch;
}

.pilot-layout-upgraded .pilot-heading {
  position: sticky;
  top: 118px;
  align-self: start;
}

.pilot-layout-upgraded .pilot-heading h2 {
  max-width: 520px;
}

.pilot-layout-upgraded .pilot-heading>p {
  max-width: 500px;
  font-size: 15px;
  line-height: 1.75;
}

.pilot-trust-list {
  margin: 22px 0 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pilot-trust-list span {
  padding: 8px 10px;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 999px;
  color: #1E40AF;
  background: rgba(37, 99, 235, .07);
  font-size: 11px;
  font-weight: 800;
}

.pilot-proof-board {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(6, 182, 212, .16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .9));
  box-shadow: 0 28px 80px rgba(15, 23, 42, .1);
}

.pilot-proof-board::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(135deg, black, transparent 78%);
}

.pilot-board-top,
.pilot-cards-upgraded,
.pilot-metrics {
  position: relative;
  z-index: 1;
}

.pilot-board-top {
  min-height: 78px;
  margin-bottom: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px);
}

.pilot-board-top div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pilot-board-top small {
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.pilot-board-top strong {
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}

.pilot-board-top>span {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  color: #075985;
  background: rgba(6, 182, 212, .14);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.pilot-cards-upgraded {
  gap: 12px;
}

.pilot-cards-upgraded article {
  min-height: 132px;
  padding: 20px;
  grid-template-columns: 42px 1fr auto;
  border-color: rgba(226, 232, 240, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .075);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.pilot-cards-upgraded article:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, .28);
  box-shadow: 0 24px 58px rgba(15, 23, 42, .12);
}

.pilot-cards-upgraded article>span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .18);
}

.pilot-cards-upgraded article>div small {
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.pilot-cards-upgraded h3 {
  margin: 5px 0 6px;
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: 0;
}

.pilot-cards-upgraded p {
  max-width: 570px;
  font-size: 12px;
  line-height: 1.65;
}

.pilot-cards-upgraded article>b {
  padding: 7px 10px;
  color: #1E40AF;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  font-size: 9px;
  text-transform: uppercase;
}

.pilot-metrics {
  margin-top: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: start;
  gap: 14px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 17px;
  background: rgba(15, 23, 42, .03);
}

.pilot-metrics>span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pilot-metrics>div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pilot-metrics i {
  padding: 7px 9px;
  border: 1px solid rgba(100, 116, 139, .15);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

html[data-theme="dark"] .pilot-section {
  background: var(--paper);
}

html[data-theme="dark"] .pilot-proof-board {
  border-color: var(--line);
  background:
    radial-gradient(circle at 92% 8%, rgba(6, 182, 212, .14), transparent 34%),
    linear-gradient(135deg, #13202B, #0F172A);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .pilot-board-top,
html[data-theme="dark"] .pilot-cards-upgraded article {
  border-color: rgba(51, 65, 85, .86);
  background: rgba(15, 23, 42, .72);
  box-shadow: none;
}

html[data-theme="dark"] .pilot-trust-list span,
html[data-theme="dark"] .pilot-board-top>span,
html[data-theme="dark"] .pilot-cards-upgraded article>b {
  color: #BAE6FD;
  border-color: rgba(6, 182, 212, .22);
  background: rgba(6, 182, 212, .1);
}

html[data-theme="dark"] .pilot-metrics {
  border-color: rgba(51, 65, 85, .86);
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .pilot-metrics i {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .72);
}

@media (max-width: 980px) {
  .pilot-layout-upgraded .pilot-heading {
    position: static;
  }
}

@media (max-width: 620px) {
  .pilot-proof-board {
    padding: 13px;
    border-radius: 20px;
  }

  .pilot-board-top {
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
  }

  .pilot-board-top strong {
    font-size: 15px;
  }

  .pilot-cards-upgraded article {
    min-height: 0;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .pilot-cards-upgraded article>span {
    width: 36px;
    height: 36px;
  }

  .pilot-cards-upgraded article>b {
    grid-column: 2;
    justify-self: start;
  }

  .pilot-metrics {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .pilot-trust-list span,
  .pilot-metrics i {
    font-size: 9px;
  }
}

/* Future roadmap section */
.future-roadmap-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .10), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .10), transparent 32%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}

.future-roadmap-section::before {
  content: "";
  position: absolute;
  inset: 82px max(24px, calc((100vw - 1180px) / 2)) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .24), transparent);
}

.future-roadmap-section .section-heading {
  position: relative;
  z-index: 1;
  max-width: 850px;
}

.future-roadmap {
  position: relative;
  isolation: isolate;
  margin-top: 42px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 24px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

.future-roadmap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 7%;
  right: 7%;
  top: 66px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #06B6D4 52%, #7C3AED);
  opacity: .28;
}

.future-roadmap article {
  position: relative;
  min-height: 260px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(6, 182, 212, .11), transparent 32%),
    rgba(255, 255, 255, .9);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .065);
}

.future-roadmap article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand-gradient);
}

.future-roadmap article>span {
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 50%;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .22);
  font-size: 12px;
  font-weight: 900;
}

.future-roadmap article div {
  display: flex;
  flex-direction: column;
}

.future-roadmap small {
  color: #2563EB;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.future-roadmap h3 {
  margin: 9px 0 10px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 0;
}

.future-roadmap p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.future-roadmap>i {
  position: absolute;
  top: 56px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0E7490;
  background: #ECFEFF;
  box-shadow: 0 10px 28px rgba(8, 145, 178, .16);
  font-style: normal;
  font-weight: 900;
}

.future-roadmap>i:nth-of-type(1) {
  left: calc(25% - 14px);
}

.future-roadmap>i:nth-of-type(2) {
  left: calc(50% - 14px);
}

.future-roadmap>i:nth-of-type(3) {
  left: calc(75% - 14px);
}

html[data-theme="dark"] .future-roadmap-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .13), transparent 32%),
    var(--paper);
}

html[data-theme="dark"] .future-roadmap {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .58);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .future-roadmap article {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 92% 10%, rgba(6, 182, 212, .12), transparent 32%),
    rgba(15, 23, 42, .82);
}

html[data-theme="dark"] .future-roadmap h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] .future-roadmap p {
  color: #AAB6C5;
}

html[data-theme="dark"] .future-roadmap small {
  color: #67E8F9;
}

html[data-theme="dark"] .future-roadmap>i {
  color: #A5F3FC;
  background: #12343C;
}

@media (max-width: 980px) {
  .future-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .future-roadmap::before,
  .future-roadmap>i {
    display: none;
  }

  .future-roadmap article {
    min-height: 230px;
  }
}

@media (max-width: 620px) {
  .future-roadmap {
    padding: 14px;
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .future-roadmap::before {
    display: block;
    left: 37px;
    right: auto;
    top: 36px;
    bottom: 36px;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #2563EB, #06B6D4 52%, #7C3AED);
    opacity: .24;
  }

  .future-roadmap article {
    min-height: auto;
    padding: 20px 20px 20px 72px;
  }

  .future-roadmap article>span {
    position: absolute;
    left: 20px;
    top: 22px;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 10px;
  }
}

/* User/client guide modals: warmer light-mode cards with matching dark-mode surfaces. */
.user-journey-modal .modal-panel,
.client-journey-modal .modal-panel {
  border-color: rgba(203, 213, 225, .78);
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, .08), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(6, 182, 212, .09), transparent 34%),
    #F8FAFC;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .16);
}

.user-journey-modal .journey-hero {
  color: #0F172A;
  background:
    radial-gradient(circle at 84% 22%, rgba(37, 99, 235, .20), transparent 34%),
    linear-gradient(135deg, #EFF6FF, #F8FAFC 62%, #ECFEFF);
}

.client-journey-modal .journey-hero {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 84% 20%, rgba(6, 182, 212, .24), transparent 34%),
    linear-gradient(135deg, #0F172A, #143344 54%, #0E7490);
}

.user-journey-modal .journey-hero p {
  color: #475569;
}

.client-journey-modal .journey-hero p,
.client-journey-modal .journey-dashboard>small,
.client-journey-modal .journey-dashboard>span {
  color: #C7D2FE;
}

.user-journey-modal .journey-number,
.client-journey-modal .journey-number {
  color: #FFFFFF;
  background: var(--brand-gradient);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .22);
}

.user-journey-modal .journey-intro aside,
.client-journey-modal .journey-intro aside,
.user-journey-modal .journey-steps-grid article,
.client-journey-modal .journey-steps-grid article,
.user-journey-modal .journey-feature-grid article,
.client-journey-modal .journey-feature-grid article {
  border-color: rgba(203, 213, 225, .84);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.user-journey-modal .journey-intro aside,
.client-journey-modal .journey-intro aside {
  border-left: 4px solid #2563EB;
}

.client-journey-modal .journey-intro aside {
  border-left-color: #06B6D4;
}

.user-journey-modal .journey-feature-grid article>i,
.client-journey-modal .journey-feature-grid article>i {
  color: #FFFFFF !important;
  background: var(--brand-gradient) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .20);
}

.client-journey-modal .journey-feature-grid article>i {
  background: linear-gradient(135deg, #06B6D4, #2563EB) !important;
}

.user-journey-modal .journey-tip,
.client-journey-modal .journey-tip,
.client-journey-modal .journey-pricing {
  color: #0F172A;
  border: 1px solid rgba(191, 219, 254, .86);
  background:
    radial-gradient(circle at 92% 10%, rgba(37, 99, 235, .12), transparent 30%),
    linear-gradient(135deg, #EFF6FF, #FFFFFF);
  box-shadow: 0 22px 58px rgba(37, 99, 235, .10);
}

.client-journey-modal .journey-tip,
.client-journey-modal .journey-pricing {
  border-color: rgba(165, 243, 252, .9);
  background:
    radial-gradient(circle at 90% 12%, rgba(6, 182, 212, .14), transparent 32%),
    linear-gradient(135deg, #ECFEFF, #FFFFFF);
  box-shadow: 0 22px 58px rgba(8, 145, 178, .10);
}

.user-journey-modal .journey-tip>span,
.client-journey-modal .journey-tip>span,
.client-journey-modal .journey-pricing .journey-eyebrow,
.client-journey-modal .journey-pricing h3,
.client-journey-modal .journey-pricing aside strong {
  color: #1D4ED8;
}

.client-journey-modal .journey-tip>span,
.client-journey-modal .journey-pricing .journey-eyebrow,
.client-journey-modal .journey-pricing aside strong {
  color: #0E7490;
}

.user-journey-modal .journey-tip p,
.client-journey-modal .journey-tip p,
.client-journey-modal .journey-pricing p,
.client-journey-modal .journey-pricing aside p,
.client-journey-modal .journey-pricing>div:first-child>p {
  color: #475569;
}

.user-journey-modal .journey-tip p,
.client-journey-modal .journey-tip p {
  padding: 13px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
}

.user-journey-modal .journey-tip p b,
.client-journey-modal .journey-tip p b {
  color: #0F172A;
}

.client-journey-modal .journey-price-pills>span,
.client-journey-modal .journey-pricing aside {
  border-color: rgba(125, 211, 252, .42);
  background: rgba(255, 255, 255, .72);
}

.client-journey-modal .journey-price-pills strong {
  color: #0E7490;
}

.client-journey-modal .journey-price-pills small,
.client-journey-modal .journey-price-pills>i {
  color: #64748B;
}

.user-journey-modal .journey-footer,
.client-journey-modal .journey-footer {
  border-top-color: rgba(203, 213, 225, .82);
  background: rgba(255, 255, 255, .84);
}

html[data-theme="dark"] .user-journey-modal .modal-panel,
html[data-theme="dark"] .client-journey-modal .modal-panel {
  border-color: rgba(71, 85, 105, .72);
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, .12), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(6, 182, 212, .11), transparent 34%),
    #0F172A;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .user-journey-modal .journey-hero {
  color: #F8FAFC;
  background:
    radial-gradient(circle at 84% 22%, rgba(96, 165, 250, .20), transparent 34%),
    linear-gradient(135deg, #111827, #172554 58%, #0F172A);
}

html[data-theme="dark"] .client-journey-modal .journey-hero {
  background:
    radial-gradient(circle at 84% 20%, rgba(34, 211, 238, .18), transparent 34%),
    linear-gradient(135deg, #0B1120, #12343C 60%, #0F172A);
}

html[data-theme="dark"] .user-journey-modal .journey-hero p,
html[data-theme="dark"] .client-journey-modal .journey-hero p {
  color: #CBD5E1;
}

html[data-theme="dark"] .user-journey-modal .journey-intro aside,
html[data-theme="dark"] .client-journey-modal .journey-intro aside,
html[data-theme="dark"] .user-journey-modal .journey-steps-grid article,
html[data-theme="dark"] .client-journey-modal .journey-steps-grid article,
html[data-theme="dark"] .user-journey-modal .journey-feature-grid article,
html[data-theme="dark"] .client-journey-modal .journey-feature-grid article,
html[data-theme="dark"] .user-journey-modal .journey-footer,
html[data-theme="dark"] .client-journey-modal .journey-footer {
  border-color: rgba(71, 85, 105, .78);
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .user-journey-modal .journey-tip,
html[data-theme="dark"] .client-journey-modal .journey-tip,
html[data-theme="dark"] .client-journey-modal .journey-pricing {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .28);
  background:
    radial-gradient(circle at 92% 10%, rgba(37, 99, 235, .16), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .88));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .client-journey-modal .journey-tip,
html[data-theme="dark"] .client-journey-modal .journey-pricing {
  border-color: rgba(34, 211, 238, .28);
  background:
    radial-gradient(circle at 92% 10%, rgba(6, 182, 212, .16), transparent 30%),
    linear-gradient(135deg, rgba(8, 47, 73, .78), rgba(15, 23, 42, .94));
}

html[data-theme="dark"] .user-journey-modal .journey-tip>span,
html[data-theme="dark"] .client-journey-modal .journey-tip>span,
html[data-theme="dark"] .client-journey-modal .journey-pricing .journey-eyebrow,
html[data-theme="dark"] .client-journey-modal .journey-pricing h3,
html[data-theme="dark"] .client-journey-modal .journey-pricing aside strong {
  color: #67E8F9;
}

html[data-theme="dark"] .user-journey-modal .journey-tip p,
html[data-theme="dark"] .client-journey-modal .journey-tip p,
html[data-theme="dark"] .client-journey-modal .journey-price-pills>span,
html[data-theme="dark"] .client-journey-modal .journey-pricing aside {
  border-color: rgba(71, 85, 105, .78);
  background: rgba(15, 23, 42, .58);
}

html[data-theme="dark"] .user-journey-modal .journey-tip p,
html[data-theme="dark"] .client-journey-modal .journey-tip p,
html[data-theme="dark"] .client-journey-modal .journey-pricing p,
html[data-theme="dark"] .client-journey-modal .journey-pricing aside p,
html[data-theme="dark"] .client-journey-modal .journey-pricing>div:first-child>p {
  color: #CBD5E1;
}

html[data-theme="dark"] .user-journey-modal .journey-tip p b,
html[data-theme="dark"] .client-journey-modal .journey-tip p b,
html[data-theme="dark"] .client-journey-modal .journey-price-pills strong {
  color: #F8FAFC;
}

@media (max-width: 760px) {

  .user-journey-modal .journey-tip,
  .client-journey-modal .journey-tip,
  .client-journey-modal .journey-pricing {
    border-radius: 16px;
  }

  .user-journey-modal .journey-tip p,
  .client-journey-modal .journey-tip p {
    padding: 12px;
  }
}

/* Guide popup index: keep it readable without repeating the same labels. */
.journey-modal .journey-index {
  padding: 14px 22px;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.journey-modal .journey-index-track {
  width: 100%;
  min-width: 0;
  justify-content: center;
  animation: none !important;
  transform: none !important;
}

.journey-modal .journey-index-set {
  width: 100%;
  padding-right: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.journey-modal .journey-index-set[aria-hidden="true"] {
  display: none;
}

.journey-modal .journey-index span {
  min-width: 0;
  min-height: 32px;
  flex: 0 1 auto;
}

@media (max-width: 760px) {
  .journey-modal .journey-index {
    padding-inline: 14px;
  }

  .journey-modal .journey-index-set {
    gap: 7px;
  }

  .journey-modal .journey-index span {
    min-width: 0;
    padding-inline: 11px;
  }
}

/* Requested proof update: mobile polish for verified-results story. */
@media (max-width: 760px) {
  .pilot-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(68px, 18vw, 94px);
    background:
      radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .13), transparent 31%),
      radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .16), transparent 34%),
      linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 52%, #F8FAFC 100%);
  }

  .pilot-section::before,
  .pilot-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  .pilot-section::before {
    inset: 18px 14px auto;
    height: 160px;
    border: 1px solid rgba(37, 99, 235, .10);
    border-radius: 34px;
    background:
      linear-gradient(90deg, rgba(37, 99, 235, .08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(37, 99, 235, .065) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, black, transparent 86%);
    opacity: .8;
  }

  .pilot-section::after {
    width: 190px;
    height: 190px;
    right: -88px;
    bottom: 36px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
    filter: blur(2px);
  }

  .pilot-section .container {
    width: min(100% - 28px, 1180px);
  }

  .pilot-layout-upgraded {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pilot-layout-upgraded .pilot-heading {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 28px;
    text-align: left;
    background:
      radial-gradient(circle at 94% 10%, rgba(6, 182, 212, .15), transparent 32%),
      linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .88));
    box-shadow: 0 24px 70px rgba(15, 23, 42, .09);
    backdrop-filter: blur(14px);
  }

  .pilot-layout-upgraded .pilot-heading::before {
    content: "Verified proof only";
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(16, 185, 129, .20);
    border-radius: 999px;
    color: #047857;
    background: rgba(16, 185, 129, .09);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .pilot-layout-upgraded .pilot-heading .section-kicker {
    padding: 8px 10px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 999px;
    color: #1D4ED8;
    background: rgba(37, 99, 235, .07);
    letter-spacing: .08em;
  }

  .pilot-layout-upgraded .pilot-heading h2 {
    max-width: 100%;
    margin: 14px 0 12px;
    font-size: clamp(31px, 9.2vw, 42px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .pilot-layout-upgraded .pilot-heading>p {
    max-width: 100%;
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.72;
  }

  .pilot-trust-list {
    margin: 20px 0 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .pilot-trust-list span {
    min-height: 48px;
    padding: 10px 8px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #1E40AF;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(239, 246, 255, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    line-height: 1.18;
    text-align: center;
  }

  .pilot-trust-list span::before {
    content: "\2713";
    width: 18px;
    height: 18px;
    margin-bottom: 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: linear-gradient(135deg, #2563EB, #06B6D4);
    font-size: 10px;
    font-weight: 900;
  }

  .pilot-heading .button {
    width: 100%;
    min-height: 54px;
    margin-top: 16px;
    border-radius: 17px;
    box-shadow: 0 18px 38px rgba(37, 99, 235, .18);
  }

  .pilot-proof-board {
    padding: 14px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 94% 5%, rgba(6, 182, 212, .14), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 250, 252, .92));
    box-shadow: 0 26px 80px rgba(15, 23, 42, .11);
  }

  .pilot-proof-board::before {
    opacity: .22;
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, black, transparent 88%);
  }

  .pilot-proof-board::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 50%;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .22);
    transform: translateX(-50%);
  }

  .pilot-board-top {
    min-height: 0;
    margin-bottom: 14px;
    padding: 18px 16px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 21px;
    background: rgba(255, 255, 255, .78);
  }

  .pilot-board-top small {
    color: #0284C7;
    font-size: 9px;
  }

  .pilot-board-top strong {
    max-width: 25ch;
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.22;
  }

  .pilot-board-top>span {
    justify-self: start;
    padding: 8px 11px;
    border-radius: 999px;
  }

  .pilot-cards-upgraded {
    position: relative;
    gap: 14px;
  }

  .pilot-cards-upgraded::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 54px;
    bottom: 54px;
    left: 34px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563EB, #06B6D4 55%, #7C3AED);
    opacity: .28;
  }

  .pilot-cards-upgraded article {
    position: relative;
    z-index: 1;
    min-height: auto;
    padding: 18px;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 13px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .84));
    box-shadow: 0 16px 42px rgba(15, 23, 42, .075);
  }

  .pilot-cards-upgraded article:hover {
    transform: none;
  }

  .pilot-cards-upgraded article>span {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border: 4px solid #FFFFFF;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #06B6D4);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .20);
  }

  .pilot-cards-upgraded article>div small {
    color: #0284C7;
    font-size: 9px;
    letter-spacing: .09em;
  }

  .pilot-cards-upgraded h3 {
    margin: 5px 0 7px;
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.22;
  }

  .pilot-cards-upgraded p {
    max-width: none;
    color: #64748B;
    font-size: 12px;
    line-height: 1.64;
  }

  .pilot-cards-upgraded article>b {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    padding: 7px 10px;
    border-radius: 12px;
  }

  .pilot-metrics {
    margin-top: 14px;
    padding: 16px;
    display: block;
    border-radius: 21px;
    background: rgba(15, 23, 42, .035);
  }

  .pilot-metrics>span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #0F172A;
    text-align: center;
  }

  .pilot-metrics>span::before {
    content: "\25CF";
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    font-size: 11px;
  }

  .pilot-metrics>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pilot-metrics i {
    min-height: 38px;
    padding: 9px 8px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #475569;
    background: rgba(255, 255, 255, .78);
    line-height: 1.18;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .pilot-section .container {
    width: min(100% - 22px, 1180px);
  }

  .pilot-layout-upgraded .pilot-heading,
  .pilot-proof-board {
    border-radius: 24px;
  }

  .pilot-layout-upgraded .pilot-heading {
    padding: 19px;
  }

  .pilot-layout-upgraded .pilot-heading h2 {
    font-size: clamp(29px, 10vw, 36px);
  }

  .pilot-trust-list {
    grid-template-columns: 1fr;
  }

  .pilot-trust-list span {
    min-height: 42px;
    grid-template-columns: auto 1fr;
    justify-content: start;
    place-items: center start;
    gap: 9px;
    padding-inline: 12px;
    text-align: left;
  }

  .pilot-trust-list span::before {
    margin: 0;
  }

  .pilot-cards-upgraded::before {
    left: 31px;
  }

  .pilot-cards-upgraded article {
    padding: 16px;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    border-radius: 20px;
  }

  .pilot-cards-upgraded article>span {
    width: 38px;
    height: 38px;
    border-width: 3px;
  }

  .pilot-metrics>div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html[data-theme="dark"] .pilot-section {
    background:
      radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .22), transparent 31%),
      radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .18), transparent 34%),
      linear-gradient(180deg, #0B1120 0%, #111827 58%, #0B1120 100%);
  }

  html[data-theme="dark"] .pilot-section::before {
    border-color: rgba(148, 163, 184, .12);
    background:
      linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px),
      linear-gradient(180deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  }

  html[data-theme="dark"] .pilot-layout-upgraded .pilot-heading {
    border-color: rgba(51, 65, 85, .9);
    background:
      radial-gradient(circle at 94% 10%, rgba(6, 182, 212, .12), transparent 32%),
      linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(17, 24, 39, .86));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  }

  html[data-theme="dark"] .pilot-layout-upgraded .pilot-heading::before {
    color: #A7F3D0;
    border-color: rgba(16, 185, 129, .24);
    background: rgba(16, 185, 129, .10);
  }

  html[data-theme="dark"] .pilot-layout-upgraded .pilot-heading .section-kicker {
    color: #BAE6FD;
    border-color: rgba(6, 182, 212, .24);
    background: rgba(6, 182, 212, .10);
  }

  html[data-theme="dark"] .pilot-layout-upgraded .pilot-heading>p,
  html[data-theme="dark"] .pilot-cards-upgraded p {
    color: #CBD5E1;
  }

  html[data-theme="dark"] .pilot-trust-list span {
    color: #BAE6FD;
    border-color: rgba(6, 182, 212, .20);
    background:
      linear-gradient(180deg, rgba(30, 41, 59, .78), rgba(15, 23, 42, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  html[data-theme="dark"] .pilot-proof-board {
    background:
      radial-gradient(circle at 94% 5%, rgba(6, 182, 212, .13), transparent 30%),
      linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .93));
    box-shadow: 0 28px 84px rgba(0, 0, 0, .32);
  }

  html[data-theme="dark"] .pilot-proof-board::after {
    background: rgba(148, 163, 184, .28);
  }

  html[data-theme="dark"] .pilot-board-top,
  html[data-theme="dark"] .pilot-cards-upgraded article {
    border-color: rgba(51, 65, 85, .92);
    background:
      linear-gradient(180deg, rgba(30, 41, 59, .76), rgba(15, 23, 42, .70));
  }

  html[data-theme="dark"] .pilot-cards-upgraded article>span {
    border-color: #0F172A;
  }

  html[data-theme="dark"] .pilot-board-top small,
  html[data-theme="dark"] .pilot-cards-upgraded article>div small {
    color: #67E8F9;
  }

  html[data-theme="dark"] .pilot-board-top strong,
  html[data-theme="dark"] .pilot-metrics>span {
    color: #F8FAFC;
  }

  html[data-theme="dark"] .pilot-metrics {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(255, 255, 255, .035);
  }

  html[data-theme="dark"] .pilot-metrics i {
    color: #CBD5E1;
    border-color: rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .74);
  }
}

/* Pricing rate cards: dark-mode readability for Monthly base / Service requests. */
html[data-theme="dark"] .pricing-rate-row>div {
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, .22);
  background:
    radial-gradient(circle at 92% 10%, rgba(6, 182, 212, .13), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 38px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .pricing-rate-row span {
  color: #67E8F9;
}

html[data-theme="dark"] .pricing-rate-row strong {
  color: #FFFFFF;
}

html[data-theme="dark"] .pricing-rate-row small {
  color: #CBD5E1;
}

/* Pilot proof section: mobile-first polish for the verified-results story. */
@media (max-width: 760px) {
  .pilot-section {
    padding-block: 76px;
    background:
      linear-gradient(180deg, rgba(239, 246, 255, .82), rgba(248, 250, 252, 1));
  }

  .pilot-layout-upgraded {
    gap: 28px;
  }

  .pilot-layout-upgraded .pilot-heading {
    text-align: center;
  }

  .pilot-layout-upgraded .pilot-heading h2 {
    max-width: 430px;
    margin-inline: auto;
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.1;
    letter-spacing: 0;
  }

  .pilot-layout-upgraded .pilot-heading>p {
    max-width: 520px;
    margin-inline: auto;
    font-size: 14px;
    line-height: 1.7;
  }

  .pilot-trust-list {
    margin: 20px auto 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .pilot-trust-list span {
    min-height: 42px;
    padding: 9px 8px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    text-align: center;
    line-height: 1.2;
  }

  .pilot-heading .button {
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .pilot-proof-board {
    padding: 12px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
  }

  .pilot-proof-board::before {
    opacity: .26;
    background-size: 28px 28px;
  }

  .pilot-board-top {
    min-height: 0;
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .pilot-board-top small {
    font-size: 9px;
  }

  .pilot-board-top strong {
    font-size: 16px;
    line-height: 1.3;
  }

  .pilot-board-top>span {
    align-self: flex-start;
    padding: 7px 9px;
  }

  .pilot-cards-upgraded {
    position: relative;
    gap: 12px;
  }

  .pilot-cards-upgraded::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 30px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563EB, #06B6D4);
    opacity: .22;
  }

  .pilot-cards-upgraded article {
    position: relative;
    min-height: auto;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 13px;
    padding: 17px;
    border-radius: 17px;
  }

  .pilot-cards-upgraded article>span {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
  }

  .pilot-cards-upgraded h3 {
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.24;
  }

  .pilot-cards-upgraded p {
    font-size: 12px;
    line-height: 1.62;
  }

  .pilot-cards-upgraded article>b {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    border-radius: 10px;
  }

  .pilot-metrics {
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .pilot-metrics>span {
    text-align: center;
  }

  .pilot-metrics>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pilot-metrics i {
    min-height: 36px;
    padding: 8px 9px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    text-align: center;
    line-height: 1.2;
  }
}

@media (max-width: 430px) {
  .pilot-trust-list {
    grid-template-columns: 1fr;
  }

  .pilot-cards-upgraded::before {
    left: 28px;
  }

  .pilot-cards-upgraded article {
    padding: 15px;
    gap: 11px;
  }

  .pilot-metrics>div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html[data-theme="dark"] .pilot-section {
    background:
      linear-gradient(180deg, #0F172A, #111827);
  }

  html[data-theme="dark"] .pilot-proof-board {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .94));
  }

  html[data-theme="dark"] .pilot-cards-upgraded article>span {
    border-color: #0F172A;
  }
}

/* Mobile spacing fix: remove the large empty gap before the proof section. */
@media (max-width: 760px) {
  .pricing {
    padding-bottom: 34px;
  }

  .pilot-section {
    padding-top: 24px !important;
  }

  .pilot-section::before {
    display: none;
  }

  .pilot-layout-upgraded {
    gap: 18px;
  }

  .pilot-layout-upgraded .pilot-heading {
    min-height: 0;
    margin-top: 0;
    padding-top: 18px;
  }

  .pilot-layout-upgraded .pilot-heading::before {
    margin-bottom: 10px;
  }

  .pilot-trust-list {
    margin-top: 16px;
  }
}

/* Proof section: very subtle background separation from pricing and founder sections. */
html:not([data-theme="dark"]) .pilot-section {
  background:
    linear-gradient(180deg, #F4FAFF 0%, #F8FAFC 54%, #F3F8FF 100%);
}

html[data-theme="dark"] .pilot-section {
  background:
    linear-gradient(180deg, #0D1626 0%, #111827 54%, #0C1424 100%);
}

@media (max-width: 760px) {
  html:not([data-theme="dark"]) .pilot-section {
    background:
      linear-gradient(180deg, #F4FAFF 0%, #F8FAFC 56%, #F3F8FF 100%);
  }

  html[data-theme="dark"] .pilot-section {
    background:
      linear-gradient(180deg, #0D1626 0%, #111827 56%, #0C1424 100%);
  }
}

/* Mobile proof heading should sit outside the proof card, like normal section copy. */
@media (max-width: 760px) {
  .pilot-layout-upgraded .pilot-heading {
    margin-top: -10px;
    padding: 0 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  html[data-theme="dark"] .pilot-layout-upgraded .pilot-heading {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
/* User guide hero and guide index polish */
.user-guide-page #top.hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 4%, rgba(6, 182, 212, .10), transparent 28rem),
    radial-gradient(circle at 94% 12%, rgba(37, 99, 235, .11), transparent 32rem),
    var(--paper);
  filter: none;
  transform: none;
}

.user-guide-page #top.hero::before,
.user-guide-page #top.hero::after {
  filter: none;
}

.user-guide-page #top .hero-grid {
  position: relative;
  inset: auto;
  width: min(1180px, calc(100% - 48px));
  opacity: 1;
  background: none;
  mask-image: none;
  -webkit-mask-image: none;
  filter: none;
}

.user-guide-page #top .hero-copy,
.user-guide-page #top .assistant-preview {
  opacity: 1;
  filter: none;
  transform: none;
}

.user-guide-page #top h1,
.user-guide-page #top .lead,
.user-guide-page #top .hero-note {
  filter: none;
  text-shadow: none;
}

.user-guide-page .toc-track {
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: visible;
}

.user-guide-page .toc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.user-guide-page .toc a.active {
  color: #fff;
  border-color: transparent;
  background: var(--brand-gradient);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .18);
}

.user-guide-page .flow-step {
  position: relative;
  min-height: 245px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  overflow: visible;
}

.user-guide-page .flow-step::after {
  content: "\2192";
  position: absolute;
  top: 32px;
  right: -14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(6, 182, 212, .18);
  border-radius: 50%;
  color: #0E7490;
  background: #ECFEFF;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .16);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.user-guide-page .flow-step:nth-child(3)::after {
  content: "\2193";
  top: auto;
  right: 24px;
  bottom: -14px;
}

.user-guide-page .flow-step:last-child::after {
  content: "\2713";
  top: 32px;
  right: 24px;
  bottom: auto;
  color: #047857;
  border-color: rgba(16, 185, 129, .18);
  background: #ECFDF5;
  box-shadow: 0 10px 24px rgba(16, 185, 129, .14);
}

.user-guide-page .flow-step b {
  width: auto;
  height: auto;
  min-height: 38px;
  margin: 0 0 24px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 999px;
  color: #1D4ED8;
  background: rgba(37, 99, 235, .10);
  box-shadow: none;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

.user-guide-page .flow-step h3 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.16;
}

.user-guide-page .flow-step p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
}

html[data-theme="dark"] .user-guide-page .flow-step b {
  color: #93C5FD;
  border-color: rgba(96, 165, 250, .24);
  background: rgba(37, 99, 235, .18);
}

html[data-theme="dark"] .user-guide-page .flow-step::after {
  color: #67E8F9;
  border-color: rgba(103, 232, 249, .22);
  background: #0F2433;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .user-guide-page .flow-step:last-child::after {
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, .22);
  background: #0F2A24;
}

@media (max-width: 760px) {
  html,
  body.user-guide-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.user-guide-page {
    position: relative;
  }

  .user-guide-page .site-header {
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 10px;
    transform: none;
  }

  .user-guide-page .nav-shell {
    width: 100%;
    max-width: calc(100vw - 20px);
    height: 58px;
    margin: 0 auto;
    padding: 0 8px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
  }

  .user-guide-page .nav-shell>.brand {
    flex: 0 0 42px;
    min-width: 42px;
    max-width: 42px;
    gap: 0;
  }

  .user-guide-page .nav-shell>.brand span {
    display: none;
  }

  .user-guide-page .nav-actions>.theme-toggle,
  .user-guide-page .nav-actions>.auth-link,
  .user-guide-page .nav-actions>.nav-signup,
  .user-guide-page .nav-actions>.profile-wrap {
    display: none !important;
  }

  .user-guide-page .desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .user-guide-page .desktop-nav a,
  .user-guide-page .desktop-nav>button:not(.nav-guide-trigger) {
    display: none !important;
  }

  .user-guide-page .desktop-nav .nav-guide-trigger {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    font-size: 10.5px;
    line-height: 1;
  }

  .user-guide-page .desktop-nav .nav-guide-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-guide-page .desktop-nav .nav-guide-trigger i {
    flex: 0 0 auto;
    padding: 4px 5px;
    border-radius: 7px;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .user-guide-page .nav-guide-pills {
    display: none !important;
  }

  .user-guide-page .nav-actions {
    flex: 0 0 40px;
    min-width: 40px;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  .user-guide-page .menu-toggle {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid !important;
    place-items: center;
  }

  .user-guide-page .mobile-nav {
    position: fixed;
    z-index: 2999;
    top: 74px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .user-guide-page .mobile-nav.open {
    display: grid !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .user-guide-page #top.hero {
    padding-top: 158px;
    scroll-margin-top: 0;
  }

  .user-guide-page main section,
  .user-guide-page .toc {
    scroll-margin-top: 136px;
  }

  .user-guide-page #top .hero-grid {
    width: calc(100% - 28px);
    max-width: calc(100vw - 28px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .user-guide-page #top .hero-copy,
  .user-guide-page #top .assistant-preview,
  .user-guide-page .container,
  .user-guide-page .section,
  .user-guide-page .final-box,
  .user-guide-page .practice,
  .user-guide-page .command-note,
  .user-guide-page .conversation {
    max-width: 100%;
    min-width: 0;
  }

  .user-guide-page .assistant-preview {
    width: 100%;
  }

  .user-guide-page .preview-caption {
    min-width: 0;
  }

  .user-guide-page .toc {
    position: fixed;
    z-index: 2800;
    top: 74px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 0;
    border-top: 0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
  }

  .user-guide-page .toc-track {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    margin-inline: auto;
    padding: 0 2px 2px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    scroll-snap-type: x proximity;
  }

  .user-guide-page .toc a {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    line-height: 1.2;
    scroll-snap-align: start;
  }

  .user-guide-page .flow-step {
    min-height: 0;
    padding: 20px;
  }

  .user-guide-page .flow-step::after,
  .user-guide-page .flow-step:nth-child(3)::after {
    content: "\2193";
    top: auto;
    right: 22px;
    bottom: -14px;
    width: 28px;
    height: 28px;
  }

  .user-guide-page .flow-step:last-child::after {
    content: "\2713";
    top: 20px;
    right: 20px;
    bottom: auto;
  }

  .user-guide-page .flow-step b {
    position: static;
    min-height: 34px;
    margin-bottom: 16px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .user-guide-page .flow-step h3 {
    font-size: 19px;
  }
}

@media (max-width: 390px) {
  .user-guide-page .desktop-nav {
    gap: 4px;
  }

  .user-guide-page .desktop-nav .nav-guide-trigger {
    height: 35px;
    padding: 0 5px;
    gap: 4px;
    font-size: 9.5px;
  }

  .user-guide-page .desktop-nav .nav-guide-trigger i {
    font-size: 6.5px;
    padding-inline: 3px;
    letter-spacing: .05em;
  }
}

/* Client guide: reuse the shared homepage shell without changing guide content. */
@media (max-width: 760px) {
  html,
  body.client-guide-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.client-guide-page {
    position: relative;
  }

  .client-guide-page .site-header {
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 10px;
    transform: none;
  }

  .client-guide-page .nav-shell {
    width: 100%;
    max-width: calc(100vw - 20px);
    height: 58px;
    margin: 0 auto;
    padding: 0 8px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
  }

  .client-guide-page .nav-shell>.brand {
    flex: 0 0 42px;
    min-width: 42px;
    max-width: 42px;
    gap: 0;
  }

  .client-guide-page .nav-shell>.brand span {
    display: none;
  }

  .client-guide-page .nav-actions>.theme-toggle,
  .client-guide-page .nav-actions>.auth-link,
  .client-guide-page .nav-actions>.nav-signup,
  .client-guide-page .nav-actions>.profile-wrap {
    display: none !important;
  }

  .client-guide-page .desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .client-guide-page .desktop-nav a,
  .client-guide-page .desktop-nav>button:not(.nav-guide-trigger) {
    display: none !important;
  }

  .client-guide-page .desktop-nav .nav-guide-trigger {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    font-size: 10.5px;
    line-height: 1;
  }

  .client-guide-page .desktop-nav .nav-guide-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .client-guide-page .desktop-nav .nav-guide-trigger i {
    flex: 0 0 auto;
    padding: 4px 5px;
    border-radius: 7px;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .client-guide-page .nav-guide-pills {
    display: none !important;
  }

  .client-guide-page .nav-actions {
    flex: 0 0 40px;
    min-width: 40px;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  .client-guide-page .menu-toggle {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid !important;
    place-items: center;
  }

  .client-guide-page .mobile-nav {
    position: fixed;
    z-index: 2999;
    top: 74px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .client-guide-page .mobile-nav.open {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .client-guide-page #top.hero {
    padding-top: 158px;
    scroll-margin-top: 0;
  }

  .client-guide-page main section,
  .client-guide-page .toc {
    scroll-margin-top: 136px;
  }

  .client-guide-page .hero-grid,
  .client-guide-page .container,
  .client-guide-page .section,
  .client-guide-page .final-box {
    max-width: 100%;
    min-width: 0;
  }

  .client-guide-page .toc {
    position: fixed;
    z-index: 2800;
    top: 74px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 0;
    border-top: 0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
  }

  .client-guide-page .toc-track {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    margin-inline: auto;
    padding: 0 2px 2px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .client-guide-page .toc-track::-webkit-scrollbar {
    display: none;
  }

  .client-guide-page .toc a {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    line-height: 1.2;
    scroll-snap-align: center;
  }
}

@media (max-width: 390px) {
  .client-guide-page .desktop-nav {
    gap: 4px;
  }

  .client-guide-page .desktop-nav .nav-guide-trigger {
    height: 35px;
    padding: 0 5px;
    gap: 4px;
    font-size: 9.5px;
  }

  .client-guide-page .desktop-nav .nav-guide-trigger i {
    padding-inline: 3px;
    font-size: 6.5px;
    letter-spacing: .05em;
  }
}