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

html {
  overflow-x: hidden
}

html,
body {
  height: auto
}

/* Custom scrollbar - brand palette */
::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background: #121212
}

::-webkit-scrollbar-thumb {
  background: #C0CC72;
  border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
  background: #d4e088
}

html {
  scrollbar-width: thin;
  scrollbar-color: #C0CC72 #121212
}

/* Lenis */
html.lenis,
html.lenis body {
  height: auto
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain
}

.lenis.lenis-stopped {
  overflow: hidden
}

.lenis.lenis-scrolling iframe {
  pointer-events: none
}

body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: #121212;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bg-light {
  background: var(--bg-light)
}

img {
  max-width: 100%;
  display: block
}

button,
input,
select {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit
}

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

/* ============ TOKENS ============ */
:root {
  --bg-dark: #121212;
  --bg-darker: #0d0d0d;
  --bg-card: #1a1a1a;
  --border-dark: #2a2a2a;
  --gray-on-dark: #BFBFBF;
  --bg-white: #fff;
  --bg-light: #F5F5F5;
  --text-dark: #121212;
  --text-mute: #6b7280;
  --border-light: #e5e7eb;
  --lime: #C0CC72;
  --u: 'Unbounded', sans-serif;
  --m: 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --section-pad: clamp(60px, 9vw, 120px);
  --container: min(1200px, calc(100vw - 80px));
}

.container {
  width: var(--container);
  margin: 0 auto;
  position: relative
}

@media (max-width: 768px) {
  :root {
    --container: calc(100vw - 40px);
  }
}

.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.label::before {
  content: '[';
  opacity: .6
}

.label::after {
  content: ']';
  opacity: .6
}

h1,
h2,
h3,
h4 {
  font-family: var(--u);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em
}

/* Section headings (h2) - not Hero h1 */
h2,
.h-sec {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Subsection headings (h3 in cards/blocks) */
section h3,
h2.team-name,
.prob-title,
.how-title,
.tech-block-t,
.step-title,
.flow-title,
.who-t,
.team-name {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
}

.lime {
  color: var(--lime)
}

p {
  line-height: 1.7
}

/* ============ TOP BANNER ============ */
.banner {
  background: var(--lime);
  color: var(--text-dark);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 101;
}

.banner a {
  color: inherit;
  font-weight: 500
}

.banner a:hover {
  text-decoration: underline
}

/* ============ NAV ============ */
.nav-wrap {
  position: sticky;
  top: 8px;
  z-index: 100;
  padding: 0 16px;
  margin-top: 8px
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 40px;
  border-radius: 0px;
  background: rgba(18, 18, 18, .9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
  transition: background .25s, border-color .25s, box-shadow .25s, color .25s;
}

.nav.light {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
  color: var(--text-dark);
}

.nav-logo {
  font-family: var(--u);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav.light .nav-logo {
  color: var(--text-dark)
}

.nav-links {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 1;
  pointer-events: none
}

.nav-links a {
  pointer-events: auto
}

.nav-logo,
.nav-right,
.hamburger {
  position: relative;
  z-index: 2
}

.nav-links a {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
  transition: color .2s;
}

.nav-links a:hover {
  color: #fff
}

.nav-links a.nav-active {
  color: #fff;
  position: relative
}

.nav-links a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lime);
  border-radius: 1px;
}

.nav.light .nav-links a {
  color: var(--text-mute)
}

.nav.light .nav-links a:hover {
  color: var(--text-dark)
}

.nav.light .nav-links a.nav-active {
  color: var(--text-dark)
}

.nav.light .nav-links a.nav-active::after {
  background: var(--text-dark)
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px
}

.lang button {
  cursor: pointer;
  color: var(--gray-on-dark);
  padding: 2px 0
}

.lang .sep {
  color: #2a2a2a
}

.lang button.active {
  color: #fff
}

.nav.light .lang button {
  color: var(--text-mute)
}

.nav.light .lang .sep {
  color: #d1d5db
}

.nav.light .lang button.active {
  color: var(--text-dark)
}

/* ============ LANG DROPDOWN ============ */
details.lang-dropdown.lang {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
}

details.lang-dropdown {
  position: relative;
}

details.lang-dropdown summary {
  list-style: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-on-dark);
  transition: border-color .2s, color .2s, background .2s;
  user-select: none;
  background: transparent;
  box-sizing: border-box;
  height: 31px;
  /* Matches btn-cta height */
}

details.lang-dropdown summary::-webkit-details-marker {
  display: none;
}

details.lang-dropdown summary:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

details.lang-dropdown[open] summary {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

details.lang-dropdown summary .lang-dropdown__arrow {
  transition: transform .2s;
  color: var(--gray-on-dark);
  display: inline-block;
}

details.lang-dropdown[open] summary .lang-dropdown__arrow {
  transform: rotate(180deg);
  color: #fff;
}

details.lang-dropdown .lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 0;
  padding: 4px 0;
  min-width: 60px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

details.lang-dropdown .lang-dropdown__menu button {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--gray-on-dark);
  padding: 6px 12px;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  width: 100%;
  transition: background .2s, color .2s;
}

details.lang-dropdown .lang-dropdown__menu button:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

details.lang-dropdown .lang-dropdown__menu button.active {
  color: var(--lime) !important;
  font-weight: 600;
}

/* Light Theme Navigation Support */
.nav.light details.lang-dropdown summary {
  border-color: rgba(0, 0, 0, .15);
  color: var(--text-mute);
}

.nav.light details.lang-dropdown summary:hover {
  border-color: rgba(0, 0, 0, .4);
  color: var(--text-dark);
}

.nav.light details.lang-dropdown[open] summary {
  border-color: rgba(0, 0, 0, .4);
  color: var(--text-dark);
}

.nav.light details.lang-dropdown summary .lang-dropdown__arrow {
  color: var(--text-mute);
}

.nav.light details.lang-dropdown[open] summary .lang-dropdown__arrow {
  color: var(--text-dark);
}

.nav.light details.lang-dropdown .lang-dropdown__menu {
  background: #fff;
  border-color: rgba(0, 0, 0, .15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

.nav.light details.lang-dropdown .lang-dropdown__menu button {
  color: var(--text-mute);
}

.nav.light details.lang-dropdown .lang-dropdown__menu button:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--text-dark);
}

.nav.light details.lang-dropdown .lang-dropdown__menu button.active {
  color: var(--text-dark) !important;
}

.btn-cta,
button.btn-cta {
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--u);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 18px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s;
}

.btn-cta:hover {
  background: #fff
}

/* ============ MEGA MENU ============ */
.nav-mega-wrap {
  position: static;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.nav-mega-trigger {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.nav-mega-trigger::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s;
}

.nav-mega-wrap:has(.nav-mega-trigger:hover) .nav-mega-trigger,
.nav-mega-wrap:has(.nav-mega-panel:hover) .nav-mega-trigger,
.nav-mega-wrap:focus-within .nav-mega-trigger {
  color: #fff;
}

.nav-mega-wrap:has(.nav-mega-trigger:hover) .nav-mega-trigger::after,
.nav-mega-wrap:has(.nav-mega-panel:hover) .nav-mega-trigger::after,
.nav-mega-wrap:focus-within .nav-mega-trigger::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav-mega-panel {
  /* Under nav-links (full nav box); avoids fixed+transform containing-block gap */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: min(1120px, calc(100vw - 48px));
  background: rgba(10, 10, 10, .97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Narrow bridge so cursor can move from trigger → panel without closing */
.nav-mega-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Open only on PLATFORM trigger / panel (not empty space under nav) */
.nav-mega-wrap:has(.nav-mega-trigger:hover) .nav-mega-panel,
.nav-mega-wrap:has(.nav-mega-panel:hover) .nav-mega-panel,
.nav-mega-wrap:focus-within .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0;
  padding: 24px 28px;
}

.nav-mega-col {
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  margin-right: 20px;
}

.nav-mega-col:nth-child(3) {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.nav-mega-col-title {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.nav-mega-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
  border-radius: 0;
}

.nav-mega-link svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255, 255, 255, .35);
  transition: color .2s;
}

.nav-mega-link:hover svg {
  color: var(--lime);
}

.nav-mega-link div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-mega-link strong {
  font-family: var(--u);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  transition: color .2s;
}

.nav-mega-link:hover strong {
  color: #fff;
}

.nav-mega-link span {
  font-family: var(--m);
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  line-height: 1.4;
  transition: color .2s;
}

.nav-mega-link:hover span {
  color: rgba(255, 255, 255, .6);
}

/* CTA card on the right */
.nav-mega-cta {
  display: flex;
  align-items: stretch;
  padding-left: 24px;
}

.nav-mega-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: rgba(192, 204, 114, .07);
  border: 1px solid rgba(192, 204, 114, .18);
  border-radius: 0;
  padding: 18px 22px;
  text-decoration: none;
  min-width: 140px;
  transition: background .2s, border-color .2s;
  position: relative;
}

.nav-mega-cta-card:hover {
  background: rgba(192, 204, 114, .13);
  border-color: rgba(192, 204, 114, .35);
}

.nav-mega-cta-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--lime);
  text-transform: uppercase;
}

.nav-mega-cta-card strong {
  font-family: var(--u);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.nav-mega-cta-desc {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .04em;
}

.nav-mega-cta-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 16px;
  color: var(--lime);
  transition: transform .2s;
}

.nav-mega-cta-card:hover .nav-mega-cta-arrow {
  transform: translateX(3px);
}

/* MCP — full-width horizontal bar under the 3 widgets + pricing */
.nav-mega-mcp {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  transition: background .2s, border-color .2s;
}

.nav-mega-mcp:hover {
  background: rgba(192, 204, 114, .07);
  border-color: rgba(192, 204, 114, .28);
}

.nav-mega-mcp div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}

.nav-mega-mcp strong {
  font-family: var(--u);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  letter-spacing: .02em;
  transition: color .2s;
  flex-shrink: 0;
}

.nav-mega-mcp:hover strong {
  color: #fff;
}

.nav-mega-mcp span:not(.nav-mega-mcp-arrow) {
  font-family: var(--m);
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  line-height: 1.4;
  transition: color .2s;
}

.nav-mega-mcp:hover span:not(.nav-mega-mcp-arrow) {
  color: rgba(255, 255, 255, .6);
}

.nav-mega-mcp-arrow {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--lime);
  transition: transform .2s;
}

.nav-mega-mcp:hover .nav-mega-mcp-arrow {
  transform: translateX(3px);
}

/* Light nav theme */
.nav.light .nav-mega-trigger {
  color: var(--text-mute);
}

.nav.light .nav-mega-wrap:has(.nav-mega-trigger:hover) .nav-mega-trigger,
.nav.light .nav-mega-wrap:has(.nav-mega-panel:hover) .nav-mega-trigger,
.nav.light .nav-mega-wrap:focus-within .nav-mega-trigger {
  color: var(--text-dark);
}

.nav.light .nav-mega-panel {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .12);
}

.nav.light .nav-mega-col {
  border-right-color: rgba(0, 0, 0, .06);
}

.nav.light .nav-mega-col-title {
  color: rgba(0, 0, 0, .3);
}

.nav.light .nav-mega-link svg {
  color: rgba(0, 0, 0, .25);
}

.nav.light .nav-mega-link:hover svg {
  color: #4a5200;
}

.nav.light .nav-mega-link strong {
  color: rgba(0, 0, 0, .82);
}

.nav.light .nav-mega-link:hover strong {
  color: var(--text-dark);
}

.nav.light .nav-mega-link span {
  color: rgba(0, 0, 0, .38);
}

.nav.light .nav-mega-link:hover span {
  color: rgba(0, 0, 0, .6);
}

.nav.light .nav-mega-cta-card {
  background: rgba(192, 204, 114, .15);
  border-color: rgba(192, 204, 114, .4);
}

.nav.light .nav-mega-cta-card:hover {
  background: rgba(192, 204, 114, .25);
  border-color: rgba(192, 204, 114, .6);
}

.nav.light .nav-mega-cta-card strong {
  color: var(--text-dark);
}

.nav.light .nav-mega-cta-desc {
  color: rgba(0, 0, 0, .4);
}

.nav.light .nav-mega-mcp {
  border-color: rgba(0, 0, 0, .08);
  background: rgba(0, 0, 0, .02);
}

.nav.light .nav-mega-mcp:hover {
  background: rgba(192, 204, 114, .12);
  border-color: rgba(192, 204, 114, .4);
}

.nav.light .nav-mega-mcp strong {
  color: rgba(0, 0, 0, .82);
}

.nav.light .nav-mega-mcp:hover strong {
  color: var(--text-dark);
}

.nav.light .nav-mega-mcp span:not(.nav-mega-mcp-arrow) {
  color: rgba(0, 0, 0, .38);
}

