@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ink: #12233d;
  --muted: #627087;
  --primary: #5b35c9;
  --primary-dark: #43209f;
  --purple-soft: #f3efff;
  --line: #e8ebf1;
  --soft: #f7f8fc;
  --green: #19a974;
  --white: #fff;
  --shadow: 0 24px 70px rgba(31, 27, 77, 0.12);
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  line-height: 1.7;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(1160px, calc(100% - 40px));
  margin: auto;
}
.topbar {
  height: 84px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(232, 235, 241, 0.75);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img {
  width: 112px;
  height: 44px;
  object-fit: contain;
}
.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.brand b { display: none; }
.brand small {
  color: var(--muted);
  font-size: 10px;
}
.topbar nav {
  display: flex;
  gap: 25px;
  font-size: 13px;
  color: #43516a;
}
.topbar nav a:hover {
  color: var(--primary);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-radius: 13px;
  padding: 14px 23px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(91, 53, 201, 0.2);
  transition: 0.25s;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(91, 53, 201, 0.28);
}
.button-small {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12px;
}
.hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;
  background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}
.hero:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(105, 66, 224, 0.12),
    transparent 70%
  );
  left: -160px;
  top: -120px;
}
.hero-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(116, 77, 225, 0.07);
  filter: blur(10px);
  right: -140px;
  bottom: -170px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  gap: 50px;
}
.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  background: var(--purple-soft);
  padding: 7px 12px;
  border-radius: 99px;
}
.eyebrow i {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  margin-left: 8px;
  box-shadow: 0 0 0 4px rgba(25, 169, 116, 0.12);
}
h1 {
  font-size: 51px;
  line-height: 1.35;
  margin: 24px 0 18px;
  letter-spacing: -2px;
}
h1 em {
  font-style: normal;
  color: var(--primary);
}
.hero-copy > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
  max-width: 570px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-top: 28px;
}
.text-link {
  font-weight: 700;
  font-size: 13px;
  color: #334158;
}
.video-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.text-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--primary);
  font-style: normal;
  margin-left: 8px;
}
.text-link i svg,
.float-card > span svg,
.avatars svg,
.feature-icon svg,
.audience-list span svg,
.customer-mark svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.text-link i svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.hero-proof {
  display: flex;
  align-items: center;
  margin-top: 35px;
}
.avatars {
  display: flex;
  direction: ltr;
}
.avatars b {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  border: 2px solid white;
  color: var(--primary);
  margin-right: -8px;
  font-size: 11px;
}
.hero-proof p {
  display: flex;
  flex-direction: column;
  margin: 0 14px;
  font-size: 11px;
}
.hero-proof small {
  color: var(--muted);
}
.product-stage {
  position: relative;
  padding: 35px 0;
}
.browser {
  border: 1px solid #e1deeb;
  border-radius: 16px;
  background: white;
  padding: 8px;
  box-shadow: var(--shadow);
  transform: perspective(900px) rotateY(2deg);
  overflow: hidden;
}
.browser-bar {
  height: 33px;
  display: flex;
  align-items: center;
  direction: ltr;
  gap: 5px;
  padding: 0 7px;
}
.browser-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3e3e7;
}
.browser-bar i:first-child {
  background: #ff7d7d;
}
.browser-bar i:nth-child(2) {
  background: #ffc85a;
}
.browser-bar i:nth-child(3) {
  background: #69d19c;
}
.browser-bar span {
  background: #f5f5f8;
  color: #999;
  margin: auto;
  width: 55%;
  text-align: center;
  border-radius: 5px;
  font-size: 8px;
}
.browser img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}
.float-card {
  position: absolute;
  background: white;
  padding: 11px 14px;
  border-radius: 12px;
  box-shadow: 0 13px 35px rgba(33, 38, 75, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  border: 1px solid #f1f0f6;
}
.float-card > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf9f3;
  color: var(--green);
  font-weight: bold;
}
.float-card p {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 10px;
}
.float-card small {
  color: var(--muted);
  font-size: 8px;
}
.float-top {
  right: -22px;
  top: 4px;
}
.float-bottom {
  left: -28px;
  bottom: 0;
}
.float-card .chart {
  background: var(--purple-soft);
  color: var(--primary);
}
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: white;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 0;
}
.trust-grid div {
  text-align: center;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.trust-grid div:last-child {
  border: 0;
}
.trust-grid strong {
  font-size: 25px;
  color: var(--primary);
}
.trust-grid span {
  font-size: 11px;
  color: var(--muted);
}
.clients {
  padding: 72px 0 82px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.clients .container > p {
  margin: 0 auto 36px;
  color: var(--muted);
  font-size: 13px;
}
.client-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.client-grid figure {
  height: 105px;
  margin: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: 0.25s;
}
.client-grid figure:hover {
  transform: translateY(-3px);
  border-color: #d8cff3;
  box-shadow: 0 12px 30px rgba(29, 35, 70, 0.07);
}
.client-grid img {
  display: block;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 24px;
}
.video-modal.is-open {
  display: grid;
}
.video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 28, 0.78);
  backdrop-filter: blur(8px);
}
.video-dialog {
  position: relative;
  width: min(940px, 100%);
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
}
.video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}
.video-head span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.video-head h2 {
  margin: 0;
  font-size: 20px;
}
.video-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  font: 28px/1 inherit;
}
.video-dialog video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #070912;
}
body.modal-open {
  overflow: hidden;
}
.section {
  padding: 100px 0;
}
.center {
  text-align: center;
}
.narrow {
  max-width: 730px;
  margin-inline: auto;
}
h2 {
  font-size: 34px;
  line-height: 1.55;
  margin: 14px 0;
}
.intro > .container > p,
.section-head p,
.showcase-copy > p,
.faq-grid > div > p {
  color: var(--muted);
  font-size: 14px;
}
.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(102, 51, 152, 0.09), transparent 31%),
    linear-gradient(180deg, #fff 0%, #fdfcff 100%);
}
.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 54px;
  left: -7%;
  width: min(590px, 49vw);
  aspect-ratio: 16 / 10;
  border: 10px solid rgba(255, 255, 255, 0.62);
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.48), rgba(246, 241, 255, 0.14)),
    url("../images/currentcalendar.jpg") center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(69, 42, 133, 0.13);
  opacity: 0.18;
  transform: rotate(-8deg) skewX(2deg);
  filter: saturate(0.82) contrast(0.9);
  pointer-events: none;
}
.intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.86) 47%, #fff 76%);
  pointer-events: none;
}
.intro > .container {
  position: relative;
  z-index: 1;
}
.before-after {
  margin-top: 55px;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
}
.before-after > div:not(.connector) {
  padding: 30px;
  border-radius: 20px;
}
.pain {
  background: #fafafa;
  border: 1px solid var(--line);
}
.solution {
  background: linear-gradient(135deg, #f6f2ff, #fcfbff);
  border: 1px solid #e5ddff;
}
.before-after span {
  font-size: 11px;
  color: var(--muted);
}
.solution span {
  color: var(--primary);
}
.before-after h3 {
  margin: 7px 0 12px;
  font-size: 18px;
}
.before-after ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.before-after li:before {
  content: "×";
  color: #df6767;
  font-weight: bold;
  margin-left: 9px;
}
.solution li:before {
  content: "✓";
  color: var(--green);
}
.connector {
  text-align: center;
  color: var(--primary);
  font-size: 25px;
}
.soft {
  background: var(--soft);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 42px;
}
.section-head > div {
  max-width: 600px;
}
.section-head h2 {
  margin-bottom: 0;
}
.section-head > p {
  max-width: 390px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.digital-learning-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 30px; }
.digital-highlight { position:relative; display:flex; gap:17px; min-height:245px; padding:25px 23px; overflow:hidden; color:#fff; background:linear-gradient(145deg,#252047 0%,#17142e 100%); border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:0 18px 44px rgba(31,22,67,.14); }
.digital-highlight::after { content:""; position:absolute; width:150px; height:150px; inset:auto auto -80px -55px; background:rgba(117,82,217,.22); border-radius:50%; filter:blur(2px); }
.digital-highlight.online-class { background:linear-gradient(145deg,#6845cb 0%,#432592 100%); }
.digital-highlight.secure-stream { background:linear-gradient(145deg,#17162d 0%,#322260 100%); }
.digital-highlight-icon { position:relative; z-index:1; display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:15px; }
.digital-highlight-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; }
.digital-highlight > div { position:relative; z-index:1; }
.highlight-label { color:#dcd3ff; font-size:10px; font-weight:700; }
.digital-highlight h3 { margin:8px 0 9px; color:#fff; font-size:16px; line-height:1.8; }
.digital-highlight p { margin:0; color:rgba(255,255,255,.72); font-size:11px; line-height:2; }
.digital-highlight ul { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0 0; padding:0; list-style:none; }
.digital-highlight li { padding:6px 10px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:9px; font-weight:700; }
.highlight-status { display:inline-flex; align-items:center; gap:7px; margin-top:17px; color:#fff; font-size:9px; font-weight:700; }
.highlight-status i { width:8px; height:8px; background:#65e6a5; border-radius:50%; box-shadow:0 0 0 5px rgba(101,230,165,.13); }
.feature-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 26px;
  transition: 0.25s;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(29, 35, 70, 0.08);
  border-color: #ddd3fa;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: var(--purple-soft);
  color: var(--primary);
  font-size: 20px;
}
.feature-icon svg { width: 23px; height: 23px; }
.testimonials { overflow: hidden; background: linear-gradient(180deg, #fff 0%, #faf9fd 100%); }
.testimonials-head { margin-bottom: 32px; }
.testimonial-slider { position: relative; width: min(980px, 100%); margin: 0 auto; }
.testimonial-stage { position: relative; height: 350px; touch-action: pan-y; }
.testimonial-card { position: absolute; inset: 16px 50% auto auto; display: flex; flex-direction: column; width: min(620px, 68vw); min-height: 300px; padding: 30px 34px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 16px 42px rgba(29,35,70,.08); opacity: 0; pointer-events: none; transform: translateX(50%) scale(.78); transition: transform .48s cubic-bezier(.2,.75,.2,1), opacity .38s ease, filter .38s ease; }
.testimonial-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--primary), var(--ink)); }
.testimonial-card.is-active { z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(50%) scale(1); box-shadow: 0 28px 70px rgba(57,37,121,.16); }
.testimonial-card.is-prev { z-index: 2; opacity: .55; filter: saturate(.65); transform: translateX(calc(50% + 48%)) scale(.83); }
.testimonial-card.is-next { z-index: 2; opacity: .55; filter: saturate(.65); transform: translateX(calc(50% - 48%)) scale(.83); }
.testimonial-top { display: flex; align-items: center; justify-content: space-between; }
.quote-icon { width: 34px; height: 34px; fill: var(--purple-soft); stroke: var(--primary); stroke-width: 1.1; }
.testimonial-card blockquote { margin: 24px 0 30px; color: #283248; font-size: 16px; font-weight: 500; line-height: 2.15; }
.testimonial-card footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; padding: 20px 4px 2px; color: var(--ink); background: transparent; border-top: 1px solid var(--line); }
.customer-mark { display: grid; place-items: center; flex: 0 0 74px; width: 74px; height: 58px; color: var(--primary); background: #fff; border-radius: 13px; overflow: hidden; }
.customer-logo { border: 1px solid var(--line); padding: 7px; }
.customer-logo img { width: 100%; height: 100%; object-fit: contain; }
.testimonial-card footer p { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; padding-inline: 2px; }
.testimonial-card footer strong { font-size: 14px; }
.testimonial-card footer small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.verified-badge { margin-inline-start: 8px; padding: 8px 13px; color: #4f3a86; background: #f2eef9; border: 1px solid #e2dbf1; border-radius: 999px; font-size: 10px; white-space: nowrap; }
.verified-badge.longevity { color: #18794e; background: #eaf8f1; }
.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.slider-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; box-shadow: 0 8px 20px rgba(29,35,70,.07); transition: .2s ease; }
.slider-arrow:hover { color: #fff; background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.slider-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.slider-dots { display: flex; align-items: center; gap: 7px; }
.slider-dot { width: 8px; height: 8px; padding: 0; background: #d7d0ed; border: 0; border-radius: 99px; cursor: pointer; transition: .25s ease; }
.slider-dot.is-active { width: 26px; background: var(--primary); }
.feature-card h3 {
  font-size: 16px;
  margin: 17px 0 7px;
}
.feature-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 2;
  min-height: 68px;
}
.feature-card a {
  font-size: 11px;
  font-weight: bold;
  color: var(--primary);
}
.showcase-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  gap: 70px;
}
.showcase-copy ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.showcase-copy li {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
.showcase-copy li > b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #eaf9f3;
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 11px;
}
.showcase-copy li span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.showcase-copy li small {
  color: var(--muted);
  font-size: 10px;
}
.button-outline {
  background: white;
  color: var(--primary);
  border: 1px solid #d8cff3;
  box-shadow: none;
}
.gallery-stack {
  position: relative;
  padding: 20px 0 70px;
}
.gallery-stack img {
  border-radius: 14px;
  border: 6px solid white;
  box-shadow: var(--shadow);
}
.gallery-main {
  width: 93%;
  display: block;
}
.gallery-side {
  position: absolute;
  width: 58%;
  left: 0;
  bottom: 0;
}
.audience {
  background: #16142e;
  color: white;
}
.audience .section-kicker {
  background: rgba(255, 255, 255, 0.09);
  color: #bcaafd;
}
.audience-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 45px;
}
.audience-list a {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 23px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 0.2s;
}
.audience-list a:hover {
  background: rgba(120, 83, 226, 0.3);
  transform: translateY(-3px);
}
.audience-list span {
  font-size: 24px;
  color: #bcaafd;
}
.audience-list span svg { width: 27px; height: 27px; }
.audience-list b {
  font-size: 12px;
}
.audience-list i {
  font-style: normal;
  color: #8872c9;
}
.steps {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr;
  margin-top: 55px;
  align-items: start;
  text-align: center;
}
.step-card { position: relative; padding: 28px 16px 24px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 15px 35px rgba(29,35,70,.05); transition: .25s ease; }
.step-card:hover { transform: translateY(-5px); border-color: #d8cff3; box-shadow: 0 22px 45px rgba(56,38,113,.1); }
.step-icon {
  position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: -5px auto 18px; border-radius: 19px; background: linear-gradient(145deg, var(--purple-soft), #fff); color: var(--primary); box-shadow: inset 0 0 0 1px #e3dcf8;
}
.step-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.step-icon b { position: absolute; left: -7px; bottom: -7px; display: grid; place-items: center; width: 25px; height: 25px; color: #fff; background: var(--ink); border: 3px solid #fff; border-radius: 50%; font-size: 9px; }
.steps h3 {
  font-size: 14px;
  margin: 13px 0 2px;
}
.steps p {
  font-size: 10px;
  color: var(--muted);
}
.steps > i {
  height: 2px;
  background: repeating-linear-gradient(90deg, #cfc5ed 0 8px, transparent 8px 14px);
  margin-top: 62px;
}
.faq {
  background: var(--soft);
}
.faq-grid {
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 80px;
}
.faq-list details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 18px;
  margin-bottom: 10px;
}
.faq-list summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 17px 0;
  list-style: none;
}
.faq-list summary:before {
  content: "+";
  float: left;
  color: var(--primary);
  font-size: 18px;
}
.faq-list details[open] summary:before {
  content: "−";
}
.faq-list p {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 13px 0;
  margin: 0;
}
.cta {
  padding: 70px 0;
  background: linear-gradient(135deg, #5631c2, #382081);
  color: white;
}
.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cta span {
  font-size: 11px;
  color: #d1c5f7;
}
.cta h2 {
  font-size: 29px;
  margin: 8px 0;
}
.cta p {
  font-size: 12px;
  color: #d9d2ee;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.button-light {
  background: white;
  color: var(--primary);
  box-shadow: none;
}
.cta-actions small {
  color: #d9d2ee;
  font-size: 9px;
}
footer {
  padding: 65px 0 20px;
  background: #0f1221;
  color: white;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 50px;
}
body > footer .footer-brand img {
  width: 132px;
  height: 52px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.footer-grid > div > p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  max-width: 290px;
}
.footer-grid h3 {
  font-size: 12px;
  margin: 0 0 16px;
}
.footer-grid > div > a:not(.brand) {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  margin: 9px 0;
}
.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 45px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  color: #697286;
  font-size: 9px;
}
@media (max-width: 900px) {
  .digital-learning-highlights { grid-template-columns:1fr; }
  .digital-highlight { min-height:0; }
  .testimonial-card { width: min(600px, 72vw); }
  .topbar nav {
    display: none;
  }
  .hero {
    padding-top: 55px;
  }
  .hero-grid,
  .showcase-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy > p {
    margin-inline: auto;
  }
  .hero-actions,
  .hero-proof {
    justify-content: center;
  }
  .product-stage {
    margin-top: 20px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .client-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .showcase-grid {
    gap: 30px;
  }
  .audience-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .section-head {
    display: block;
  }
  .faq-grid {
    gap: 35px;
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .cta-box {
    gap: 30px;
  }
  .before-after {
    grid-template-columns: 1fr;
  }
  .connector {
    transform: rotate(-90deg);
    height: 50px;
    display: grid;
    place-items: center;
  }
}
@media (max-width: 600px) {
  .testimonial-stage { height: 340px; }
  .testimonial-card { top: 12px; width: calc(100% - 46px); min-height: 290px; }
  .container {
    width: min(100% - 28px, 1160px);
  }
  .topbar {
    height: 72px;
  }
  .brand img {
    width: 100px;
    height: 38px;
  }
  .brand span { display: none; }
  .testimonial-card { padding: 24px; }
  .testimonial-card blockquote { font-size: 14px; }
  .testimonial-card footer { align-items: flex-end; }
  .button-small {
    padding: 9px 12px;
  }
  .hero {
    padding: 45px 0 65px;
  }
  h1 {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .hero-copy > p {
    font-size: 13px;
  }
  .hero-actions {
    flex-direction: column;
    gap: 16px;
  }
  .float-card {
    display: none;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .clients {
    padding: 55px 0 62px;
  }
  .client-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .client-grid figure {
    height: 92px;
    padding: 14px;
  }
  .video-modal {
    padding: 12px;
  }
  .video-head {
    padding: 14px 16px;
  }
  .video-head h2 {
    font-size: 16px;
  }
  .trust-grid div:nth-child(2) {
    border: 0;
  }
  .section {
    padding: 70px 0;
  }
  h2 {
    font-size: 26px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .audience-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .steps > i {
    display: none;
  }
  .cta-box {
    flex-direction: column;
    text-align: center;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .copyright {
    flex-direction: column;
    gap: 8px;
  }
  .browser {
    transform: none;
  }
  .gallery-side {
    width: 65%;
  }
}

/* Final visual polish: focused product preview and consistent customer marks. */
#features,
.audience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#features::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(135deg, #f8f8fc, #f1eefb);
  opacity: 1;
}
#features::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  left: -180px;
  top: 50%;
  border-radius: 50%;
  background: rgba(91,53,201,.08);
  filter: blur(50px);
  transform: translateY(-50%);
}
#features .feature-card {
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(8px);
}
.audience { background: linear-gradient(135deg, #18142f, #2f225c); }
.product-preview { display: grid; grid-template-columns: 1fr 40%; align-items: center; gap: 42px; min-height: 430px; margin: 0 0 38px; padding: 38px 54px; overflow: hidden; background: linear-gradient(135deg, #211845, #5b35c9); border-radius: 30px; box-shadow: 0 28px 70px rgba(42,28,95,.18); }
.phone-mockup { position: relative; width: min(300px, 100%); height: 360px; justify-self: center; padding: 12px; overflow: hidden; background: #151525; border: 5px solid #29293c; border-radius: 34px; box-shadow: 0 25px 50px rgba(0,0,0,.32); transform: rotate(-2deg); }
.phone-mockup img { width: 100%; height: 100%; object-fit: cover; object-position: 18% center; border-radius: 22px; }
.phone-speaker { position: absolute; z-index: 2; top: 9px; left: 50%; width: 70px; height: 17px; background: #151525; border-radius: 0 0 12px 12px; transform: translateX(-50%); }
.preview-placeholders { position: relative; min-height: 300px; color: #fff; }
.preview-chip { display: inline-flex; padding: 9px 14px; color: #fff; font-size: 12px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 99px; }
.preview-panel { margin-top: 22px; padding: 24px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; backdrop-filter: blur(10px); }
.preview-panel i { display: block; width: 42%; height: 13px; margin-bottom: 24px; background: rgba(255,255,255,.82); border-radius: 99px; }
.preview-panel b { display: block; width: 100%; height: 10px; margin-top: 13px; background: rgba(255,255,255,.17); border-radius: 99px; }
.preview-panel b:nth-child(3) { width: 76%; }.preview-panel b:nth-child(4) { width: 58%; }
.preview-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.preview-metrics span { display: flex; align-items: center; gap: 9px; padding: 14px; background: rgba(255,255,255,.09); border-radius: 15px; }
.preview-metrics i { width: 28px; height: 28px; background: rgba(255,255,255,.22); border-radius: 9px; }.preview-metrics b { width: 55%; height: 9px; background: rgba(255,255,255,.35); border-radius: 99px; }
.learning { background: #fff; }.learning-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.learning-video { display: grid; grid-template-columns: 48% 1fr; gap: 25px; padding: 18px; color: var(--ink); text-align: right; background: #f8f7fc; border: 1px solid var(--line); border-radius: 24px; cursor: pointer; }
.learning-cover { position: relative; min-height: 245px; overflow: hidden; background:#120d2d; border:1px solid rgba(103,72,213,.3); border-radius:18px; box-shadow:0 18px 38px rgba(31,20,78,.2); }.learning-cover img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .45s ease,filter .45s ease; }.learning-cover::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(91,53,201,.08),transparent 44%,rgba(10,8,28,.13)); }
.learning-cover i { position:absolute; z-index:2; inset:50% auto auto 50%; display:grid; width:58px; height:58px; place-items:center; color:#fff; background:var(--primary); border-radius:50%; transform:translate(-50%,-50%); }.learning-cover svg { width:28px; fill:currentColor; }
.learning-video > span:last-child { display:flex; flex-direction:column; justify-content:center; }.learning-video small { color:var(--primary); }.learning-video strong { margin:10px 0 18px; font-size:20px; line-height:1.8; }.learning-video em { color:var(--primary); font-style:normal; font-weight:700; }
.learning-video:hover .learning-cover img { transform:scale(1.025); filter:brightness(1.08); }
.learning-links { display:grid; gap:14px; }.learning-links a { display:flex; align-items:center; gap:16px; padding:20px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(32,25,67,.05); }.learning-links a > span { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; color:var(--primary); background:#f0ebff; border-radius:14px; }.learning-links svg { width:24px; fill:none; stroke:currentColor; stroke-width:1.8; }.learning-links p { display:flex; flex:1; flex-direction:column; margin:0; }.learning-links small { margin-top:4px; color:var(--muted); }.learning-links i { color:var(--primary); font-style:normal; }
.demo-section { padding:90px 0; color:#fff; background:linear-gradient(135deg,#1b1538,#5b35c9); }.demo-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center; }.demo-copy .section-kicker { color:#d9cfff; }.demo-copy h2 { margin:14px 0; font-size:34px; }.demo-copy p { color:#ddd7ef; line-height:2; }.demo-copy ul { margin:25px 0; padding:0; list-style:none; }.demo-copy li { margin:12px 0; }.demo-copy li::before { content:"✓"; margin-left:9px; color:#bba7ff; }.demo-contact { display:flex; flex-direction:column; gap:8px; }.demo-contact a { color:#fff; font-weight:700; }
.demo-form { display:grid; gap:16px; padding:30px; color:var(--ink); background:#fff; border-radius:24px; box-shadow:0 28px 70px rgba(0,0,0,.18); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.demo-form label { display:grid; gap:8px; font-size:13px; font-weight:700; }.demo-form input,.demo-form select,.demo-form textarea { width:100%; padding:13px 14px; font:inherit; color:var(--ink); background:#fafafe; border:1px solid var(--line); border-radius:11px; outline:none; }.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,53,201,.1); }.demo-form textarea { resize:vertical; }.demo-form .button { justify-self:start; border:0; cursor:pointer; }.form-note { color:var(--muted); }.form-status { min-height:24px; margin:0; color:var(--primary); font-size:12px; font-weight:700; }.was-validated :invalid { border-color:#d64545; }
.customer-mark.customer-logo {
  position: relative;
  width: 96px;
  height: 68px;
  flex-basis: 96px;
  padding: 9px 12px;
  background: linear-gradient(145deg, #fff, #f7f5fc);
  border: 1px solid #e4dff1;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(41,29,86,.08), inset 0 0 0 3px rgba(255,255,255,.78);
}
.customer-mark.customer-logo::after {
  content: "";
  position: absolute;
  inset: auto 18px 5px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(91,53,201,.45), transparent);
}
.customer-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.82) contrast(.96);
}
.customer-logo:has(img[src*="afaq"]) {
  background: linear-gradient(145deg, #6540ca, #43209f);
  border-color: rgba(255,255,255,.2);
}
.customer-logo:has(img[src*="afaq"]) img {
  filter: saturate(.78) brightness(1.08);
}
.testimonial-card.is-prev .customer-logo,
.testimonial-card.is-next .customer-logo {
  filter: none;
}
@media (max-width: 720px) {
  .intro::before {
    top: 84px;
    left: -36%;
    width: 92vw;
    opacity: 0.12;
    transform: rotate(-9deg);
  }
  .intro::after {
    background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.94) 52%, #fff 76%);
  }
  #features::before {
    background: linear-gradient(180deg, #f8f8fc, #f1eefb);
    opacity: 1;
  }
  .audience {
    background: linear-gradient(135deg, #18142f, #2f225c);
  }
  .customer-mark.customer-logo {
    width: 84px;
    height: 62px;
    flex-basis: 84px;
  }
  .product-preview { grid-template-columns:1fr; gap:22px; padding:26px 20px; }.phone-mockup { width:40%; min-width:190px; height:300px; grid-row:1; }.preview-placeholders { min-height:220px; }.learning-grid,.learning-video,.demo-grid { grid-template-columns:1fr; }.learning-video { text-align:center; }.learning-cover { min-height:210px; }.form-row { grid-template-columns:1fr; }.demo-section { padding:64px 0; }.demo-copy h2 { font-size:27px; }
}

/* v12: richer product preview, consistent controls and contact details */
button, input, select, textarea, .button, .section-kicker,
[class*="badge"], [class*="chip"] {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
.product-preview {
  position: relative;
  grid-template-columns: 1fr 36%;
  gap: 28px;
  min-height: 500px;
  padding: 38px 44px;
  background: radial-gradient(circle at 88% 15%,rgba(255,255,255,.16),transparent 27%),linear-gradient(135deg,#211845,#5b35c9);
}
.product-preview::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: -70px;
  bottom: -100px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.018);
}
.preview-dashboard { position:relative; z-index:1; min-width:0; color:#fff; }
.preview-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.preview-dashboard-head > div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.preview-dashboard-head strong { font-size:20px; }
.preview-live { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; color:#e9e4ff; font-size:10px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-radius:99px; }
.preview-live i { width:7px; height:7px; background:#62e6a5; border-radius:50%; box-shadow:0 0 0 4px rgba(98,230,165,.13); }
.preview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:0; }
.preview-metrics article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; min-width:0; padding:13px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); border-radius:15px; backdrop-filter:blur(10px); }
.metric-icon { display:grid !important; width:36px !important; height:36px !important; padding:0 !important; place-items:center; font-size:9px; font-weight:700; background:linear-gradient(135deg,#ad95ff,#6e4ddd) !important; border-radius:11px !important; }
.preview-metrics p { display:flex; min-width:0; flex-direction:column; margin:0; }
.preview-metrics small { color:#d7d0ef; font-size:9px; white-space:nowrap; }
.preview-metrics strong { margin-top:2px; font-size:12px; white-space:nowrap; }
.preview-metrics em { padding:4px 6px; color:#89efbd; font-size:8px; font-style:normal; background:rgba(98,230,165,.11); border-radius:7px; }
.preview-dashboard-body { display:grid; grid-template-columns:1.08fr .92fr; gap:10px; margin-top:10px; }
.preview-chart-card,.preview-schedule-card { min-width:0; padding:16px; background:rgba(255,255,255,.96); color:var(--ink); border-radius:17px; box-shadow:0 18px 34px rgba(17,11,45,.18); }
.preview-chart-card header,.preview-schedule-card header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-chart-card header div { display:flex; flex-direction:column; }
.preview-chart-card header small { color:var(--muted); font-size:8px; }
.preview-chart-card header span,.preview-schedule-card header span { color:var(--primary); font-size:8px; }
.preview-chart { display:flex; height:105px; align-items:flex-end; gap:8px; margin-top:17px; padding-top:12px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,rgba(91,53,201,.06) 26px); }
.preview-chart i { width:100%; height:var(--h); background:linear-gradient(180deg,#9d85ee,#5b35c9); border-radius:7px 7px 2px 2px; }
.preview-schedule-card > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.preview-schedule-card i { display:grid; width:34px; height:34px; place-items:center; color:var(--primary); font-size:8px; font-style:normal; font-weight:700; background:var(--purple-soft); border-radius:10px; }
.preview-schedule-card p { display:flex; min-width:0; flex-direction:column; margin:0; }
.preview-schedule-card p strong { overflow:hidden; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.preview-schedule-card p small { color:var(--muted); font-size:7px; }
.preview-schedule-card b { color:var(--muted); font-size:8px; white-space:nowrap; }
.demo-copy .section-kicker { display:inline-flex; width:max-content; padding:8px 13px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:99px; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.demo-copy h2 { margin-top:18px; }
.demo-contact a,.footer-phone bdi { direction:ltr; unicode-bidi:isolate; }
.footer-address { max-width:290px; margin:11px 0 5px !important; color:rgba(255,255,255,.78) !important; font-size:10px !important; line-height:1.85 !important; }
.footer-address strong { display:block; color:#fff; font-size:11px; }
.footer-phone { display:flex !important; align-items:center; justify-content:space-between; gap:14px; max-width:290px; margin-bottom:5px; padding:7px 10px !important; color:#fff !important; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:9px; }
.footer-phone span { color:rgba(255,255,255,.7); font-size:9px; }
.footer-phone bdi { font-size:11px; font-weight:700; }
@media (max-width:720px) {
  .product-preview { grid-template-columns:1fr; min-height:auto; gap:22px; padding:26px 20px; }
  .preview-dashboard-head { align-items:flex-start; }
  .preview-live { display:none; }
  .preview-metrics { grid-template-columns:1fr; }
  .preview-dashboard-body { grid-template-columns:1fr; }
  .preview-schedule-card { display:none; }
}

/* v15: smooth intro and scroll reveal */
.hero .hero-copy,
.hero .hero-visual {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
}
.hero .hero-visual { transition-delay: 120ms; }
.hero.is-intro-ready .hero-copy,
.hero.is-intro-ready .hero-visual {
  opacity: 1;
  transform: translateY(0);
  grid-area:auto;
}
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
@media (max-width: 720px) {
  .scroll-reveal { transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .hero-copy,
  .hero .hero-visual,
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Scroll-led product experience */
.hero-conversation{position:absolute;inset:auto 8% 11% auto;z-index:8;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.92);border:1px solid rgba(102,51,152,.14);border-radius:18px;box-shadow:0 18px 50px rgba(28,20,45,.16);animation:heroTalk 5s ease-in-out infinite}
.hero-conversation p{display:grid;margin:0}.hero-conversation small{color:#663398;font-size:11px}.hero-conversation strong{font-size:13px;color:#25202c;min-width:190px}.conversation-dot{width:9px;height:9px;border-radius:50%;background:#31bd7c;box-shadow:0 0 0 6px rgba(49,189,124,.14)}
.orbit-icon{position:absolute;z-index:7;padding:8px 12px;border-radius:999px;background:#663398;color:#fff;font-size:11px;font-weight:700;box-shadow:0 12px 30px rgba(102,51,152,.24);animation:orbitFloat 4.4s ease-in-out infinite}.orbit-calendar{top:13%;right:-1%}.orbit-finance{top:43%;left:-4%;animation-delay:-1.3s}.orbit-online{bottom:9%;left:12%;animation-delay:-2.7s}
@keyframes heroTalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes orbitFloat{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(0,-10px,0) rotate(2deg)}}
.scroll-story{position:relative;padding:110px 0 130px;background:linear-gradient(180deg,#fff 0%,#f6f1fb 45%,#fff 100%);overflow:clip}.scroll-story-head{max-width:760px;margin-bottom:64px}.scroll-story-head p{max-width:650px;margin:16px auto 0;color:#6d6673}
.scroll-story-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:80px;align-items:start;direction:ltr}.story-visual{position:sticky;top:105px;height:620px;display:grid;place-items:center;perspective:1400px;direction:rtl}.story-browser{width:94%;background:#171321;border:1px solid rgba(255,255,255,.15);border-radius:28px;box-shadow:0 45px 90px rgba(37,25,55,.25);overflow:hidden;transform:rotateY(-8deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.story-visual:hover .story-browser{transform:rotateY(-3deg) rotateX(0)}.story-browser-bar{height:52px;display:flex;align-items:center;gap:7px;padding:0 18px;color:#d8cee4}.story-browser-bar i{width:9px;height:9px;border-radius:50%;background:#765592}.story-browser-bar span{margin-right:auto;font-size:12px}.story-screen{position:relative;height:430px;overflow:hidden;background:#ece7f3}.story-screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:opacity .35s ease,transform 1s cubic-bezier(.2,.8,.2,1);will-change:transform}.story-screen.is-changing img{opacity:.2;transform:scale(1.16)}.story-focus{position:absolute;width:33%;height:28%;right:12%;top:19%;border:2px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 0 0 999px rgba(31,18,45,.25),0 10px 35px rgba(0,0,0,.2);transition:all .8s cubic-bezier(.2,.8,.2,1)}.story-cursor{position:absolute;width:22px;height:28px;right:31%;top:43%;background:#fff;clip-path:polygon(0 0,0 100%,28% 72%,45% 100%,58% 92%,41% 66%,78% 65%);filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));animation:cursorMove 3.6s ease-in-out infinite}@keyframes cursorMove{0%,100%{transform:translate(0,0)}50%{transform:translate(-45px,-35px)}}
.story-status{position:absolute;bottom:44px;right:7%;display:flex;gap:9px;align-items:center;padding:12px 17px;background:#fff;border-radius:14px;box-shadow:0 16px 35px rgba(42,29,55,.18);font-weight:700;color:#33273e}.story-status i{width:9px;height:9px;border-radius:50%;background:#31bd7c;box-shadow:0 0 0 6px rgba(49,189,124,.13)}.story-icon-cloud span{position:absolute;padding:9px 13px;border-radius:14px;color:#fff;background:#663398;font-size:11px;font-weight:700;box-shadow:0 12px 32px rgba(102,51,152,.24);animation:orbitFloat 4s ease-in-out infinite}.story-icon-cloud span:nth-child(1){top:7%;right:2%}.story-icon-cloud span:nth-child(2){top:23%;left:0;animation-delay:-1s}.story-icon-cloud span:nth-child(3){bottom:16%;left:2%;animation-delay:-2s}.story-icon-cloud span:nth-child(4){bottom:4%;right:16%;animation-delay:-3s}
.story-steps{direction:rtl}.story-step{min-height:65vh;display:flex;flex-direction:column;justify-content:center;padding:45px 36px;border-right:2px solid #e5ddec;opacity:.34;transform:translateY(24px);transition:opacity .5s,transform .5s,border-color .5s}.story-step.is-active{opacity:1;transform:none;border-color:#663398}.story-step>span{display:grid;place-items:center;width:45px;height:45px;margin-bottom:22px;border-radius:50%;background:#eee6f5;color:#663398;font-weight:800}.story-step.is-active>span{background:#663398;color:#fff;box-shadow:0 0 0 10px rgba(102,51,152,.1)}.story-step h3{font-size:clamp(24px,2.6vw,38px);line-height:1.45;margin:0 0 14px;color:#241d2c}.story-step p{font-size:17px;line-height:2;color:#716979;margin:0}
@media(max-width:900px){.scroll-story{padding:80px 0}.scroll-story-layout{grid-template-columns:1fr;gap:28px}.story-visual{position:sticky;top:74px;height:410px;z-index:3}.story-browser{width:100%;border-radius:20px;transform:none}.story-screen{height:285px}.story-status{bottom:15px;right:4%;font-size:12px}.story-icon-cloud{display:none}.story-step{min-height:55vh;padding:60px 18px;background:rgba(255,255,255,.88);border-radius:22px;border-right:3px solid #e5ddec;margin-bottom:28px}.orbit-icon{display:none}.hero-conversation{right:3%;bottom:6%;transform:scale(.9);transform-origin:right bottom}}
@media(prefers-reduced-motion:reduce){.orbit-icon,.hero-conversation,.story-cursor,.story-icon-cloud span{animation:none!important}.story-screen img,.story-browser,.story-step{transition:none!important}}

/* v18 — refined introduction and footer */
.hero{min-height:760px;display:flex;align-items:center;padding:105px 0 115px;background:radial-gradient(circle at 82% 38%,rgba(102,51,152,.10),transparent 30%),linear-gradient(145deg,#fff 0%,#fbf9ff 58%,#f3eef9 100%)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(102,51,152,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(102,51,152,.027) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,black 64%,transparent)}
.hero-grid{position:relative;z-index:2;grid-template-columns:minmax(420px,.88fr) minmax(0,1.12fr);gap:72px}
.hero-copy h1{max-width:640px;font-size:clamp(43px,4.15vw,62px);line-height:1.28;letter-spacing:-2.4px}
.hero-copy h1 em{position:relative;display:inline-block;background:linear-gradient(90deg,#663398,#8050bd);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy h1 em:after{content:"";position:absolute;right:0;bottom:-4px;width:42%;height:5px;border-radius:99px;background:linear-gradient(90deg,#663398,rgba(102,51,152,.12))}
.hero-copy>p{max-width:620px;font-size:17px;line-height:2.05}
.product-stage{isolation:isolate;padding:50px 0}
.product-stage:before{content:"";position:absolute;z-index:-1;inset:3% 3% 0 0;border-radius:42% 58% 55% 45%;background:linear-gradient(145deg,rgba(102,51,152,.17),rgba(102,51,152,.03));filter:blur(1px);transform:rotate(-5deg)}
.browser{border-color:rgba(102,51,152,.16);border-radius:22px;padding:9px;box-shadow:0 45px 100px rgba(52,31,72,.19),0 10px 30px rgba(52,31,72,.08);transform:perspective(1100px) rotateY(3deg) rotateX(1deg)}
.browser img{border-radius:0 0 14px 14px}
.float-card{backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 55px rgba(36,23,52,.15)}
.hero-capabilities{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:28px;padding-top:23px;border-top:1px solid rgba(102,51,152,.11)}
.hero-capabilities span{display:flex;align-items:center;gap:7px;color:#585064;font-size:11px}
.hero-capabilities i{width:7px;height:7px;border-radius:50%;background:#20ae75;box-shadow:0 0 0 4px rgba(32,174,117,.11)}
.hero-capabilities b{font-weight:650}
.hero-conversation{right:5%;bottom:5%;padding:12px 16px;border-radius:16px}
.orbit-icon{border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(8px)}

body>footer{position:relative;overflow:hidden;padding:0 0 20px;background:linear-gradient(145deg,#111020 0%,#171324 52%,#0c101d 100%)}
body>footer:before{content:"";position:absolute;width:520px;height:520px;left:-220px;bottom:-260px;border-radius:50%;background:rgba(102,51,152,.2);filter:blur(80px)}
.footer-cta{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:45px;padding:42px 48px;margin-bottom:64px;border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 28px 28px;background:linear-gradient(105deg,#663398,#523079 65%,#3f275b);box-shadow:0 26px 70px rgba(0,0,0,.22)}
.footer-cta>div{max-width:760px}.footer-cta>div>span{font-size:11px;color:#ddccec}.footer-cta h2{margin:8px 0 7px;color:#fff;font-size:clamp(22px,2.3vw,34px);line-height:1.55}.footer-cta p{margin:0;color:rgba(255,255,255,.72);font-size:12px}.footer-cta-button{flex:none;background:#fff;color:#663398;box-shadow:0 12px 30px rgba(19,8,30,.2)}
.footer-cta-button:hover{box-shadow:0 16px 38px rgba(19,8,30,.26)}
.footer-grid{position:relative;z-index:2;grid-template-columns:1.35fr .65fr .7fr 1.45fr;gap:54px}
.footer-intro>p{font-size:12px!important;line-height:2!important;margin-top:20px}
.footer-trust{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px;max-width:290px}
.footer-trust span{display:flex;flex-direction:column;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.62);font-size:9px}
.footer-trust strong{margin-bottom:2px;color:#fff;font-size:17px}
.footer-grid h3{position:relative;margin-bottom:22px;color:#fff;font-size:13px}.footer-grid h3:after{content:"";position:absolute;right:0;bottom:-9px;width:22px;height:2px;border-radius:4px;background:#8e5fc0}
.footer-grid>div>a:not(.brand){width:max-content;max-width:100%;font-size:11px;transition:color .2s,transform .2s}.footer-grid>div>a:not(.brand):hover{color:#fff;transform:translateX(-3px)}
.footer-contact>p:first-of-type{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(52,193,131,.10);color:#71daa9;border:1px solid rgba(52,193,131,.17)}
.footer-office{margin:14px 0;padding:12px 13px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}
.footer-address{max-width:none!important;margin:0 0 8px!important;font-size:10px!important}.footer-address strong{font-size:11px!important;margin-bottom:3px}
.footer-phone{max-width:none;margin:0!important;border:0!important;border-top:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;background:transparent!important;padding:8px 0 0!important}
.footer-email{direction:ltr;margin-top:14px!important;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.04)}
.demo-messengers{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.demo-messengers a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;background:rgba(255,255,255,.1);font-size:10px;transition:background .2s,transform .2s}.demo-messengers a:hover{background:rgba(255,255,255,.17);transform:translateY(-2px)}.demo-messengers a span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.16);font-size:10px}
.footer-messengers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.footer-messenger{display:grid!important;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:8px;width:auto!important;padding:9px 10px!important;margin:0!important;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.04);color:#fff!important}.footer-messenger>span:first-child{grid-row:1/3;align-self:center;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px}.footer-messenger>span:nth-child(2){font-size:10px;font-weight:700}.footer-messenger bdi{direction:ltr;unicode-bidi:isolate;color:rgba(255,255,255,.6);font-size:8px}.footer-messenger.whatsapp>span:first-child{background:#25d366}.footer-messenger.telegram>span:first-child{background:#229ed9}.footer-messenger:hover{background:rgba(255,255,255,.08)!important;transform:translateY(-2px)!important}
.copyright{position:relative;z-index:2;margin-top:52px;padding-top:20px;color:rgba(255,255,255,.38)}
@media(max-width:900px){.hero{min-height:auto;padding:78px 0 90px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero-copy h1{font-size:clamp(37px,8.5vw,52px)}.hero-capabilities{justify-content:center}.footer-cta{padding:34px 28px;margin-inline:20px;flex-direction:column;text-align:center}.footer-grid{grid-template-columns:1fr 1fr;gap:42px}.footer-intro,.footer-contact{grid-column:1/-1}.footer-trust{max-width:none}.footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}.footer-contact h3,.footer-contact>p:first-of-type,.footer-contact>.footer-email{grid-column:1/-1}.footer-office{margin:0}}
@media(max-width:560px){.hero{padding-top:58px}.hero-copy h1{letter-spacing:-1.4px}.hero-copy>p{font-size:15px}.hero-capabilities{display:grid;justify-content:start}.footer-cta{margin-inline:14px;padding:30px 20px}.footer-grid{grid-template-columns:1fr;gap:34px}.footer-intro,.footer-contact{grid-column:auto}.footer-contact{display:block}.footer-office{margin:12px 0}.copyright{gap:12px;align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.footer-messengers{grid-template-columns:1fr}.demo-messengers{display:grid}.demo-messengers a{justify-content:center}}

/* v19: calmer hero and a richer scroll-led management journey */
.hero{
  background:
    radial-gradient(circle at 86% 34%,rgba(102,51,152,.055),transparent 27%),
    linear-gradient(145deg,#fff 0%,#fdfcff 64%,#faf8fc 100%);
}
.hero:before{opacity:.42}
.hero-glow{opacity:.42;background:rgba(116,77,225,.045);filter:blur(28px)}
.hero:after{opacity:.58}
.product-stage:before{opacity:.52}
.scroll-story-head{max-width:840px}
.scroll-story-head p{max-width:760px;font-size:16px;line-height:2}
.story-steps{counter-reset:journey}
.story-step{min-height:78vh;padding:58px 40px}
.story-step-label{display:inline-flex;align-self:flex-start;margin:-2px 0 12px;padding:6px 11px;border-radius:99px;background:#f1ebf7;color:#663398;font-size:11px;font-weight:800}
.story-step h3{max-width:520px;font-size:clamp(25px,2.35vw,35px)}
.story-step p{max-width:570px;font-size:15px;line-height:2.05}
.story-points{display:grid;gap:9px;margin:22px 0 0;padding:0;list-style:none;color:#4e4656;font-size:13px}
.story-points li{position:relative;padding-right:21px}
.story-points li:before{content:"";position:absolute;right:0;top:.72em;width:8px;height:8px;border-radius:50%;background:#28b77b;box-shadow:0 0 0 4px rgba(40,183,123,.11)}
.story-outcome{display:flex;align-items:center;gap:10px;align-self:flex-start;margin-top:24px;padding:10px 12px 10px 16px;border:1px solid #e8e0ef;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(58,40,75,.06)}
.story-outcome b{padding:5px 9px;border-radius:9px;background:#663398;color:#fff;font-size:10px}
.story-outcome span{color:#3d3545;font-size:12px;font-weight:700}
.story-status{max-width:72%;line-height:1.75}
@media(max-width:900px){.story-step{min-height:68vh;padding:52px 24px}.story-step p{font-size:14px}.story-outcome{align-items:flex-start}.story-status{max-width:86%}}
@media(max-width:560px){.hero{background:linear-gradient(180deg,#fff 0%,#fcfaff 100%)}.hero:before,.hero-glow{opacity:.25}.story-step{min-height:auto;padding:42px 20px;margin-bottom:38px}.story-step h3{font-size:24px}.story-points{font-size:12px}.story-outcome{width:100%}}

/* v21 — features and modules page */
.topbar nav a.is-current{color:#663398;font-weight:800}.features-page{background:#fff}.features-hero{min-height:720px;padding-top:135px}.features-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:75px;align-items:center}.features-hero .hero-copy h1{font-size:clamp(38px,3.8vw,58px)}.features-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px}.features-summary span{display:flex;flex-direction:column;padding:15px;border:1px solid #e9e1ef;border-radius:15px;background:rgba(255,255,255,.72)}.features-summary b{color:#663398;font-size:17px}.features-summary small{margin-top:4px;color:#6e6674;font-size:9px}.module-orbit{position:relative;min-height:490px;border:1px solid rgba(102,51,152,.12);border-radius:50%;background:radial-gradient(circle,rgba(102,51,152,.12),rgba(102,51,152,.025) 48%,transparent 49%);box-shadow:inset 0 0 90px rgba(102,51,152,.05)}.module-orbit:before,.module-orbit:after{content:"";position:absolute;inset:12%;border:1px dashed rgba(102,51,152,.2);border-radius:50%;animation:spin 38s linear infinite}.module-orbit:after{inset:27%;animation-direction:reverse;animation-duration:24s}.orbit-core{position:absolute;z-index:2;inset:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:linear-gradient(145deg,#663398,#42235e);box-shadow:0 30px 70px rgba(74,39,105,.28);color:#fff}.orbit-core img{width:105px;max-height:42px;object-fit:contain;margin-bottom:13px}.orbit-core b{font-size:13px}.orbit-core small{max-width:145px;margin-top:6px;color:rgba(255,255,255,.65);font-size:8px;line-height:1.8}.module-orbit>span{position:absolute;z-index:3;right:var(--x);top:var(--y);padding:11px 15px;border:1px solid #e6dceb;border-radius:13px;background:#fff;box-shadow:0 16px 36px rgba(62,40,79,.12);color:#46394f;font-size:11px;font-weight:800;animation:orbitFloat 4.5s ease-in-out infinite}.module-orbit>span:nth-of-type(2){animation-delay:-1s}.module-orbit>span:nth-of-type(3){animation-delay:-2s}.module-orbit>span:nth-of-type(4){animation-delay:-3s}@keyframes spin{to{transform:rotate(360deg)}}
.module-nav{position:sticky;z-index:20;top:72px;border-block:1px solid #ece5f1;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}.module-nav .container{display:flex;align-items:center;gap:22px;padding-block:13px}.module-nav p{flex:none;margin:0;color:#756d7b;font-size:10px}.module-nav .container>div{display:flex;gap:7px;overflow:auto}.module-nav a{flex:none;padding:8px 12px;border-radius:9px;background:#f5f1f8;color:#5c4d67;font-size:10px;font-weight:700}.module-nav a:hover{background:#663398;color:#fff}
.module-section{padding:115px 0}.module-section.alt{background:#faf8fc}.module-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:85px;align-items:center}.module-layout.reverse .module-copy{order:2}.module-copy h2{max-width:650px;margin:12px 0 17px;font-size:clamp(28px,3vw,43px);line-height:1.55;color:#28202f}.module-copy>p{max-width:650px;color:#706878;line-height:2}.module-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:28px 0;padding:0;list-style:none}.module-checks li{position:relative;padding-right:24px;color:#4d4554;font-size:12px}.module-checks li:before{content:"✓";position:absolute;right:0;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(35,180,119,.12);color:#19a76c;font-size:10px;font-weight:900}.module-result{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e6ddec;border-radius:15px;background:#fff}.module-result b{flex:none;padding:7px 10px;border-radius:9px;background:#663398;color:#fff;font-size:10px}.module-result span{font-size:11px;color:#52475b;font-weight:700}.module-shot{position:relative;margin:0;padding:12px;border:1px solid #e2d8e8;border-radius:24px;background:#fff;box-shadow:0 32px 70px rgba(54,35,68,.15);transform:perspective(1000px) rotateY(-4deg)}.reverse .module-shot{transform:perspective(1000px) rotateY(4deg)}.module-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:15px}.module-shot figcaption{position:absolute;right:28px;bottom:26px;display:flex;flex-direction:column;max-width:70%;padding:13px 16px;border-radius:13px;background:rgba(24,17,31,.88);backdrop-filter:blur(9px);color:#fff}.module-shot figcaption b{font-size:12px}.module-shot figcaption span{margin-top:3px;color:rgba(255,255,255,.65);font-size:9px}.finance-visual{display:grid;gap:14px;padding:28px;border-radius:28px;background:linear-gradient(145deg,#21192a,#3f2853);box-shadow:0 32px 75px rgba(44,27,57,.2)}.finance-visual>div{display:grid;padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.06);color:#fff}.finance-visual small{color:#cfc1d9}.finance-visual strong{margin:7px 0;font-size:24px}.finance-visual span{color:#b8a9c3;font-size:10px}.finance-visual i{width:100%;height:7px;margin-top:10px;border-radius:99px;background:linear-gradient(90deg,#4cd397 var(--value),rgba(255,255,255,.11) var(--value))}
.digital-section{background:linear-gradient(145deg,#17111f,#2c193b);color:#fff}.digital-section h2{color:#fff}.digital-section .narrow>p{color:#bbaec5}.digital-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:48px}.digital-grid article{padding:27px 23px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055)}.digital-grid article>span{display:inline-block;padding:6px 8px;border-radius:7px;background:#663398;color:#fff;font-size:8px;font-weight:800;letter-spacing:1px}.digital-grid h3{margin:20px 0 10px;font-size:17px}.digital-grid p{margin:0;color:#c1b4ca;font-size:11px;line-height:2}.management-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}.management-grid article{padding:24px;border:1px solid #e8e0ed;border-radius:18px;background:#fff;transition:transform .25s,box-shadow .25s}.management-grid article:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(67,43,84,.1)}.management-grid b{color:#35283f;font-size:14px}.management-grid p{margin:9px 0 0;color:#766d7c;font-size:11px;line-height:1.9}.features-cta{padding:75px 0;background:#663398;color:#fff}.features-cta .container{display:flex;align-items:center;justify-content:space-between;gap:45px}.features-cta h2{max-width:830px;margin:8px 0;color:#fff;font-size:clamp(25px,2.8vw,40px);line-height:1.55}.features-cta p{margin:0;color:#d7c7e5}.features-cta .button{flex:none;background:#fff;color:#663398}.compact-footer{padding-top:70px!important}.compact-footer .footer-grid{grid-template-columns:1.4fr .7fr .8fr .8fr}.compact-footer .copyright a{color:rgba(255,255,255,.55)}
@media(max-width:900px){.features-hero-grid,.module-layout{grid-template-columns:1fr}.module-orbit{min-height:430px}.module-layout.reverse .module-copy{order:0}.module-shot,.reverse .module-shot{transform:none}.digital-grid{grid-template-columns:1fr 1fr}.management-grid{grid-template-columns:1fr 1fr}.features-cta .container{flex-direction:column;align-items:flex-start}.compact-footer .footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.features-hero{padding-top:90px}.features-summary{grid-template-columns:1fr}.module-orbit{min-height:330px}.module-orbit>span{font-size:9px;padding:8px}.orbit-core{inset:27%}.module-nav{top:58px}.module-nav .container{display:block}.module-nav p{margin-bottom:8px}.module-section{padding:78px 0}.module-checks{grid-template-columns:1fr}.module-result{align-items:flex-start}.digital-grid,.management-grid{grid-template-columns:1fr}.compact-footer .footer-grid{grid-template-columns:1fr}.features-cta{padding:55px 0}}

/* Complete Behsaman ecosystem orbit */
.module-orbit{min-height:550px}
.module-orbit .orbit-item{min-width:100px;text-align:center;white-space:nowrap;animation:orbitFloat 4.5s ease-in-out infinite}
.module-orbit .orbit-item bdi{direction:ltr}
.module-orbit .orbit-item-1{right:8%;top:7%}
.module-orbit .orbit-item-2{right:38%;top:-1%}
.module-orbit .orbit-item-3{right:69%;top:7%}
.module-orbit .orbit-item-4{right:79%;top:25%}
.module-orbit .orbit-item-5{right:80%;top:48%}
.module-orbit .orbit-item-6{right:70%;top:72%}
.module-orbit .orbit-item-7{right:39%;top:84%}
.module-orbit .orbit-item-8{right:10%;top:76%}
.module-orbit .orbit-item-9{right:0;top:58%}
.module-orbit .orbit-item-10{right:0;top:35%}
.module-orbit .orbit-item-11{right:8%;top:20%}
.module-orbit .orbit-item-12{right:61%;top:20%}
.module-orbit .orbit-item:nth-of-type(5){animation-delay:-.4s}
.module-orbit .orbit-item:nth-of-type(6){animation-delay:-.8s}
.module-orbit .orbit-item:nth-of-type(7){animation-delay:-1.2s}
.module-orbit .orbit-item:nth-of-type(8){animation-delay:-1.6s}
.module-orbit .orbit-item:nth-of-type(9){animation-delay:-2s}
.module-orbit .orbit-item:nth-of-type(10){animation-delay:-2.4s}
.module-orbit .orbit-item:nth-of-type(11){animation-delay:-2.8s}
.module-orbit .orbit-item:nth-of-type(12){animation-delay:-3.2s}
.module-orbit .orbit-item:nth-of-type(13){animation-delay:-3.6s}

@media(max-width:560px){
  .module-orbit{min-height:auto;padding:225px 10px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;border-radius:28px;background:linear-gradient(180deg,rgba(102,51,152,.08),rgba(102,51,152,.02));overflow:hidden}
  .module-orbit:before,.module-orbit:after{inset:22px auto auto 50%;width:190px;height:190px;transform:translateX(-50%);animation:none}
  .module-orbit:after{width:145px;height:145px;top:45px}
  .module-orbit .orbit-core{inset:35px auto auto 50%;width:165px;height:165px;transform:translateX(-50%)}
  .module-orbit .orbit-item{position:static;min-width:0;padding:10px 7px;font-size:9px;white-space:normal;animation:none}
}

/* v24 — clean, shadow-free transition from the features CTA to the footer */
.features-page .features-cta{position:relative;z-index:2;box-shadow:none}
.features-page .features-cta:after{content:none}
.features-page .features-footer{padding-top:70px}
@media(max-width:560px){.features-page .features-footer{padding-top:54px}}
/* Solutions page */
.solution-hero{padding:150px 0 90px;background:radial-gradient(circle at 12% 18%,rgba(102,51,153,.12),transparent 31%),linear-gradient(180deg,#fbf9ff,#fff)}
.solution-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.solution-hero h1{font-size:clamp(38px,5vw,68px);line-height:1.25;margin:24px 0}.solution-hero h1 em{color:var(--primary);font-style:normal}.solution-hero p{font-size:18px;line-height:2;max-width:700px;color:var(--muted)}
.solution-compass{width:min(100%,520px);aspect-ratio:1;position:relative;margin:auto;border:1px solid rgba(102,51,153,.13);border-radius:50%;background:radial-gradient(circle,#fff 0 34%,rgba(102,51,153,.055) 35% 58%,transparent 59%);box-shadow:0 40px 90px rgba(50,26,80,.12)}.solution-compass:before,.solution-compass:after{content:"";position:absolute;inset:15%;border:1px dashed rgba(102,51,153,.22);border-radius:50%;animation:spin 28s linear infinite}.solution-compass:after{inset:5%;animation-direction:reverse;animation-duration:38s}.compass-core{position:absolute;inset:31%;z-index:2;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff;background:linear-gradient(145deg,#7f52ae,#51257e);box-shadow:0 24px 55px rgba(82,37,126,.3)}.compass-core img{width:82px;margin-bottom:8px}.compass-core b{font-size:17px}.compass-core small{opacity:.8;margin-top:5px}.solution-compass>span{position:absolute;z-index:3;padding:10px 17px;border-radius:999px;background:#fff;color:#51257e;font-weight:700;box-shadow:0 12px 30px rgba(50,26,80,.13)}.solution-compass>span:nth-of-type(1){top:8%;right:37%}.solution-compass>span:nth-of-type(2){top:44%;right:-2%}.solution-compass>span:nth-of-type(3){bottom:7%;right:39%}.solution-compass>span:nth-of-type(4){top:44%;left:-2%}
.solution-picker{position:sticky;top:76px;z-index:15;padding:18px 0;background:rgba(255,255,255,.94);border-block:1px solid #eee8f4;backdrop-filter:blur(16px)}.solution-picker .container{display:flex;align-items:center;gap:25px}.solution-picker .section-kicker{white-space:nowrap}.solution-tabs{display:flex;gap:8px;overflow:auto;padding:4px}.solution-tabs a{white-space:nowrap;padding:10px 15px;border-radius:12px;background:#f7f3fa;color:#594b63;font-size:13px;font-weight:700;transition:.25s}.solution-tabs a:hover{color:#fff;background:var(--primary);transform:translateY(-2px)}
.solution-detail{scroll-margin-top:160px}.solution-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.solution-layout.reverse .solution-copy{order:2}.solution-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:12px;border:1px solid rgba(102,51,153,.18);border-radius:15px;color:var(--primary);font-weight:800}.solution-copy h2{font-size:clamp(28px,3.4vw,45px);line-height:1.45;margin:18px 0}.solution-copy>p{font-size:16px;line-height:2;color:var(--muted)}.solution-columns{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:28px 0}.solution-columns>div{padding:20px;border:1px solid #ebe4f0;border-radius:20px;background:#fff}.solution-columns b{color:#51257e}.solution-columns ul{padding:0;margin:14px 0 0;list-style:none}.solution-columns li{position:relative;padding-right:19px;margin:9px 0;color:#655b6c;font-size:14px}.solution-columns li:before{content:"";position:absolute;right:0;top:9px;width:7px;height:7px;border-radius:50%;background:#8b5bb8}.solution-outcome{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#f1ebf7;color:#55316f}.solution-outcome b{padding:6px 10px;border-radius:9px;background:#fff}.solution-shot{position:relative;margin:0;padding:16px;border-radius:30px;background:#fff;box-shadow:0 30px 80px rgba(55,35,70,.13)}.solution-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:20px}.solution-shot figcaption{padding:16px 8px 2px;color:#665a6e;font-size:14px}.solution-detail.alt{background:#faf8fc}
.solution-guide{padding:90px 0;color:#fff;background:linear-gradient(125deg,#3d1d5b,#7037a4)}.solution-guide>.container{display:grid;grid-template-columns:1.25fr .9fr auto;align-items:center;gap:40px}.solution-guide .section-kicker{color:#d8bee9}.solution-guide h2{font-size:clamp(27px,3vw,42px);line-height:1.5;margin:12px 0}.solution-guide p{max-width:700px;color:rgba(255,255,255,.73);line-height:1.9}.guide-steps{display:grid;gap:10px}.guide-steps span{display:flex;align-items:center;gap:10px}.guide-steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14)}.solution-guide .button{white-space:nowrap;background:#fff;color:#582581}
@media(max-width:900px){.solution-hero{padding:115px 0 65px}.solution-hero-grid,.solution-layout,.solution-guide>.container{grid-template-columns:1fr}.solution-compass{max-width:430px}.solution-picker{top:68px}.solution-picker .container{display:block}.solution-picker .section-kicker{display:none}.solution-layout.reverse .solution-copy{order:0}.solution-columns{grid-template-columns:1fr}.solution-guide>.container{gap:25px}.solution-guide .button{justify-self:start}}
@media(max-width:560px){.solution-hero h1{font-size:35px}.solution-compass{transform:scale(.92);margin-block:-15px}.solution-tabs a{padding:9px 12px}.solution-layout{gap:35px}.solution-outcome{align-items:flex-start;flex-direction:column}.solution-guide{padding:65px 0}}

/* v27 — richer presentation for real product screenshots */
.browser,
.story-browser,
.module-shot,
.solution-shot{
  isolation:isolate;
}
.browser:before,
.module-shot:before,
.solution-shot:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(102,51,152,.42),rgba(34,170,218,.2) 48%,rgba(45,190,130,.26));
  pointer-events:none;
}
.browser:after,
.module-shot:after,
.solution-shot:after{
  content:"";
  position:absolute;
  z-index:-2;
  width:46%;
  height:44%;
  left:-5%;
  bottom:-9%;
  border-radius:50%;
  background:rgba(102,51,152,.2);
  filter:blur(34px);
  pointer-events:none;
}
.browser{position:relative;background:linear-gradient(#fff,#fff) padding-box;box-shadow:0 40px 95px rgba(72,39,101,.22),0 12px 28px rgba(36,154,197,.09)}
.browser img,.story-screen img,.module-shot img,.solution-shot img{filter:saturate(1.09) contrast(1.025);transition:filter .3s ease,transform .45s ease}
.browser:hover img,.module-shot:hover img,.solution-shot:hover img{filter:saturate(1.14) contrast(1.04)}
.story-browser{border-color:rgba(162,116,205,.42);box-shadow:0 45px 95px rgba(50,28,68,.28),-22px 28px 70px rgba(36,164,205,.12)}
.story-browser-bar{background:linear-gradient(90deg,#171321,#28203a)}
.story-browser-bar i:nth-child(1){background:#ff7290}.story-browser-bar i:nth-child(2){background:#ffc95c}.story-browser-bar i:nth-child(3){background:#51d4a0}
.story-screen:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(102,51,152,.12)}
.module-shot,.solution-shot{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,244,252,.98));border:1px solid transparent;box-shadow:0 34px 80px rgba(71,40,94,.18),0 14px 34px rgba(34,157,204,.08)}
.module-shot:before,.solution-shot:before{padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1}
.module-shot:after,.solution-shot:after{z-index:-1}
.module-shot img,.solution-shot img{position:relative;z-index:2;box-shadow:0 10px 25px rgba(42,28,54,.09)}
.module-shot figcaption,.solution-shot figcaption{z-index:3}
.solution-shot{padding-top:42px;overflow:visible}
.solution-shot>img{border-radius:17px}
.solution-shot:before{content:""}
@media(max-width:560px){
  .browser:after,.module-shot:after,.solution-shot:after{filter:blur(22px)}
  .solution-shot{padding:35px 10px 10px;border-radius:22px}
}
.management-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 42px;
}

.management-showcase figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(102, 51, 152, 0.13);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(31, 22, 53, 0.1);
}

.management-showcase figure:last-child {
  grid-column: 1 / -1;
}

.management-image {
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #f4effa, #eef7ff);
}

.management-showcase .portrait-shot .management-image {
  aspect-ratio: 16 / 7;
}

.management-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.45s ease;
}

.management-showcase figure:hover img {
  transform: scale(1.015);
}

.management-showcase figcaption {
  display: grid;
  gap: 6px;
  padding: 18px 22px 20px;
}

.management-showcase figcaption b {
  color: #34204d;
  font-size: 18px;
}

.management-showcase figcaption span {
  color: #71677c;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 760px) {
  .management-showcase {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  .management-showcase figure:last-child {
    grid-column: auto;
  }

  .management-image,
  .management-showcase .portrait-shot .management-image {
    aspect-ratio: 4 / 3;
  }
}
.gallery-page { background: #f8f7fb; }
.gallery-hero { padding: 92px 0 76px; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(70, 149, 255, .14), transparent 28%), radial-gradient(circle at 85% 10%, rgba(102, 51, 152, .18), transparent 32%), #fbfaff; }
.gallery-hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 58px; align-items: center; }
.gallery-hero h1 { margin: 20px 0; color: #291c3c; font-size: clamp(42px, 4vw, 68px); line-height: 1.35; }
.gallery-hero h1 em { color: #663398; font-style: normal; }
.gallery-hero p { max-width: 650px; color: #6e6578; font-size: 17px; line-height: 2; }
.gallery-hero-meta { display: flex; gap: 12px; margin-top: 30px; }
.gallery-hero-meta span { display: grid; gap: 4px; min-width: 128px; padding: 13px 16px; border: 1px solid rgba(102,51,152,.12); border-radius: 16px; background: rgba(255,255,255,.75); }
.gallery-hero-meta b { color: #4b2870; }
.gallery-hero-meta small { color: #83798c; }
.gallery-hero-shot { position: relative; padding: 16px; border: 1px solid rgba(102,51,152,.13); border-radius: 28px; background: rgba(255,255,255,.8); box-shadow: 0 30px 80px rgba(58,31,88,.17); transform: rotate(-1deg); }
.gallery-hero-shot img { display: block; width: 100%; border-radius: 18px; }
.gallery-hero-shot span { position: absolute; right: 34px; bottom: 30px; padding: 10px 16px; border-radius: 12px; color: #fff; background: rgba(48,25,72,.9); backdrop-filter: blur(8px); }
.gallery-toolbar { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 34px; }
.gallery-toolbar h2 { margin: 8px 0 0; color: #312140; font-size: 34px; }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.gallery-filters button { padding: 10px 16px; border: 1px solid rgba(102,51,152,.16); border-radius: 999px; color: #6d6178; background: #fff; font: inherit; cursor: pointer; transition: .25s ease; }
.gallery-filters button:hover, .gallery-filters button.is-active { color: #fff; border-color: #663398; background: #663398; box-shadow: 0 8px 24px rgba(102,51,152,.22); }
.product-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.product-shot { margin: 0; overflow: hidden; border: 1px solid rgba(58,31,88,.1); border-radius: 24px; background: #fff; box-shadow: 0 16px 48px rgba(44,31,59,.09); }
.product-shot[hidden] { display: none; }
.product-shot.wide { grid-column: 1 / -1; }
.product-shot button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 16/8.2; border: 0; background: #eeeaf4; cursor: zoom-in; }
.product-shot.portrait button { aspect-ratio: 16/9; }
.product-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease, filter .5s ease; }
.product-shot button > span { position: absolute; left: 18px; bottom: 18px; padding: 9px 13px; border-radius: 10px; color: #fff; background: rgba(44,24,66,.86); opacity: 0; transform: translateY(8px); transition: .25s ease; }
.product-shot button:hover img { transform: scale(1.018); filter: saturate(1.06); }
.product-shot button:hover > span { opacity: 1; transform: none; }
.product-shot figcaption { display: grid; gap: 5px; padding: 18px 22px 21px; }
.product-shot figcaption b { color: #332143; font-size: 18px; }
.product-shot figcaption small { color: #786d81; font-size: 14px; line-height: 1.8; }
.gallery-cta { padding: 70px 0; color: #fff; background: linear-gradient(135deg,#42205e,#6b3397 58%,#315c9b); }
.gallery-cta .container { display: flex; justify-content: space-between; gap: 32px; align-items: center; }
.gallery-cta span { color: #d8c9e7; }
.gallery-cta h2 { max-width: 820px; margin: 10px 0; font-size: 32px; line-height: 1.6; }
.gallery-cta p { margin: 0; color: #e5dced; }
.gallery-lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 34px; background: rgba(18,12,26,.88); backdrop-filter: blur(12px); }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-dialog { display: grid; gap: 14px; max-width: min(1400px,92vw); max-height: 90vh; }
.gallery-lightbox-dialog h2 { margin: 0; color: #fff; font-size: 22px; }
.gallery-lightbox-dialog img { display: block; max-width: 100%; max-height: 82vh; margin: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.gallery-lightbox-close { position: fixed; top: 18px; left: 22px; z-index: 2; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); font: 32px/1 inherit; cursor: pointer; }
.lightbox-open { overflow: hidden; }
@media (max-width: 900px) { .gallery-hero-grid { grid-template-columns: 1fr; } .gallery-toolbar { align-items: start; flex-direction: column; } .gallery-filters { justify-content: flex-start; } }
@media (max-width: 680px) { .gallery-hero { padding: 58px 0 50px; } .gallery-hero h1 { font-size: 38px; } .gallery-hero-meta { display: grid; grid-template-columns: 1fr 1fr; } .gallery-hero-meta span { min-width: 0; } .product-gallery { grid-template-columns: 1fr; } .product-shot.wide { grid-column: auto; } .product-shot button, .product-shot.portrait button { aspect-ratio: 4/3; } .gallery-cta .container { align-items: start; flex-direction: column; } .gallery-cta h2 { font-size: 26px; } .gallery-lightbox { padding: 20px 12px; } }
.customers-page { background: #faf9fc; }
.customers-hero { padding: 94px 0 78px; overflow: hidden; background: radial-gradient(circle at 10% 15%, rgba(39,142,255,.13), transparent 30%), radial-gradient(circle at 90% 0, rgba(102,51,152,.2), transparent 34%), #fbfaff; }
.customers-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; }
.customers-hero h1 { margin: 20px 0; color: #2d1d3c; font-size: clamp(42px,4.2vw,68px); line-height: 1.36; }
.customers-hero h1 em { color: #663398; font-style: normal; }
.customers-hero p { color: #71677a; font-size: 17px; line-height: 2; }
.customers-actions { display: flex; gap: 22px; align-items: center; margin-top: 28px; }
.customers-logo-cloud { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 24px; border: 1px solid rgba(102,51,152,.12); border-radius: 32px; background: rgba(255,255,255,.76); box-shadow: 0 30px 80px rgba(55,30,80,.14); transform: rotate(-1deg); }
.customers-logo-cloud img { width: 100%; height: 104px; padding: 23px; object-fit: contain; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(38,27,48,.07); }
.customer-numbers { color: #fff; background: #342045; }
.customer-numbers .container { display: grid; grid-template-columns: repeat(4,1fr); }
.customer-numbers div { display: grid; gap: 4px; padding: 26px 20px; text-align: center; border-left: 1px solid rgba(255,255,255,.12); }
.customer-numbers div:last-child { border-left: 0; }
.customer-numbers strong { font-size: 28px; }
.customer-numbers span { color: #cfc2d9; }
.experience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 38px; }
.experience-card { display: grid; gap: 24px; min-height: 320px; padding: 30px; border: 1px solid rgba(102,51,152,.12); border-radius: 24px; background: #fff; box-shadow: 0 16px 48px rgba(45,31,58,.08); }
.experience-card.featured { background: linear-gradient(145deg,#fff,#faf6ff); }
.experience-logo { display: grid; place-items: center; width: 106px; height: 74px; padding: 12px; border-radius: 14px; background: #f7f5f9; }
.experience-logo.afaq-logo { background: linear-gradient(135deg,#5b2d87,#8053a8); }
.experience-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.experience-logo.afaq-logo img { filter: brightness(1.3) saturate(.75); }
.experience-card blockquote { margin: 0; color: #3d2c49; font-size: 21px; line-height: 2; }
.experience-card footer { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding-top: 20px; border-top: 1px solid #eee9f1; }
.experience-card footer p { display: grid; gap: 3px; margin: 0; }
.experience-card footer small { color: #817588; }
.experience-card footer > span { padding: 7px 11px; border-radius: 999px; color: #63368d; background: #f1e9f7; font-size: 12px; }
.experience-card footer > span.long-badge { color: #157751; background: #e7f6ee; }
.customer-spectrum { background: #f3eff7; }
.spectrum-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; }
.spectrum-grid article { padding: 26px; border-radius: 22px; background: #fff; }
.spectrum-grid span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: #663398; }
.spectrum-grid h3 { margin: 18px 0 8px; color: #362542; }
.spectrum-grid p { margin: 0; color: #786d80; line-height: 1.9; }
.all-logo-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-top: 36px; }
.all-logo-grid figure { display: grid; place-items: center; min-height: 110px; margin: 0; padding: 20px; border: 1px solid #eeeaf1; border-radius: 18px; background: #fff; }
.all-logo-grid img { max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(.2); transition: .25s ease; }
.all-logo-grid figure:hover img { filter: none; transform: scale(1.04); }
.customer-cta { padding: 70px 0; color: #fff; background: linear-gradient(135deg,#452161,#6b3498 58%,#315e9d); }
.customer-cta .container { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.customer-cta span { color: #d8cae5; }
.customer-cta h2 { margin: 10px 0; font-size: 32px; }
.customer-cta p { margin: 0; color: #e3d9eb; }
@media (max-width: 960px) { .customers-hero-grid { grid-template-columns: 1fr; } .all-logo-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 720px) { .customers-hero { padding: 58px 0 50px; } .customers-hero h1 { font-size: 38px; } .customers-actions { align-items: flex-start; flex-direction: column; } .customers-logo-cloud { grid-template-columns: repeat(2,1fr); padding: 16px; } .customer-numbers .container { grid-template-columns: repeat(2,1fr); } .customer-numbers div:nth-child(2) { border-left: 0; } .experience-grid, .spectrum-grid { grid-template-columns: 1fr; } .experience-card footer { align-items: start; flex-direction: column; } .all-logo-grid { grid-template-columns: repeat(2,1fr); } .customer-cta .container { align-items: flex-start; flex-direction: column; } .customer-cta h2 { font-size: 27px; line-height: 1.6; } }
.demo-page { background: #faf9fc; }
.demo-page-hero { padding: 82px 0; background: radial-gradient(circle at 10% 5%,rgba(54,142,250,.13),transparent 28%),radial-gradient(circle at 92% 0,rgba(102,51,152,.18),transparent 34%),#fbfaff; }
.demo-page-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: start; }
.demo-page-copy { padding-top: 18px; }
.demo-page-copy h1 { margin: 20px 0; color: #2e1d3e; font-size: clamp(42px,4vw,64px); line-height: 1.38; }
.demo-page-copy h1 em { color: #663398; font-style: normal; }
.demo-page-copy > p { color: #71677a; font-size: 17px; line-height: 2; }
.demo-benefits { display: grid; gap: 14px; margin: 28px 0; padding: 0; list-style: none; }
.demo-benefits li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid rgba(102,51,152,.11); border-radius: 16px; background: rgba(255,255,255,.75); }
.demo-benefits li > b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: #663398; font-size: 13px; }
.demo-benefits span { display: grid; gap: 2px; }
.demo-benefits small { color: #81768a; }
.demo-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-direct a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; color: #42265d; background: #efe8f5; }
.demo-direct span { color: #7b698a; font-size: 12px; }
.demo-quick { display: flex; gap: 12px; align-items: center; margin-top: 12px; color: #706479; }
.demo-quick a { padding: 8px 12px; border-radius: 999px; color: #fff; background: #315f9e; }
.demo-page-form-wrap { overflow: hidden; border: 1px solid rgba(102,51,152,.13); border-radius: 28px; background: #fff; box-shadow: 0 28px 80px rgba(55,31,77,.15); }
.demo-form-head { padding: 28px 30px 22px; color: #fff; background: linear-gradient(135deg,#43205e,#6b3498 62%,#345f9d); }
.demo-form-head span { color: #ddcfe8; }
.demo-form-head h2 { margin: 7px 0; font-size: 26px; }
.demo-form-head p { margin: 0; color: #e9e0ef; }
.demo-form-standalone { border: 0; border-radius: 0; box-shadow: none; }
.demo-form-standalone .form-note a { color: #663398; text-decoration: underline; }
.demo-next { background: #fff; }
.demo-next-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 36px; }
.demo-next-grid article { position: relative; padding: 25px; border: 1px solid #eee9f2; border-radius: 20px; background: #faf8fc; }
.demo-next-grid span { color: #663398; font-weight: 700; }
.demo-next-grid h3 { margin: 16px 0 7px; color: #392648; }
.demo-next-grid p { margin: 0; color: #786d80; line-height: 1.9; }
.demo-assurance { background: #f1edf5; }
.demo-assurance .container { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.demo-assurance article { padding: 26px; border-radius: 20px; background: #fff; }
.demo-assurance article > span { color: #663398; font-size: 13px; font-weight: 700; }
.demo-assurance h3 { margin: 12px 0 8px; color: #382546; line-height: 1.7; }
.demo-assurance p { margin: 0; color: #7a6f82; line-height: 1.9; }
@media (max-width: 920px) { .demo-page-grid { grid-template-columns: 1fr; } .demo-next-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px) { .demo-page-hero { padding: 52px 0; } .demo-page-copy h1 { font-size: 38px; } .demo-direct { grid-template-columns: 1fr; } .demo-quick { align-items: flex-start; flex-wrap: wrap; } .demo-next-grid,.demo-assurance .container { grid-template-columns: 1fr; } .demo-form-head { padding: 24px 20px; } }
html, body { overflow-x: clip; }
button, a, input, select, textarea { touch-action: manipulation; }
.mobile-nav-toggle { display: none; }
main > section:not(.hero):not(.page-hero):not(.gallery-hero):not(.customers-hero):not(.demo-page-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

@media (max-width: 900px) {
  .topbar .nav-wrap { position: relative; }
  .topbar .nav-wrap > nav { display: none; }
  .topbar .nav-wrap > nav.is-open {
    display: flex;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(102, 51, 152, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 45px rgba(31, 21, 48, .18);
  }
  .topbar .nav-wrap > nav.is-open a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .mobile-nav-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(102, 51, 152, .18);
    border-radius: 12px;
    background: #fff;
    color: #663398;
    cursor: pointer;
  }
  .mobile-nav-toggle span { width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gallery-filters, .module-nav .container, .solution-picker .container {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .gallery-filters > *, .module-nav .container > *, .solution-picker .container > * { flex: 0 0 auto; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  .story-visual { position: relative; top: auto; }
  .button, button, select, input { min-height: 44px; }
}

@media (max-width: 420px) {
  .topbar .brand img { width: 92px; height: auto; }
  .topbar .button-small { padding-inline: 10px; font-size: 11px; }
  .topbar .nav-wrap { gap: 7px; }
}

/* v35 — living sections, counter-moving customers and an orbiting solution compass */
.all-customer-logos { overflow: hidden; }
.all-logo-grid.logo-marquee,
.client-grid.logo-marquee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 36px;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.clients .all-logo-grid.logo-marquee { margin-top: 0; }
.client-grid.logo-marquee { margin-top: 0; }
.logo-marquee-row { width: 100%; overflow: hidden; padding-block: 5px; direction: ltr; }
.logo-marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  will-change: transform;
  animation: customer-marquee 25s linear infinite;
}
.logo-marquee-row.is-reverse .logo-marquee-track { animation-direction: reverse; animation-duration: 29s; }
.logo-marquee-row:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-group { display: flex; flex: none; gap: 14px; }
.logo-marquee-group figure {
  width: clamp(160px,17vw,210px);
  min-height: 104px;
  flex: 0 0 clamp(160px,17vw,210px);
  transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.logo-marquee-group figure:hover { z-index: 2; border-color: rgba(102,51,152,.25); box-shadow: 0 16px 34px rgba(63,35,82,.12); transform: translateY(-4px); }
@keyframes customer-marquee { to { transform: translateX(calc(-33.333333% - 4.667px)); } }

.solution-compass { --orbit-radius: 200px; }
.solution-compass > span {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  white-space: nowrap;
  animation: solution-item-orbit 18s linear infinite;
  will-change: transform;
}
.solution-compass > span:nth-of-type(1) { animation-delay: 0s; }
.solution-compass > span:nth-of-type(2) { animation-delay: -4.5s; }
.solution-compass > span:nth-of-type(3) { animation-delay: -9s; }
.solution-compass > span:nth-of-type(4) { animation-delay: -13.5s; }
.solution-compass:hover > span,
.solution-compass:focus-within > span { animation-play-state: paused; }
@keyframes solution-item-orbit {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
}
.compass-core { animation: compass-breathe 4.5s ease-in-out infinite; }
@keyframes compass-breathe { 50% { box-shadow: 0 30px 75px rgba(82,37,126,.42),0 0 0 12px rgba(102,51,152,.07); transform: scale(1.025); } }

main > section.live-section { --spot-x: 50%; --spot-y: 50%; position: relative; isolation: isolate; }
main > section.live-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 440px;
  height: 440px;
  left: var(--spot-x);
  top: var(--spot-y);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,rgba(102,51,152,.075),transparent 68%);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.72);
  transition: opacity .55s ease,transform .7s ease,left .16s linear,top .16s linear;
}
main > section.live-section.is-live::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }
main > section.live-section > * { position: relative; z-index: 1; }
.live-section .section-head,
.live-section > .container > .center,
.live-section > .container > .narrow {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease var(--live-delay),transform .65s cubic-bezier(.2,.7,.2,1) var(--live-delay);
}
.live-section.is-live .section-head,
.live-section.is-live > .container > .center,
.live-section.is-live > .container > .narrow { opacity: 1; transform: none; }
.live-section .section-kicker { position: relative; }
.live-section .section-kicker::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--primary),transparent);
  transition: width .8s ease .2s;
}
.live-section.is-live .section-kicker::after { width: 58px; }
.feature-card,.experience-card,.spectrum-grid article,.solution-columns > div,.product-shot,.demo-next-grid article {
  transition: transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.feature-card:hover,.experience-card:hover,.spectrum-grid article:hover,.solution-columns > div:hover,.product-shot:hover,.demo-next-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(102,51,152,.22);
  box-shadow: 0 22px 48px rgba(54,35,70,.11);
}

@media(max-width:900px){.solution-compass{--orbit-radius:165px}}
@media(max-width:560px){
  .solution-compass{--orbit-radius:132px}
  .solution-compass>span{padding:8px 12px;font-size:11px}
  .logo-marquee-track{animation-duration:21s}
  .logo-marquee-row.is-reverse .logo-marquee-track{animation-duration:24s}
  .logo-marquee-group figure{width:145px;flex-basis:145px;min-height:92px;padding:15px}
  main>section.live-section::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .logo-marquee-track,.solution-compass>span,.compass-core{animation:none!important}
  .solution-compass>span:nth-of-type(1){transform:translate(-50%,-50%) translateX(var(--orbit-radius))}
  .solution-compass>span:nth-of-type(2){transform:translate(-50%,-50%) rotate(90deg) translateX(var(--orbit-radius)) rotate(-90deg)}
  .solution-compass>span:nth-of-type(3){transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-radius)) rotate(-180deg)}
  .solution-compass>span:nth-of-type(4){transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-radius)) rotate(-270deg)}
  .live-section .section-head,.live-section>.container>.center,.live-section>.container>.narrow{opacity:1;transform:none;transition:none}
}

/* v36 — final navigation and accessibility polish */
.skip-link {
  position: fixed;
  z-index: 3000;
  top: 10px;
  right: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 12px 30px rgba(44,27,57,.2);
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.reading-progress {
  position: fixed;
  z-index: 2500;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,#9b6dca,var(--primary),#20ae75);
  box-shadow: 0 0 12px rgba(102,51,152,.35);
  transform: scaleX(0);
  transform-origin: right center;
  will-change: transform;
}
.back-to-top {
  position: fixed;
  z-index: 900;
  left: 22px;
  bottom: 22px;
  display: grid;
  width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(102,51,152,.16);
  border-radius: 15px;
  color: #fff;
  background: rgba(83,42,119,.92);
  box-shadow: 0 14px 35px rgba(45,27,57,.22);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.9);
  transition: opacity .25s ease,transform .25s ease,background .25s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--primary); transform: translateY(-3px); }
.solution-tabs a.is-active,
.solution-tabs a[aria-current="location"] { color: #fff; background: var(--primary); box-shadow: 0 8px 22px rgba(102,51,152,.2); }
.topbar nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -3px;
  left: 18%;
  height: 2px;
  border-radius: 99px;
  background: var(--primary);
}
.topbar nav a { position: relative; }
@media(max-width:560px){.back-to-top{left:14px;bottom:14px;width:43px;height:43px;min-height:43px}}
@media(prefers-reduced-motion:reduce){.skip-link,.back-to-top{transition:none}}

/* v39 — lock the home hero copy to the same right container edge as the header logo. */
.hero .hero-grid {
  grid-template-columns: minmax(0,1.12fr) minmax(420px,.88fr);
  grid-template-areas: "visual copy";
  direction: ltr;
}
.hero .hero-copy {
  grid-area: copy;
  width: min(100%,650px);
  min-width: 0;
  justify-self: end;
  margin-right: 0;
  margin-left: auto;
  direction: rtl;
  text-align: right;
}
.hero .product-stage { grid-area: visual; min-width: 0; }
.hero .hero-copy h1,
.hero .hero-copy > p { margin-right: 0; margin-left: auto; }
@media(max-width:900px){
  .hero .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "visual"}
  .hero .hero-copy{width:100%;justify-self:stretch;margin-inline:0;text-align:center}
}

/* Preserve intrinsic screenshot proportions while keeping width/height attributes for CLS. */
.module-shot img,
.solution-shot img,
.gallery-hero-shot img,
.management-showcase img,
.gallery-lightbox-dialog img {
  height: auto;
}