:root {
  --ink: #0b0b0c;
  --ink-soft: #171719;
  --paper: #ffffff;
  --surface: #f6f6f3;
  --surface-warm: #f3efe5;
  --line: rgba(11, 11, 12, 0.1);
  --muted: #67676d;
  --gold: #d8a928;
  --gold-light: #f2d775;
  --gold-pale: #fff7d8;
  --cyan: #22e7e7;
  --cyan-dark: #05bfc7;
  --pink: #ff356f;
  --green: #18b777;
  --shadow-sm: 0 16px 45px rgba(11, 11, 12, 0.08);
  --shadow-lg: 0 40px 100px rgba(11, 11, 12, 0.17);
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  background: var(--gold-light);
  color: var(--ink);
}

a {
  color: inherit;
}

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

.skip-link {
  background: var(--gold-light);
  border-radius: 0 0 10px 10px;
  color: var(--ink);
  font-weight: 800;
  left: 1rem;
  padding: 0.65rem 1rem;
  position: fixed;
  top: -100px;
  transition: top 0.2s ease;
  z-index: 2000;
}

.skip-link:focus {
  top: 0;
}

.site-header {
  padding: 14px 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  z-index: 1030;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 35px rgba(11, 11, 12, 0.07);
  padding: 8px 0;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.navbar {
  padding: 0;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  padding: 0;
  text-decoration: none;
}

.brand-mark {
  display: inline-block;
  height: 18px;
  overflow: hidden;
  position: relative;
  width: 54px;
}

.brand-mark img {
  height: 70px;
  left: -8px;
  max-width: none;
  position: absolute;
  top: -22px;
  width: 70px;
}

.brand-name {
  font-size: 1.26rem;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.brand-name strong {
  font-weight: 850;
}

.navbar-nav {
  gap: 0.4rem;
}

.navbar .nav-link {
  color: #3d3d41;
  font-size: 0.88rem;
  font-weight: 650;
  padding: 0.75rem 0.8rem !important;
  position: relative;
}

.navbar .nav-link::after {
  background: var(--gold);
  bottom: 5px;
  content: "";
  height: 2px;
  left: 0.8rem;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
  width: calc(100% - 1.6rem);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--ink);
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-nav {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 750;
  gap: 8px;
  padding: 0.72rem 1.15rem;
}

.btn-nav i {
  transition: transform 0.2s ease;
}

.btn-nav:hover i {
  transform: translateX(3px);
}

.navbar-toggler {
  border: 0;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.55rem;
}

.navbar-toggler span {
  background: var(--ink);
  border-radius: 2px;
  display: block;
  height: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  width: 24px;
}

.navbar-toggler[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

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

.navbar-toggler[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.hero-section {
  align-items: center;
  background:
    radial-gradient(circle at 12% 22%, rgba(216, 169, 40, 0.09), transparent 27%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  display: flex;
  min-height: 850px;
  overflow: hidden;
  padding: 145px 0 94px;
  position: relative;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(11, 11, 12, 0.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 12, 0.033) 1px, transparent 1px);
  background-size: 64px 64px;
  height: 100%;
  left: 50%;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent);
  opacity: 0.7;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(100%, 1440px);
}

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

.hero-glow::after {
  border: 1px solid currentColor;
  border-radius: inherit;
  content: "";
  inset: 18%;
  opacity: 0.28;
  position: absolute;
}

.hero-glow-cyan {
  background: radial-gradient(circle, rgba(34, 231, 231, 0.18), transparent 68%);
  color: var(--cyan);
  height: 430px;
  right: -240px;
  top: 100px;
  width: 430px;
}

.hero-glow-pink {
  background: radial-gradient(circle, rgba(255, 53, 111, 0.13), transparent 68%);
  bottom: -230px;
  color: var(--pink);
  height: 480px;
  left: 28%;
  width: 480px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.eyebrow,
.section-kicker,
.ai-kicker {
  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 820;
  gap: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(11, 11, 12, 0.1);
  border-radius: 999px;
  box-shadow: 0 8px 25px rgba(11, 11, 12, 0.04);
  padding: 0.52rem 0.82rem;
}

.eyebrow-pulse {
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(216, 169, 40, 0.5);
  height: 8px;
  width: 8px;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(216, 169, 40, 0.55); }
  65%, 100% { box-shadow: 0 0 0 8px rgba(216, 169, 40, 0); }
}

.hero-title {
  font-size: clamp(3rem, 5.45vw, 5.65rem);
  font-weight: 860;
  letter-spacing: -0.072em;
  line-height: 0.98;
  margin: 1.55rem 0 1.4rem;
}

.text-swipe {
  display: inline-block;
  isolation: isolate;
  position: relative;
  white-space: nowrap;
}

.text-swipe::before {
  background: linear-gradient(90deg, var(--gold-light), #e7b92f);
  bottom: 0.08em;
  content: "";
  height: 0.32em;
  left: -0.02em;
  position: absolute;
  transform: rotate(-1.3deg);
  width: 103%;
  z-index: -1;
}

.hero-lead {
  color: var(--muted);
  font-size: clamp(1.03rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 600px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.btn-gold {
  align-items: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: 1px solid rgba(11, 11, 12, 0.1);
  border-radius: 999px;
  box-shadow: 0 14px 35px rgba(216, 169, 40, 0.3), inset 0 1px rgba(255, 255, 255, 0.45);
  color: var(--ink);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 820;
  gap: 10px;
  justify-content: center;
  padding: 1rem 1.45rem;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-gold::after {
  background: rgba(255, 255, 255, 0.42);
  content: "";
  height: 150%;
  left: -70%;
  position: absolute;
  top: -25%;
  transform: rotate(18deg);
  transition: left 0.5s ease;
  width: 30px;
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: linear-gradient(135deg, #f5df88, #d9aa2d);
  box-shadow: 0 18px 42px rgba(216, 169, 40, 0.38), inset 0 1px rgba(255, 255, 255, 0.5);
  color: var(--ink);
  transform: translateY(-3px);
}

.btn-gold:hover::after {
  left: 120%;
}

.btn-link-demo {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 750;
  gap: 9px;
  padding: 0.45rem 0;
  text-decoration: none;
}

.play-icon {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  height: 39px;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
  width: 39px;
}

.btn-link-demo:hover .play-icon {
  background: var(--ink);
  color: white;
  transform: scale(1.08);
}

.hero-proof {
  align-items: center;
  color: #55555a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 650;
  gap: 1.1rem;
  margin-top: 1.7rem;
}

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

.hero-proof i {
  color: var(--gold);
}

.product-stage {
  margin-left: -2%;
  min-height: 580px;
  perspective: 1200px;
  position: relative;
  width: 112%;
  z-index: 2;
}

.app-window {
  background: #f7f7f5;
  border: 1px solid rgba(11, 11, 12, 0.11);
  border-radius: 22px;
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, 0.65);
  left: 4%;
  overflow: hidden;
  position: absolute;
  top: 70px;
  transform: rotateY(-5deg) rotateX(2deg) rotateZ(0.5deg);
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
  width: 96%;
}

.app-topbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 56px;
  justify-content: space-between;
  padding: 0 18px;
}

.app-mini-brand,
.app-top-actions {
  align-items: center;
  display: flex;
}

.app-mini-brand {
  font-size: 0.75rem;
  font-weight: 800;
  gap: 8px;
}

.mini-mustache {
  align-items: center;
  background: var(--ink);
  border-radius: 10px;
  color: var(--gold-light);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.app-top-actions {
  gap: 10px;
}

.app-top-actions button {
  background: none;
  border: 0;
  color: #55555a;
  font-size: 0.86rem;
  position: relative;
}

.app-top-actions button span {
  background: var(--pink);
  border: 2px solid white;
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: 2px;
  top: 1px;
  width: 8px;
}

.avatar {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: white;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.app-body {
  display: flex;
  min-height: 405px;
}

.app-sidebar {
  background: #121214;
  color: #aaaab0;
  display: flex;
  flex: 0 0 90px;
  flex-direction: column;
  gap: 5px;
  padding: 20px 10px;
}

.app-sidebar span {
  align-items: center;
  border-radius: 9px;
  display: flex;
  font-size: 0.75rem;
  gap: 8px;
  padding: 9px 8px;
}

.app-sidebar span i {
  font-size: 0.75rem;
}

.app-sidebar span b {
  font-weight: 650;
}

.app-sidebar span.active {
  background: rgba(242, 215, 117, 0.13);
  color: var(--gold-light);
}

.app-content {
  min-width: 0;
  padding: 22px;
  width: 100%;
}

.app-greeting {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.app-greeting small {
  color: #929298;
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.app-greeting h2 {
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -0.04em;
  margin: 3px 0 0;
}

.app-greeting button {
  background: var(--ink);
  border: 0;
  border-radius: 8px;
  color: white;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 8px 10px;
}

.stats-row {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, 1fr);
  margin: 17px 0;
}

.mini-stat {
  align-items: center;
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.07);
  border-radius: 11px;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.stat-icon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.stat-icon.gold { background: var(--gold-pale); color: #9b7410; }
.stat-icon.cyan { background: rgba(34, 231, 231, 0.13); color: #059ea4; }
.stat-icon.pink { background: rgba(255, 53, 111, 0.11); color: var(--pink); }

.mini-stat div {
  min-width: 0;
}

.mini-stat small,
.mini-stat strong,
.mini-stat em {
  display: block;
  font-style: normal;
  line-height: 1.25;
}

.mini-stat small { color: #929298; font-size: 0.75rem; }
.mini-stat strong { font-size: 0.75rem; margin: 2px 0; white-space: nowrap; }
.mini-stat em { color: var(--green); font-size: 0.75rem; white-space: nowrap; }

.schedule-panel {
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.07);
  border-radius: 12px;
  overflow: hidden;
}

.schedule-head {
  align-items: center;
  border-bottom: 1px solid rgba(11, 11, 12, 0.07);
  display: flex;
  justify-content: space-between;
  padding: 11px 13px;
}

.schedule-head div strong,
.schedule-head div small {
  display: block;
}

.schedule-head div strong { font-size: 0.75rem; }
.schedule-head div small { color: #99999e; font-size: 0.75rem; }
.schedule-head > span { color: #77777c; font-size: 0.75rem; }

.schedule-item {
  align-items: center;
  border-bottom: 1px solid rgba(11, 11, 12, 0.055);
  display: grid;
  gap: 7px;
  grid-template-columns: 31px 26px minmax(90px, 1fr) 78px 52px;
  padding: 9px 12px;
}

.schedule-item.last-item { border-bottom: 0; }
.schedule-item time { font-size: 0.75rem; font-weight: 750; }

.client-avatar {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.avatar-gold { background: var(--gold-pale); color: #8a660b; }
.avatar-cyan { background: rgba(34, 231, 231, 0.14); color: #078f96; }
.avatar-pink { background: rgba(255, 53, 111, 0.11); color: #da1c54; }

.client-name strong,
.client-name small {
  display: block;
  line-height: 1.35;
}

.client-name strong { font-size: 0.75rem; white-space: nowrap; }
.client-name small { color: #929298; font-size: 0.75rem; white-space: nowrap; }

.status-badge {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
}

.status-badge.confirmed { background: rgba(24, 183, 119, 0.11); color: #0c8957; }
.status-badge.waiting { background: rgba(216, 169, 40, 0.14); color: #906a08; }

.professional {
  align-items: center;
  color: #77777c;
  display: flex;
  font-size: 0.75rem;
  gap: 3px;
  white-space: nowrap;
}

.dot {
  border-radius: 50%;
  display: inline-block;
  height: 5px;
  width: 5px;
}

.dot.dark { background: var(--ink); }
.dot.cyan { background: var(--cyan-dark); }
.dot.pink { background: var(--pink); }

.price-orbit {
  align-items: center;
  animation: float-soft 5s ease-in-out infinite;
  background: var(--ink);
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: 0 20px 45px rgba(11, 11, 12, 0.25);
  color: white;
  display: flex;
  flex-direction: column;
  height: 118px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -8px;
  top: 15px;
  width: 118px;
  z-index: 7;
}

.price-orbit::after {
  border: 1px dashed rgba(216, 169, 40, 0.65);
  border-radius: 50%;
  content: "";
  inset: -14px;
  position: absolute;
  animation: spin 18s linear infinite;
}

.price-orbit span { color: var(--gold-light); font-size: 0.75rem; font-weight: 700; }
.price-orbit strong { font-size: 1.55rem; letter-spacing: -0.06em; margin: 3px 0; }
.price-orbit small { color: #b9b9bd; font-size: 0.75rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float-soft { 50% { transform: translateY(-10px) rotate(2deg); } }

.floating-notification {
  align-items: center;
  animation: float-card 5.5s ease-in-out infinite;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(11, 11, 12, 0.14);
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  position: absolute;
  z-index: 8;
}

.floating-notification > span {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.floating-notification div small,
.floating-notification div strong { display: block; line-height: 1.4; white-space: nowrap; }
.floating-notification div small { color: #85858a; font-size: 0.75rem; }
.floating-notification div strong { font-size: 0.75rem; }

.floating-whatsapp { bottom: 28px; left: -8px; }
.floating-whatsapp > span { background: #e2fff1; color: #0aab63; }
.floating-whatsapp > i { color: var(--green); font-size: 0.75rem; }
.floating-money { animation-delay: -2.3s; bottom: 84px; right: -2px; }
.floating-money > span { background: var(--gold-pale); color: #96700d; }

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

.scroll-hint {
  border: 1px solid rgba(11, 11, 12, 0.22);
  border-radius: 999px;
  bottom: 24px;
  height: 34px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 21px;
}

.scroll-hint span {
  animation: scroll-dot 1.8s ease-in-out infinite;
  background: var(--ink);
  border-radius: 50%;
  height: 4px;
  left: 7px;
  position: absolute;
  top: 7px;
  width: 4px;
}

@keyframes scroll-dot {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

.value-strip {
  background: var(--ink);
  color: white;
  overflow: hidden;
}

.value-strip-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.08fr;
}

.value-strip-grid > div {
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 12px;
  min-height: 104px;
  padding: 1.2rem 1.25rem;
}

.value-strip-grid > div > i {
  color: var(--gold-light);
  font-size: 1.25rem;
}

.value-strip-grid span strong,
.value-strip-grid span small {
  display: block;
  line-height: 1.45;
}

.value-strip-grid span strong { font-size: 0.77rem; }
.value-strip-grid span small { color: #9f9fa4; font-size: 0.75rem; }

.value-strip-grid .value-price {
  background: linear-gradient(135deg, #e0ae28, #f0d05d);
  color: var(--ink);
  gap: 5px;
  justify-content: center;
}

.value-price small { font-size: 0.75rem; font-weight: 700; }
.value-price strong { font-size: 1.65rem; letter-spacing: -0.07em; }
.value-price span { font-size: 0.75rem; font-weight: 700; margin-top: 8px; }

.section-space {
  padding: 120px 0;
}

.section-heading {
  margin: 0 auto 3.5rem;
  max-width: 760px;
}

.section-kicker {
  color: #8c6810;
  margin-bottom: 1rem;
}

.section-kicker::before {
  background: var(--gold);
  content: "";
  height: 2px;
  width: 22px;
}

.section-heading.text-center .section-kicker::before {
  display: none;
}

.section-heading h2,
.workflow-title,
.faq-section h2 {
  font-size: clamp(2.55rem, 5vw, 4.5rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.section-heading h2 span,
.workflow-title span {
  color: #8b8b90;
}

.section-heading p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 640px;
}

.features-section {
  background: #f7f7f4;
}

.bento-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr 0.8fr;
}

.feature-card {
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 35px rgba(11, 11, 12, 0.035);
  min-height: 310px;
  overflow: hidden;
  padding: 28px;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.feature-card:hover {
  box-shadow: 0 25px 60px rgba(11, 11, 12, 0.09);
  transform: translateY(-6px);
}

.feature-large {
  min-height: 510px;
}

.feature-dark {
  background: #101012;
  border-color: #101012;
  color: white;
  min-height: 510px;
}

.feature-revenue {
  background: #f1eddf;
}

.feature-copy {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.feature-icon {
  align-items: center;
  border-radius: 14px;
  display: inline-flex;
  flex: 0 0 48px;
  font-size: 1.16rem;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.feature-icon.gold { background: var(--gold-pale); color: #906b0d; }
.feature-icon.cyan { background: rgba(34, 231, 231, 0.14); color: var(--cyan-dark); }
.feature-icon.pink { background: rgba(255, 53, 111, 0.11); color: var(--pink); }

.feature-label {
  color: #96969b;
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.feature-card h3 {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}

.feature-card p {
  color: #737379;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
  max-width: 470px;
}

.feature-dark p { color: #aaaab0; }

.calendar-visual {
  background: #fafaf8;
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: 18px 18px 0 0;
  bottom: -20px;
  box-shadow: 0 25px 55px rgba(11, 11, 12, 0.09);
  left: 7%;
  padding: 15px;
  position: absolute;
  transform: rotate(-1.5deg);
  width: 86%;
}

.calendar-days {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 12px;
}

.calendar-days span {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  padding: 7px;
}

.calendar-days span.current { background: var(--ink); color: white; }
.calendar-days small { color: #99999e; font-size: 0.75rem; font-weight: 800; }
.calendar-days b { font-size: 0.78rem; }
.calendar-days .current small { color: var(--gold-light); }

.calendar-line {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 36px 1fr;
  margin-top: 7px;
}

.calendar-line time { color: #89898f; font-size: 0.75rem; font-weight: 700; }
.event { border-left: 3px solid; border-radius: 7px; padding: 8px 10px; }
.event b, .event small { display: block; }
.event b { font-size: 0.75rem; }
.event small { color: #77777c; font-size: 0.75rem; }
.event-gold { background: var(--gold-pale); border-color: var(--gold); }
.event-dark { background: #ededeb; border-color: var(--ink); }
.event-cyan { background: rgba(34, 231, 231, 0.1); border-color: var(--cyan-dark); }

.chat-visual {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  left: 28px;
  position: absolute;
  right: 28px;
}

.chat-bubble {
  border-radius: 15px;
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 79%;
  padding: 10px 13px;
}

.chat-bubble.customer { align-self: flex-end; background: #2b2b2e; color: #dddde1; border-bottom-right-radius: 4px; }
.chat-bubble.business { align-self: flex-start; background: rgba(34, 231, 231, 0.13); border: 1px solid rgba(34, 231, 231, 0.2); border-bottom-left-radius: 4px; color: white; margin-top: 8px; }

.typing-bubble {
  align-items: center;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  gap: 3px;
  margin-top: 8px;
  padding: 10px 12px;
}

.typing-bubble span {
  animation: typing 1.3s infinite;
  background: #a5a5aa;
  border-radius: 50%;
  height: 5px;
  width: 5px;
}

.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing { 50% { opacity: 0.35; transform: translateY(-3px); } }

.chat-time { color: #77777d; font-size: 0.75rem; margin-top: 5px; }
.chat-time i { color: var(--cyan); }

.team-visual {
  align-items: center;
  bottom: 35px;
  display: flex;
  justify-content: center;
  left: 20px;
  position: absolute;
  right: 20px;
}

.team-person,
.team-add {
  align-items: center;
  background: white;
  display: flex;
  flex-direction: column;
  position: relative;
}

.team-person {
  margin-left: -7px;
}

.team-person b,
.team-add {
  align-items: center;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(11, 11, 12, 0.1);
  display: flex;
  font-size: 0.75rem;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.team-person:nth-child(1) b { background: #19191b; color: white; }
.team-person:nth-child(2) b { background: var(--gold-pale); color: #8d690b; }
.team-person:nth-child(3) b { background: rgba(34, 231, 231, 0.15); color: #068f96; }
.team-person i { background: var(--green); border: 2px solid white; border-radius: 50%; height: 10px; position: absolute; right: 3px; top: 38px; width: 10px; }
.team-person small { color: #77777c; font-size: 0.75rem; margin-top: 5px; }
.team-add { color: #88888d; margin: -19px 0 0 -7px; }

.chart-visual {
  bottom: 23px;
  left: 28px;
  position: absolute;
  right: 28px;
}

.chart-top { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 12px; }
.chart-top span small, .chart-top span strong { display: block; }
.chart-top span small { color: #77736b; font-size: 0.75rem; }
.chart-top span strong { font-size: 1.05rem; }
.chart-top em { background: rgba(24, 183, 119, 0.11); border-radius: 999px; color: #078b58; font-size: 0.75rem; font-style: normal; font-weight: 750; padding: 4px 7px; }
.bars { align-items: flex-end; border-bottom: 1px solid rgba(11, 11, 12, 0.1); display: grid; gap: 7px; grid-template-columns: repeat(7, 1fr); height: 75px; }
.bars span { background: rgba(11, 11, 12, 0.14); border-radius: 5px 5px 0 0; height: var(--bar); min-height: 8px; }
.bars span.active { background: linear-gradient(to top, #c49212, var(--gold-light)); }
.bar-labels { color: #77736b; display: grid; font-size: 0.75rem; grid-template-columns: repeat(7, 1fr); margin-top: 5px; text-align: center; }

.product-pills {
  bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  left: 28px;
  position: absolute;
  right: 28px;
}

.product-pills span { background: #f2f2ef; border: 1px solid rgba(11, 11, 12, 0.07); border-radius: 999px; color: #626267; font-size: 0.75rem; font-weight: 700; padding: 7px 10px; }
.product-pills span:last-child { background: var(--ink); color: white; }

.retail-section {
  background: linear-gradient(135deg, #f3efe3 0%, #faf9f5 52%, #f1eee5 100%);
  overflow: hidden;
  position: relative;
}

.retail-pattern {
  background-image:
    radial-gradient(rgba(11, 11, 12, 0.08) 0.7px, transparent 0.7px),
    linear-gradient(135deg, rgba(216, 169, 40, 0.05), transparent 42%);
  background-size: 18px 18px, 100% 100%;
  inset: 0;
  mask-image: linear-gradient(90deg, black, transparent 46%, black);
  opacity: 0.48;
  position: absolute;
}

.retail-title {
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  font-weight: 860;
  letter-spacing: -0.07em;
  line-height: 0.98;
  margin: 0 0 1.35rem;
}

.retail-title span {
  background: linear-gradient(transparent 62%, var(--gold-light) 62%);
}

.retail-lead {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.9rem;
  max-width: 560px;
}

.retail-benefits {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.8rem;
}

.retail-benefits article {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: 15px;
  display: flex;
  gap: 10px;
  padding: 13px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.retail-benefits article:hover {
  background: white;
  transform: translateY(-3px);
}

.retail-benefits article > span {
  align-items: center;
  background: var(--ink);
  border-radius: 10px;
  color: var(--gold-light);
  display: flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.retail-benefits h3 {
  font-size: 0.76rem;
  font-weight: 790;
  margin: 0 0 2px;
}

.retail-benefits p {
  color: #77777c;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
}

.retail-link {
  align-items: center;
  border-bottom: 1px solid rgba(11, 11, 12, 0.28);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 790;
  gap: 9px;
  padding-bottom: 4px;
  text-decoration: none;
}

.retail-link i {
  transition: transform 0.2s ease;
}

.retail-link:hover i {
  transform: translateX(4px);
}

.inventory-stage {
  background:
    radial-gradient(circle at 85% 12%, rgba(34, 231, 231, 0.1), transparent 25%),
    radial-gradient(circle at 8% 85%, rgba(216, 169, 40, 0.15), transparent 27%),
    #111113;
  border: 1px solid rgba(11, 11, 12, 0.16);
  border-radius: 30px;
  box-shadow: 0 35px 85px rgba(11, 11, 12, 0.2);
  min-height: 585px;
  overflow: hidden;
  position: relative;
}

.inventory-stage::before {
  border: 1px dashed rgba(242, 215, 117, 0.25);
  border-radius: 50%;
  content: "";
  height: 270px;
  position: absolute;
  right: -120px;
  top: -120px;
  width: 270px;
}

.inventory-glow {
  background: linear-gradient(90deg, var(--gold), var(--cyan), var(--pink));
  filter: blur(75px);
  height: 95px;
  left: 12%;
  opacity: 0.17;
  position: absolute;
  top: 8%;
  width: 76%;
}

.inventory-window {
  background: #f7f7f5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
  left: 5%;
  overflow: hidden;
  position: absolute;
  top: 48px;
  transform: rotate(-0.7deg);
  width: 90%;
  z-index: 2;
}

.inventory-head {
  align-items: center;
  background: white;
  border-bottom: 1px solid rgba(11, 11, 12, 0.08);
  display: flex;
  justify-content: space-between;
  padding: 17px 19px;
}

.inventory-head div span {
  color: #99720d;
  display: block;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.inventory-head h3 {
  font-size: 0.94rem;
  font-weight: 820;
  letter-spacing: -0.04em;
  margin: 2px 0 0;
}

.inventory-head button {
  background: var(--ink);
  border: 0;
  border-radius: 8px;
  color: white;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 8px 10px;
}

.inventory-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding: 13px 14px 10px;
}

.inventory-metrics > div {
  align-items: center;
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.07);
  border-radius: 10px;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.inventory-metrics > div > span {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex: 0 0 29px;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.stock-icon { background: var(--gold-pale); color: #926d0d; }
.sales-icon { background: rgba(34, 231, 231, 0.13); color: #079da4; }
.commission-icon { background: rgba(255, 53, 111, 0.1); color: var(--pink); }
.inventory-metrics div { min-width: 0; }
.inventory-metrics small,
.inventory-metrics strong,
.inventory-metrics em { display: block; font-style: normal; line-height: 1.3; white-space: nowrap; }
.inventory-metrics small { color: #919197; font-size: 0.75rem; }
.inventory-metrics strong { font-size: 0.75rem; margin: 1px 0; }
.inventory-metrics em { color: #77777c; font-size: 0.75rem; }

.inventory-table {
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.07);
  border-radius: 11px;
  margin: 0 14px 16px;
  overflow: hidden;
}

.inventory-table-head,
.inventory-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(155px, 1.8fr) 0.65fr 0.68fr 0.66fr 14px;
}

.inventory-table-head {
  background: #f2f2ef;
  color: #8e8e93;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.inventory-row {
  border-top: 1px solid rgba(11, 11, 12, 0.06);
  padding: 9px 10px;
}

.inventory-product {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.inventory-product > span {
  min-width: 0;
}

.inventory-product strong,
.inventory-product small {
  display: block;
  line-height: 1.35;
  white-space: nowrap;
}

.inventory-product strong { font-size: 0.75rem; }
.inventory-product small { color: #929298; font-size: 0.75rem; }
.inventory-row > span > strong { font-size: 0.75rem; }
.inventory-row > span:last-child { color: #99999e; font-size: 0.75rem; }

.product-shape {
  align-items: center;
  background: var(--ink);
  color: var(--gold-light);
  display: flex;
  flex: 0 0 28px;
  font-size: 0.75rem;
  font-style: normal;
  height: 30px;
  justify-content: center;
  position: relative;
  width: 28px;
}

.product-shape.pomade { border-radius: 6px 6px 9px 9px; }
.product-shape.aftershave { background: #e7c765; border-radius: 8px 8px 5px 5px; color: var(--ink); height: 31px; transform: scaleX(0.75); }
.product-shape.aftershave::before { background: #232326; border-radius: 3px 3px 0 0; content: ""; height: 5px; position: absolute; top: -3px; width: 12px; }
.product-shape.gel { background: #20cbd0; border-radius: 5px 5px 10px 10px; color: var(--ink); }

.stock-status,
.commission-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 6px;
  white-space: nowrap;
}

.stock-status.ok { background: rgba(24, 183, 119, 0.11); color: #0c8957; }
.stock-status.attention { background: rgba(216, 169, 40, 0.16); color: #8a6507; }
.commission-pill { background: rgba(255, 53, 111, 0.09); color: #d71d52; }

.stock-card {
  align-items: center;
  animation: float-card 5.2s ease-in-out infinite;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 13px;
  box-shadow: 0 17px 40px rgba(0, 0, 0, 0.24);
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  position: absolute;
  z-index: 5;
}

.stock-card > span {
  align-items: center;
  background: #e5fff3;
  border-radius: 9px;
  color: var(--green);
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.stock-card small,
.stock-card strong { display: block; line-height: 1.4; white-space: nowrap; }
.stock-card small { color: #89898e; font-size: 0.75rem; }
.stock-card strong { font-size: 0.75rem; }
.stock-card-sale { bottom: 36px; left: -9px; }
.stock-card-commission { animation-delay: -2.4s; bottom: 86px; right: -8px; }
.stock-card-commission > span { background: var(--gold-pale); color: #936e0d; }

.product-display {
  align-items: flex-end;
  bottom: -4px;
  display: flex;
  gap: 8px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.product-display > span {
  align-items: center;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  position: relative;
}

.product-display b { font-size: 0.75rem; letter-spacing: 0.08em; }
.product-display small { font-size: 0.75rem; }
.display-pomade { background: var(--gold-light); border: 4px solid #2b2b2d; border-radius: 7px 7px 15px 15px; color: var(--ink); height: 56px; width: 68px; }
.display-pomade::before { background: #2b2b2d; border-radius: 6px 6px 2px 2px; content: ""; height: 9px; left: -4px; position: absolute; top: -8px; width: 68px; }
.display-bottle { background: #f0f0e9; border-radius: 12px 12px 7px 7px; color: var(--ink); height: 91px; width: 48px; }
.display-bottle i { background: var(--ink); border-radius: 4px 4px 0 0; height: 12px; position: absolute; top: -9px; width: 23px; }
.display-bottle b { font-size: 1rem; }
.display-gel { background: linear-gradient(160deg, var(--cyan), #09aab2); border-radius: 7px 7px 16px 16px; color: var(--ink); height: 75px; width: 56px; }
.display-gel::before { background: #1c1c1e; border-radius: 4px 4px 0 0; content: ""; height: 8px; position: absolute; top: -6px; width: 26px; }

.workflow-section {
  overflow: hidden;
}

.workflow-title {
  margin: 0 0 1.4rem;
}

.workflow-lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 500px;
}

.workflow-steps {
  margin-top: 2.2rem;
}

.workflow-step {
  border-left: 2px solid #e6e6e3;
  cursor: default;
  display: flex;
  gap: 16px;
  opacity: 0.55;
  padding: 0.85rem 0 1.25rem 1.3rem;
  position: relative;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.workflow-step::before {
  background: #d1d1ce;
  border: 3px solid white;
  border-radius: 50%;
  content: "";
  height: 12px;
  left: -7px;
  position: absolute;
  top: 1.2rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  width: 12px;
}

.workflow-step.active {
  border-color: var(--gold);
  opacity: 1;
}

.workflow-step.active::before {
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-pale);
}

.workflow-step > span { color: #9a7210; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.08em; padding-top: 4px; }
.workflow-step h3 { font-size: 1rem; font-weight: 780; margin: 0 0 3px; }
.workflow-step p { color: var(--muted); font-size: 0.82rem; margin: 0; }

.phone-stage {
  min-height: 670px;
  position: relative;
}

.phone-glow {
  background: radial-gradient(circle, rgba(216, 169, 40, 0.22), rgba(34, 231, 231, 0.08) 38%, transparent 68%);
  border-radius: 50%;
  height: 560px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
}

.phone-shell {
  background: #f8f8f6;
  border: 9px solid #141416;
  border-radius: 43px;
  box-shadow: 0 38px 80px rgba(11, 11, 12, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  height: 625px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(1.5deg);
  width: 310px;
  z-index: 2;
}

.phone-shell::after {
  background: #050506;
  border-radius: 999px;
  content: "";
  height: 20px;
  left: 50%;
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  width: 72px;
  z-index: 5;
}

.phone-top {
  align-items: center;
  background: white;
  display: flex;
  font-size: 0.75rem;
  height: 34px;
  justify-content: space-between;
  padding: 0 15px;
}

.phone-top > span { width: 45px; }
.phone-top div { display: flex; gap: 4px; }
.phone-top b { font-size: 0.75rem; }

.phone-appbar {
  align-items: center;
  background: white;
  border-bottom: 1px solid rgba(11, 11, 12, 0.07);
  display: flex;
  gap: 9px;
  padding: 10px 13px;
}

.phone-logo { align-items: center; background: var(--ink); border-radius: 9px; color: var(--gold-light); display: flex; height: 31px; justify-content: center; width: 31px; }
.phone-appbar div { flex: 1; }
.phone-appbar div small, .phone-appbar div strong { display: block; line-height: 1.3; }
.phone-appbar div small { color: #9a9a9f; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }
.phone-appbar div strong { font-size: 0.75rem; }
.phone-avatar { align-items: center; background: var(--gold-pale); border-radius: 50%; color: #89660d; display: flex; font-size: 0.75rem; font-weight: 800; height: 30px; justify-content: center; width: 30px; }

.phone-date-row { align-items: center; display: flex; justify-content: space-between; padding: 17px 16px 10px; text-align: center; }
.phone-date-row button { background: white; border: 1px solid var(--line); border-radius: 8px; color: #77777c; height: 27px; width: 27px; }
.phone-date-row div strong, .phone-date-row div small { display: block; }
.phone-date-row div strong { font-size: 0.75rem; }
.phone-date-row div small { color: #929298; font-size: 0.75rem; }
.phone-progress { background: #e9e9e6; border-radius: 99px; height: 4px; margin: 0 16px 14px; overflow: hidden; }
.phone-progress span { background: linear-gradient(90deg, var(--gold), var(--gold-light)); display: block; height: 100%; width: var(--progress); }

.phone-appointments { padding: 0 11px; }
.phone-appointments > div { align-items: center; background: white; border: 1px solid rgba(11, 11, 12, 0.07); border-radius: 11px; display: grid; gap: 7px; grid-template-columns: 36px 5px 1fr 20px; margin-bottom: 7px; min-height: 69px; padding: 8px; }
.phone-appointments > div time { font-size: 0.75rem; font-weight: 750; }
.phone-appointments > div > span { background: #d5d5d2; border-radius: 99px; height: 35px; width: 3px; }
.phone-appointments > div div strong, .phone-appointments > div div small, .phone-appointments > div div em { display: block; line-height: 1.35; }
.phone-appointments > div div strong { font-size: 0.75rem; }
.phone-appointments > div div small { color: #929298; font-size: 0.75rem; }
.phone-appointments > div div em { color: #9b7410; font-size: 0.75rem; font-style: normal; font-weight: 850; letter-spacing: 0.08em; }
.phone-appointments > div > i { color: #aaaab0; font-size: 0.75rem; }
.phone-appointments > div.done { opacity: 0.62; }
.phone-appointments > div.done > span { background: var(--green); }
.phone-appointments > div.done > i { color: var(--green); }
.phone-appointments > div.current { border-color: var(--gold); box-shadow: 0 8px 22px rgba(216, 169, 40, 0.12); }
.phone-appointments > div.current > span { background: var(--gold); }
.phone-appointments > div.current button { background: none; border: 0; }

.phone-nav { align-items: center; background: white; border-top: 1px solid rgba(11, 11, 12, 0.07); bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 58px; left: 0; padding: 5px 7px; position: absolute; right: 0; }
.phone-nav span { align-items: center; color: #9b9ba0; display: flex; flex-direction: column; font-size: 0.75rem; gap: 1px; }
.phone-nav span small { font-size: 0.75rem; }
.phone-nav span.active { color: var(--ink); }
.phone-nav button { align-items: center; background: var(--ink); border: 0; border-radius: 50%; color: var(--gold-light); display: flex; height: 38px; justify-content: center; margin: -20px auto 0; width: 38px; }

.phone-card { align-items: center; animation: float-card 5s ease-in-out infinite; background: rgba(255, 255, 255, 0.93); border: 1px solid rgba(11, 11, 12, 0.08); border-radius: 13px; box-shadow: 0 18px 45px rgba(11, 11, 12, 0.13); display: flex; gap: 9px; padding: 11px 13px; position: absolute; z-index: 4; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.phone-card > i { align-items: center; background: #e8fff4; border-radius: 9px; color: var(--green); display: flex; height: 34px; justify-content: center; width: 34px; }
.phone-card span small, .phone-card span strong { display: block; line-height: 1.4; white-space: nowrap; }
.phone-card span small { color: #8b8b90; font-size: 0.75rem; }
.phone-card span strong { font-size: 0.75rem; }
.phone-card-top { right: 0; top: 105px; }
.phone-card-bottom { animation-delay: -2s; bottom: 82px; left: -10px; }
.phone-card-bottom > i { background: var(--gold-pale); color: #94700e; }

.messaging-section {
  background:
    radial-gradient(circle at 7% 20%, rgba(34, 231, 231, 0.09), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(255, 53, 111, 0.07), transparent 24%),
    #f8f8f6;
  overflow: hidden;
  position: relative;
}

.messaging-grid {
  background-image:
    linear-gradient(rgba(11, 11, 12, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 12, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  inset: 0;
  mask-image: radial-gradient(circle at 68% 50%, black, transparent 68%);
  position: absolute;
}

.included-badge {
  align-items: center;
  background: #e4fff2;
  border: 1px solid rgba(24, 183, 119, 0.18);
  border-radius: 999px;
  color: #08794e;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 820;
  gap: 6px;
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
  padding: 0.48rem 0.7rem;
  text-transform: uppercase;
}

.messaging-title {
  font-size: clamp(2.75rem, 5vw, 4.65rem);
  font-weight: 860;
  letter-spacing: -0.07em;
  line-height: 0.98;
  margin: 0 0 1.3rem;
}

.messaging-title span {
  background: linear-gradient(90deg, #079fa6, var(--cyan-dark) 50%, #0c777c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.messaging-lead {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 1.8rem;
  max-width: 550px;
}

.messaging-benefits {
  display: grid;
  gap: 10px 15px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}

.messaging-benefits li {
  align-items: flex-start;
  display: flex;
  gap: 9px;
}

.messaging-benefits li > span {
  align-items: center;
  background: rgba(34, 231, 231, 0.12);
  border-radius: 9px;
  color: #078e94;
  display: flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.messaging-benefits strong,
.messaging-benefits small {
  display: block;
  line-height: 1.4;
}

.messaging-benefits strong { font-size: 0.75rem; }
.messaging-benefits small { color: #7c7c81; font-size: 0.75rem; margin-top: 2px; }

.messaging-link {
  align-items: center;
  border-bottom: 1px solid rgba(11, 11, 12, 0.28);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 790;
  gap: 8px;
  padding-bottom: 4px;
  text-decoration: none;
}

.messaging-link i { transition: transform 0.2s ease; }
.messaging-link:hover i { transform: translateX(4px); }

.message-workspace {
  background:
    radial-gradient(circle at 83% 9%, rgba(34, 231, 231, 0.13), transparent 24%),
    radial-gradient(circle at 14% 93%, rgba(255, 53, 111, 0.09), transparent 25%),
    #111113;
  border: 1px solid rgba(11, 11, 12, 0.14);
  border-radius: 31px;
  box-shadow: 0 38px 90px rgba(11, 11, 12, 0.22);
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.message-workspace::after {
  border: 1px dashed rgba(34, 231, 231, 0.18);
  border-radius: 50%;
  content: "";
  height: 310px;
  position: absolute;
  right: -165px;
  top: -160px;
  width: 310px;
}

.template-sidebar {
  background: #1c1c1f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  bottom: 43px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  left: 20px;
  padding: 12px;
  position: absolute;
  top: 43px;
  width: 190px;
  z-index: 3;
}

.template-sidebar-head {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 3px 3px 11px;
}

.template-sidebar-head > span {
  align-items: center;
  background: linear-gradient(135deg, var(--cyan), #08aeb6);
  border-radius: 9px;
  color: var(--ink);
  display: flex;
  height: 31px;
  justify-content: center;
  width: 31px;
}

.template-sidebar-head small,
.template-sidebar-head strong { display: block; line-height: 1.35; }
.template-sidebar-head small { color: var(--cyan); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.1em; }
.template-sidebar-head strong { color: white; font-size: 0.75rem; }

.template-sidebar > button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #88888e;
  display: flex;
  font-size: 0.75rem;
  gap: 8px;
  margin: 2px 0;
  padding: 9px 8px;
  text-align: left;
}

.template-sidebar > button > i {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  display: flex;
  flex: 0 0 27px;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.template-sidebar button strong,
.template-sidebar button small { display: block; line-height: 1.35; }
.template-sidebar button strong { color: #c9c9cd; font-size: 0.75rem; }
.template-sidebar button small { color: #6f6f75; font-size: 0.75rem; }
.template-sidebar > button.active { background: rgba(34, 231, 231, 0.1); color: var(--cyan); }
.template-sidebar > button.active > i { background: rgba(34, 231, 231, 0.14); }
.template-sidebar > button.active strong { color: #ebffff; }
.template-sidebar > button.active small { color: #8abec0; }
.template-sidebar > button.new-template { border: 1px dashed rgba(255, 255, 255, 0.14); color: #a7a7ac; font-size: 0.75rem; font-weight: 750; justify-content: center; margin-top: auto; padding: 8px; text-align: center; }
.template-sidebar > button.new-template i { background: none; flex: 0; height: auto; width: auto; }

.service-chat {
  background: #e8e7e2;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 21px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  height: 557px;
  left: 185px;
  overflow: hidden;
  position: absolute;
  top: 25px;
  width: 330px;
  z-index: 2;
}

.service-chat-head {
  align-items: center;
  background: white;
  border-bottom: 1px solid rgba(11, 11, 12, 0.08);
  display: flex;
  gap: 8px;
  padding: 11px 13px;
}

.chat-client-avatar {
  align-items: center;
  background: var(--gold-pale);
  border-radius: 50%;
  color: #8d690b;
  display: flex;
  font-size: 0.75rem;
  font-weight: 850;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.service-chat-head div { flex: 1; }
.service-chat-head strong,
.service-chat-head small { display: block; line-height: 1.35; }
.service-chat-head strong { font-size: 0.75rem; }
.service-chat-head small { color: #88888d; font-size: 0.75rem; }
.service-chat-head small i { background: var(--green); border-radius: 50%; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }
.service-chat-head button { background: none; border: 0; color: #88888d; }

.service-chat-body {
  background-image: radial-gradient(rgba(11, 11, 12, 0.045) 0.7px, transparent 0.7px);
  background-size: 10px 10px;
  height: 456px;
  overflow: hidden;
  padding: 15px 12px;
}

.chat-message {
  background: white;
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 5px 15px rgba(11, 11, 12, 0.06);
  font-size: 0.75rem;
  margin-left: auto;
  max-width: 74%;
  padding: 8px 9px 5px;
}

.chat-message small { color: #929297; display: block; font-size: 0.75rem; margin-top: 2px; text-align: right; }
.ready-label { color: #747479; font-size: 0.75rem; font-weight: 750; margin: 10px 0 5px; }
.ready-label i { color: #078f96; }

.shared-service-card {
  background: white;
  border-radius: 13px;
  box-shadow: 0 8px 25px rgba(11, 11, 12, 0.09);
  display: grid;
  grid-template-columns: 94px 1fr;
  overflow: hidden;
  width: 285px;
}

.shared-service-cover {
  align-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(242, 215, 117, 0.18), transparent 36%),
    #161618;
  color: var(--gold-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.shared-service-cover > i { font-size: 1.6rem; position: relative; z-index: 2; }
.shared-service-cover > small { font-size: 0.75rem; font-weight: 850; letter-spacing: 0.12em; margin-top: 5px; position: relative; z-index: 2; }
.barber-pole { background: repeating-linear-gradient(-35deg, var(--cyan) 0 7px, white 7px 14px, var(--pink) 14px 21px, white 21px 28px); height: 140%; opacity: 0.11; position: absolute; transform: rotate(18deg); width: 42px; }

.shared-service-content { padding: 10px; }
.shared-service-content > span { color: #9a7411; display: block; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.09em; }
.shared-service-content h3 { font-size: 0.75rem; font-weight: 820; margin: 1px 0 3px; }
.shared-service-content p { color: #77777c; font-size: 0.75rem; line-height: 1.45; margin: 0 0 6px; }
.shared-service-meta { align-items: center; display: flex; justify-content: space-between; }
.shared-service-meta span { color: #85858a; font-size: 0.75rem; }
.shared-service-meta strong { font-size: 0.75rem; }

.service-audio {
  align-items: center;
  background: #f2f2ef;
  border-radius: 8px;
  display: flex;
  gap: 5px;
  margin-top: 7px;
  padding: 5px;
}

.service-audio button {
  align-items: center;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  color: var(--gold-light);
  display: flex;
  flex: 0 0 21px;
  height: 21px;
  justify-content: center;
  padding: 0;
  width: 21px;
}

.audio-wave {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 2px;
  height: 20px;
}

.audio-wave i { background: #aaaab0; border-radius: 9px; display: block; height: 30%; width: 2px; }
.audio-wave i:nth-child(3n + 1) { height: 70%; }
.audio-wave i:nth-child(4n + 2) { height: 95%; }
.audio-wave i:nth-child(5n) { height: 50%; }
.service-audio small { color: #8a8a8f; font-size: 0.75rem; }
.message-sent-time { color: #85858a; display: block; font-size: 0.75rem; margin: 3px 8px 0 0; text-align: right; }
.message-sent-time i { color: #069fa7; }

.service-chat-input {
  align-items: center;
  background: white;
  display: flex;
  gap: 7px;
  height: 49px;
  padding: 8px 10px;
}

.service-chat-input > i { color: #85858a; font-size: 0.75rem; }
.service-chat-input > span { background: #f2f2ef; border-radius: 999px; color: #a0a0a5; flex: 1; font-size: 0.75rem; padding: 7px 9px; }
.service-chat-input button { align-items: center; background: var(--green); border: 0; border-radius: 50%; color: white; display: flex; height: 27px; justify-content: center; width: 27px; }

.availability-composer {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(11, 11, 12, 0.1);
  border-radius: 17px;
  bottom: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: 13px;
  position: absolute;
  right: -14px;
  width: 330px;
  z-index: 5;
}

.availability-head {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
}

.availability-head > span { align-items: center; background: rgba(34, 231, 231, 0.13); border-radius: 9px; color: #078f96; display: flex; height: 31px; justify-content: center; width: 31px; }
.availability-head div { flex: 1; }
.availability-head small,
.availability-head strong { display: block; line-height: 1.35; }
.availability-head small { color: #078f96; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.09em; }
.availability-head strong { font-size: 0.75rem; }
.availability-head > i { color: #99999e; font-size: 0.75rem; }

.availability-fields {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.availability-fields > div { background: #f4f4f1; border: 1px solid rgba(11, 11, 12, 0.06); border-radius: 8px; padding: 7px; }
.availability-fields small,
.availability-fields strong { display: block; line-height: 1.4; }
.availability-fields small { color: #8b8b90; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; }
.availability-fields small em { color: #a57d14; font-style: normal; }
.availability-fields strong { font-size: 0.75rem; margin-top: 2px; }
.availability-fields strong i { color: #078f96; margin-right: 2px; }

.nearest-label { color: #747479; display: block; font-size: 0.75rem; font-weight: 750; margin: 9px 0 5px; }
.nearest-label i { color: var(--gold); }
.available-slots { display: grid; gap: 5px; grid-template-columns: repeat(4, 1fr); }
.available-slots button { background: white; border: 1px solid rgba(11, 11, 12, 0.12); border-radius: 7px; padding: 5px 2px; }
.available-slots strong,
.available-slots span { display: block; line-height: 1.35; }
.available-slots strong { color: #88888d; font-size: 0.75rem; }
.available-slots span { font-size: 0.75rem; font-weight: 800; }
.available-slots button:first-child { background: var(--gold-pale); border-color: rgba(216, 169, 40, 0.35); }
.send-schedules { background: var(--ink); border: 0; border-radius: 8px; color: white; font-size: 0.75rem; font-weight: 780; margin-top: 8px; padding: 8px; width: 100%; }
.send-schedules i { color: var(--gold-light); margin-left: 3px; }

.shortcut-toast {
  align-items: center;
  animation: float-card 5s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  position: absolute;
  right: 14px;
  top: 68px;
  z-index: 5;
}

.shortcut-toast > span { align-items: center; background: var(--gold-pale); border-radius: 8px; color: #8c680b; display: flex; font-size: 0.9rem; font-weight: 850; height: 29px; justify-content: center; width: 29px; }
.shortcut-toast small,
.shortcut-toast strong { display: block; line-height: 1.35; white-space: nowrap; }
.shortcut-toast small { color: #88888d; font-size: 0.75rem; }
.shortcut-toast strong { font-size: 0.75rem; }

.ai-section {
  background: #0c0c0e;
  color: white;
  overflow: hidden;
  padding: 125px 0;
  position: relative;
}

.ai-noise {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  inset: 0;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  position: absolute;
}

.ai-orb {
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  position: absolute;
}

.ai-orb-one { background: var(--cyan); height: 360px; right: -80px; top: 30px; width: 360px; }
.ai-orb-two { background: var(--pink); bottom: -100px; height: 330px; left: 30%; width: 330px; }

.ai-kicker {
  background: linear-gradient(90deg, rgba(34, 231, 231, 0.12), rgba(255, 53, 111, 0.11));
  border: 1px solid rgba(34, 231, 231, 0.22);
  border-radius: 999px;
  color: #d5ffff;
  margin-bottom: 1.4rem;
  padding: 0.52rem 0.8rem;
}

.ai-kicker i { color: var(--cyan); }

.ai-section h2 {
  font-size: clamp(2.7rem, 5.2vw, 4.9rem);
  font-weight: 850;
  letter-spacing: -0.068em;
  line-height: 1;
  margin-bottom: 1.3rem;
}

.ai-section h2 span {
  background: linear-gradient(90deg, var(--cyan), #7fbef6 48%, #ff5f91);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ai-section .col-lg-6 > p {
  color: #aaaab0;
  font-size: 1.05rem;
  max-width: 580px;
}

.ai-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  list-style: none;
  margin: 1.7rem 0 2rem;
  padding: 0;
}

.ai-list li { color: #d7d7da; font-size: 0.82rem; }
.ai-list i { color: var(--cyan); margin-right: 4px; }
.ai-price { align-items: baseline; display: flex; gap: 7px; }
.ai-price small { color: #8f8f95; font-size: 0.75rem; }
.ai-price strong { color: white; font-size: 2rem; letter-spacing: -0.06em; }
.ai-price span { color: #8f8f95; font-size: 0.75rem; }

.ai-chat-card {
  background: #f0f0ed;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.38), 18px -18px 0 rgba(34, 231, 231, 0.035), -18px 18px 0 rgba(255, 53, 111, 0.035);
  color: var(--ink);
  margin-left: auto;
  max-width: 500px;
  overflow: hidden;
  transform: rotate(1deg);
}

.ai-chat-head { align-items: center; background: white; border-bottom: 1px solid var(--line); display: flex; gap: 10px; padding: 14px 17px; }
.ai-avatar { align-items: center; background: linear-gradient(135deg, var(--cyan), var(--pink)); border-radius: 50%; color: white; display: flex; height: 38px; justify-content: center; width: 38px; }
.ai-chat-head div { flex: 1; }
.ai-chat-head div strong, .ai-chat-head div small { display: block; line-height: 1.35; }
.ai-chat-head div strong { font-size: 0.75rem; }
.ai-chat-head div small { color: #77777c; font-size: 0.75rem; }
.ai-chat-head div small i { background: var(--green); border-radius: 50%; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }
.ai-chat-head > i { color: var(--green); font-size: 1.2rem; }

.ai-chat-body { background-color: #e9e8e3; background-image: radial-gradient(rgba(11, 11, 12, 0.045) 0.7px, transparent 0.7px); background-size: 10px 10px; display: flex; flex-direction: column; min-height: 410px; padding: 20px 18px; }
.message { border-radius: 14px; box-shadow: 0 5px 15px rgba(11, 11, 12, 0.045); font-size: 0.75rem; margin-bottom: 10px; max-width: 82%; padding: 10px 12px; }
.message p { line-height: 1.5; margin: 0 0 3px; }
.message > small { color: #8c8c91; display: block; font-size: 0.75rem; text-align: right; }
.message-client { align-self: flex-end; background: #dffff1; border-bottom-right-radius: 4px; }
.message-client.short { min-width: 88px; }
.message-ai { align-self: flex-start; background: white; border-bottom-left-radius: 4px; }
.message-ai > span { color: #079fa6; display: block; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase; }
.time-options { display: flex; gap: 5px; margin-top: 8px; }
.time-options button { background: #f4f4f1; border: 1px solid rgba(11, 11, 12, 0.1); border-radius: 7px; font-size: 0.75rem; font-weight: 750; padding: 6px 8px; text-align: left; }
.time-options button small { color: #88888d; display: block; font-size: 0.75rem; font-weight: 500; }
.message.confirmation { align-items: center; display: flex; gap: 9px; max-width: 87%; }
.message.confirmation > span { color: var(--green); font-size: 1rem; margin: 0; }
.message.confirmation strong, .message.confirmation small { display: block; }
.message.confirmation strong { font-size: 0.75rem; }
.message.confirmation small { color: #848489; font-size: 0.75rem; }
.ai-chat-input { align-items: center; background: white; display: flex; gap: 10px; padding: 12px 15px; }
.ai-chat-input > span { background: #f3f3f1; border-radius: 999px; color: #99999e; flex: 1; font-size: 0.75rem; padding: 8px 12px; }
.ai-chat-input > i { color: #77777c; }
.ai-chat-input button { align-items: center; background: var(--green); border: 0; border-radius: 50%; color: white; display: flex; height: 31px; justify-content: center; width: 31px; }

.audience-section {
  background: #f7f7f4;
}

.audience-card {
  background: white;
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: var(--radius-md);
  height: 100%;
  min-height: 365px;
  overflow: hidden;
  padding: 30px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.audience-card:hover { box-shadow: 0 24px 55px rgba(11, 11, 12, 0.08); transform: translateY(-7px); }
.audience-card.featured { background: var(--ink); color: white; }
.audience-number { color: #ecece8; font-size: 4.8rem; font-weight: 900; letter-spacing: -0.08em; line-height: 1; position: absolute; right: 20px; top: 15px; }
.audience-card.featured .audience-number { color: #29292c; }
.audience-icon { align-items: center; background: var(--gold-pale); border-radius: 15px; color: #916c0c; display: flex; font-size: 1.25rem; height: 50px; justify-content: center; margin-bottom: 2.6rem; position: relative; width: 50px; z-index: 2; }
.audience-card.featured .audience-icon { background: rgba(34, 231, 231, 0.13); color: var(--cyan); }
.audience-card h3 { font-size: 1.65rem; font-weight: 820; letter-spacing: -0.045em; }
.audience-card p { color: #77777c; font-size: 0.9rem; line-height: 1.7; }
.audience-card.featured p { color: #aaaab0; }
.audience-card ul { border-top: 1px solid rgba(11, 11, 12, 0.08); list-style: none; margin: 1.5rem 0 0; padding: 1rem 0 0; }
.audience-card.featured ul { border-color: rgba(255, 255, 255, 0.1); }
.audience-card li { color: #56565b; font-size: 0.76rem; margin: 0.45rem 0; }
.audience-card.featured li { color: #d3d3d6; }
.audience-card li i { color: var(--gold); margin-right: 7px; }
.audience-card.featured li i { color: var(--cyan); }
.audience-tag { background: linear-gradient(90deg, var(--cyan), #7ff3e7); border-radius: 999px; color: var(--ink); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.06em; padding: 5px 8px; position: absolute; right: 22px; text-transform: uppercase; top: 22px; z-index: 3; }

.pricing-section {
  background: #f1eddf;
  overflow: hidden;
  position: relative;
}

.pricing-grid-bg { background-image: linear-gradient(rgba(11, 11, 12, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 11, 12, 0.035) 1px, transparent 1px); background-size: 55px 55px; inset: 0; mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%); position: absolute; }
.pricing-wrap { align-items: center; display: flex; justify-content: center; margin: 0 auto; max-width: 860px; }
.pricing-card { background: white; border: 1px solid rgba(11, 11, 12, 0.1); border-radius: 29px; box-shadow: 0 35px 75px rgba(11, 11, 12, 0.14); max-width: 520px; padding: 37px; position: relative; width: 100%; z-index: 2; }
.best-choice { background: var(--ink); border-radius: 999px; color: var(--gold-light); font-size: 0.75rem; font-weight: 800; left: 50%; letter-spacing: 0.07em; padding: 7px 13px; position: absolute; text-transform: uppercase; top: 0; transform: translate(-50%, -50%); white-space: nowrap; }
.pricing-card-head { align-items: center; display: flex; justify-content: space-between; }
.pricing-card-head div > span { color: #99720d; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.13em; }
.pricing-card-head h3 { font-size: 1.32rem; font-weight: 820; letter-spacing: -0.04em; margin: 2px 0 0; }
.pricing-symbol { align-items: center; background: var(--gold-pale); border-radius: 14px; color: #94700e; display: flex; height: 48px; justify-content: center; transform: rotate(-8deg); width: 48px; }
.main-price { align-items: flex-start; display: flex; margin: 1.7rem 0 0.4rem; white-space: nowrap; }
.main-price > span { font-size: 1rem; font-weight: 800; margin: 14px 3px 0 0; }
.main-price strong { font-size: clamp(4.7rem, 8vw, 6.4rem); font-weight: 900; letter-spacing: -0.095em; line-height: 0.85; }
.main-price sup { font-size: 2rem; font-weight: 850; letter-spacing: -0.07em; margin-top: 5px; top: 0; }
.main-price small { align-self: flex-end; color: #77777c; font-size: 0.75rem; margin: 0 0 7px 4px; }
.pricing-intro { color: #77777c; font-size: 0.84rem; margin-bottom: 0; }
.pricing-divider { background: var(--line); height: 1px; margin: 1.5rem 0; }
.pricing-features { display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; list-style: none; margin: 0 0 1.7rem; padding: 0; }
.pricing-features li { align-items: flex-start; display: flex; font-size: 0.75rem; font-weight: 650; gap: 7px; }
.pricing-features i { color: var(--green); }
.btn-pricing { align-items: center; background: var(--ink); border-radius: 999px; color: white; display: flex; font-size: 0.84rem; font-weight: 800; gap: 8px; justify-content: center; padding: 0.95rem 1.3rem; width: 100%; }
.btn-pricing:hover, .btn-pricing:focus-visible { background: #242426; color: white; }
.btn-pricing i { transition: transform 0.2s ease; }
.btn-pricing:hover i { transform: translateX(4px); }
.pricing-note { color: #8b8b90; display: block; font-size: 0.75rem; margin-top: 0.8rem; text-align: center; }
.pricing-note i { color: var(--green); }
.pricing-addon { background: var(--ink); border-radius: 0 24px 24px 0; color: white; margin-left: -2px; padding: 32px 27px 32px 34px; width: 280px; }
.addon-icon { align-items: center; background: linear-gradient(135deg, rgba(34, 231, 231, 0.18), rgba(255, 53, 111, 0.18)); border: 1px solid rgba(34, 231, 231, 0.2); border-radius: 13px; color: var(--cyan); display: flex; height: 44px; justify-content: center; margin-bottom: 1.2rem; width: 44px; }
.pricing-addon > span { color: var(--cyan); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.pricing-addon h3 { font-size: 1.4rem; font-weight: 820; letter-spacing: -0.04em; margin: 4px 0 8px; }
.pricing-addon p { color: #9c9ca1; font-size: 0.75rem; line-height: 1.6; }
.pricing-addon div strong { font-size: 1.35rem; }
.pricing-addon div small { color: #8c8c91; font-size: 0.75rem; margin-left: 3px; }
.pricing-addon a { color: white; display: inline-block; font-size: 0.75rem; font-weight: 700; margin-top: 1.3rem; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; }

.pricing-wrap.pricing-tiers {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
}
.pricing-tier { border-radius: 24px; display: flex; flex-direction: column; max-width: none; padding: 30px; }
.pricing-tier .pricing-features { flex: 1; }
.pricing-tier.featured-tier { border: 2px solid var(--gold); box-shadow: 0 35px 80px rgba(11, 11, 12, 0.2); transform: translateY(-12px); }
.pricing-tier.ai-tier { background: #111113; color: white; }
.pricing-tier.ai-tier .pricing-intro,
.pricing-tier.ai-tier .pricing-features li { color: #b8b8bd; }
.pricing-tier.ai-tier .pricing-divider { background: rgba(255, 255, 255, 0.12); }
.pricing-tier.ai-tier .pricing-symbol { background: rgba(34, 231, 231, 0.12); color: var(--cyan); }
.pricing-shared-note { color: #77777c; font-size: 0.78rem; margin: 28px auto 0; text-align: center; }
.pricing-shared-note i { color: #99720d; margin-right: 5px; }

.faq-section h2 { margin: 0 0 1.3rem; }
.faq-section .col-lg-4 > p { color: var(--muted); font-size: 0.9rem; }
.faq-help { align-items: center; background: #f5f5f2; border-radius: 14px; display: flex; gap: 10px; margin-top: 2rem; padding: 13px; }
.faq-help > span { align-items: center; background: white; border-radius: 10px; color: #96700d; display: flex; height: 38px; justify-content: center; width: 38px; }
.faq-help div { flex: 1; }
.faq-help small, .faq-help strong { display: block; line-height: 1.4; }
.faq-help small { color: #8b8b90; font-size: 0.75rem; }
.faq-help strong { font-size: 0.75rem; }
.faq-accordion .accordion-item { border: 0; border-bottom: 1px solid rgba(11, 11, 12, 0.1); }
.faq-accordion .accordion-button { background: transparent; box-shadow: none; color: var(--ink); font-size: 1rem; font-weight: 750; padding: 1.5rem 2.8rem 1.5rem 0; }
.faq-accordion .accordion-button::after { background: none; content: "+"; font-size: 1.4rem; font-weight: 350; height: auto; position: absolute; right: 0; transform: none; width: auto; }
.faq-accordion .accordion-button:not(.collapsed)::after { content: "−"; }
.faq-accordion .accordion-body { color: var(--muted); font-size: 0.87rem; line-height: 1.75; padding: 0 3rem 1.5rem 0; }

.final-cta {
  background: var(--ink);
  color: white;
  overflow: hidden;
  padding: 120px 0;
  position: relative;
}

.final-cta-lines { background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 18px 18px; inset: 0; mask-image: radial-gradient(ellipse at center, black, transparent 72%); opacity: 0.35; position: absolute; }
.final-cta-glow { background: linear-gradient(90deg, var(--cyan), var(--gold), var(--pink)); bottom: -190px; filter: blur(80px); height: 240px; left: 15%; opacity: 0.22; position: absolute; width: 70%; }
.cta-badge { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; color: var(--gold-light); display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 1.4rem; padding: 7px 12px; text-transform: uppercase; }
.final-cta h2 { font-size: clamp(3rem, 6.5vw, 6.3rem); font-weight: 880; letter-spacing: -0.075em; line-height: 0.95; }
.final-cta h2 span { background: linear-gradient(90deg, var(--gold-light), #f1df9c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-cta p { color: #aaaab0; font-size: 1.02rem; margin: 1.5rem auto 2rem; max-width: 610px; }
.final-cta .btn { margin-bottom: 1rem; }
.final-cta .container > small { color: #77777d; display: block; font-size: 0.75rem; }

.site-footer {
  background: #070708;
  color: white;
  padding: 70px 0 25px;
}

.footer-top { display: flex; justify-content: space-between; padding-bottom: 55px; }
.brand-footer .brand-mark img { filter: invert(1); }
.brand-footer .brand-name { color: white; }
.footer-brand-wrap p { color: #85858a; font-size: 0.78rem; margin: 1rem 0 0; max-width: 260px; }
.footer-links { display: flex; gap: 6rem; }
.footer-links div { display: flex; flex-direction: column; gap: 7px; }
.footer-links strong { color: white; font-size: 0.75rem; margin-bottom: 5px; }
.footer-links a { color: #85858a; font-size: 0.75rem; text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); color: #66666c; display: flex; font-size: 0.75rem; justify-content: space-between; padding-top: 24px; }
.footer-bottom i { color: var(--pink); }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

:focus-visible {
  outline: 3px solid rgba(216, 169, 40, 0.62);
  outline-offset: 3px;
}

@media (max-width: 1199.98px) {
  .hero-section { min-height: 790px; }
  .product-stage { margin-left: -8%; width: 116%; }
  .app-content { padding: 18px; }
  .floating-whatsapp { left: 0; }
  .phone-card-top { right: -20px; }
  .phone-card-bottom { left: -25px; }
  .template-sidebar { left: 14px; width: 180px; }
  .service-chat { left: 168px; }
}

@media (max-width: 991.98px) {
  .pricing-wrap.pricing-tiers { grid-template-columns: 1fr; max-width: 560px; }
  .pricing-tier.featured-tier { transform: none; }
  .site-header { background: rgba(255, 255, 255, 0.93); padding: 10px 0; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .navbar-collapse { background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); margin-top: 11px; padding: 0.8rem; }
  .navbar-nav { gap: 0; }
  .navbar .nav-link { padding: 0.7rem 0.8rem !important; }
  .btn-nav { justify-content: center; width: 100%; }
  .hero-section { padding: 140px 0 80px; text-align: center; }
  .hero-copy { margin: 0 auto; max-width: 760px; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .product-stage { margin: 15px auto 0; max-width: 720px; min-height: 570px; width: 100%; }
  .app-window { left: 2%; width: 96%; }
  .value-strip-grid { grid-template-columns: 1fr 1fr; }
  .value-strip-grid > div:nth-child(2) { border-right: 0; }
  .value-strip-grid > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .value-strip-grid .value-price { border-bottom: 0; }
  .bento-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-large, .feature-dark { min-height: 430px; }
  .feature-revenue { min-height: 380px; }
  .retail-section .col-lg-5 { text-align: center; }
  .retail-lead { margin-left: auto; margin-right: auto; }
  .retail-benefits { margin-left: auto; margin-right: auto; max-width: 720px; text-align: left; }
  .inventory-stage { margin: 12px auto 0; max-width: 720px; }
  .phone-stage { margin-top: 10px; }
  .phone-card-top { right: 13%; }
  .phone-card-bottom { left: 12%; }
  .messaging-section .col-lg-5 { text-align: center; }
  .messaging-lead { margin-left: auto; margin-right: auto; }
  .messaging-benefits { margin-left: auto; margin-right: auto; max-width: 720px; text-align: left; }
  .message-workspace { margin: 15px auto 0; max-width: 720px; }
  .template-sidebar { left: 20px; width: 190px; }
  .service-chat { left: 185px; }
  .ai-chat-card { margin: 20px auto 0; }
  .pricing-wrap { align-items: stretch; }
  .pricing-addon { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; }
  .faq-section .col-lg-4 { text-align: center; }
  .faq-help { margin-left: auto; margin-right: auto; max-width: 380px; text-align: left; }
}

@media (max-width: 767.98px) {
  html { scroll-padding-top: 76px; }
  .section-space { padding: 88px 0; }
  .hero-section { min-height: auto; padding-bottom: 85px; }
  .hero-title { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 0.7rem; }
  .btn-link-demo { justify-content: center; }
  .hero-proof { gap: 0.65rem 1rem; }
  .product-stage { min-height: 500px; }
  .app-window { top: 75px; transform: rotateY(-3deg) rotateX(1deg); }
  .app-sidebar { flex-basis: 58px; }
  .app-sidebar span { justify-content: center; }
  .app-sidebar span b { display: none; }
  .app-content { padding: 13px; }
  .desktop-only { display: none; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .price-orbit { height: 96px; right: 0; width: 96px; }
  .price-orbit strong { font-size: 1.25rem; }
  .floating-money { display: none; }
  .value-strip-grid { grid-template-columns: 1fr; }
  .value-strip-grid > div { border-right: 0; min-height: 82px; }
  .value-strip-grid .value-price { min-height: 95px; }
  .section-heading { margin-bottom: 2.7rem; }
  .feature-card, .feature-large, .feature-dark { min-height: 425px; padding: 23px; }
  .feature-copy { gap: 13px; }
  .feature-icon { flex-basis: 42px; height: 42px; width: 42px; }
  .feature-card h3 { font-size: 1.22rem; }
  .calendar-visual { left: 4%; width: 92%; }
  .inventory-stage { min-height: 550px; }
  .inventory-window { left: 3%; width: 94%; }
  .message-workspace { min-height: 820px; }
  .template-sidebar { align-items: center; bottom: auto; flex-direction: row; left: 4%; min-height: 68px; padding: 9px; right: 4%; top: 18px; width: auto; }
  .template-sidebar-head { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.08); margin: 0 8px 0 0; padding: 2px 10px 2px 2px; }
  .template-sidebar > button:not(.active) { display: none; }
  .template-sidebar > button.active { flex: 1; margin: 0; padding: 7px; }
  .service-chat { height: 520px; left: 5%; top: 105px; width: 90%; }
  .service-chat-body { height: 419px; }
  .availability-composer { bottom: 19px; left: 3%; right: auto; width: 94%; }
  .shortcut-toast { display: none; }
  .workflow-section .col-lg-5 { text-align: center; }
  .workflow-lead { margin-left: auto; margin-right: auto; }
  .workflow-steps { text-align: left; }
  .phone-stage { min-height: 650px; }
  .phone-card-top { right: 0; }
  .phone-card-bottom { left: 0; }
  .ai-section { padding: 90px 0; text-align: center; }
  .ai-list { justify-content: center; }
  .ai-price { justify-content: center; }
  .ai-chat-card { text-align: left; }
  .pricing-wrap { flex-direction: column; }
  .pricing-card { padding: 32px 24px; }
  .pricing-addon { border-radius: 0 0 24px 24px; margin: -20px auto 0; padding: 45px 28px 28px; width: calc(100% - 36px); }
  .footer-top { gap: 3rem; }
  .footer-links { gap: 3rem; }
}

@media (max-width: 575.98px) {
  .container { --bs-gutter-x: 1.6rem; }
  .brand-mark { height: 16px; width: 48px; }
  .brand-mark img { height: 63px; left: -7px; top: -20px; width: 63px; }
  .brand-name { font-size: 1.12rem; }
  .eyebrow { font-size: 0.75rem; }
  .hero-lead { font-size: 1rem; }
  .hero-proof { font-size: 0.75rem; }
  .product-stage { min-height: 430px; }
  .app-window { border-radius: 15px; left: -2%; top: 60px; width: 104%; }
  .app-topbar { height: 44px; padding: 0 11px; }
  .app-body { min-height: 320px; }
  .app-sidebar { flex-basis: 45px; padding: 12px 6px; }
  .app-sidebar span { padding: 7px 5px; }
  .app-content { padding: 10px; }
  .app-greeting h2 { font-size: 0.75rem; }
  .app-greeting button { font-size: 0; padding: 7px 8px; }
  .app-greeting button i { font-size: 0.75rem; }
  .stats-row { margin: 10px 0; }
  .mini-stat { padding: 7px; }
  .stat-icon { flex-basis: 25px; height: 25px; width: 25px; }
  .schedule-item { grid-template-columns: 25px 23px minmax(72px, 1fr) 70px; padding: 7px 8px; }
  .schedule-item .professional { display: none; }
  .client-avatar { height: 23px; width: 23px; }
  .client-name strong { font-size: 0.75rem; }
  .client-name small { font-size: 0.75rem; }
  .price-orbit { border-width: 4px; height: 82px; right: -3px; top: 12px; width: 82px; }
  .price-orbit::after { inset: -8px; }
  .price-orbit span, .price-orbit small { font-size: 0.75rem; }
  .price-orbit strong { font-size: 1.05rem; }
  .floating-whatsapp { bottom: 3px; left: -4px; transform: scale(0.86); transform-origin: left bottom; }
  .scroll-hint { display: none; }
  .section-heading h2, .workflow-title, .faq-section h2 { font-size: 2.65rem; }
  .feature-card, .feature-large, .feature-dark { min-height: 430px; }
  .feature-copy { display: block; }
  .feature-icon { margin-bottom: 13px; }
  .team-visual { bottom: 30px; }
  .retail-benefits { grid-template-columns: 1fr; }
  .retail-title { font-size: 2.8rem; }
  .inventory-stage { min-height: 525px; }
  .inventory-window { left: 2%; top: 34px; width: 96%; }
  .inventory-head { padding: 13px; }
  .inventory-head button { font-size: 0; padding: 8px 9px; }
  .inventory-head button i { font-size: 0.75rem; }
  .inventory-metrics { gap: 5px; padding: 9px 8px 7px; }
  .inventory-metrics > div { flex-direction: column; gap: 3px; padding: 7px 3px; text-align: center; }
  .inventory-metrics > div > span { flex-basis: 25px; height: 25px; width: 25px; }
  .inventory-metrics em { display: none; }
  .inventory-table { margin: 0 8px 12px; }
  .inventory-table-head,
  .inventory-row { grid-template-columns: minmax(130px, 1.7fr) 0.62fr 0.72fr; }
  .inventory-table-head span:nth-child(4),
  .inventory-table-head span:nth-child(5),
  .inventory-row > span:nth-child(4),
  .inventory-row > span:nth-child(5) { display: none; }
  .inventory-product strong { font-size: 0.75rem; }
  .inventory-product small { font-size: 0.75rem; }
  .stock-card { transform: scale(0.84); }
  .stock-card-sale { bottom: 24px; left: -14px; transform-origin: left bottom; }
  .stock-card-commission { bottom: 70px; right: -14px; transform-origin: right bottom; }
  .product-display { transform: translateX(-50%) scale(0.82); transform-origin: center bottom; }
  .messaging-title { font-size: 2.8rem; }
  .messaging-benefits { grid-template-columns: 1fr; }
  .message-workspace { min-height: 790px; }
  .template-sidebar { left: 3%; right: 3%; }
  .template-sidebar-head strong { font-size: 0.75rem; }
  .template-sidebar > button.active small { display: none; }
  .service-chat { left: 2%; top: 94px; width: 96%; }
  .shared-service-card { grid-template-columns: 88px 1fr; width: 100%; }
  .availability-composer { bottom: 14px; left: 2%; width: 96%; }
  .availability-fields { grid-template-columns: 1fr; }
  .availability-fields > div { padding: 6px 7px; }
  .available-slots { gap: 3px; }
  .phone-stage { margin-left: -8px; min-height: 625px; width: calc(100% + 16px); }
  .phone-shell { height: 585px; width: 285px; }
  .phone-card { transform: scale(0.82); }
  .phone-card-top { right: -18px; transform-origin: right center; }
  .phone-card-bottom { bottom: 70px; left: -18px; transform-origin: left center; }
  .ai-kicker { font-size: 0.75rem; }
  .ai-chat-body { min-height: 390px; padding: 16px 11px; }
  .time-options { flex-direction: column; }
  .pricing-features { grid-template-columns: 1fr; }
  .main-price strong { font-size: 5rem; }
  .main-price sup { font-size: 1.65rem; }
  .final-cta { padding: 90px 0; }
  .footer-top { flex-direction: column; }
  .footer-links { justify-content: space-between; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .app-window { transform: none !important; }
}