.nav.light .nav-mega-mcp:hover span:not(.nav-mega-mcp-arrow) {
  color: rgba(0, 0, 0, .6);
}

/* ============ HAMBURGER ============ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .2s;
  flex-shrink: 0;
}

.hamburger:hover {
  background: rgba(255, 255, 255, .08)
}

.nav.light .hamburger:hover {
  background: rgba(0, 0, 0, .06)
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}

.nav.light .hamburger span {
  background: var(--text-dark)
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* ============ MOBILE MENU ============ */
.mobile-menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 10, 10, .98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  justify-content: space-between;
  padding: 0 24px 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  flex-shrink: 0;
}

.mobile-menu-logo {
  font-family: var(--u);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -.01em;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 36px;
  padding: 0;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  background: none;
  font-family: var(--mono);
  letter-spacing: 0;
}

.mobile-menu-close:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-links a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .2s;
}

.mobile-menu-links a::after {
  content: '→';
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}

.mobile-menu-links a:active {
  color: var(--lime)
}

.mobile-menu-links a:active::after {
  opacity: 1;
  transform: translateX(0)
}

.mobile-menu-links a:last-child {
  border-bottom: none
}

.mobile-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.mobile-menu-foot .lang button {
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
  letter-spacing: .06em
}

.mobile-menu-foot .lang button.active {
  color: #fff
}

.mobile-menu-foot .lang .sep {
  color: rgba(255, 255, 255, .15)
}

.mobile-menu-cta {
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 0;
}

/* ============ HERO ============ */
.hero {
  background: var(--bg-dark);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(circle, #1f1f1f 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: .85;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 480px;
  margin: 0;
}

.hero-label {
  margin-bottom: 28px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .45);
}

.hero h1.h-hero {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.hero-h {
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 48px);
}

.hero-h-line {
  display: block;
  white-space: nowrap;
}

.hero-h .highlight {
  color: var(--lime);
  font-weight: 500
}

.hero-sub {
  font-family: var(--m);
  font-size: 14px;
  line-height: normal;
  color: rgb(255, 255, 255);
  max-width: 580px;
  margin: 28px 0 0;
  text-align: left;
}

.hero-ctas {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start
}

.btn-primary,
button.btn-primary {
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--u);
  font-weight: 600;
  font-size: 13px;
  padding: 13px 24px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: #fff
}

.btn-ghost {
  background: transparent;
  color: var(--gray-on-dark);
  font-family: var(--m);
  font-weight: 500;
  font-size: 14px;
  padding: 13px 0;
  cursor: pointer;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-ghost:hover {
  color: #fff
}

[data-bg="light"] .btn-ghost {
  color: var(--text-mute);
}

[data-bg="light"] .btn-ghost:hover {
  color: #000;
}

.hero-metric {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  margin-top: 20px;
  letter-spacing: .06em;
}

.hero-live {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .05em;
}

.hero-live .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  animation: lime-pulse 1.5s ease-in-out infinite;
}

@media (max-width: 768px) {
  .hero {
    padding: 100px 24px 60px
  }

  .hero-sub {
    font-size: 16px;
    max-width: 100%
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    text-align: center;
    justify-content: center
  }
}

section {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden
}

.sec-dark {
  background: var(--bg-dark);
  color: #fff
}

.sec-white {
  background: #fff;
  color: var(--text-dark)
}

.sec-gray {
  background: var(--bg-light);
  color: var(--text-dark)
}

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .55;
}

.sec-num {
  position: absolute;
  font-family: var(--u);
  font-weight: 900;
  font-size: 180px;
  color: #1a1a1a;
  line-height: 1;
  top: 40px;
  right: 5%;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
}

/* ============ PROBLEM - STICKY SCROLL ============ */
.prob-scroll-outer {
  position: relative;
  height: 280vh;
  background: #fff;
  overflow: visible !important;
  /* override section{overflow:hidden} - sticky won't work otherwise */
  padding: 0 !important;
  /* override section padding */
}

.prob-scroll-outer .grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0
}

.prob-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: stretch;
  z-index: 1;
  padding: 0 48px;
}

.prob-layout {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 56px;
  align-items: stretch;
  width: 100%;
}

.prob-left-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 100px;
}

.prob-heading {
  font-family: var(--u);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--text-dark);
}

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

.prob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
  flex-shrink: 0;
}

.prob-dot.active {
  background: #0F0F0F;
  transform: scale(1.4)
}

.prob-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 80px 0;
}

.prob-card {
  position: relative;
  background: #0F0F0F;
  border-radius: 24px;
  flex: 1;
  overflow: hidden;
}

.prob-panel {
  position: absolute;
  inset: 0;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.prob-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.prob-panel-num {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .3);
  letter-spacing: .1em;
}

.prob-panel-num--lime {
  color: var(--lime)
}

.prob-panel-body {
  margin-top: auto
}

.prob-panel-title {
  font-family: var(--u);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 20px;
}

.prob-panel-title--lime {
  color: var(--lime)
}

.prob-panel-text {
  font-family: var(--m);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
  max-width: 480px;
  margin: 0;
}

.prob-solution-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(192, 204, 114, .4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: .1em;
}

.prob-card-nav {
  position: absolute;
  bottom: 40px;
  right: 48px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.prob-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .22s, color .22s, background .22s, transform .15s;
}

.prob-arrow:hover {
  border-color: rgba(192, 204, 114, .55);
  color: var(--lime);
  background: rgba(192, 204, 114, .08);
}

.prob-arrow:active {
  transform: scale(.94);
}

.prob-arrow:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

@media (max-width:768px) {
  .prob-scroll-outer {
    height: 280vh
  }

  .prob-sticky {
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    padding: 0 20px;
    overflow: hidden;
  }

  .prob-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    height: 100%;
    align-content: stretch;
  }

  .prob-left-col {
    padding-top: 20px;
    gap: 16px;
    flex-shrink: 0;
  }

  .prob-heading {
    font-size: clamp(16px, 4.5vw, 20px)
  }

  .prob-card-wrap {
    padding: 0 0 16px;
    flex: 1;
    min-height: 0;
  }

  .prob-card {
    min-height: 0;
    height: 100%;
    border-radius: 20px;
  }

  .prob-panel {
    position: absolute;
    inset: 0;
    padding: 28px 24px;
    opacity: 0;
    transform: translateY(18px);
    display: flex;
    pointer-events: none;
  }

  .prob-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .prob-panel-title {
    font-size: clamp(20px, 5vw, 26px)
  }

  .prob-panel-text {
    font-size: 15px;
    max-width: none
  }

  .prob-card-nav {
    bottom: 20px;
    right: 20px;
  }

  .prob-arrow {
    width: 34px;
    height: 34px;
  }
}

/* ============ SOLUTION ============ */
.sec-center {
  text-align: center;
  position: relative;
  z-index: 1
}

.sec-center .h-sec {
  margin-top: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
}

.sec-sub {
  font-family: var(--m);
  font-weight: 500;
  font-size: 18px;
  color: var(--gray-on-dark);
  max-width: 560px;
  margin: 20px auto 0;
  line-height: 1.6
}

.sec-white .sec-sub,
.sec-gray .sec-sub {
  color: var(--text-mute)
}

/* ============ SOLUTION / HOW IT WORKS (scroll-pinned, layered) ============ */
.how-it-works {
  height: 350vh;
  position: relative;
  background: var(--bg-dark);
  padding: 0;
  overflow: visible;
}

.how-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  align-items: center;
  position: relative;
}

/* Left column: text */
.how-text {
  position: relative;
  min-height: 320px
}

.how-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}

.how-step.active {
  opacity: 1;
  transform: translateY(0)
}

.how-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
  margin-bottom: 24px;
  display: block;
}

.how-title {
  color: #fff;
  margin: 0 0 20px;
  max-width: 18ch;
  line-height: 1.2;
}

.how-body {
  font-family: var(--m);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-on-dark);
  max-width: 480px;
  margin: 0;
}

/* Right column: layered scene */
.how-scene {
  position: relative;
  width: 100%;
  height: 600px;
  perspective: 1400px;
}

.scene-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
}

.scene-group.active {
  opacity: 1;
  pointer-events: auto
}

.card {
  position: absolute;
  background: #161616;
  border: 0.5px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 16px 18px;
  color: #fff;
  font-size: 14px;
  font-family: var(--m);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1),
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s cubic-bezier(.22, 1, .36, 1);
}

.card-main {
  width: 460px;
  min-height: 340px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  padding: 0;
  overflow: hidden;
  z-index: 10;
}

.card-main .card-header {
  background: var(--lime);
  color: #0F0F0F;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 500;
}

.card-main .card-body {
  padding: 28px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.card-main.card-screenshot .card-body {
  padding: 0;
  min-height: 0
}

.card-main .card-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden
}

.card-main .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* Dropzone */
.card-dropzone .dropzone-text {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  margin-top: 8px;
}

.card-dropzone .dropzone-progress {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .04);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

.card-brand-body {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 28px !important;
  min-height: 280px;
}

.card-brand-name {
  font-family: var(--u);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.02em;
}

.card-brand-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.card-brand-lines span {
  display: block;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  font-family: var(--m);
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.4;
}

.card-dropzone .check {
  color: var(--lime);
  font-size: 14px
}

/* Aux cards: positioned relative to center via CSS vars */
.card-aux {
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--rot, 0deg)) scale(1);
  font-size: 13px;
  z-index: 5;
  width: 200px;
  padding: 14px 16px;
}

.card-filter {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
  padding: 10px 14px;
}

.card-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .7);
  padding: 8px 14px;
}

.card-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  padding: 8px 14px;
}

.card-timer {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot-live {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  flex-shrink: 0;
  animation: lime-pulse 1.5s ease-in-out infinite;
}

@keyframes lime-pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

/* Metric (step 2) */
.card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
}

.card-metric strong {
  font-family: var(--u);
  font-weight: 500;
  font-size: 28px;
  color: var(--lime);
  line-height: 1;
}

.card-metric span {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}

/* Score (step 3) */
.card-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px
}

.card-score .score-label {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .1em;
}

.card-score strong {
  font-family: var(--u);
  font-weight: 500;
  font-size: 32px;
  color: var(--lime);
}

/* Quote (step 3) */
.card-quote {
  font-style: italic;
  color: rgba(255, 255, 255, .85);
  max-width: 210px;
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 16px;
}

.card-quote .quote-mark {
  color: var(--lime);
  font-size: 22px;
  font-style: normal;
  margin-right: 4px;
  vertical-align: -4px;
}

/* Growth (step 4) */
.card-growth {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px
}

.card-growth .growth-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}

.card-growth .growth-row {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.card-growth strong {
  font-family: var(--u);
  font-weight: 500;
  font-size: 22px;
}

.card-growth .hi {
  color: var(--lime)
}

.card-growth .arrow {
  color: rgba(255, 255, 255, .4)
}

/* Before/After (step 4) */
.card-ba {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
  font-size: 13px;
  padding: 12px 16px;
}

.card-ba .ba-before {
  color: rgba(255, 255, 255, .4);
  text-decoration: line-through
}

.card-ba .ba-arrow {
  color: var(--lime);
  text-align: center;
  font-size: 14px
}

.card-ba .ba-after {
  color: #fff;
  font-weight: 500
}

.card-version {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Progress dots */
.how-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  animation: hint-bounce 1.6s ease-in-out infinite;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 10;
}

.how-scroll-hint.hidden {
  opacity: 0
}

@keyframes hint-bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0)
  }

  50% {
    transform: translateX(-50%) translateY(6px)
  }
}

.how-progress {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.how-progress__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.how-progress .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .3s, transform .3s;
}

.how-progress .dot.active {
  background: var(--lime);
  transform: scale(1.3)
}

.how-progress .dot:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Mobile: keep 400vh + sticky pin, compact scene strip on top */
@media (max-width:900px) {
  .how-sticky {
    align-items: stretch;
    overflow: hidden;
    top: 72px;
    /* below the sticky nav */
    height: calc(100vh - 72px);
  }

  .how-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(340px, 44vh) 1fr;
    gap: 0;
    padding: 0;
    height: 100%;
    align-items: stretch;
  }

  /* ── Scene: desktop-like card stack, scaled down ── */
  .how-scene {
    grid-row: 1;
    height: 100%;
    min-height: 340px;
    width: 100%;
    border-radius: 0 0 14px 14px;
    overflow: visible;
    border: none;
    position: relative;
    margin-top: -30px;
  }

  .scene-group {
    transform: scale(0.46);
    transform-origin: center center;
  }

  .card-aux {
    display: block;
    width: 170px;
    padding: 10px 12px;
    font-size: 11px;
  }

  .card-main {
    width: 460px !important;
    min-height: 340px !important;
    max-width: none !important;
    max-height: none !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  }

  .card-main .card-body {
    min-height: 280px !important;
    padding: 28px !important;
  }

  .card-main.card-screenshot .card-body {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .card-main .card-img img,
  .card-main .card-body.card-img img {
    max-height: none;
    object-fit: cover;
    width: 100%;
  }

  /* ── Text: remaining viewport height ── */
  .how-text {
    grid-row: 2;
    min-height: 0;
    height: 100%;
    position: relative;
    padding: 28px 24px 64px;
  }

  .how-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 28px 24px 64px;
  }

  .how-label {
    font-size: 11px;
    margin-bottom: 6px
  }

  .how-title {
    font-size: clamp(20px, 5.5vw, 28px);
    max-width: none;
    line-height: 1.2
  }

  .how-body {
    font-size: 15px;
    line-height: 1.55;
    max-width: none
  }

  /* Progress dots: centered at bottom */
  .how-progress {
    display: flex;
    flex-direction: row;
    gap: clamp(18px, 5vw, 28px);
    position: absolute;
    bottom: 20px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    z-index: 20;
  }

  .how-progress__dots {
    gap: 8px;
  }

  .how-progress .dot.active {
    transform: scale(1.3)
  }
}

/* ============ SOLUTION / FLOW (legacy) ============ */
.flow-head {
  margin-bottom: 80px;
  max-width: 880px
}

.flow-head .h-sec {
  color: #fff
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 120px
}

.flow-step {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 80px;
  align-items: center;
}

.flow-step:nth-child(even) {
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
}

.flow-step:nth-child(even) .flow-text {
  order: 2
}

.flow-step:nth-child(even) .flow-media {
  order: 1
}

.flow-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px
}

.flow-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
}

.flow-title {
  color: #fff;
  margin: 0;
  max-width: 18ch;
  line-height: 1.2;
}

.flow-body {
  font-family: var(--m);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-on-dark);
  max-width: 48ch;
  margin: 0;
}

.flow-media {
  position: relative;
  aspect-ratio: 16/10
}

.flow-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 0.5px solid var(--border-dark);
  background: #0F0F0F;
}

.flow-placeholder {
  width: 100%;
  height: 100%;
  background: #0F0F0F;
  border: 0.5px solid var(--border-dark);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.flow-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--lime)
}

.flow-placeholder-cap {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  color: #7a7a7a;
}

@media (max-width: 900px) {
  .flow-steps {
    gap: 60px
  }

  .flow-step,
  .flow-step:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .flow-step:nth-child(even) .flow-text {
    order: 0
  }

  .flow-step:nth-child(even) .flow-media {
    order: 1
  }

  .flow-head {
    margin-bottom: 48px
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  position: relative;
}

.step {
  text-align: left;
  padding: 24px;
  border: 1px solid #1f1f1f;
  border-radius: 14px;
  background: rgba(26, 26, 26, .4);
  transition: transform .3s, border-color .3s;
}

.step:hover {
  transform: translateY(-4px);
  border-color: #2a2a2a
}

.step-icon {
  width: 36px;
  height: 36px;
  color: var(--lime);
  margin-bottom: 18px
}

.step-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  letter-spacing: .12em;
  margin-bottom: 8px
}

.step-title {
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2
}

.step-body {
  font-family: var(--m);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-on-dark)
}

.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px
}

.shot {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  overflow: hidden;
}

.shot-img {
  aspect-ratio: 16/9;
  background: #0e0e0e;
  overflow: hidden
}

.shot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center
}

.shot-cap {
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  letter-spacing: .06em;
  border-top: 1px solid var(--border-dark)
}

.sec-white .shot,
.sec-gray .shot {
  background: var(--bg-card);
  border-color: var(--border-dark)
}

.sec-white .shot-cap,
.sec-gray .shot-cap {
  color: var(--gray-on-dark)
}

/* ============ TECHNOLOGY ============ */
#tech {
  margin-top: -160px;
  /* overlap: top 160px sits behind Helixa green block */
  padding-top: clamp(220px, 16vw, 300px);
  position: relative;
  z-index: 1;
}

.tech-head {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.tech-head-clip {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 8px;
}

.tech-head-title {
  margin-top: 0;
  color: var(--text-dark);
  max-width: 18ch;
  will-change: transform;
}

.tech-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
  margin-top: 80px;
  position: relative;
  z-index: 1;
}

.tech-block {
  padding: 0
}

.tech-block-t {
  color: var(--text-dark);
  margin-bottom: 14px;
  line-height: 1.2;
  max-width: 22ch;
}

.tech-block-b {
  font-family: var(--m);
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.65;
  max-width: 36ch;
}

.tech-block-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
  transition: color .2s
}

.tech-block-link:hover {
  color: var(--lime)
}

/* ============ TRY DEMO (mock playground) ============ */
.demo-sec {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0;
}

.demo-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 40px);
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.demo-head {
  text-align: center;
}

.demo-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-mute);
  margin-bottom: 16px;
}

.demo-head .h-sec {
  margin-left: auto;
  margin-right: auto;
}

.demo-sub {
  max-width: 58ch;
  margin: 18px auto 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--text-mute);
}

.demo-panel {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: clamp(14px, 1.5vw, 18px);
  padding: clamp(20px, 2.5vw, 28px);
  width: 100%;
}

.demo-form__hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .04em;
  margin-top: 10px;
  text-align: center;
}

.demo-form__note {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
  opacity: .85;
}

.demo-form__error {
  font-family: var(--m);
  font-size: 13px;
  color: #c44;
  margin-top: 10px;
}

.demo-audience {
  margin-bottom: 12px;
}

.demo-audience__label {
  display: block;
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6b6b);
  margin-bottom: 8px;
}

.demo-audience__select {
  display: block;
  width: 100%;
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-dark);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 40px 12px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.demo-audience__select:hover {
  border-color: rgba(192, 204, 114, .55);
}

.demo-audience__select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(192, 204, 114, .12);
}

.demo-audience__select:disabled {
  opacity: .7;
  cursor: wait;
}

.demo-audience__select.is-empty {
  color: var(--text-muted, #6b6b6b);
}

.demo-audience__hint {
  font-family: var(--m);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #6b6b6b);
  margin-top: 8px;
}

.demo-audience__hint.is-error {
  color: #c44;
}

.demo-input-wrap {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.demo-input-wrap:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(192, 204, 114, .12);
}

.demo-input {
  display: block;
  width: 100%;
  min-width: 0;
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 16px 10px;
  resize: vertical;
  min-height: 108px;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 204, 114, .85) transparent;
}

.demo-input:focus {
  outline: none;
}

.demo-input::-webkit-scrollbar {
  width: 4px;
}

.demo-input::-webkit-scrollbar-track {
  background: transparent;
}

.demo-input::-webkit-scrollbar-thumb {
  background: rgba(192, 204, 114, .75);
  border-radius: 999px;
}

.demo-input::-webkit-scrollbar-thumb:hover {
  background: var(--lime);
}

.demo-input::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.demo-input::-webkit-scrollbar-corner {
  background: transparent;
}

.demo-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 10px;
}

.demo-attach {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0;
  transition: color .2s, transform .15s;
}

.demo-attach:hover {
  color: var(--text-dark);
}

.demo-attach:active {
  transform: scale(.92);
}

.demo-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  background: var(--lime);
  color: var(--text-dark);
  border: none;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.demo-submit svg {
  display: block;
}

.demo-submit:hover:not(:disabled) {
  background: #d4e088;
}

.demo-submit:active:not(:disabled) {
  transform: scale(.94);
}

.demo-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.demo-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 4px;
  padding: 6px 10px 6px 12px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dark);
}

.demo-file-chip[hidden] {
  display: none;
}

.demo-file-chip__remove {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0 2px;
}

.demo-file-chip__remove:hover {
  color: var(--text-dark);
}

.demo-loading {
  padding: clamp(24px, 3vw, 36px) 0 8px;
}

.demo-loading__bar {
  height: 3px;
  background: var(--bg-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}

.demo-loading__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--lime);
  border-radius: 2px;
  transition: width .4s ease;
}

.demo-loading__status {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .04em;
}

.demo-result__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.demo-result__score-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-mute);
  display: block;
  margin-bottom: 4px;
}

.demo-result__score strong {
  font-family: var(--u);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 40px);
  color: var(--text-dark);
  line-height: 1;
}

.demo-result__score strong.is-low {
  color: #b85c5c;
}

.demo-result__score strong.is-mid {
  color: #a68b3c;
}

.demo-result__score strong.is-high {
  color: #5a8f5a;
}

.demo-result__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
}

.demo-result__quotes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-quote {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
}

.demo-quote__text {
  font-family: var(--m);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
  font-style: italic;
}

.demo-quote__text::before {
  content: '"';
  color: var(--lime);
  font-style: normal;
  font-size: 18px;
  margin-right: 2px;
  vertical-align: -2px;
}

.demo-quote__agent {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: .04em;
  margin-top: 8px;
}

.demo-result__note {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 20px 0 0;
}

.demo-result__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.demo-result__actions .btn-ghost {
  color: var(--text-mute);
  padding: 13px 0;
}

.demo-result__actions .btn-ghost:hover {
  color: var(--text-dark);
}

.demo-panel.is-running .demo-form {
  pointer-events: none;
  opacity: .45;
}

@media (max-width: 600px) {
  .demo-sub {
    max-width: none;
  }
}

/* ============ MANIFEST (lime block) ============ */
.sec-quote {
  padding: clamp(12px, 1.5vw, 20px) clamp(10px, 1.2vw, 16px) 0;
  background: var(--bg-light);
  box-sizing: border-box;
  overflow: visible;
}

/* Green manifesto block sits on top of the pricing section */
#manifesto-block,
#helixa-green-block {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.sec-quote .quote-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.quote-panel {
  width: 100%;
  margin: 0;
  background: #C0CC72;
  padding: 120px 10vw 180px;
  min-height: 70vh;
  border: none;
  border-radius: clamp(14px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.quote-tag {
  margin: 0 0 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(0, 0, 0, .5);
  text-transform: uppercase;
}

.quote-headline {
  margin: 0 0 48px;
  max-width: 900px;
  font-family: var(--u);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #0F0F0F;
}

.quote-line {
  display: block
}

.quote-headline strong {
  font-weight: 600
}

.quote-sign {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(0, 0, 0, .4);
  letter-spacing: .05em;
}

.quote-desc {
  margin: 0 0 40px;
  max-width: 56ch;
  font-family: var(--m);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(15, 15, 15, .65);
}

.quote-panel .helixa-green-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.quote-panel .helixa-green-pills span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, .22);
  color: rgba(15, 15, 15, .75);
}

/* Helixa block - typography + scroll reveal */
#helixa-green-block .quote-panel {
  overflow: hidden;
  will-change: transform, opacity;
  min-height: auto;
  padding: clamp(56px, 7vw, 88px) clamp(32px, 6vw, 72px);
  align-items: center;
  text-align: center;
}

#helixa-green-block .quote-tag {
  margin-bottom: 24px;
  color: rgba(0, 0, 0, .42);
}

#helixa-green-block .quote-headline {
  margin: 0 0 24px;
  max-width: 11ch;
  font-size: clamp(32px, 4.5vw, 60px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

#helixa-green-block .quote-line+.quote-line {
  margin-top: .06em;
}

#helixa-green-block .quote-line-accent {
  font-weight: 600;
  color: #0a0a0a;
}

#helixa-green-block .quote-desc {
  margin: 0 auto 24px;
  max-width: min(72ch, 100%);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(15, 15, 15, .72);
  padding-left: 0;
  border-left: none;
}

#helixa-green-block .helixa-green-pills {
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}

#helixa-green-block .helixa-green-pills span {
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(0, 0, 0, .1);
  color: rgba(15, 15, 15, .82);
  padding: 8px 14px;
}

#helixa-green-block .quote-helixa-link {
  margin: 16px 0 0;
  text-align: center
}

#helixa-green-block .quote-helixa-link a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 15, 15, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 15, 15, .25);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s
}

#helixa-green-block .quote-helixa-link a:hover {
  color: #000;
  border-color: var(--lime)
}

#helixa-green-block .quote-sign {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .38);
  margin-top: 0
}

#helixa-green-block .helixa-reveal {
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  #helixa-green-block .quote-panel {
    padding: 48px 24px;
  }

  #helixa-green-block .quote-headline {
    max-width: none;
    font-size: clamp(28px, 8vw, 40px);
  }

  #helixa-green-block .quote-desc {
    max-width: none;
  }
}

/* ============ COMPARISON ============ */
.cmp-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 80px;
  align-items: flex-start;
  position: relative;
  z-index: 1
}

.cmp-left .h-sec {
  margin-top: 18px;
  color: #fff
}

.cmp-left p {
  font-family: var(--m);
  font-size: 15px;
  color: var(--gray-on-dark);
  margin-top: 14px
}

.cmp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.cmp-col {
  background: #161616;
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 24px;
}

.cmp-col.mim {
  border-color: #3d4525;
  background: #171a10
}

.cmp-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray-on-dark);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block
}

.cmp-col.mim .cmp-h {
  color: var(--lime)
}

.cmp-row {
  padding: 18px 0;
  border-top: 1px solid #222
}

.cmp-row:first-of-type {
  border-top: none;
  padding-top: 0
}

.cmp-sign {
  font-family: var(--mono);
  color: #666;
  font-weight: 500;
  font-size: 14px;
  margin-right: 8px
}

.cmp-col.mim .cmp-sign {
  color: var(--lime)
}

.cmp-t {
  font-family: var(--u);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 6px;
  display: inline
}

.cmp-b {
  font-family: var(--m);
  font-size: 13px;
  color: var(--gray-on-dark);
  line-height: 1.6;
  margin-top: 6px
}

.cmp-note {
  font-family: var(--m);
  font-size: 14px;
  color: var(--gray-on-dark);
  margin-top: 32px;
  line-height: 1.6;
  max-width: 720px
}

/* ============ FOR WHO ============ */
.who-head {
  max-width: 880px
}

.who-head .h-sec {
  margin-top: 18px;
  color: var(--text-dark)
}

.who-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px
}

.who-card {
  background: var(--bg-light);
  border-radius: 16px;
  padding: 32px;
  border-top: 3px solid transparent;
  transition: all .3s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.who-card:hover {
  background: var(--bg-dark);
  border-top-color: var(--lime);
  transform: translateY(-4px);
}

.who-card:hover .who-tag {
  color: var(--lime)
}

.who-card:hover .who-t {
  color: #fff
}

.who-card:hover .who-b {
  color: var(--gray-on-dark)
}

.who-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-mute);
  text-transform: uppercase;
  transition: color .3s
}

.who-t {
  color: var(--text-dark);
  transition: color .3s
}

.who-b {
  font-family: var(--m);
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.6;
  transition: color .3s;
  flex: 1
}

.who-pill {
  align-self: flex-start;
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 20px;
  letter-spacing: .08em;
}

/* ============ PRICING ============ */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.price-left {
  width: 100%;
  text-align: left;
}

.price-left .h-sec {
  margin-top: 18px;
  color: var(--text-dark);
  max-width: none;
  width: 100%;
}

.price-left p {
  font-family: var(--m);
  font-size: 15px;
  color: var(--text-mute);
  margin-top: 14px;
}

.price-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  align-items: stretch;
}

.price-card {
  border-radius: 16px;
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s;
  min-width: 0;
}

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

.price-solo {
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-dark)
}

.price-free {
  background: #fff;
  border: 1px dashed var(--border-light);
  color: var(--text-dark)
}

.price-bout {
  background: var(--bg-dark);
  color: #fff;
  position: relative
}

.price-agency {
  background: var(--lime);
  color: var(--text-dark);
  border: 1px solid rgba(18, 18, 18, .08);
}

.price-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute)
}

.price-bout .price-label {
  color: var(--gray-on-dark)
}

.price-agency .price-label {
  color: rgba(18, 18, 18, .55)
}

.price-num {
  font-family: var(--u);
  font-weight: 600;
  font-size: clamp(32px, 2.8vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap
}

.price-num .price-amount {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit
}

.price-num .price-period {
  font-family: var(--m);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute)
}

.price-bout .price-num .price-period {
  color: var(--gray-on-dark)
}

.price-agency .price-num .price-period {
  color: rgba(18, 18, 18, .5)
}

.price-desc {
  font-family: var(--m);
  font-size: 14px;
  color: var(--text-mute)
}

.price-bout .price-desc {
  color: var(--gray-on-dark)
}

.price-agency .price-desc {
  color: rgba(18, 18, 18, .65)
}

.price-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px
}

.price-feats li {
  font-family: var(--m);
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--text-mute);
  padding-left: 16px;
  position: relative;
  line-height: 1.45
}

.price-bout .price-feats li {
  color: var(--gray-on-dark)
}

.price-agency .price-feats li {
  color: rgba(18, 18, 18, .7)
}

.price-feats li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--lime)
}

.price-agency .price-feats li::before {
  color: var(--text-dark)
}

.price-agency .price-addon {
  color: rgba(18, 18, 18, .55);
  border-top-color: rgba(18, 18, 18, .12);
}

.price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  padding: 5px 11px;
  border-radius: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-addon {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gray-on-dark);
  padding-top: 14px;
  border-top: 1px solid #222
}

/* Token usage block (pricing page) */
.price-tokens {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-light);
  text-align: center;
  position: relative;
  z-index: 1;
}

.price-section-label {
  display: inline-flex;
  margin: 0 auto 16px;
}

.price-plans-emerge .price-section-label {
  margin-bottom: 12px;
}

.price-tokens .price-section-label {
  margin-bottom: 16px;
}

.price-tokens-title {
  font-family: var(--u);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0 0 12px;
}

.price-tokens-lead {
  font-family: var(--m);
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--text-mute);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto clamp(28px, 3vw, 40px);
}

.price-tokens-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
  text-align: left;
  grid-column: 1 / -1;
  width: 100%;
}

.price-tokens.reveal-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-tokens.reveal-group>.reveal:not(.price-section-label) {
  width: 100%;
}

.price-tokens.reveal-group>.price-section-label.reveal {
  width: auto;
  align-self: center;
}

.price-tokens-metric.reveal {
  transform: translateY(32px);
}

.price-tokens-metric.reveal.in {
  transform: none;
}

.price-tokens-panel.reveal {
  transform: translateY(40px);
}

.price-tokens-metric {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: clamp(18px, 2vw, 24px);
}

.price-tokens-metric-val {
  font-family: var(--u);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-dark);
  line-height: 1;
}

.price-tokens-metric-unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-left: 6px;
}

.price-tokens-metric-desc {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 12px 0 0;
}

.price-tokens-panel {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}

.price-tokens-panel-title {
  font-family: var(--u);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: clamp(28px, 3.5vw, 40px) 0 16px;
  padding: 0;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.price-tokens-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.85fr) 1.35fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  font-family: var(--m);
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.45;
  text-align: left;
}

.price-tokens-row:first-child {
  border-top: none;
}

.price-tokens-row-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-light);
}

.price-tokens-row-head > span:last-child {
  justify-self: end;
  text-align: right;
}

.price-tokens-task {
  font-weight: 600;
}

.price-tokens-desc {
  color: var(--text-mute);
  font-size: 13px;
  text-align: left;
  justify-self: stretch;
}

.price-tokens-coef {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  background: rgba(192, 204, 114, .35);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  justify-self: end;
}

.price-tokens-foot {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.55;
  max-width: 58ch;
  margin: 20px auto 0;
}

/* Token top-up calculator */
.price-token-calc {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  padding: clamp(22px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  text-align: left;
  position: relative;
}

.price-token-calc__badge {
  position: absolute;
  top: clamp(18px, 2.2vw, 24px);
  right: clamp(18px, 2.2vw, 24px);
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #4a5200;
  background: rgba(192, 204, 114, .45);
  padding: 4px 8px;
  margin: 0;
}

.price-token-calc__title {
  font-family: var(--u);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0 0 8px;
  line-height: 1.2;
  padding-right: 7rem;
}

.price-token-calc__lead {
  font-family: var(--m);
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.55;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  max-width: 52ch;
}

.price-token-calc__out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.price-token-calc__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-token-calc__num {
  font-family: var(--u);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-dark);
  line-height: 1;
}

.price-token-calc__stat--price .price-token-calc__num {
  color: #4a5200;
}

.price-token-calc__unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.price-token-calc__equiv {
  font-family: var(--m);
  font-size: 14px;
  color: var(--text-mute);
  margin: 0 0 20px;
}

.price-token-calc__slider-wrap {
  display: block;
  margin-bottom: 14px;
}

.price-token-calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--lime) var(--fill, 8.16%), var(--border-light) var(--fill, 8.16%));
  outline: none;
  cursor: pointer;
  margin: 0;
}

.price-token-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dark);
  border: 3px solid var(--lime);
  cursor: pointer;
  transition: transform .15s;
}

.price-token-calc__range::-webkit-slider-thumb:hover {
  transform: scale(1.08);
}

.price-token-calc__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dark);
  border: 3px solid var(--lime);
  cursor: pointer;
}

.price-token-calc__range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}

.price-token-calc__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .04em;
}

.price-token-calc__note {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .price-tokens-metrics {
    grid-template-columns: 1fr;
  }

  .price-tokens-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .price-tokens-coef {
    justify-self: start;
  }

  .price-token-calc__out {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.price-foot {
  text-align: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light)
}

.price-foot .mono {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .08em;
  display: block;
  margin-bottom: 6px
}

.price-foot .sm {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute)
}

.price-enterprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 56px);
  padding: clamp(24px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: clamp(12px, 1.5vw, 16px)
}

.price-enterprise__title {
  font-family: var(--u);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 10px 0 8px;
  line-height: 1.2
}

.price-enterprise__lead {
  font-family: var(--m);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0;
  max-width: 52ch
}

.price-enterprise__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px
}

.wait-note a {
  color: var(--lime);
  text-decoration: none
}

.wait-note a:hover {
  text-decoration: underline
}

/* ============ TEAM ============ */
.team-head {
  max-width: 880px
}

.team-head .label {
  margin-bottom: 40px;
  display: block
}

.team-head .h-sec {
  margin-top: 0;
  color: var(--text-dark)
}

.team-head .sec-sub {
  margin: 24px 0 0;
  color: var(--text-mute);
  max-width: 560px
}

/* Full-width team photo */
.team-photo-wrap {
  position: relative;
  width: 100%;
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  /* height auto - image defines it */
}

.team-photo {
  display: block;
  width: 100%;
  height: clamp(340px, 55vw, 680px);
  object-fit: cover;
  object-position: center 40%;
}

/* Gradient for text readability */
.team-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .18) 45%,
      rgba(0, 0, 0, 0) 75%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: clamp(20px, 3vw, 44px);
}

.team-photo-person {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.team-photo-person--right {
  text-align: right;
  align-items: flex-end;
}

.team-photo-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.team-photo-name {
  font-family: var(--u);
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}

.name-lime {
  color: var(--lime)
}

.team-photo-role {
  font-family: var(--m);
  font-size: clamp(12px, 1vw, 13px);
  color: rgba(255, 255, 255, .55);
  margin: 4px 0 0;
}

.team-photo-bio {
  font-family: var(--m);
  font-size: clamp(11px, 0.9vw, 12px);
  color: rgba(255, 255, 255, .38);
  margin: 4px 0 0;
  line-height: 1.45;
  max-width: 26ch;
}

.team-photo-link {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  margin-top: 8px;
  transition: color .2s;
  letter-spacing: .04em;
}

.team-photo-link:hover {
  color: var(--lime)
}

/* Old cards - kept for compatibility, not used on about page */
.team-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--lime);
  text-transform: uppercase
}

.team-name {
  color: var(--text-dark);
  line-height: 1.2
}

.team-body {
  font-family: var(--m);
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.65
}

.team-note {
  margin-top: 24px;
  background: var(--bg-dark);
  color: #fff;
  border-radius: 12px;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: flex-start;
}

.team-note .label {
  margin: 0
}

.team-note p {
  font-family: var(--m);
  font-size: 15px;
  color: var(--gray-on-dark);
  line-height: 1.6
}

/* ============ WAITLIST ============ */
.wait {
  text-align: center;
  position: relative;
  z-index: 1
}

.wait .h-hero {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-top: 18px;
}

.wait .l1 {
  color: #fff;
  display: block
}

.wait .l2 {
  color: var(--lime);
  display: block
}

.wait-sub {
  font-family: var(--m);
  font-size: 18px;
  color: var(--gray-on-dark);
  max-width: 520px;
  margin: 24px auto 0;
  line-height: 1.6
}

.wait-form {
  max-width: 520px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.wait-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.wait-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left
}

.wait-form-field__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark)
}

.wait-form-field__req {
  color: #ff5c5c;
  font-weight: 600
}

.wait-form textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  color: #fff;
  font-family: var(--m);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 0;
  transition: border-color .2s;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.55
}

.wait-form textarea:focus {
  border-color: var(--lime)
}

.wait-form__error {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #ff6b6b;
  text-align: left
}

.wait-success {
  max-width: 520px;
  margin: 40px auto 0;
  padding: 28px 24px;
  border: 1px solid rgba(200, 255, 0, 0.35);
  border-radius: 8px;
  background: rgba(200, 255, 0, 0.06);
  text-align: center
}

.wait-success__title {
  font-family: var(--u);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px
}

.wait-success__text {
  font-family: var(--m);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-on-dark);
  margin: 0
}

.wait-form input,
.wait-form select {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  color: #fff;
  font-family: var(--m);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 0;
  transition: border-color .2s;
  width: 100%;
}

.wait-form input:focus,
.wait-form select:focus {
  border-color: var(--lime)
}

.wait-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23BFBFBF' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px
}

.wait-form button {
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--u);
  font-weight: 600;
  font-size: 14px;
  padding: 14px;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s;
  width: 100%;
}

.wait-form button:hover {
  background: #fff
}

.wait-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  margin-top: 20px;
  letter-spacing: .06em
}

@media (max-width:640px) {
  .wait-form__grid {
    grid-template-columns: 1fr
  }
}

/* ============ LYUTIK AI ASSISTANT ============ */
.lyutik-sec {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0;
  background-image: radial-gradient(circle, #1f1f1f 1px, transparent 1px);
  background-size: 28px 28px;
}

.lyutik-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.lyutik-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray-on-dark);
  margin-bottom: 16px;
}

.lyutik-sub {
  color: rgba(255, 255, 255, .72);
  max-width: 52ch;
  margin-top: 18px;
}

.lyutik-feats {
  list-style: none;
  margin: clamp(28px, 3vw, 36px) 0 clamp(28px, 3vw, 36px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lyutik-feat {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 18px 14px 20px;
  border-left: 2px solid rgba(192, 204, 114, .28);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .02);
  cursor: default;
  outline: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

.lyutik-feat strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--u);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  transition: color .28s ease;
}

.lyutik-feat strong::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  color: rgba(192, 204, 114, .45);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .28s ease;
}

.lyutik-feat span {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  transform: translateY(-6px);
  transition: max-height .45s cubic-bezier(.22, 1, .36, 1), opacity .32s ease, transform .45s cubic-bezier(.22, 1, .36, 1), margin-top .35s ease;
}

@media (hover: hover) and (pointer: fine) {

  .lyutik-feat:hover,
  .lyutik-feat:focus-visible {
    background: rgba(192, 204, 114, .08);
    border-left-color: var(--lime);
    box-shadow: inset 0 0 0 1px rgba(192, 204, 114, .14);
    padding-bottom: 16px;
  }

  .lyutik-feat:hover strong,
  .lyutik-feat:focus-visible strong {
    color: rgba(255, 255, 255, .96);
  }

  .lyutik-feat:hover strong::after,
  .lyutik-feat:focus-visible strong::after {
    transform: rotate(45deg);
    color: var(--lime);
  }

  .lyutik-feat:hover span,
  .lyutik-feat:focus-visible span {
    max-height: 5em;
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
  }
}

@media (hover: none),
(prefers-reduced-motion: reduce) {
  .lyutik-feat {
    gap: 6px;
    padding-bottom: 14px;
  }

  .lyutik-feat strong::after {
    display: none;
  }

  .lyutik-feat span {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

.lyutik-cta {
  flex: 1;
  min-width: min(100%, 200px);
  justify-content: center;
}

.lyutik-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: clamp(16px, 2vw, 20px);
}

.lyutik-actions .btn-ghost {
  flex: 1;
  min-width: min(100%, 140px);
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
}

.lyutik-actions .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

.lyutik-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.lyutik-mock {
  background: #0d0d0d;
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}

.lyutik-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dark);
  background: #141414;
}

.lyutik-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
}

.lyutik-mock__dot:first-child {
  background: #c44;
}

.lyutik-mock__dot:nth-child(2) {
  background: #ca4;
}

.lyutik-mock__dot:nth-child(3) {
  background: #6a6;
}

.lyutik-mock__title {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .35);
}

.lyutik-mock__thread {
  padding: clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 480px;
  overflow: hidden;
}

.lyutik-msg--user {
  align-self: flex-end;
  max-width: 88%;
  background: rgba(192, 204, 114, .14);
  border: 1px solid rgba(192, 204, 114, .28);
  border-radius: 12px 12px 4px 12px;
  padding: 10px 14px;
}

.lyutik-msg--user p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}

.lyutik-msg--bot {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 96%;
}

.lyutik-msg__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.lyutik-msg__body {
  flex-grow: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px 12px 12px 12px;
  padding: 10px 14px;
}

.lyutik-msg__body p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

.lyutik-msg__body p:last-child {
  margin-bottom: 0;
}

.lyutik-msg--small {
  opacity: .92;
}

.lyutik-widget {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}

.lyutik-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 10px;
}

.lyutik-widget__status {
  color: var(--lime);
  text-transform: lowercase;
}

.lyutik-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.lyutik-widget__tags span {
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(192, 204, 114, .12);
  color: var(--lime);
  border: 1px solid rgba(192, 204, 114, .22);
}

.lyutik-widget__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 12px;
}

.lyutik-widget__btn {
  width: 100%;
  font-family: var(--u);
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-radius: 0;
  background: var(--lime);
  color: var(--text-dark);
  border: none;
  cursor: default;
  pointer-events: none;
}

.lyutik-aside .reveal {
  transition-delay: .18s;
}

@media (prefers-reduced-motion: no-preference) {

  .lyutik-mock:not(.is-live) .lyutik-msg,
  .lyutik-mock:not(.is-live) .lyutik-widget {
    opacity: 0;
  }

  .lyutik-mock.is-live .lyutik-widget__btn {
    animation: lyutik-btn-glow 2.8s ease-in-out 0.4s infinite;
  }

  .lyutik-mock.is-live .lyutik-msg__avatar {
    animation: lyutik-avatar-pop 0.55s cubic-bezier(.22, 1, .36, 1);
  }
}

@keyframes lyutik-avatar-pop {
  0% {
    transform: scale(0.82);
    opacity: 0.4;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lyutik-btn-glow {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(192, 204, 114, 0);
  }

  50% {
    box-shadow: 0 0 18px rgba(192, 204, 114, .22);
  }
}

@media (max-width:900px) {
  .lyutik-layout {
    grid-template-columns: 1fr;
  }

  .lyutik-aside {
    order: -1;
  }
}

.page-for-grid {
  padding-top: clamp(12px, 2vw, 20px);
  padding-bottom: clamp(48px, 8vw, 80px);
}

.page-for-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.page-for-links {
  padding-bottom: clamp(48px, 8vw, 80px);
}

.for-links__lead {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 3vw, 36px);
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mute);
}

.for-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.for-links__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2vw, 20px);
  background: #fff;
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}

.for-links__item:hover {
  border-color: rgba(192, 204, 114, .55);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.for-links__item strong {
  font-family: var(--u);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}

.for-links__item span {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
}

@media (max-width:900px) {
  .page-for-cards {
    grid-template-columns: 1fr;
  }

  .for-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.for-links__lead a {
  color: var(--text-dark);
  font-weight: 600;
}

.for-card__link {
  margin: 0 0 16px;
  font-size: 13px;
}

.for-card__link a {
  color: var(--text-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.for-card__link a:hover {
  color: var(--lime);
}

.for-links__grid--lp {
  grid-template-columns: repeat(3, 1fr);
}

.for-links__grid--secondary {
  margin-top: 12px;
}

@media (max-width:520px) {
  .for-links__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ LP: AD LANDINGS ============ */
.page-lp {
  padding-bottom: 0;
}

.page-lp section {
  padding-top: 0;
  padding-bottom: 0;
}

.page-lp .lp-hero {
  padding: clamp(100px, 14vw, 140px) 0 clamp(72px, 10vw, 100px);
}

.page-lp .lp-section {
  padding: clamp(56px, 8vw, 88px) 0;
}

.page-lp .lp-section.lp-action {
  padding-bottom: clamp(64px, 9vw, 96px);
}

.page-lp .banner {
  display: none;
}

.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(18, 18, 18, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.lp-nav__logo {
  font-family: var(--u);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-nav__logo img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.lp-nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-nav .lang button {
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
}

.lp-nav .lang button.active {
  color: #fff;
}

.lp-nav .lang .sep {
  color: rgba(255, 255, 255, .15);
}

.lp-nav__cta {
  font-size: 12px;
  padding: 8px 16px;
}

.lp-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray-on-dark);
  margin-bottom: 16px;
}

.lp-kicker--dark {
  color: var(--text-mute);
}

.lp-hero {
  position: relative;
  padding: clamp(100px, 14vw, 140px) 0 clamp(72px, 10vw, 100px);
  overflow: hidden;
}

.lp-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 40%, rgba(192, 204, 114, .12), transparent 55%),
    radial-gradient(circle, #1f1f1f 1px, transparent 1px);
  background-size: auto, 28px 28px;
  pointer-events: none;
}

.lp-hero__inner {
  position: relative;
  max-width: 720px;
}

.lp-hero__title {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 20px;
}

.lp-hero__title .highlight {
  color: var(--lime);
}

.lp-hero__sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  max-width: 54ch;
  margin: 0 0 28px;
}

.lp-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.lp-hero__note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gray-on-dark);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.lp-btn--lg {
  font-size: 15px;
  padding: 16px 32px;
}

.lp-section {
  position: relative;
  padding: clamp(56px, 8vw, 88px) 0;
}

.lp-section__head {
  margin-bottom: clamp(28px, 4vw, 40px);
}

.lp-h2 {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text-dark);
  margin: 0;
}

.lp-h2--light {
  color: #fff;
}

.lp-h3 {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  margin: 0 0 20px;
  color: var(--text-dark);
}

.lp-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.lp-pain-card {
  background: #fff;
  border: 1px solid var(--border-light);
  padding: clamp(20px, 2.5vw, 28px);
}

.lp-pain-card__n {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--lime);
  margin-bottom: 12px;
  letter-spacing: .08em;
}

.lp-pain-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dark);
}

.lp-how {
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-steps strong {
  font-family: var(--u);
  font-size: 16px;
  color: var(--text-dark);
}

.lp-steps span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}

.sec-white {
  background: #fff;
}

.lp-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.lp-outcome {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--border-light);
  background: var(--bg-light);
}

.lp-outcome__val {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--lime);
  display: block;
  margin-bottom: 10px;
}

.lp-outcome h3 {
  font-family: var(--u);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--text-dark);
}

.lp-outcome p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}

.lp-preview {
  max-width: 520px;
  margin: 0 auto clamp(32px, 4vw, 40px);
}

.lp-preview__mock {
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 20px;
  color: #fff;
}

.lp-preview__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2a2a2a;
}

.lp-preview__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
  width: 100%;
}

.lp-preview__score strong {
  font-family: var(--u);
  font-size: 36px;
  font-weight: 600;
  color: var(--lime);
  line-height: 1;
}

.lp-preview__delta {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.lp-preview__quotes p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.lp-preview__quotes p:last-child {
  margin-bottom: 0;
}

.lp-preview__quotes p::before {
  content: "“";
  color: var(--lime);
}

.lp-preview__cap {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-mute);
  margin: 12px 0 0;
}

.lp-compare__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  text-align: center;
}

.lp-compare__row span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-light);
}

.lp-action__inner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.lp-action__sub {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7);
  margin: 16px 0 28px;
}

.lp-action__fine {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--gray-on-dark);
}

.lp-action__fine a {
  color: var(--lime);
}

body.page-lp {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.lp-foot {
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
  padding: 14px 0 16px;
  margin-top: auto;
}

.lp-foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}

.lp-foot__inner a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
}

.lp-foot__inner a:hover {
  color: #fff;
}

.lp-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.page-lp section.lp-partner {
  padding: clamp(80px, 11vw, 128px) 0 clamp(88px, 12vw, 140px);
}

.lp-partner {
  background: var(--bg-light);
  border-top: 1px solid var(--border-light);
}

.lp-partner__inner {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.lp-partner__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-mute);
  margin: 0 0 16px;
}

.lp-partner__title {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.lp-partner__text {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0 auto 32px;
  max-width: 52ch;
}

.lp-partner__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
  text-align: left;
  margin-bottom: clamp(28px, 4vw, 36px);
}

.lp-partner__card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border-light);
  background: #fff;
}

.lp-partner__card--earn {
  border-color: rgba(192, 204, 114, .45);
  box-shadow: 0 12px 40px rgba(192, 204, 114, .08);
}

.lp-partner__card-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.lp-partner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-partner__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}

.lp-partner__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--lime);
  font-size: 12px;
}

.lp-partner__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}

.lp-partner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--bg-dark);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .2s ease;
}

.lp-partner__link:hover {
  opacity: 0.8;
  color: #fff;
}

.lp-partner__more {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-partner__more:hover {
  color: var(--text-dark);
  opacity: .75;
}

@media (max-width: 768px) {
  .page-lp section.lp-partner {
    padding: clamp(56px, 14vw, 80px) 0 clamp(64px, 16vw, 96px);
  }

  .page-lp .lp-section.lp-action {
    padding-bottom: clamp(48px, 12vw, 64px);
  }

  .lp-partner__grid {
    grid-template-columns: 1fr;
  }
}

.lp-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  padding: 12px 16px;
  background: rgba(18, 18, 18, .95);
  border-top: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}

.lp-sticky-cta .btn-primary {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

@media (max-width:768px) {

  .lp-pain-grid,
  .lp-steps,
  .lp-outcome-grid {
    grid-template-columns: 1fr;
  }

  .lp-sticky-cta {
    display: block;
  }

  .page-lp {
    padding-bottom: 76px;
  }
}

/* ============ PAGE: LYUTIK ============ */
.page-lyutik-hero {
  padding-bottom: clamp(48px, 6vw, 72px);
}

.lyutik-page-hero {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.lyutik-page-hero__logo {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 18px;
  object-fit: cover;
}

.lyutik-page-hero .h-sec,
.lyutik-page-hero .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.lyutik-page-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.lyutik-page-pills span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-mute);
}

.lyutik-page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 32px;
}

.lyutik-page-hero__ghost {
  color: var(--text-mute);
  padding: 13px 0;
}

.lyutik-page-hero__ghost:hover {
  color: var(--text-dark);
}

.lyutik-clarify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(32px, 4vw, 48px);
  background: #fff;
  border: 1px solid var(--border-light);
}

.lyutik-clarify__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.lyutik-clarify__col p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dark);
}

.page-lyutik-phases .simulate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lyutik-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.lyutik-cap-item {
  padding: clamp(20px, 2.5vw, 28px);
  background: #fff;
  border: 1px solid var(--border-light);
}

.lyutik-cap-item strong {
  display: block;
  font-family: var(--u);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.lyutik-cap-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}

@media (max-width:900px) {
  .lyutik-clarify {
    grid-template-columns: 1fr;
  }

  .page-lyutik-phases .simulate-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .lyutik-cap-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ PAGE: PRIVACY / LEGAL ============ */
.legal-page {
  padding-top: clamp(120px, 14vw, 168px);
  padding-bottom: clamp(96px, 12vw, 160px);
}

.legal-doc {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.legal-doc .h-sec {
  margin-bottom: 20px;
}

.legal-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
  margin: 0 0 36px;
}

.legal-lead {
  margin-bottom: 28px !important;
}

.legal-callout {
  margin: 0 0 56px;
  padding: 20px 22px;
  border-left: 2px solid var(--lime);
  background: rgba(192, 204, 114, .08);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mute);
}

.legal-requisites {
  margin: 28px 0 8px;
  padding: 20px 22px 20px;
  border: 1px solid var(--border-light);
  background: #fff;
}

.legal-requisites h3 {
  margin: 0 0 10px !important;
}

.legal-requisites__list {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  list-style: none;
}

.legal-requisites__list li {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.55;
  color: var(--text-dark);
}

.legal-requisites__list li:last-child {
  margin-bottom: 0;
}

.legal-meta-list {
  margin: 0 0 28px !important;
  padding-left: 1.35em !important;
}

.legal-meta-list li {
  margin-bottom: 8px !important;
}

.legal-doc h2 {
  font-family: var(--u);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--text-dark);
  margin: 56px 0 20px;
  padding-top: 8px;
}

.legal-doc h2:first-of-type {
  margin-top: 40px;
}

.legal-doc h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 32px 0 14px;
}

.legal-doc p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dark);
}

.legal-doc ul {
  margin: 0 0 28px;
  padding-left: 1.35em;
}

.legal-doc li {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dark);
}

.legal-doc li:last-child {
  margin-bottom: 0;
}

.legal-doc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc a:hover {
  color: var(--text-mute);
}

.legal-doc a.btn-primary,
.legal-doc a.btn-ghost {
  text-decoration: none;
}

.legal-doc a.btn-primary:hover,
.legal-doc a.btn-ghost:hover {
  text-decoration: none;
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 8px 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
}

.legal-toc a {
  text-decoration: none !important;
  color: var(--text-mute);
}

.legal-toc a:hover {
  color: var(--text-dark);
}

.legal-doc h2[id] {
  scroll-margin-top: 100px;
}

/* ============ PAGE: REFUND ============ */
.refund-table-wrap {
  margin: 8px 0 16px;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  background: #fff;
}

.refund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.refund-table th,
.refund-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
}

.refund-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(0, 0, 0, .02);
}

.refund-table tbody tr:last-child td {
  border-bottom: none;
}

.refund-table td:last-child {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  width: 1%;
}

.refund-table-note {
  margin-bottom: 8px !important;
  font-size: 14px !important;
  color: var(--text-mute) !important;
}

.refund-timeline li strong {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-dark);
}

.refund-email-template {
  margin: 28px 0 8px;
}

.refund-email-template h3 {
  margin-top: 0 !important;
}

.refund-email-template__code {
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--border-light);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dark);
  white-space: pre-wrap;
}

.refund-email-template__code code {
  font-family: inherit;
  white-space: pre-wrap;
}

/* ============ PAGE: PAYMENT ============ */
.pay-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-mute);
}

.pay-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(192, 204, 114, .25);
  flex-shrink: 0;
}

.pay-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 28px 0 16px !important;
  padding: 0 !important;
}

.pay-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 16px 20px 14px;
  min-width: 112px;
  background: #fff;
  border: 1px solid var(--border-light);
}

.pay-brand img {
  display: block;
  width: 72px;
  height: 48px;
}

.pay-brand span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
}

.pay-brands-note {
  margin-bottom: 8px !important;
  font-size: 14px !important;
  color: var(--text-mute) !important;
}

.pay-steps {
  margin: 0 0 28px;
  padding-left: 1.35em;
}

.pay-steps li {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dark);
}

.pay-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 48px;
}

.pay-cta__ghost {
  color: var(--text-mute);
  padding: 13px 0;
}

.pay-cta__ghost:hover {
  color: var(--text-dark);
}

.price-pay-link {
  margin: 28px 0 8px;
  text-align: center;
}

.price-pay-link a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-mute);
  text-decoration: none;
  transition: color .2s;
}

.price-pay-link a:hover {
  color: var(--text-dark);
}

/* ============ PAGE: MCP ============ */
.mcp-config-sample {
  margin-top: clamp(28px, 4vw, 40px);
  text-align: left;
}

.mcp-config-sample__code {
  margin: 0;
  padding: clamp(16px, 2.5vw, 24px);
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

.mcp-config-sample__code code {
  font-family: inherit;
  white-space: pre;
}

.mcp-config-sample__note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .4);
}

@media (max-width:900px) {
  .nav-mega-inner {
    grid-template-columns: 1fr 1fr;
  }

  .nav-mega-col:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, .06);
    margin-right: 20px;
    padding-right: 20px;
  }

  .nav.light .nav-mega-col:nth-child(3) {
    border-right-color: rgba(0, 0, 0, .06);
  }

  .nav-mega-cta {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 16px;
  }

  .nav-mega-mcp {
    margin-top: 14px;
  }

  .nav-mega-mcp div {
    flex-direction: column;
    gap: 2px;
  }
}

/* ============ FAQ ============ */
.faq-sec {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0
}

.faq-head {
  max-width: 100%;
  margin-bottom: clamp(32px, 4vw, 48px);
  text-align: left
}

.faq-head .h-sec {
  margin-top: 0;
  color: var(--text-dark)
}

.faq-head .sec-sub {
  margin-top: 16px;
  color: var(--text-mute)
}

.faq-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 16px
}

.faq-list {
  max-width: 100%;
  margin: 0;
  text-align: left;
  border-top: 1px solid var(--border-light)
}

.faq-list--compact {
  max-width: 100%;
  margin-top: 16px
}

#faqList .faq-item {
  border-bottom: 1px solid var(--border-light);
  opacity: 0;
  transform: translateY(24px);
}

#faqList.is-visible .faq-item {
  opacity: 1;
  transform: none;
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}

#faqList.is-visible .faq-item:nth-child(1) {
  transition-delay: .04s;
}

#faqList.is-visible .faq-item:nth-child(2) {
  transition-delay: .1s;
}

#faqList.is-visible .faq-item:nth-child(3) {
  transition-delay: .16s;
}

#faqList.is-visible .faq-item:nth-child(4) {
  transition-delay: .22s;
}

#faqList.is-visible .faq-item:nth-child(5) {
  transition-delay: .28s;
}

#faqList.is-visible .faq-item:nth-child(6) {
  transition-delay: .34s;
}

#faqList.is-visible .faq-item:nth-child(7) {
  transition-delay: .4s;
}

#faqList.is-visible .faq-item:nth-child(8) {
  transition-delay: .46s;
}

#faqList.is-visible .faq-item:nth-child(9) {
  transition-delay: .52s;
}

@media (prefers-reduced-motion: reduce) {
  #faqList .faq-item {
    opacity: 1;
    transform: none;
  }
}

.faq-item {
  border-bottom: 1px solid var(--border-light)
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--u);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dark);
  text-align: left;
  transition: color .2s
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.2;
  color: var(--lime);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.faq-item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-item summary:hover {
  color: var(--text-dark)
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  text-align: left;
  transition: max-height .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, padding .35s ease;
}

.faq-item[open] .faq-answer {
  max-height: 360px;
  opacity: 1;
  padding: 0 0 20px;
}

.faq-answer p {
  margin: 0;
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mute);
  max-width: 100%;
  padding-right: clamp(28px, 4vw, 48px);
}

.faq-answer a {
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s
}

.faq-answer a:hover {
  color: var(--lime)
}

.faq-mini {
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: clamp(32px, 4vw, 40px);
  border-top: 1px solid var(--border-light);
  text-align: left
}

h3.faq-mini__title {
  font-family: var(--u);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0 0 4px;
  line-height: 1.1;
}

.page-brands-faq {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 72px)
}

/* ============ WAITLIST MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease
}

.modal[hidden] {
  display: none
}

.modal--open {
  opacity: 1;
  visibility: visible
}

.modal--open[hidden] {
  display: flex
}

body.modal-open {
  overflow: hidden
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px)
}

.modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 32px 28px 28px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  background: var(--bg-darker);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .65)
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  background: transparent;
  color: var(--gray-on-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s
}

.modal__close:hover {
  color: #fff;
  border-color: var(--lime)
}

.modal__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--lime);
  margin: 0 0 8px
}

.modal__title {
  font-family: var(--u);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.2;
  padding-right: 36px
}

.modal__lead {
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-on-dark);
  margin: 0 0 20px
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.waitlist-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.waitlist-field {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.waitlist-field__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-on-dark)
}

.waitlist-field__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--m);
  font-size: 15px;
  color: #fff;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  outline: none;
  transition: border-color .2s
}

.waitlist-field__input::placeholder {
  color: rgba(255, 255, 255, .28)
}

.waitlist-field__input:focus {
  border-color: var(--lime)
}

.waitlist-field__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55
}

.waitlist-form__error {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #ff6b6b
}

.waitlist-form__submit {
  background: var(--lime);
  color: var(--text-dark);
  font-family: var(--u);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 22px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s;
  align-self: flex-start
}

.waitlist-form__submit:hover:not(:disabled) {
  background: #fff
}

.waitlist-form__submit:disabled {
  opacity: .65;
  cursor: not-allowed
}

.waitlist-success {
  padding: 28px 24px;
  border: 1px solid rgba(200, 255, 0, .35);
  border-radius: 8px;
  background: rgba(200, 255, 0, .06);
  text-align: center
}

.waitlist-success__title {
  font-family: var(--u);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px
}

.waitlist-success__text {
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-on-dark);
  margin: 0
}

@media (max-width:640px) {
  .waitlist-form__grid {
    grid-template-columns: 1fr
  }

  .waitlist-form__submit {
    width: 100%
  }
}

/* ============ SIMULATE PAGE ============ */
.simulate-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-mute);
  margin: 0 0 16px
}

.simulate-eyebrow--dark {
  color: var(--gray-on-dark)
}

.simulate-head .h-sec {
  margin-top: 0;
  color: var(--text-dark);
  max-width: 720px
}

.simulate-head .sec-sub {
  margin-top: 20px;
  max-width: 640px;
  color: var(--text-mute)
}

.simulate-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px
}

.simulate-formats span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 999px
}

.hub-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(22px, 3vw, 30px);
}

.hub-tabs {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  margin-top: 0;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
}

.hub-tab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
  white-space: nowrap;
}

.hub-tab:hover {
  color: var(--text-dark);
}

.hub-tab.is-active {
  background: var(--lime);
  color: var(--text-dark);
  box-shadow: none;
}

.hub-tab:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.hub-chips-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hub-chips-wrap::-webkit-scrollbar {
  display: none;
}

.hub-chips {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
}

.hub-chips.is-active {
  display: flex;
}

.hub-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.hub-chip--tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}

.hub-chips--audience .hub-chip--tag {
  text-transform: none;
  font-family: var(--u);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 9px 16px;
}

.hub-chip--link {
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hub-chip--link:hover {
  border-color: rgba(192, 204, 114, .65);
  background: rgba(192, 204, 114, .1);
  box-shadow: 0 2px 8px rgba(192, 204, 114, .15);
}

@media (max-width: 640px) {
  .hub-toolbar {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hub-chips-wrap {
    width: 100%;
  }

  .hub-chips {
    flex-wrap: wrap;
    width: 100%;
  }
}

.hub-panel {
  display: none;
}

.hub-panel.is-active {
  display: block;
  animation: hub-panel-in .42s cubic-bezier(.22, 1, .36, 1);
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-panel.is-active {
    animation: none;
  }
}

.page-simulate-grid {
  padding-top: clamp(12px, 2vw, 20px);
  padding-bottom: clamp(48px, 8vw, 80px)
}

.simulate-cards {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.simulate-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: clamp(12px, 1.5vw, 20px);
  padding: clamp(24px, 3vw, 36px);
  transition: border-color .25s, box-shadow .25s
}

.simulate-card:hover {
  border-color: rgba(200, 255, 0, .55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06)
}

.simulate-card__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--text-mute);
  display: block;
  margin-bottom: 12px
}

.simulate-card__title {
  font-family: var(--u);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0 0 12px;
  line-height: 1.15
}

.simulate-card__lead {
  font-family: var(--m);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0 0 24px;
  max-width: 640px
}

.simulate-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.simulate-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.simulate-card__meta-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-shrink: 0;
  min-width: 72px;
}

.simulate-format-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border-light);
  padding: 7px 12px;
  border-radius: 999px;
}

.simulate-audience-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border-light);
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.simulate-audience-tag:hover {
  border-color: rgba(192, 204, 114, .65);
  background: rgba(192, 204, 114, .1);
  box-shadow: 0 2px 8px rgba(192, 204, 114, .12);
}

.simulate-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.simulate-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.simulate-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.simulate-filters__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-shrink: 0;
  min-width: 72px;
}

.simulate-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.simulate-filter-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border-light);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.simulate-filter-chip:hover {
  border-color: rgba(192, 204, 114, .55);
  background: rgba(192, 204, 114, .08);
}

.simulate-filter-chip.is-active {
  background: var(--lime);
  border-color: transparent;
  color: var(--text-dark);
  box-shadow: 0 2px 8px rgba(192, 204, 114, .2);
}

.simulate-filter-chip:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.simulate-filters__reset {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.simulate-filters__reset:hover {
  color: var(--text-dark);
}

.simulate-filters__empty {
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 8px 0 0;
  padding: 20px 0;
}

.simulate-card.is-filtered-out {
  display: none !important;
}

.simulate-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.simulate-card__cols h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime-dark, #8a9a2e);
  margin: 0 0 12px
}

.simulate-card__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.simulate-card__cols li {
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dark);
  padding-left: 16px;
  position: relative
}

.simulate-card__cols li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--lime-dark, #9aad3a);
  font-size: 12px
}

.page-simulate-process {
  padding: clamp(64px, 10vw, 100px) 0
}

.simulate-process {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.simulate-process .h-sec {
  color: #fff;
  margin-top: 8px
}

.simulate-steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left
}

.simulate-steps li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-dark)
}

.simulate-steps li:last-child {
  border-bottom: none
}

.simulate-steps strong {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime)
}

.simulate-steps span {
  font-family: var(--m);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-on-dark)
}

.simulate-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  justify-content: center;
  margin-top: 40px
}

@media (max-width:768px) {
  .simulate-card__cols {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .simulate-steps li {
    grid-template-columns: 1fr;
    gap: 6px
  }
}

/* ============ BRANDS PAGE ============ */
.brand-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  justify-content: flex-start
}

.brand-hero-pills span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 999px
}

.page-brands-stack {
  padding-top: 0;
  padding-bottom: clamp(32px, 5vw, 56px)
}

.brand-stack {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: clamp(14px, 1.5vw, 20px);
  padding: clamp(24px, 3vw, 36px)
}

.brand-stack__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0
}

.brand-stack__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute)
}

.brand-stack__title {
  font-family: var(--u);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.15
}

.brand-stack__text {
  font-family: var(--m);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0
}

.brand-stack__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px
}

.brand-stack__chips span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-dark);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  border-radius: 999px
}

.brand-stack__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--lime);
  padding-top: 28px
}

.brands-section-head {
  margin-bottom: clamp(28px, 4vw, 40px)
}

.brands-section-head .h-sec {
  margin-top: 0;
  color: var(--text-dark)
}

.brands-section-head .sec-sub {
  margin-top: 16px;
  max-width: 640px;
  color: var(--text-mute)
}

.page-brands-dna {
  padding-top: 0
}

.page-brands-who {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 80px)
}

.brand-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.brand-who-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: clamp(12px, 1.5vw, 16px);
  padding: clamp(22px, 2.5vw, 28px);
  transition: border-color .25s, box-shadow .25s
}

.brand-who-card:hover {
  border-color: rgba(192, 204, 114, .55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06)
}

.brand-who-card h3 {
  font-family: var(--u);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 10px;
  line-height: 1.2
}

.brand-who-card p {
  font-family: var(--m);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0
}

@media (max-width:900px) {
  .brand-stack {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .brand-stack__arrow {
    padding: 0;
    transform: rotate(90deg)
  }

  .brand-who-grid {
    grid-template-columns: 1fr
  }
}

/* ============ PAGE: PARTNERS ============ */
.partners-track-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* below sticky .nav-wrap (top: 8px + nav 56px + gap) */
  top: 72px;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 8px;
  background: transparent;
  border: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.partners-track-bar.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.page-partners-hero {
  padding-top: clamp(100px, 12vw, 140px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.partners-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-top: clamp(24px, 3vw, 32px);
}

.page-partners-split {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.partners-split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 28px);
}

.partners-split-card {
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--border-light);
  background: #fff;
}

.partners-split-card--earn {
  border-color: rgba(192, 204, 114, .45);
  box-shadow: 0 12px 40px rgba(192, 204, 114, .08);
}

.partners-split-card__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}

.partners-split-card__title {
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 20px;
}

.partners-split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.partners-split-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
}

.partners-split-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--lime);
  font-size: 12px;
}

.page-partners-audience {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-partners .brands-section-head {
  margin-bottom: clamp(36px, 5vw, 52px);
}

.partners-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}

.partners-audience-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.5vw, 28px);
  background: #fff;
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}

.partners-audience-card:hover {
  border-color: rgba(192, 204, 114, .55);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.partners-audience-card strong {
  font-family: var(--u);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}

.partners-audience-card span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mute);
}

.page-partners-steps {
  padding: clamp(64px, 9vw, 104px) 0;
}

.page-partners-earn {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.partners-earn-table {
  background: #fff;
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin-top: clamp(8px, 1.5vw, 16px);
}

.partners-earn-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  padding: 16px 24px;
  font-size: 14px;
  color: var(--text-dark);
  border-top: 1px solid var(--border-light);
}

.partners-earn-row:first-child {
  border-top: none;
}

.partners-earn-row--head {
  background: var(--bg-light);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.partners-earn-highlight {
  color: var(--text-dark);
  font-weight: 600;
}

.partners-earn-note {
  max-width: 62ch;
  margin: clamp(28px, 4vw, 40px) auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
}

.page-partners-refer {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-partners-refer .brand-who-grid {
  gap: clamp(20px, 3vw, 28px);
}

.page-partners-kit {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-partners-kit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 28px);
}

.page-partners-faq {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-partners-faq .faq-list {
  margin-top: clamp(8px, 1.5vw, 16px);
}

.page-partners-apply {
  padding: clamp(64px, 9vw, 104px) 0;
}

.partners-track-bar .partners-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  justify-content: center;
  width: 100%;
  max-width: 720px;
}

.partners-tab {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, .92);
  color: var(--text-mute);
  font-family: var(--u);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: none;
  transition: color .2s, background .2s;
}

.partners-tab:hover {
  border: none;
  background: rgba(255, 255, 255, .98);
  color: var(--text-dark);
  box-shadow: none;
}

.partners-tab.active {
  border: none;
  background: rgba(192, 204, 114, .22);
  color: var(--text-dark);
  box-shadow: none;
  text-decoration: none;
}

.partners-track-title {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.partners-split-bonus,
.partners-split-revshare {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark);
  font-weight: 600;
}

.partners-split-revshare {
  color: #5f6b2e;
}

.partners-audience-grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

.page-partners-vip {
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.vip-box {
  border: 1px solid var(--border-light);
  background: #fff;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.vip-box h3 {
  margin: 0;
  font-family: var(--u);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--text-dark);
}

.vip-box__text {
  margin: 16px auto 24px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mute);
}

.vip-box__cta {
  display: inline-flex;
}

@media (max-width:900px) {

  .partners-split-grid,
  .partners-audience-grid,
  .partners-audience-grid[data-count="4"],
  .page-partners-kit-grid {
    grid-template-columns: 1fr;
  }

  .partners-earn-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .partners-earn-row--head span:nth-child(3),
  .partners-earn-row--head span:nth-child(4),
  .partners-earn-row--head span:nth-child(5),
  .partners-earn-row span:nth-child(3),
  .partners-earn-row span:nth-child(4),
  .partners-earn-row span:nth-child(5) {
    grid-column: span 1;
  }

  .partners-track-bar {
    top: 68px;
    padding: 8px 12px 4px;
  }

  .partners-track-bar .partners-tab {
    flex: 0 1 auto;
    text-align: center;
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media (max-width:520px) {
  .partners-earn-row {
    grid-template-columns: 1fr;
  }
}

/* ============ FOOTER ============ */
.foot {
  background: var(--bg-darker);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 60px 0 32px;
}

@property --b1x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -40%;
}

@property --b1y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -40%;
}

@property --b2x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 140%;
}

@property --b2y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -40%;
}

@property --b3x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -40%;
}

@property --b3y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 140%;
}

@property --b4x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 140%;
}

@property --b4y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 140%;
}

.foot-watermark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3vw;
  height: 34vw;
  padding-top: 10vw;
  z-index: 0;
  user-select: none;
  cursor: default;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  --b1x: -40%;
  --b1y: -40%;
  --b2x: 140%;
  --b2y: -40%;
  --b3x: -40%;
  --b3y: 140%;
  --b4x: 140%;
  --b4y: 140%;
  transition:
    --b1x .9s cubic-bezier(.4, 0, .2, 1), --b1y .9s cubic-bezier(.4, 0, .2, 1),
    --b2x .9s cubic-bezier(.4, 0, .2, 1), --b2y .9s cubic-bezier(.4, 0, .2, 1),
    --b3x .9s cubic-bezier(.4, 0, .2, 1), --b3y .9s cubic-bezier(.4, 0, .2, 1),
    --b4x .9s cubic-bezier(.4, 0, .2, 1), --b4y .9s cubic-bezier(.4, 0, .2, 1);
}

.foot-watermark.is-active {
  --b1x: 22%;
  --b1y: 38%;
  --b2x: 78%;
  --b2y: 28%;
  --b3x: 32%;
  --b3y: 72%;
  --b4x: 70%;
  --b4y: 62%;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.foot-watermark-text {
  font-family: var(--u);
  font-weight: 900;
  font-size: 18vw;
  line-height: 1;
  text-align: center;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    radial-gradient(circle 32vw at var(--b1x) var(--b1y), #C0CC72 0%, transparent 50%),
    radial-gradient(circle 28vw at var(--b2x) var(--b2y), #BFBFBF 0%, transparent 50%),
    radial-gradient(circle 30vw at var(--b3x) var(--b3y), #8a9e6b 0%, transparent 55%),
    radial-gradient(circle 22vw at var(--b4x) var(--b4y), #e8edcc 0%, transparent 55%),
    linear-gradient(#1a1a1a, #1a1a1a);
  background-blend-mode: screen, screen, screen, screen, normal;
  background-size: 100% 100%;
  width: 100%;
  pointer-events: none;
  transition: filter .6s ease;
}

.foot-watermark.is-active .foot-watermark-text {
  animation: wm-hue 4s ease-in-out infinite;
}

@keyframes wm-hue {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }

  35% {
    filter: hue-rotate(22deg) brightness(1.18);
  }

  65% {
    filter: hue-rotate(-14deg) brightness(1.1);
  }

  100% {
    filter: hue-rotate(0deg) brightness(1);
  }
}

.foot-inner {
  position: relative;
  z-index: 1;
  pointer-events: none
}

.foot-inner>* {
  pointer-events: auto
}

.foot-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px
}

.foot-brand-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.foot-brand .logo {
  font-family: var(--u);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: -.01em
}

.foot-brand .tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  margin-top: 8px;
  letter-spacing: .06em
}

.foot-nav {
  display: flex;
  gap: 64px;
}

.foot-nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-nav a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-on-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  position: relative;
  overflow: hidden;
  padding: 4px 0 6px 0;
  display: inline-block;
  white-space: nowrap;
  transition: color .25s ease, letter-spacing .25s ease;
}

.foot-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--lime);
  transition: width .3s ease;
}

.foot-nav a:hover {
  color: var(--lime);
  letter-spacing: .15em
}

.foot-nav a:hover::before {
  width: 100%
}

.foot-people {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}

.foot-person {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.foot-person .name {
  font-family: var(--m);
  font-weight: 500;
  font-size: 14px;
  color: #fff
}

.foot-person a,
.foot-person .link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  transition: color .2s ease;
  align-self: flex-start;
}

.foot-person a:hover {
  color: #fff
}

.foot-person .muted {
  color: var(--gray-on-dark)
}

.foot-person .muted:hover {
  color: #fff
}

.foot-strip {
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
  padding: 14px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray-on-dark);
  letter-spacing: .08em;
}

.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-family: var(--m);
  font-size: 13px;
  color: var(--gray-on-dark)
}

.foot-insta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-on-dark);
  text-decoration: none;
  transition: color .2s;
}

.foot-insta:hover {
  color: #fff
}

.foot-insta span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em
}

/* ============ PRICING PAGE ============ */
.pricing-intro {
  padding-top: clamp(100px, 12vw, 140px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.price-hero-title {
  font-family: var(--u);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text-dark);
  text-align: center;
  margin: 0;
  max-width: 14ch;
  margin-inline: auto;
}

/* overlap + clip: plans block emerges from behind manifesto */
#pricing {
  margin-top: -220px;
  padding-top: 220px;
}

.price-head {
  text-align: center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  position: relative;
  z-index: 1;
}

.price-head-clip {
  overflow: hidden;
  padding-top: clamp(80px, 9vw, 120px);
  padding-bottom: 8px;
}

.price-plans-emerge {
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.price-plans-title {
  font-family: var(--u);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text-dark);
  margin: 0 auto 16px;
  max-width: 20ch;
}

.price-plans-lead {
  font-family: var(--m);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-mute);
  margin: 0 auto 14px;
  max-width: 42ch;
  line-height: 1.55;
}

.price-billing {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 6px 14px 6px 16px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.price-billing-opt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  cursor: pointer;
  padding: 6px 4px;
  transition: color .2s;
}

.price-billing-opt.active {
  color: var(--text-dark);
}

.price-billing-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s;
}

.price-billing-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.price-billing-switch[aria-pressed="true"] {
  background: var(--lime);
}

.price-billing-switch[aria-pressed="true"]::after {
  transform: translateX(20px);
}

.price-billing-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-dark);
  background: var(--lime);
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .45;
  transition: opacity .25s;
}

.price-billing.is-yearly .price-billing-badge {
  opacity: 1;
}

.price-billing-note {
  font-family: var(--m);
  font-size: 13px;
  color: var(--text-mute);
  margin: 8px 0 0;
}

.price-billing-note[hidden] {
  display: none;
}

.price-head-title {
  font-family: var(--u);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text-dark);
  text-align: center;
  margin: 0;
  will-change: transform;
}

.morphing-text-target {
  font-family: var(--u);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #0F0F0F;
  text-align: center;
  margin: 0 auto 0;
  max-width: 900px;
  opacity: 0;
  will-change: opacity, transform;
}

.morphing-text-target strong {
  font-weight: 600
}

.morphing-text-target .quote-line {
  display: block
}

/* Language-specific line breaks */
.break-en {
  display: none
}

html[lang="en"] .break-en {
  display: block
}

/* ============ ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

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

/* ============ MOBILE ============ */
@media (max-width: 1200px) {
  .price-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .price-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto
  }
}

@media (max-width: 1024px) {

  .problem-grid,
  .cmp-grid,
  .price-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .steps {
    grid-template-columns: repeat(2, 1fr)
  }

  .who-cards,
  .team-cards,
  .shots,
  .tech-row,
  .cmp-cols {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .sec-num {
    font-size: 120px
  }

  .foot-top {
    grid-template-columns: 1fr;
    gap: 32px
  }
}

@media (max-width:768px) {
  .nav-links {
    display: none
  }

  .nav-right {
    display: none
  }

  /* lang + CTA go into mobile menu */
  .hamburger {
    display: flex;
    align-items: center
  }

  .steps {
    grid-template-columns: 1fr
  }

  .hero {
    padding: 60px 0 40px;
    min-height: auto
  }

  section {
    padding: 60px 0
  }

  .banner {
    font-size: 10px
  }

  .quote-panel {
    padding: 80px 24px;
    min-height: auto
  }

  .quote-headline {
    font-size: clamp(28px, 6vw, 44px)
  }

  .morphing-text-target {
    font-size: clamp(28px, 6vw, 44px)
  }

  /* Team photo - mobile */
  .team-photo {
    height: clamp(280px, 90vw, 420px);
    object-position: center 15%
  }

  .team-photo-overlay {
    padding: 16px;
    align-items: flex-end
  }

  .team-photo-name {
    font-size: clamp(16px, 5vw, 22px)
  }

  .team-photo-label {
    font-size: 10px;
    letter-spacing: .08em
  }

  .team-photo-role {
    font-size: 12px;
    margin-top: 3px
  }

  .team-photo-link {
    font-size: 11px;
    margin-top: 4px
  }
}

/* СТРАНИЦА МАНИФЕСТА */
body.body-manifesto {
  background: #ffffff !important;
  position: relative;
}

.manifesto-page {
  background: #FAFAF7;
  color: #0F0F0F;
  padding: 120px 48px 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* HERO */
.manifesto-hero {
  margin-bottom: 160px;
}

.manifesto-label {
  display: inline-block;
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 11px;
  color: #C0CC72;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 24px;
}

.manifesto-h1 {
  font-family: var(--u), sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0F0F0F;
  margin-bottom: 36px;
}

.manifesto-hero-lead {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #0F0F0F;
  margin-bottom: 48px;
  max-width: 780px;
}

.manifesto-hero-body p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 20px;
  max-width: 680px;
}

/* ГЛАВЫ */
.manifesto-chapter {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 60px;
  padding: 72px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chapter-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
}

.chapter-num {
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
}

.chapter-num--accent {
  color: #C0CC72;
}

.chapter-content {
  display: flex;
  flex-direction: column;
}

.chapter-tag {
  display: inline-block;
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 11px;
  color: #C0CC72;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 16px;
}

.chapter-title {
  font-family: var(--u), sans-serif;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0F0F0F;
  margin-bottom: 28px;
  max-width: 760px;
}

.chapter-content p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 20px;
  max-width: 680px;
}

.chapter-intro {
  font-weight: 500;
  color: #0F0F0F !important;
  margin-top: 16px;
  margin-bottom: 24px !important;
}

/* PULLQUOTE */
.chapter-pullquote {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 500;
  line-height: 1.4 !important;
  letter-spacing: -0.015em;
  color: #0F0F0F !important;
  padding: 24px 0 24px 24px;
  border-left: 3px solid #C0CC72;
  margin: 28px 0 !important;
  max-width: 700px;
}

/* АКЦЕНТНАЯ ГЛАВА (HELIXA) */
.manifesto-chapter--accent {
  background: rgba(192, 204, 114, 0.08);
  border-radius: 24px;
  padding: 48px 56px;
  border: none;
  margin: 48px 0;
}

.chapter-title--accent {
  color: #0F0F0F;
}

.chapter-pullquote--accent {
  background: #0F0F0F;
  color: #fff !important;
  padding: 28px 36px;
  border-left: none;
  border-radius: 12px;
}

/* 3 ПРИНЦИПА В КАРТОЧКАХ */
.principles-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.principle-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  align-items: start;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.principle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 204, 114, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.principle-card-num {
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 15px;
  font-weight: 600;
  color: #C0CC72;
  letter-spacing: 0.05em;
}

.principle-card-title {
  font-family: var(--u), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: #0F0F0F;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.principle-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  grid-column: 2;
}

/* VISION БЛОК */
.manifesto-vision {
  margin-top: 100px;
  padding-top: 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.vision-label {
  display: inline-block;
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 11px;
  color: #C0CC72;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 20px;
}

.vision-title {
  font-family: var(--u), sans-serif;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0F0F0F;
  margin-bottom: 24px;
}

.vision-intro {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 60px;
  max-width: 580px;
}

.vision-roadmap {
  display: flex;
  flex-direction: column;
}

.roadmap-step {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  padding: 48px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.roadmap-step:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.roadmap-step-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.roadmap-num {
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.roadmap-time {
  font-family: var(--font-mono, var(--mono), monospace);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #C0CC72;
  text-transform: uppercase;
}

.roadmap-year {
  font-size: 44px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.12);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
  font-family: var(--font-sans, var(--m), sans-serif);
}

.roadmap-step-content {
  display: flex;
  flex-direction: column;
}

.roadmap-step--1 .roadmap-headline {
  font-size: clamp(18px, 1.8vw, 22px);
}

.roadmap-step--2 .roadmap-headline {
  font-size: clamp(20px, 2vw, 25px);
}

.roadmap-step--3 .roadmap-headline {
  font-size: clamp(22px, 2.2vw, 28px);
}

.roadmap-headline {
  font-family: var(--u), sans-serif;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #0F0F0F;
  margin: 0 0 16px 0;
}

.roadmap-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  max-width: 600px;
}

/* CLOSER */
.manifesto-closer {
  margin-top: 100px;
  margin-bottom: 80px;
  padding: 80px 48px;
  background: #0F0F0F;
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.manifesto-closer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(192, 204, 114, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.closer-line {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.closer-statement {
  font-family: var(--u), sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.02em;
  max-width: 800px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 2;
}

.closer-accent {
  color: #C0CC72;
  font-style: italic;
}

.closer-welcome {
  font-family: var(--u), sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
  margin: 0;
}

/* МОБАЙЛ */
@media (max-width: 768px) {
  .manifesto-page {
    padding: 80px 24px 0;
    border-left: none;
    border-right: none;
  }

  .manifesto-hero {
    margin-bottom: 60px;
  }

  .manifesto-chapter {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 48px 0;
  }

  .manifesto-chapter--accent {
    padding: 32px 24px;
    margin: 32px 0;
  }

  .principle-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 20px;
  }

  .principle-card p {
    grid-column: 1;
  }

  .roadmap-step {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }

  .roadmap-step-meta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .roadmap-year {
    font-size: 28px;
    margin-top: 0;
  }

  .manifesto-closer {
    padding: 48px 24px;
    margin-top: 60px;
  }

  /* smooth mobile reveal overrides */
  .reveal {
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ============ NAV ACTIVE STATE ============ */
.nav-links a.active {
  color: var(--lime);
  position: relative;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--lime);
}

/* ============ TYPOGRAPHY BALANCE & BREAKS ============ */
.manifesto-h1,
.manifesto-hero-lead,
.chapter-title,
.principle-card-title,
.vision-title,
.closer-statement {
  text-wrap: balance;
}

.manifesto-hero-body p,
.chapter-content p,
.principle-card p,
.roadmap-desc {
  text-wrap: pretty;
}

@media (max-width: 768px) {
  br.desktop-only {
    display: none;
  }
}

/* ============ COOKIE CONSENT ============ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 16px clamp(16px, 3vw, 28px) calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--border-light, #e6e6e6);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .06);
  transform: translateY(0);
  opacity: 1;
  transition: transform .28s ease, opacity .28s ease;
}

.cookie-consent--hide {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.cookie-consent__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}

.cookie-consent__copy {
  flex: 1 1 280px;
  min-width: 0;
}

.cookie-consent__title {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute, #757575);
  margin-bottom: 6px;
}

.cookie-consent__text {
  margin: 0;
  display: inline;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark, #121212);
}

.cookie-consent__link {
  display: inline;
  margin-left: .25em;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark, #121212);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__link:hover {
  color: var(--text-mute, #757575);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

.cookie-consent__btn {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 12px 18px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cookie-consent__btn--primary {
  background: var(--lime, #C0CC72);
  color: var(--text-dark, #121212);
}

.cookie-consent__btn--primary:hover {
  background: #fff;
  border-color: var(--text-dark, #121212);
}

.cookie-consent__btn--ghost {
  background: transparent;
  color: var(--text-mute, #757575);
  border-color: var(--border-light, #e6e6e6);
}

.cookie-consent__btn--ghost:hover {
  color: var(--text-dark, #121212);
  border-color: var(--text-dark, #121212);
}

@media (max-width: 640px) {
  .cookie-consent__actions {
    width: 100%;
  }

  .cookie-consent__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}