:root {
  --bg: #070b18;
  --surface: #0d1324;
  --surface-2: #121a2e;
  --text: #f7f8ff;
  --muted: #9ba6c1;
  --line: rgba(255, 255, 255, 0.09);
  --brand: #6454ff;
  --brand-2: #8a7dff;
  --mint: #4ff2c5;
  --yellow: #ffc65b;
  --danger: #ff6f91;
  --paper: #f4f5f8;
  --ink: #111526;
  --max: 1180px;
  font-family:
    Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

body,
button,
a {
  font: inherit;
}

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

img {
  max-width: 100%;
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #000;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(138, 125, 255, 0.34);
  border-radius: 50%;
  box-shadow:
    0 8px 24px rgba(68, 52, 210, 0.23),
    0 0 0 4px rgba(100, 84, 255, 0.05);
  object-fit: cover;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(137, 124, 255, 0.55);
  border-radius: 12px;
  background: linear-gradient(145deg, #1a1955, #10162d);
  box-shadow: inset 0 0 18px rgba(100, 84, 255, 0.25);
  color: #8073ff;
  font-size: 14px;
  font-style: italic;
}

.brand-mark span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

.brand-name {
  font-size: 20px;
}

.brand-name span {
  color: var(--brand-2);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #b8c0d4;
  font-size: 14px;
}

.desktop-nav a,
.text-link,
.footer-links a {
  transition: color 160ms ease;
}

.desktop-nav a:hover,
.text-link:hover,
.footer-links a:hover {
  color: #fff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 0 21px;
  font-weight: 760;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

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

.button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(79, 242, 197, 0.75);
  outline-offset: 3px;
}

.button-small {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  padding-inline: 17px;
}

.button-primary {
  background: linear-gradient(135deg, #6958ff, #5745e7);
  box-shadow: 0 16px 34px rgba(78, 57, 222, 0.28);
}

.button-primary:hover {
  box-shadow: 0 20px 42px rgba(78, 57, 222, 0.38);
}

.button-secondary {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.hero {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  padding: 160px 0 96px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, #17184b 0, #0b1022 38%, #070b18 72%);
  background-size: 72px 72px, 72px 72px, auto;
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 160px;
  background: linear-gradient(transparent, var(--bg));
  content: "";
  pointer-events: none;
}

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

.hero-glow-one {
  top: 150px;
  left: -210px;
  width: 430px;
  height: 430px;
  background: radial-gradient(circle, rgba(100, 84, 255, 0.23), transparent 68%);
}

.hero-glow-two {
  right: -110px;
  bottom: 50px;
  width: 330px;
  height: 330px;
  background: radial-gradient(circle, rgba(79, 242, 197, 0.1), transparent 70%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: 66px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #b9b2ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 24px;
  height: 1px;
  background: currentColor;
}

.eyebrow.muted {
  color: #6156d9;
}

.eyebrow.light {
  color: rgba(255, 255, 255, 0.72);
}

.hero h1 {
  max-width: 630px;
  margin: 0;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 760;
  letter-spacing: -0.065em;
  line-height: 0.99;
}

.hero h1 em {
  color: var(--brand-2);
  font-style: normal;
}

.hero-lead {
  max-width: 610px;
  margin: 28px 0 0;
  color: #adb6cd;
  font-size: 19px;
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 23px;
  margin: 26px 0 0;
  padding: 0;
  color: #919db8;
  font-size: 13px;
  list-style: none;
}

.hero-points span {
  margin-right: 5px;
  color: var(--mint);
}

.product-preview {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(21, 29, 53, 0.98), rgba(9, 14, 28, 0.98));
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.45),
    0 0 0 8px rgba(255, 255, 255, 0.018);
  padding: 22px;
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

.product-preview::before {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(123, 106, 255, 0.35), transparent 35%, rgba(79, 242, 197, 0.12));
  content: "";
  filter: blur(18px);
}

.preview-topbar,
.preview-heading,
.chart-head,
.accuracy-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.preview-topbar {
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}

.preview-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
}

.preview-brand > span:last-child {
  display: flex;
  flex-direction: column;
}

.preview-brand small {
  margin-top: 2px;
  color: #7f8ba7;
  font-size: 9px;
  font-weight: 600;
}

.mini-mark,
.message-dot {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #5e4cf6, #3430a6);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.mini-mark {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(138, 125, 255, 0.35);
  object-fit: cover;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(79, 242, 197, 0.17);
  border-radius: 999px;
  background: rgba(79, 242, 197, 0.055);
  padding: 6px 10px;
  color: #8bead1;
  font-size: 9px;
}

.live-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}

.preview-heading {
  padding: 19px 0 14px;
}

.preview-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-heading strong {
  font-size: 16px;
}

.preview-label {
  color: #838eaa;
  font-size: 9px;
  text-transform: uppercase;
}

.preview-select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  color: #9faac2;
  font-size: 9px;
}

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

.metrics-grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px;
}

.metrics-grid article > span {
  color: #8792aa;
  font-size: 9px;
}

.metrics-grid strong {
  font-size: 21px;
  letter-spacing: -0.04em;
}

.metrics-grid small {
  color: #8390a9;
  font-size: 8px;
}

.metrics-grid .positive {
  color: var(--mint);
}

.chart-card {
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px 9px;
}

.chart-head {
  font-size: 9px;
}

.chart-head span {
  color: #8792aa;
}

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

.chart {
  position: relative;
  display: flex;
  height: 105px;
  align-items: end;
  justify-content: space-around;
  gap: 9px;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(255, 255, 255, 0.04) 26px);
}

.chart span {
  width: 22px;
  height: var(--h);
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(to top, rgba(100, 84, 255, 0.22), #6253eb);
  opacity: 0.78;
}

.chart span.current {
  background: linear-gradient(to top, #5d4fe9, #9a8fff);
  box-shadow: 0 0 18px rgba(100, 84, 255, 0.36);
  opacity: 1;
}

.chart-days {
  display: flex;
  justify-content: space-around;
  padding-top: 7px;
  color: #66718a;
  font-size: 7px;
}

.alerts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}

.alerts-row article {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.023);
  padding: 10px;
}

.alerts-row article > span {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
}

.alert-icon {
  background: rgba(255, 198, 91, 0.12);
  color: var(--yellow);
}

.review-icon {
  background: rgba(100, 84, 255, 0.15);
  color: var(--brand-2);
}

.alerts-row div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.alerts-row strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alerts-row small {
  overflow: hidden;
  color: #748099;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-note {
  margin: 9px 0 -9px;
  color: #59647b;
  font-size: 7px;
  text-align: right;
  text-transform: uppercase;
}

.signal-strip {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.signal-list {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #737f99;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-list i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #464e62;
}

.section {
  padding: 116px 0;
}

.problem-section {
  background: var(--paper);
  color: var(--ink);
}

.problem-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr;
  gap: 100px;
}

.problem-grid h2,
.section-heading h2,
.accuracy-grid h2,
.security-grid h2,
.faq-grid h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(37px, 4vw, 58px);
  letter-spacing: -0.055em;
  line-height: 1.06;
}

h1,
h2,
h3,
.faq-question {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-weight: 720;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.problem-copy {
  align-self: end;
}

.problem-copy > p {
  margin: 0 0 28px;
  color: #5a6070;
  font-size: 18px;
  line-height: 1.7;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  color: #4234bd;
  font-weight: 800;
}

.arrow-link span {
  transition: transform 160ms ease;
}

.arrow-link:hover span {
  transform: translateX(5px);
}

.features-section {
  background: #0a0f1e;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.44fr);
  align-items: end;
  gap: 16px 70px;
  margin-bottom: 60px;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.section-heading p:last-child {
  margin: 0;
  color: #929db5;
  line-height: 1.7;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.feature-card {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #10182b, #0d1425);
  padding: 34px;
}

.feature-wide {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  min-height: 400px;
}

.feature-index {
  position: absolute;
  top: 27px;
  right: 30px;
  color: #3e475d;
  font-size: 11px;
  font-weight: 800;
}

.feature-kicker {
  color: #8174ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.feature-card h3 {
  max-width: 500px;
  margin: 14px 0 13px;
  font-size: clamp(25px, 2.5vw, 36px);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.feature-card p {
  max-width: 480px;
  margin: 0;
  color: #939eb5;
  line-height: 1.65;
}

.feature-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}

.feature-card li {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  padding: 7px 11px;
  color: #98a3b9;
  font-size: 10px;
}

.mini-dashboard {
  position: relative;
  height: 250px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 49px, rgba(255, 255, 255, 0.04) 50px),
    rgba(255, 255, 255, 0.02);
  padding: 35px 26px 20px;
}

.mini-bars {
  display: flex;
  height: 100%;
  align-items: end;
  justify-content: space-around;
  gap: 14px;
}

.mini-bars i {
  width: 34px;
  height: var(--h);
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(to top, rgba(100, 84, 255, 0.2), #6657ed);
}

.mini-line {
  position: absolute;
  top: 37%;
  right: 20px;
  left: 20px;
  height: 2px;
  background: linear-gradient(100deg, transparent 0 4%, #4ff2c5 18% 30%, #4ff2c5 45% 62%, #4ff2c5 75% 92%, transparent);
  filter: drop-shadow(0 0 5px rgba(79, 242, 197, 0.5));
  transform: rotate(-8deg);
}

.message-demo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  padding: 15px;
}

.message-dot {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.message-demo div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.message-demo strong {
  font-size: 12px;
}

.message-demo small {
  overflow: hidden;
  color: #7f8ba5;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-demo {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}

.report-demo span {
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 13px;
}

.report-demo i,
.report-demo b {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.report-demo b {
  background: linear-gradient(90deg, rgba(100, 84, 255, 0.55), rgba(100, 84, 255, 0.06));
}

.stock-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.stock-demo span {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  color: #a0aac0;
  font-size: 10px;
}

.stock-demo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.critical {
  background: var(--danger);
}

.warning {
  background: var(--yellow);
}

.healthy {
  background: var(--mint);
}

.feature-dark {
  background:
    radial-gradient(circle at 80% 85%, rgba(100, 84, 255, 0.25), transparent 40%),
    linear-gradient(145deg, #121930, #0c1222);
}

.cabinet-demo {
  display: flex;
  margin-top: 39px;
}

.cabinet-demo span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 3px solid #10172a;
  border-radius: 50%;
  background: #2c3560;
  color: #d8dded;
  font-size: 13px;
  font-weight: 900;
}

.cabinet-demo span + span {
  margin-left: -10px;
  background: #543fb9;
}

.cabinet-demo span:last-child {
  background: #1a223c;
  color: var(--mint);
}

.how-section {
  background: var(--paper);
  color: var(--ink);
}

.section-heading-centered {
  display: flex;
  max-width: 760px;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-heading-centered p:last-child {
  max-width: 620px;
  color: #626879;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 66px 0 0;
  padding: 0;
  border: 1px solid #dfe2ea;
  border-radius: 20px;
  background: #dfe2ea;
  list-style: none;
}

.steps-grid li {
  position: relative;
  min-height: 330px;
  background: #fff;
  padding: 35px;
}

.steps-grid li:first-child {
  border-radius: 19px 0 0 19px;
}

.steps-grid li:last-child {
  border-radius: 0 19px 19px 0;
}

.step-number {
  position: absolute;
  top: 31px;
  right: 31px;
  color: #b2b7c5;
  font-size: 11px;
  font-weight: 800;
}

.step-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 17px;
  background: #eeedff;
  color: #5546d2;
  font-size: 18px;
  font-weight: 900;
}

.steps-grid h3 {
  margin: 55px 0 13px;
  font-size: 24px;
  letter-spacing: -0.035em;
}

.steps-grid p {
  margin: 0;
  color: #666c7c;
  line-height: 1.65;
}

.center-action {
  margin-top: 36px;
  text-align: center;
}

.accuracy-section {
  background:
    radial-gradient(circle at 83% 50%, rgba(84, 67, 206, 0.22), transparent 30%),
    #090e1c;
}

.accuracy-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 105px;
}

.accuracy-lead {
  margin: 24px 0 0;
  color: #939db4;
  font-size: 17px;
  line-height: 1.7;
}

.accuracy-statuses {
  display: grid;
  gap: 16px;
  margin-top: 35px;
}

.accuracy-statuses > div {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
}

.status-green {
  background: var(--mint);
  box-shadow: 0 0 10px rgba(79, 242, 197, 0.5);
}

.status-yellow {
  background: var(--yellow);
}

.status-gray {
  background: #667089;
}

.accuracy-statuses p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.accuracy-statuses strong {
  font-size: 14px;
}

.accuracy-statuses small {
  color: #78839c;
  line-height: 1.5;
}

.accuracy-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: linear-gradient(145deg, #151d34, #0d1425);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.32);
  padding: 34px;
}

.accuracy-card-head {
  color: #8f9ab1;
  font-size: 12px;
}

.verified {
  border: 1px solid rgba(79, 242, 197, 0.16);
  border-radius: 999px;
  background: rgba(79, 242, 197, 0.06);
  padding: 7px 10px;
  color: #76e9cb;
  font-size: 9px;
}

.accuracy-card > strong {
  display: block;
  margin-top: 24px;
  font-size: clamp(38px, 5vw, 61px);
  letter-spacing: -0.06em;
}

.accuracy-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 30px;
}

.accuracy-breakdown span {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px;
}

.accuracy-breakdown small {
  color: #79849b;
  font-size: 8px;
}

.accuracy-breakdown b {
  font-size: 12px;
}

.accuracy-card > p {
  margin: 22px 0 0;
  color: #748098;
  font-size: 9px;
}

.accuracy-card > p span {
  margin-right: 6px;
  color: var(--mint);
}

.security-section {
  background: #101629;
}

.security-grid {
  display: grid;
  grid-template-columns: 130px 1fr 0.7fr;
  align-items: center;
  gap: 50px;
}

.security-mark {
  position: relative;
  display: grid;
  width: 120px;
  height: 120px;
  place-items: center;
  border: 1px solid rgba(100, 84, 255, 0.32);
  border-radius: 34px;
  background: rgba(100, 84, 255, 0.08);
  color: #7164eb;
  font-size: 50px;
}

.security-mark span {
  position: absolute;
  right: 21px;
  bottom: 19px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: #0a3027;
  font-size: 13px;
  font-weight: 900;
}

.security-grid h2 {
  font-size: 43px;
}

.security-grid p:not(.eyebrow) {
  margin: 19px 0 0;
  color: #99a3b9;
  line-height: 1.7;
}

.security-grid ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  color: #afb7c9;
  list-style: none;
}

.security-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-grid li span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 242, 197, 0.08);
  color: var(--mint);
  font-size: 10px;
}

.faq-section {
  background: var(--paper);
  color: var(--ink);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.64fr 1fr;
  gap: 100px;
}

.faq-grid > div:first-child > p:not(.eyebrow) {
  max-width: 340px;
  margin: 22px 0 27px;
  color: #676d7e;
  line-height: 1.65;
}

.faq-list {
  border-top: 1px solid #d8dbe3;
}

.faq-list details {
  border-bottom: 1px solid #d8dbe3;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 25px 0;
  font-size: 17px;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: #6a5ade;
  font-size: 25px;
  font-weight: 400;
  transition: transform 160ms ease;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  margin: -8px 48px 24px 0;
  color: #626879;
  line-height: 1.7;
}

.faq-item {
  overflow: hidden;
  border-bottom: 1px solid #d8dbe3;
}

.faq-question {
  display: flex;
  width: 100%;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 20px 0;
  color: var(--ink);
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.faq-question span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(100, 84, 255, 0.08);
  color: #6253dc;
  font-size: 23px;
  font-weight: 400;
  transition:
    background-color 260ms ease,
    color 260ms ease,
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-item.is-open .faq-question span {
  background: #6253dc;
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-7px);
  transition:
    grid-template-rows 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 280ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-answer > div {
  min-height: 0;
  overflow: hidden;
}

.faq-answer p {
  margin: 0 52px 24px 0;
  color: #626879;
  line-height: 1.72;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

.final-cta {
  background: linear-gradient(135deg, #5747e4, #6e5df6 52%, #7d6bff);
  color: #fff;
}

.final-cta-inner {
  display: flex;
  min-height: 340px;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.final-cta h2 {
  font-size: clamp(38px, 4.5vw, 60px);
}

.final-cta-inner > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.button-light {
  background: #fff;
  color: #292048;
}

.final-cta small {
  color: rgba(255, 255, 255, 0.67);
}

.site-footer {
  background: #060914;
  color: #f7f8ff;
}

.site-footer .brand-name {
  color: #f7f8ff;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  padding-top: 74px;
  padding-bottom: 70px;
}

.footer-main > div:first-child p {
  max-width: 320px;
  margin: 20px 0 0;
  color: #79849b;
  line-height: 1.6;
}

.footer-operator {
  display: flex;
  max-width: 390px;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 24px;
  color: #69748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.footer-operator strong {
  color: #aeb6c9;
  font-size: 12px;
}

.footer-operator a {
  color: #8f85f5;
}

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

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

.footer-links strong {
  margin-bottom: 3px;
  color: #e7e9f2;
  font-size: 12px;
  text-transform: uppercase;
}

.footer-links a {
  color: #7f899f;
  font-size: 13px;
}

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

.legal-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.legal-page .site-header {
  position: static;
  border-color: #dfe2e9;
  background: #fff;
}

.legal-page .brand-mark {
  background: #12172b;
}

.legal-page .brand-name {
  color: var(--ink);
}

.legal-page .text-link {
  color: #4c42bd;
}

.legal-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.legal-nav a {
  color: #62697a;
  font-size: 13px;
  font-weight: 700;
}

.legal-nav a[aria-current="page"] {
  color: #493bc6;
}

.legal-page .header-inner > .text-link {
  margin-left: 26px;
}

.legal-content {
  width: min(calc(100% - 40px), 820px);
  margin-inline: auto;
  padding: 80px 0 110px;
}

.legal-content h1 {
  margin: 0 0 16px;
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: -0.055em;
}

.legal-updated {
  margin-bottom: 45px;
  color: #777e8d;
}

.legal-content h2 {
  margin: 42px 0 13px;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.legal-content h3 {
  margin: 28px 0 8px;
  color: #2c3140;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.legal-content p,
.legal-content li {
  color: #565d6d;
  line-height: 1.75;
}

.legal-content ul,
.legal-content ol {
  padding-left: 23px;
}

.legal-content li + li {
  margin-top: 7px;
}

.legal-content code {
  border: 1px solid #d9dce5;
  border-radius: 6px;
  background: #f4f5f8;
  padding: 2px 6px;
  color: #3e356f;
  font-size: 0.92em;
}

.legal-content a {
  color: #493bc6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-summary {
  margin-bottom: 34px;
  border: 1px solid #dedbf7;
  border-radius: 16px;
  background: #f2f0ff;
  padding: 22px 24px;
}

.legal-summary p {
  margin: 0;
  color: #393263;
}

.legal-table-wrap {
  margin: 20px 0 24px;
  overflow-x: auto;
  border: 1px solid #dfe2e9;
  border-radius: 14px;
}

.legal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e3e5eb;
  color: #565d6d;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: #f5f6f9;
  color: #303543;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-content .notice {
  margin: 30px 0;
  border-left: 3px solid #6555e8;
  background: #ebe9ff;
  padding: 18px 20px;
  color: #393263;
}

.legal-footer {
  border-top: 1px solid #dfe2e9;
  background: #fff;
}

.legal-footer .container {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 24px;
  color: #737a8a;
  font-size: 12px;
}

.legal-footer a {
  color: #5549bc;
}

@media (max-width: 1040px) {
  .desktop-nav {
    display: none;
  }

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

  .hero-copy {
    max-width: 720px;
  }

  .product-preview {
    max-width: 700px;
    transform: none;
  }

  .accuracy-grid {
    gap: 55px;
  }

  .security-grid {
    grid-template-columns: 100px 1fr;
  }

  .security-mark {
    width: 96px;
    height: 96px;
    border-radius: 26px;
  }

  .security-grid ul {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .header-inner {
    min-height: 68px;
  }

  .brand-name {
    font-size: 18px;
  }

  .header-actions .text-link {
    display: none;
  }

  .button-small {
    min-height: 39px;
    padding-inline: 14px;
  }

  .hero {
    min-height: auto;
    padding: 126px 0 70px;
  }

  .hero-grid {
    gap: 54px;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

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

  .hero-actions {
    flex-direction: column;
  }

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

  .product-preview {
    padding: 15px;
  }

  .preview-heading {
    align-items: flex-start;
  }

  .live-badge {
    max-width: 100px;
  }

  .metrics-grid {
    gap: 6px;
  }

  .metrics-grid article {
    padding: 10px 8px;
  }

  .metrics-grid strong {
    font-size: 17px;
  }

  .alerts-row {
    grid-template-columns: 1fr;
  }

  .signal-list {
    min-height: 64px;
    justify-content: flex-start;
    overflow: hidden;
    font-size: 10px;
    white-space: nowrap;
  }

  .section {
    padding: 78px 0;
  }

  .problem-grid,
  .section-heading,
  .accuracy-grid,
  .faq-grid,
  .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .problem-grid h2,
  .section-heading h2,
  .accuracy-grid h2,
  .faq-grid h2 {
    font-size: 38px;
  }

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

  .feature-grid,
  .feature-wide {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .feature-wide {
    min-height: auto;
    padding: 27px;
  }

  .mini-dashboard {
    height: 210px;
    margin-top: 38px;
  }

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

  .steps-grid li {
    min-height: auto;
    padding: 30px;
  }

  .steps-grid li:first-child {
    border-radius: 19px 19px 0 0;
  }

  .steps-grid li:last-child {
    border-radius: 0 0 19px 19px;
  }

  .steps-grid h3 {
    margin-top: 35px;
  }

  .accuracy-card {
    padding: 23px;
  }

  .accuracy-breakdown {
    grid-template-columns: 1fr;
  }

  .security-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .security-grid ul {
    grid-column: 1;
  }

  .final-cta-inner {
    min-height: 420px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .final-cta-inner > div:last-child,
  .final-cta .button {
    width: 100%;
  }

  .footer-main {
    gap: 50px;
  }

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

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .legal-content {
    width: min(calc(100% - 28px), 820px);
    padding-top: 55px;
  }

  .legal-page .header-inner {
    min-height: 74px;
  }

  .legal-nav {
    display: none;
  }

  .legal-page .header-inner > .text-link {
    margin-left: auto;
  }

  .legal-footer .container {
    min-height: 100px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
}

/* Interactive navigation, themes and motion */

::selection {
  background: rgba(100, 84, 255, 0.36);
  color: #fff;
}

.site-header {
  position: fixed;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 24, 0.72);
  backdrop-filter: blur(18px) saturate(145%);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(7, 11, 24, 0.91);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.hero {
  background:
    linear-gradient(rgba(148, 139, 255, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 139, 255, 0.052) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, #1b1d58 0, #0d132a 40%, #080d1d 74%);
  background-size: 68px 68px, 68px 68px, auto;
}

.button-primary {
  background: linear-gradient(135deg, #7463ff 0%, #5f4df1 48%, #4d3cce 100%);
  box-shadow:
    0 16px 38px rgba(82, 61, 225, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
}

.button-primary:hover {
  background: linear-gradient(135deg, #8273ff 0%, #6957f9 48%, #5745df 100%);
}

.telegram-button {
  position: relative;
  overflow: hidden;
}

.telegram-button::after {
  position: absolute;
  top: -120%;
  left: -34%;
  width: 24%;
  height: 340%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(23deg);
  transition: left 520ms ease;
}

.telegram-button:hover::after {
  left: 118%;
}

.telegram-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
}

.button-small .telegram-mark {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 11px;
}

.theme-toggle {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #d5daea;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.theme-toggle:hover {
  border-color: rgba(138, 125, 255, 0.5);
  background: rgba(138, 125, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(79, 242, 197, 0.72);
  outline-offset: 3px;
}

.theme-toggle span {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  transition:
    opacity 220ms ease,
    transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theme-toggle-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.theme-toggle-moon {
  opacity: 0;
  transform: rotate(-70deg) scale(0.55);
}

html[data-theme="light"] .theme-toggle-sun {
  opacity: 0;
  transform: rotate(70deg) scale(0.55);
}

html[data-theme="light"] .theme-toggle-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.quick-nav {
  position: fixed;
  z-index: 40;
  top: 50%;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(138, 125, 255, 0.22);
  border-radius: 19px;
  background:
    linear-gradient(155deg, rgba(24, 31, 57, 0.94), rgba(8, 13, 27, 0.9));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 30px rgba(100, 84, 255, 0.07);
  padding: 8px;
  backdrop-filter: blur(18px) saturate(140%);
  transform: translateY(-50%);
}

.quick-nav a {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #9aa5bd;
  font-size: 14px;
  font-weight: 850;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.quick-nav a::before {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(8, 12, 25, 0.94);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
  padding: 7px 10px;
  color: #e9ecf6;
  content: attr(data-label);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.quick-nav a:hover::before,
.quick-nav a:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.quick-nav a:hover,
.quick-nav a.is-active {
  border-color: rgba(138, 125, 255, 0.52);
  background: linear-gradient(145deg, rgba(111, 94, 255, 0.3), rgba(100, 84, 255, 0.14));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(65, 49, 190, 0.18);
  color: #d2ccff;
  transform: none;
}

.back-to-top {
  position: fixed;
  z-index: 40;
  top: calc(50% + 116px);
  right: 25px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(138, 125, 255, 0.22);
  border-radius: 13px;
  background: rgba(10, 15, 30, 0.88);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  color: #b8afff;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(18px) saturate(140%);
  transform: translateY(10px) scale(0.88);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 180ms ease,
    border-color 180ms ease;
}

.back-to-top::before {
  position: absolute;
  right: calc(100% + 12px);
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(8, 12, 25, 0.94);
  padding: 7px 10px;
  color: #e9ecf6;
  content: attr(data-label);
  font-size: 11px;
  opacity: 1;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.back-to-top:not(:hover, :focus-visible)::before {
  opacity: 0;
}

.back-to-top:hover::before,
.back-to-top:focus-visible::before {
  transform: none;
}

.back-to-top:hover {
  border-color: rgba(138, 125, 255, 0.44);
  background: rgba(100, 84, 255, 0.23);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hero-action-note {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 16px 0 0;
  color: #7f8aa4;
  font-size: 12px;
  line-height: 1.5;
}

.hero-action-note strong {
  color: #a99fff;
}

.product-preview {
  animation: none;
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-preview:hover {
  border-color: rgba(138, 125, 255, 0.35);
  box-shadow:
    0 50px 115px rgba(0, 0, 0, 0.5),
    0 0 0 8px rgba(123, 106, 255, 0.035);
  transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px);
}

.preview-periods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.14);
  padding: 4px;
}

.preview-periods button {
  min-height: 31px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f7b96;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.preview-periods button:hover {
  color: #c8cde0;
}

.preview-periods button[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(116, 99, 255, 0.32), rgba(100, 84, 255, 0.15));
  box-shadow: inset 0 0 0 1px rgba(138, 125, 255, 0.25);
  color: #e6e3ff;
}

.preview-periods button:focus-visible {
  outline: 2px solid rgba(79, 242, 197, 0.7);
  outline-offset: 1px;
}

.product-preview.is-updating .metrics-grid strong,
.product-preview.is-updating .chart-head strong,
.product-preview.is-updating .alerts-row div {
  opacity: 0.28;
  transform: translateY(4px);
}

.metrics-grid strong,
.chart-head strong,
.alerts-row div {
  transition:
    opacity 150ms ease,
    transform 180ms ease;
}

.chart span {
  transform-origin: bottom;
  transition:
    height 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 220ms ease,
    filter 220ms ease;
}

.chart span:hover {
  filter: brightness(1.25);
  opacity: 1;
}

.preview-note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #68748e;
}

.preview-note span {
  color: var(--mint);
  font-size: 6px;
}

.signal-strip {
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 24, 0), rgba(12, 17, 35, 0.7) 48%, rgba(7, 11, 24, 0));
  padding: 20px 0;
}

.signal-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.signal-track {
  display: flex;
  width: max-content;
  animation: signal-marquee var(--marquee-duration, 27s) linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.signal-marquee:hover .signal-track {
  animation-play-state: paused;
}

.signal-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 42px;
  padding-right: 42px;
}

.signal-group span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #909bb3;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.signal-group span::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-2), var(--mint));
  box-shadow: 0 0 9px rgba(100, 84, 255, 0.4);
  content: "";
}

.insight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 27px;
}

.insight-chips span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 10px 12px;
  color: #929db5;
  font-size: 10px;
}

.insight-chips b {
  color: #c8c1ff;
  font-size: 13px;
}

.cabinet-demo {
  align-items: center;
}

.cabinet-demo .cabinet-avatar {
  overflow: hidden;
  border-color: #10172a;
  background: linear-gradient(145deg, #353e6c, #202947);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  color: #eef0f8;
}

.cabinet-demo .cabinet-avatar-brand {
  background: #060b20;
}

.cabinet-demo .cabinet-avatar-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cabinet-demo .cabinet-add {
  border-style: dashed;
  background: rgba(100, 84, 255, 0.08);
  color: var(--mint);
}

.feature-card,
.steps-grid li,
.accuracy-card,
.security-mark,
.faq-list details {
  transition:
    border-color 240ms ease,
    box-shadow 280ms ease,
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.feature-card:hover,
.steps-grid li:hover,
.accuracy-card:hover {
  border-color: rgba(126, 111, 255, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  transform: translateY(-5px);
}

.features-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(100, 84, 255, 0.12), transparent 24%),
    radial-gradient(circle at 87% 70%, rgba(79, 242, 197, 0.055), transparent 24%),
    #0a0f1e;
}

.feature-card {
  border-radius: 28px;
  isolation: isolate;
}

.feature-wide {
  border-radius: 34px;
}

.feature-card::before {
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(100, 84, 255, 0.11);
  content: "";
  filter: blur(70px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-35%, -35%);
  transition: opacity 380ms ease;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover .mini-bars i {
  animation: bar-breathe 1.8s ease-in-out infinite alternate;
}

.feature-card.is-visible .mini-bars i {
  animation: chart-draw 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.feature-card.is-visible .mini-bars i:nth-child(2) {
  animation-delay: 70ms;
}

.feature-card.is-visible .mini-bars i:nth-child(3) {
  animation-delay: 140ms;
}

.feature-card.is-visible .mini-bars i:nth-child(4) {
  animation-delay: 210ms;
}

.feature-card.is-visible .mini-bars i:nth-child(5) {
  animation-delay: 280ms;
}

.feature-card.is-visible .mini-bars i:nth-child(6) {
  animation-delay: 350ms;
}

.feature-card.is-visible .mini-line {
  animation: line-draw 900ms 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.feature-card.is-visible .message-demo {
  animation: message-arrive 620ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.feature-card.is-visible .report-demo b {
  background-size: 220% 100%;
  animation: report-flow 3.2s ease-in-out infinite;
}

.feature-card.is-visible .stock-demo .critical {
  animation: status-pulse 1.9s ease-in-out infinite;
}

.feature-card.is-visible .cabinet-avatar {
  animation: avatar-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.feature-card.is-visible .cabinet-avatar:nth-child(2) {
  animation-delay: 100ms;
}

.feature-card.is-visible .cabinet-avatar:nth-child(3) {
  animation-delay: 200ms;
}

.steps-grid li:hover .step-icon {
  background: #e2dfff;
  box-shadow: 0 12px 28px rgba(85, 70, 210, 0.16);
  transform: rotate(-3deg) scale(1.06);
}

.steps-grid li {
  cursor: pointer;
}

.steps-grid li:focus-visible {
  z-index: 2;
  outline: 3px solid rgba(95, 79, 228, 0.32);
  outline-offset: -4px;
}

.steps-grid li::after {
  position: absolute;
  right: 30px;
  bottom: 25px;
  left: 30px;
  height: 3px;
  border-radius: 99px;
  background: #5f4fe4;
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 240ms ease,
    transform 700ms linear;
}

.steps-grid li.is-active {
  z-index: 1;
  background:
    radial-gradient(circle at 18% 15%, rgba(100, 84, 255, 0.11), transparent 34%),
    #fff;
  box-shadow: 0 20px 55px rgba(55, 45, 130, 0.12);
  transform: translateY(-6px);
}

.steps-grid li.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.steps-grid li.is-active .step-icon {
  background: #5f4fe4;
  box-shadow: 0 12px 30px rgba(95, 79, 228, 0.25);
  color: #fff;
  transform: rotate(-3deg) scale(1.07);
}

.step-icon {
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 660ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.legal-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 26px;
}

.legal-page .site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-color: #dfe2e9;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(140%);
}

.security-mark .security-shield {
  position: relative;
  right: auto;
  bottom: auto;
  display: grid;
  width: 64px;
  height: 72px;
  place-items: center;
  border-radius: 0;
  background: linear-gradient(150deg, #7b6bff, #5545d0);
  box-shadow: 0 16px 30px rgba(77, 59, 205, 0.26);
  clip-path: polygon(50% 0, 92% 16%, 86% 72%, 50% 100%, 14% 72%, 8% 16%);
  color: #fff;
  font-size: 24px;
}

.security-mark small {
  color: #a9b2c7;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.security-mark {
  height: 140px;
  align-content: center;
  gap: 10px;
  border-radius: 38px;
}

.security-grid ul {
  gap: 9px;
}

.security-grid li {
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 11px 13px;
}

.faq-question:focus-visible {
  outline: 3px solid rgba(95, 79, 228, 0.28);
  outline-offset: -3px;
}

.legal-page .theme-toggle {
  border-color: #dfe2e9;
  background: #f5f6fa;
  color: #4b5263;
}

.legal-page .theme-toggle:hover {
  border-color: #bbb3ff;
  background: #eeeaff;
  color: #4d3fc5;
}

html[data-theme="light"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --text: #111526;
  --muted: #657087;
  --line: rgba(17, 21, 38, 0.1);
  --paper: #f6f7fa;
  --ink: #111526;
  color-scheme: light;
}

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

html[data-theme="light"] body:not(.legal-page) {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] body:not(.legal-page) .site-header {
  border-color: rgba(17, 21, 38, 0.09);
  background: rgba(248, 249, 253, 0.76);
}

html[data-theme="light"] body:not(.legal-page) .site-header.is-scrolled {
  background: rgba(248, 249, 253, 0.93);
  box-shadow: 0 12px 35px rgba(35, 40, 70, 0.09);
}

html[data-theme="light"] body:not(.legal-page) .brand-mark {
  border-color: rgba(100, 84, 255, 0.3);
  background: linear-gradient(145deg, #eeecff, #e3e6f3);
  box-shadow: inset 0 0 18px rgba(100, 84, 255, 0.1);
  color: #5546d2;
}

html[data-theme="light"] body:not(.legal-page) .brand-name {
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .desktop-nav {
  color: #59637a;
}

html[data-theme="light"] body:not(.legal-page) .desktop-nav a:hover {
  color: #4435c5;
}

html[data-theme="light"] body:not(.legal-page) .theme-toggle {
  border-color: rgba(17, 21, 38, 0.11);
  background: rgba(17, 21, 38, 0.035);
  color: #3e4558;
}

html[data-theme="light"] body:not(.legal-page) .button-small {
  border-color: transparent;
  background: #5f4de8;
  color: #fff;
}

html[data-theme="light"] body:not(.legal-page) .hero {
  background:
    linear-gradient(rgba(53, 48, 120, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 48, 120, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 54% 20%, #e8e5ff 0, #f5f6fc 42%, #f4f6fb 74%);
  background-size: 72px 72px, 72px 72px, auto;
}

html[data-theme="light"] body:not(.legal-page) .hero::after {
  background: linear-gradient(transparent, var(--bg));
}

html[data-theme="light"] body:not(.legal-page) .hero h1 {
  color: #111526;
}

html[data-theme="light"] body:not(.legal-page) .hero h1 em {
  color: #5745d2;
}

html[data-theme="light"] body:not(.legal-page) .hero-lead {
  color: #59637a;
}

html[data-theme="light"] body:not(.legal-page) .hero-action-note,
html[data-theme="light"] body:not(.legal-page) .hero-points {
  color: #68738b;
}

html[data-theme="light"] body:not(.legal-page) .product-preview {
  --line: #dce4ef;
  border-color: #d7e0eb;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 251, 0.99));
  box-shadow:
    0 36px 84px rgba(49, 67, 101, 0.17),
    0 0 0 8px rgba(49, 95, 212, 0.025);
  color: #102033;
}

html[data-theme="light"] body:not(.legal-page) .product-preview::before {
  background: linear-gradient(135deg, rgba(49, 95, 212, 0.2), transparent 38%, rgba(22, 136, 108, 0.12));
}

html[data-theme="light"] body:not(.legal-page) .preview-brand small,
html[data-theme="light"] body:not(.legal-page) .preview-label,
html[data-theme="light"] body:not(.legal-page) .metrics-grid article > span,
html[data-theme="light"] body:not(.legal-page) .chart-head span,
html[data-theme="light"] body:not(.legal-page) .alerts-row small,
html[data-theme="light"] body:not(.legal-page) .preview-note {
  color: #627087;
}

html[data-theme="light"] body:not(.legal-page) .live-badge {
  border-color: rgba(22, 136, 108, 0.18);
  background: #e5f6f0;
  color: #16886c;
}

html[data-theme="light"] body:not(.legal-page) .preview-select,
html[data-theme="light"] body:not(.legal-page) .metrics-grid article,
html[data-theme="light"] body:not(.legal-page) .chart-card,
html[data-theme="light"] body:not(.legal-page) .alerts-row article {
  border-color: #dce4ef;
  background: #fff;
}

html[data-theme="light"] body:not(.legal-page) .preview-periods {
  border-color: #dce4ef;
  background: #edf2f8;
}

html[data-theme="light"] body:not(.legal-page) .preview-periods button {
  color: #647286;
}

html[data-theme="light"] body:not(.legal-page) .preview-periods button:hover {
  color: #315fd4;
}

html[data-theme="light"] body:not(.legal-page) .preview-periods button[aria-selected="true"] {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px #cbd7e6,
    0 4px 12px rgba(15, 31, 51, 0.07);
  color: #315fd4;
}

html[data-theme="light"] body:not(.legal-page) .metrics-grid small {
  color: #647286;
}

html[data-theme="light"] body:not(.legal-page) .metrics-grid .positive {
  color: #187c57;
}

html[data-theme="light"] body:not(.legal-page) .chart {
  border-color: #dce4ef;
  background: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(49, 67, 101, 0.055) 26px);
}

html[data-theme="light"] body:not(.legal-page) .chart span {
  background: linear-gradient(to top, rgba(49, 95, 212, 0.2), #567fe8);
}

html[data-theme="light"] body:not(.legal-page) .chart span.current {
  background: linear-gradient(to top, #315fd4, #7298ff);
  box-shadow: 0 0 18px rgba(49, 95, 212, 0.23);
}

html[data-theme="light"] body:not(.legal-page) .chart-days {
  color: #78869a;
}

html[data-theme="light"] body:not(.legal-page) .alert-icon {
  background: #fff1d6;
  color: #a45c08;
}

html[data-theme="light"] body:not(.legal-page) .review-icon {
  background: #e7eeff;
  color: #315fd4;
}

html[data-theme="light"] body:not(.legal-page) .signal-strip {
  background:
    linear-gradient(180deg, rgba(244, 246, 251, 0), rgba(234, 237, 247, 0.8) 48%, rgba(244, 246, 251, 0));
}

html[data-theme="light"] body:not(.legal-page) .signal-group span {
  color: #4f5970;
}

html[data-theme="light"] body:not(.legal-page) .insight-chips span {
  border-color: rgba(17, 21, 38, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: #606b82;
}

html[data-theme="light"] body:not(.legal-page) .insight-chips b {
  color: #5546d2;
}

html[data-theme="light"] body:not(.legal-page) .features-section {
  background: #f0f2f8;
}

html[data-theme="light"] body:not(.legal-page) .section-heading p:last-child,
html[data-theme="light"] body:not(.legal-page) .feature-card p {
  color: #626d84;
}

html[data-theme="light"] body:not(.legal-page) .feature-card {
  border-color: rgba(17, 21, 38, 0.09);
  background: linear-gradient(145deg, #ffffff, #f5f6fa);
  box-shadow: 0 12px 34px rgba(35, 40, 70, 0.05);
  color: #15192b;
}

html[data-theme="light"] body:not(.legal-page) .feature-dark {
  background:
    radial-gradient(circle at 80% 85%, rgba(100, 84, 255, 0.16), transparent 40%),
    linear-gradient(145deg, #f9f8ff, #edf0f8);
}

html[data-theme="light"] body:not(.legal-page) .cabinet-demo .cabinet-avatar {
  border-color: #f5f6fa;
  background: linear-gradient(145deg, #6b5be8, #5143b4);
  box-shadow: 0 12px 24px rgba(60, 51, 130, 0.16);
  color: #fff;
}

html[data-theme="light"] body:not(.legal-page) .cabinet-demo .cabinet-avatar-brand {
  background: #070c24;
}

html[data-theme="light"] body:not(.legal-page) .cabinet-demo .cabinet-add {
  border-color: #f5f6fa;
  background: #e8e5ff;
  color: #5143c5;
}

html[data-theme="light"] body:not(.legal-page) .feature-card li,
html[data-theme="light"] body:not(.legal-page) .message-demo,
html[data-theme="light"] body:not(.legal-page) .stock-demo span {
  border-color: rgba(17, 21, 38, 0.08);
  background: rgba(17, 21, 38, 0.025);
  color: #5f697f;
}

html[data-theme="light"] body:not(.legal-page) .message-demo strong {
  color: #22273a;
}

html[data-theme="light"] body:not(.legal-page) .mini-dashboard {
  border-color: rgba(17, 21, 38, 0.08);
  background:
    repeating-linear-gradient(to bottom, transparent 0 49px, rgba(17, 21, 38, 0.05) 50px),
    rgba(17, 21, 38, 0.02);
}

html[data-theme="light"] body:not(.legal-page) .accuracy-section {
  background:
    radial-gradient(circle at 83% 50%, rgba(100, 84, 255, 0.16), transparent 32%),
    #f4f5fb;
}

html[data-theme="light"] body:not(.legal-page) .accuracy-section h2,
html[data-theme="light"] body:not(.legal-page) .accuracy-statuses strong {
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .accuracy-lead,
html[data-theme="light"] body:not(.legal-page) .accuracy-statuses small {
  color: #667188;
}

html[data-theme="light"] body:not(.legal-page) .accuracy-card {
  border-color: rgba(17, 21, 38, 0.1);
  background: linear-gradient(145deg, #ffffff, #f4f5fa);
  box-shadow: 0 28px 70px rgba(55, 49, 120, 0.1);
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .accuracy-breakdown span {
  border-color: rgba(17, 21, 38, 0.09);
}

html[data-theme="light"] body:not(.legal-page) .security-section {
  background: #e9ecf5;
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .security-grid p:not(.eyebrow),
html[data-theme="light"] body:not(.legal-page) .security-grid ul {
  color: #3e485d;
}

html[data-theme="light"] body:not(.legal-page) .security-grid li {
  border-color: rgba(17, 21, 38, 0.09);
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body:not(.legal-page) .security-grid li span {
  background: #dff6ef;
  color: #187c57;
}

html[data-theme="light"] body:not(.legal-page) .security-mark small {
  color: #5c667c;
}

html[data-theme="light"] body:not(.legal-page) .faq-item {
  border-color: #d8dbe3;
}

html[data-theme="light"] body:not(.legal-page) .faq-question {
  color: #111526;
}

html[data-theme="light"] body:not(.legal-page) .faq-section,
html[data-theme="light"] body:not(.legal-page) .problem-section,
html[data-theme="light"] body:not(.legal-page) .how-section {
  background: #f8f9fc;
}

html[data-theme="light"] body:not(.legal-page) .site-footer {
  border-top: 1px solid rgba(17, 21, 38, 0.08);
  background: #f8f9fc;
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .site-footer .brand-name {
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .site-footer .footer-main > div:first-child p,
html[data-theme="light"] body:not(.legal-page) .site-footer .footer-operator,
html[data-theme="light"] body:not(.legal-page) .site-footer .footer-links a,
html[data-theme="light"] body:not(.legal-page) .site-footer .footer-bottom {
  color: #667087;
}

html[data-theme="light"] body:not(.legal-page) .site-footer .footer-operator strong,
html[data-theme="light"] body:not(.legal-page) .site-footer .footer-links strong {
  color: #2b3042;
}

html[data-theme="light"] body:not(.legal-page) .site-footer .footer-bottom {
  border-color: rgba(17, 21, 38, 0.09);
}

html[data-theme="light"] .quick-nav {
  border-color: rgba(17, 21, 38, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(35, 40, 70, 0.14);
}

html[data-theme="light"] .quick-nav a {
  color: #657087;
}

html[data-theme="light"] .quick-nav a::before {
  border-color: rgba(17, 21, 38, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: #22273a;
}

html[data-theme="light"] .quick-nav a:hover,
html[data-theme="light"] .quick-nav a.is-active {
  color: #5546d2;
}

html[data-theme="light"] .back-to-top {
  border-color: rgba(100, 84, 255, 0.22);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px rgba(35, 40, 70, 0.14);
  color: #5546d2;
}

html[data-theme="light"] .back-to-top::before {
  border-color: rgba(17, 21, 38, 0.1);
  background: rgba(255, 255, 255, 0.97);
  color: #22273a;
}

html[data-theme="dark"] .legal-page {
  --paper: #090e1c;
  --ink: #f5f7ff;
  background: #090e1c;
  color: #f5f7ff;
}

html[data-theme="dark"] .legal-page .site-header,
html[data-theme="dark"] .legal-footer {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(10, 15, 30, 0.91);
}

html[data-theme="dark"] .legal-page .brand-name {
  color: #f5f7ff;
}

html[data-theme="dark"] .legal-page .text-link,
html[data-theme="dark"] .legal-content a,
html[data-theme="dark"] .legal-footer a,
html[data-theme="dark"] .legal-nav a[aria-current="page"] {
  color: #a99fff;
}

html[data-theme="dark"] .legal-nav a,
html[data-theme="dark"] .legal-footer .container {
  color: #919bb2;
}

html[data-theme="dark"] .legal-page .theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #d5daea;
}

html[data-theme="dark"] .legal-content h3 {
  color: #dfe3f0;
}

html[data-theme="dark"] .legal-content p,
html[data-theme="dark"] .legal-content li,
html[data-theme="dark"] .legal-updated {
  color: #a2acc2;
}

html[data-theme="dark"] .legal-summary {
  border-color: rgba(138, 125, 255, 0.22);
  background: rgba(100, 84, 255, 0.1);
}

html[data-theme="dark"] .legal-summary p,
html[data-theme="dark"] .legal-content .notice {
  color: #d8d4ff;
}

html[data-theme="dark"] .legal-table-wrap {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .legal-table th,
html[data-theme="dark"] .legal-table td {
  border-color: rgba(255, 255, 255, 0.09);
  color: #aab3c8;
}

html[data-theme="dark"] .legal-table th {
  background: rgba(255, 255, 255, 0.05);
  color: #e3e6f1;
}

html[data-theme="dark"] .legal-content code {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: #c9c2ff;
}

html[data-theme="dark"] .legal-content .notice {
  background: rgba(100, 84, 255, 0.12);
}

@keyframes preview-float {
  0%,
  100% {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(0);
  }

  50% {
    transform: perspective(1400px) rotateY(-2deg) rotateX(0.5deg) translateY(-8px);
  }
}

@keyframes bar-breathe {
  to {
    filter: brightness(1.18);
  }
}

@keyframes signal-marquee {
  to {
    transform: translate3d(calc(var(--marquee-distance, 900px) * -1), 0, 0);
  }
}

@keyframes chart-draw {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes line-draw {
  from {
    opacity: 0;
    transform: rotate(-8deg) scaleX(0);
  }

  to {
    opacity: 1;
    transform: rotate(-8deg) scaleX(1);
  }
}

@keyframes message-arrive {
  from {
    opacity: 0;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes report-flow {
  0%,
  100% {
    background-position: 100% 0;
  }

  50% {
    background-position: 0 0;
  }
}

@keyframes status-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(255, 111, 145, 0.09);
  }
}

@keyframes avatar-arrive {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.85);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.preview-sync-line {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  margin: 12px 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  padding: 7px 10px;
  color: #a5afc2;
  font-size: 8px;
  font-weight: 720;
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.preview-sync-line small {
  margin-left: auto;
  color: #68748b;
  font-size: 7px;
  font-weight: 650;
}

.preview-sync-line.is-changing {
  opacity: 0;
  transform: translateY(-5px);
}

.preview-sync-pulse {
  position: relative;
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 242, 197, 0.1);
}

.preview-sync-pulse::before {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(79, 242, 197, 0.28);
  border-radius: 50%;
  content: "";
  animation: sync-ring 2.2s ease-out infinite;
}

.preview-sync-pulse i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(79, 242, 197, 0.7);
}

.product-preview:not(.is-in-view) .preview-sync-pulse::before {
  animation-play-state: paused;
}

.product-preview.is-in-view .chart span {
  animation: story-bar-grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--preview-index, 0) * 55ms);
}

.product-preview.is-in-view .chart span:nth-child(2) {
  --preview-index: 1;
}

.product-preview.is-in-view .chart span:nth-child(3) {
  --preview-index: 2;
}

.product-preview.is-in-view .chart span:nth-child(4) {
  --preview-index: 3;
}

.product-preview.is-in-view .chart span:nth-child(5) {
  --preview-index: 4;
}

.product-preview.is-in-view .chart span:nth-child(6) {
  --preview-index: 5;
}

.product-preview.is-in-view .chart span:nth-child(7) {
  --preview-index: 6;
}

.story-scroll {
  --story-progress: 0;
  position: relative;
  height: clamp(980px, 168vh, 1450px);
}

.story-pin {
  position: sticky;
  top: 92px;
}

.story-pin::before,
.story-pin::after {
  position: absolute;
  z-index: 8;
  top: -14px;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 99px;
  content: "";
  pointer-events: none;
}

.story-pin::before {
  background: rgba(255, 255, 255, 0.08);
}

.story-pin::after {
  background: linear-gradient(90deg, var(--mint), #7163f2);
  box-shadow: 0 0 12px rgba(79, 242, 197, 0.24);
  transform: scaleX(var(--story-progress));
  transform-origin: left;
  transition: transform 90ms linear;
}

.story-pin .section-heading {
  margin-bottom: 18px;
}

.story-pin .section-heading h2 {
  font-size: clamp(34px, 3.25vw, 49px);
}

.story-shell {
  --story-line: rgba(255, 255, 255, 0.1);
  --story-muted: #8f9ab1;
  --story-panel: #0c1323;
  --story-panel-soft: #111b30;
  --story-surface: rgba(255, 255, 255, 0.035);
  --story-text: #f6f7fb;
  display: grid;
  grid-template-columns: minmax(290px, 0.72fr) minmax(520px, 1.28fr);
  align-items: start;
  gap: clamp(28px, 4.8vw, 66px);
}

.story-steps {
  display: grid;
  border-top: 1px solid var(--story-line);
}

.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  min-height: 174px;
  border: 0;
  border-bottom: 1px solid var(--story-line);
  background: transparent;
  padding: 26px 18px 26px 0;
  color: var(--story-text);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 240ms ease,
    color 240ms ease,
    padding 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-pin .story-step {
  min-height: clamp(108px, 13.2vh, 126px);
  padding-block: 16px;
}

.story-step::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -18px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(var(--mint), #7062f2);
  content: "";
  opacity: 0;
  transform: scaleY(0.2);
  transition:
    opacity 220ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-step:hover,
.story-step.is-active {
  background: linear-gradient(90deg, rgba(100, 84, 255, 0.09), transparent 88%);
  padding-left: 10px;
}

.story-step.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.story-step:focus-visible {
  z-index: 1;
  outline: 3px solid rgba(79, 242, 197, 0.42);
  outline-offset: 4px;
}

.story-step-number {
  color: #5f6a82;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  transition: color 220ms ease;
}

.story-step.is-active .story-step-number {
  color: var(--mint);
}

.story-step-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.story-step-copy small {
  color: #8174ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-step-copy strong {
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -0.03em;
  line-height: 1.17;
}

.story-step-copy > span {
  color: var(--story-muted);
  font-size: 13px;
  line-height: 1.58;
}

.story-visual {
  position: sticky;
  top: 102px;
}

.story-mobile-controls {
  display: none;
}

.story-control-button,
.story-control-dot {
  border: 0;
  color: inherit;
  cursor: pointer;
}

.story-control-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--story-line);
  border-radius: 12px;
  background: var(--story-panel);
  color: var(--story-text);
  font-size: 18px;
  font-weight: 850;
}

.story-control-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.story-control-current {
  color: var(--story-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.story-control-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.story-control-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--story-line);
  padding: 0;
  transition:
    width 180ms ease,
    background-color 180ms ease;
}

.story-control-dot.is-active {
  width: 22px;
  background: var(--mint);
}

.story-control-button:focus-visible,
.story-control-dot:focus-visible {
  outline: 3px solid rgba(79, 242, 197, 0.55);
  outline-offset: 3px;
}

.story-pin .story-visual {
  position: relative;
  top: auto;
}

.story-stage {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 90% 5%, rgba(100, 84, 255, 0.2), transparent 36%),
    var(--story-panel);
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  color: var(--story-text);
  padding: 23px;
}

.story-pin .story-stage {
  min-height: clamp(490px, 58vh, 540px);
}

.story-stage::after {
  position: absolute;
  z-index: 4;
  right: -110px;
  bottom: -130px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(79, 242, 197, 0.07);
  content: "";
  filter: blur(30px);
  pointer-events: none;
}

.story-stage-header,
.story-stage-header > div,
.story-stage-header > div > span {
  display: flex;
  align-items: center;
}

.story-stage-header {
  position: relative;
  z-index: 5;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--story-line);
}

.story-stage-header > div {
  gap: 10px;
}

.story-stage-header img {
  border-radius: 9px;
}

.story-stage-header > div > span {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-size: 11px;
  font-weight: 820;
}

.story-stage-header small {
  color: var(--story-muted);
  font-size: 7px;
  font-weight: 650;
}

.story-stage-status {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(79, 242, 197, 0.16);
  border-radius: 999px;
  background: rgba(79, 242, 197, 0.06);
  padding: 7px 10px;
  color: #71e5c7;
  font-size: 8px;
  font-weight: 760;
}

.story-stage-status i {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
}

.story-stage-status i::after {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(79, 242, 197, 0.38);
  border-radius: 50%;
  content: "";
  animation: story-status-ping 2.4s ease-out infinite;
}

.story-stage:not(.is-in-view) .story-stage-status i::after {
  animation-play-state: paused;
}

.story-pipeline {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}

.story-pipeline span {
  border: 1px solid var(--story-line);
  border-radius: 999px;
  background: var(--story-surface);
  padding: 6px 9px;
  color: #68748c;
  font-size: 7px;
  font-weight: 830;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    border-color 300ms ease,
    background-color 300ms ease,
    color 300ms ease,
    transform 300ms ease;
}

.story-pipeline span.is-active {
  border-color: rgba(100, 84, 255, 0.46);
  background: rgba(100, 84, 255, 0.17);
  color: #d6d1ff;
  transform: translateY(-2px);
}

.story-pipeline i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--story-line);
}

.story-pipeline i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  content: "";
  opacity: 0;
  transform: translateX(-100%);
}

.story-stage[data-step="1"] .story-pipeline i:nth-of-type(1)::after,
.story-stage[data-step="2"] .story-pipeline i:nth-of-type(-n + 2)::after,
.story-stage[data-step="3"] .story-pipeline i::after {
  opacity: 1;
  animation: pipeline-flow 1.2s ease-in-out both;
}

.story-scenes {
  position: relative;
  z-index: 3;
  min-height: 448px;
}

.story-pin .story-scenes {
  min-height: clamp(345px, 41vh, 385px);
}

.story-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 320ms ease,
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-scene.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.scene-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}

.scene-heading > span {
  font-size: 12px;
  font-weight: 820;
}

.scene-heading > small {
  color: var(--story-muted);
  font-size: 8px;
}

.scene-order-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(79, 242, 197, 0.14);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(79, 242, 197, 0.07), var(--story-surface));
  padding: 15px;
}

.story-stage.is-in-view .story-scene.is-active .scene-order-card {
  animation: story-card-arrive 580ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.scene-order-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(79, 242, 197, 0.11);
  color: var(--mint);
  font-weight: 900;
}

.scene-order-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.scene-order-card small,
.scene-order-card span {
  overflow: hidden;
  color: var(--story-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-order-card strong {
  font-size: 12px;
}

.scene-order-card > b {
  font-size: 14px;
  white-space: nowrap;
}

.scene-chart {
  display: grid;
  grid-template-columns: 0.48fr 1fr;
  min-height: 230px;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  border: 1px solid var(--story-line);
  border-radius: 16px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 44px, rgba(255, 255, 255, 0.035) 45px),
    var(--story-surface);
  padding: 23px;
}

.scene-chart-copy {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.scene-chart-copy > span {
  color: var(--story-muted);
  font-size: 9px;
}

.scene-chart-copy > strong {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -0.05em;
}

.scene-chart-copy strong small {
  color: var(--mint);
  font-size: 10px;
  letter-spacing: 0;
}

.scene-chart-bars {
  display: flex;
  height: 170px;
  align-items: end;
  justify-content: space-around;
  gap: 10px;
}

.scene-chart-bars i {
  width: 24px;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, rgba(100, 84, 255, 0.2), #7567ef);
  opacity: 0.75;
  transform-origin: bottom;
}

.story-stage.is-in-view .story-scene.is-active .scene-chart-bars i {
  animation: story-bar-grow 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--bar-index, 0) * 65ms);
}

.scene-chart-bars i:nth-child(2) {
  --bar-index: 1;
}

.scene-chart-bars i:nth-child(3) {
  --bar-index: 2;
}

.scene-chart-bars i:nth-child(4) {
  --bar-index: 3;
}

.scene-chart-bars i:nth-child(5) {
  --bar-index: 4;
}

.scene-chart-bars i:nth-child(6) {
  --bar-index: 5;
}

.scene-chart-bars i:nth-child(7) {
  --bar-index: 6;
}

.scene-chart-bars .is-current {
  background: linear-gradient(to top, #5f50e9, #9e94ff);
  box-shadow: 0 0 20px rgba(100, 84, 255, 0.33);
  opacity: 1;
}

.scene-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  color: var(--story-muted);
  font-size: 8px;
}

.scene-source span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 242, 197, 0.09);
  color: var(--mint);
  font-size: 8px;
  font-weight: 900;
}

.risk-signal-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 111, 145, 0.2);
  border-radius: 17px;
  background:
    linear-gradient(110deg, rgba(255, 111, 145, 0.09), rgba(255, 198, 91, 0.045)),
    var(--story-surface);
  padding: 18px;
}

.story-stage.is-in-view .story-scene.is-active .risk-signal-preview {
  animation: story-card-arrive 580ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.risk-signal-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.risk-signal-preview-head span {
  color: var(--story-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.risk-signal-preview-head b {
  border-radius: 999px;
  background: rgba(255, 111, 145, 0.14);
  padding: 6px 9px;
  color: #ff9db4;
  font-size: 7px;
  font-weight: 850;
}

.risk-signal-preview > strong {
  font-size: 17px;
}

.risk-signal-preview p,
.risk-signal-preview small {
  margin: 0;
  color: var(--story-muted);
  font-size: 9px;
  line-height: 1.55;
}

.risk-signal-preview small b {
  color: var(--story-text);
}

.stock-demand-panel {
  display: flex;
  flex: 1;
  min-height: 190px;
  flex-direction: column;
  gap: 14px;
  margin-top: 13px;
  border: 1px solid var(--story-line);
  border-radius: 17px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255, 255, 255, 0.035) 40px),
    var(--story-surface);
  padding: 17px;
}

.stock-demand-head,
.stock-demand-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stock-demand-head span {
  font-size: 10px;
  font-weight: 820;
}

.stock-demand-head small,
.stock-demand-legend {
  color: var(--story-muted);
  font-size: 8px;
}

.stock-demand-bars {
  display: grid;
  min-height: 112px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.stock-demand-bars > span {
  display: grid;
  height: 128px;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 5px;
}

.stock-demand-bars i,
.stock-demand-bars b {
  display: block;
  border-radius: 7px 7px 2px 2px;
  transform-origin: bottom;
}

.stock-demand-bars i {
  height: var(--demand);
  background: linear-gradient(to top, #5f50e9, #a79eff);
  box-shadow: 0 0 18px rgba(100, 84, 255, 0.22);
}

.stock-demand-bars b {
  height: var(--stock);
  background: linear-gradient(to top, rgba(79, 242, 197, 0.22), #4ff2c5);
}

.stock-demand-bars small {
  grid-column: 1 / -1;
  color: var(--story-muted);
  font-size: 7px;
  text-align: center;
}

.stock-demand-legend {
  justify-content: flex-start;
}

.stock-demand-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.stock-demand-legend i,
.stock-demand-legend b {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.stock-demand-legend i {
  background: #8174ff;
}

.stock-demand-legend b {
  background: var(--mint);
}

.story-stage.is-in-view .story-scene.is-active .stock-demand-bars i,
.story-stage.is-in-view .story-scene.is-active .stock-demand-bars b {
  animation: story-bar-grow 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.demand-map {
  position: relative;
  display: grid;
  width: min(100%, 330px);
  height: 220px;
  place-items: center;
  align-self: center;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(100, 84, 255, 0.18), transparent 62%),
    var(--story-surface);
}

.demand-map strong {
  z-index: 2;
  display: flex;
  width: 82px;
  height: 82px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(100, 84, 255, 0.38);
  border-radius: 50%;
  background: var(--story-panel);
  box-shadow: 0 14px 40px rgba(38, 27, 128, 0.26);
  color: #a79eff;
  font-size: 18px;
}

.demand-map strong small {
  color: var(--story-muted);
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.demand-orbit {
  position: absolute;
  border: 1px solid rgba(100, 84, 255, 0.2);
  border-radius: 50%;
}

.orbit-one {
  width: 150px;
  height: 150px;
}

.orbit-two {
  width: 230px;
  height: 230px;
}

.demand-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 14px rgba(79, 242, 197, 0.65);
}

.point-one {
  top: 40px;
  left: 80px;
}

.point-two {
  right: 67px;
  bottom: 53px;
}

.point-three {
  top: 76px;
  right: 34px;
}

.story-stage.is-in-view .story-scene.is-active .demand-point {
  animation: demand-point-in 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.story-stage.is-in-view .story-scene.is-active .point-two {
  animation-delay: 140ms;
}

.story-stage.is-in-view .story-scene.is-active .point-three {
  animation-delay: 280ms;
}

.deficit-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}

.deficit-equation > span {
  display: flex;
  min-height: 68px;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--story-line);
  border-radius: 12px;
  background: var(--story-surface);
  padding: 10px;
}

.deficit-equation small {
  color: var(--story-muted);
  font-size: 7px;
}

.deficit-equation strong {
  font-size: 15px;
}

.deficit-equation > i {
  color: #566179;
  font-size: 12px;
  font-style: normal;
}

.deficit-equation .is-critical {
  border-color: rgba(255, 111, 145, 0.22);
  background: rgba(255, 111, 145, 0.07);
}

.deficit-equation .is-critical strong {
  color: #ff8ba7;
}

.telegram-scene {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(150px, 0.42fr);
  align-items: center;
  gap: 28px;
  min-height: 430px;
}

.story-pin .telegram-scene {
  min-height: clamp(350px, 43vh, 390px);
}

.telegram-phone {
  width: 100%;
  max-width: 330px;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(122, 170, 229, 0.22);
  border-radius: 24px;
  background: #d9e8f4;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  color: #192737;
  padding: 10px;
}

.telegram-phone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 12px;
  color: #263749;
  font-size: 10px;
  font-weight: 850;
}

.telegram-phone-bar i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: url("/brand/sellerstatus-logo.png") center / cover;
}

.telegram-phone-bar small {
  margin-left: auto;
  color: #718399;
  font-size: 8px;
}

.telegram-bubble {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 15px 15px 5px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(32, 54, 78, 0.13);
  padding: 17px;
}

.story-stage.is-in-view .story-scene.is-active .telegram-bubble {
  animation: telegram-bubble-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.telegram-bubble strong {
  font-size: 13px;
}

.telegram-bubble p {
  margin: 0 0 3px;
  color: #536477;
  font-size: 9px;
}

.telegram-bubble > span {
  color: #4d6075;
  font-size: 9px;
}

.telegram-bubble > b {
  margin-top: 4px;
  border-radius: 9px;
  background: #fff1d9;
  padding: 9px 10px;
  color: #865318;
  font-size: 10px;
}

.telegram-bubble button {
  border: 0;
  border-radius: 9px;
  background: #5c8fc4;
  padding: 10px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.telegram-explain {
  display: grid;
  gap: 13px;
}

.telegram-explain span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--story-muted);
  font-size: 10px;
  font-weight: 750;
}

.telegram-explain i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(100, 84, 255, 0.25);
  border-radius: 8px;
  background: rgba(100, 84, 255, 0.08);
  color: #9d93ff;
  font-size: 8px;
  font-style: normal;
}

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

.result-metrics > span {
  display: flex;
  min-height: 105px;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--story-line);
  border-radius: 14px;
  background: var(--story-surface);
  padding: 14px;
}

.result-metrics small {
  color: var(--story-muted);
  font-size: 8px;
}

.result-metrics strong {
  font-size: 26px;
  letter-spacing: -0.04em;
}

.result-metrics b {
  color: var(--mint);
  font-size: 8px;
}

.result-metrics .negative {
  color: #ff8ba7;
}

.story-stage.is-in-view .story-scene.is-active .result-metrics > span {
  animation: metric-rise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.story-stage.is-in-view .story-scene.is-active .result-metrics > span:nth-child(2) {
  animation-delay: 90ms;
}

.story-stage.is-in-view .story-scene.is-active .result-metrics > span:nth-child(3) {
  animation-delay: 180ms;
}

.result-insight {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 13px;
  border: 1px solid rgba(255, 198, 91, 0.18);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(255, 198, 91, 0.08), var(--story-surface));
  padding: 17px;
}

.result-insight-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 198, 91, 0.12);
  color: var(--yellow);
  font-weight: 900;
}

.result-insight > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.result-insight small,
.result-insight p {
  color: var(--story-muted);
  font-size: 8px;
}

.result-insight p {
  margin: 0;
  line-height: 1.45;
}

.result-insight strong {
  font-size: 12px;
}

.accuracy-tag {
  border: 1px solid rgba(79, 242, 197, 0.18);
  border-radius: 999px;
  background: rgba(79, 242, 197, 0.07);
  padding: 7px 9px;
  color: #72e5c8;
  font-size: 7px;
  font-weight: 800;
}

.result-health {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 15px;
  background: var(--story-line);
}

.result-health-head,
.result-health > span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: var(--story-panel);
  padding: 9px 12px;
}

.result-health-head {
  grid-template-columns: 1fr auto;
  background: var(--story-panel-soft);
  font-size: 8px;
  font-weight: 800;
}

.result-health-head small,
.result-health > span small {
  color: var(--story-muted);
  font-size: 7px;
}

.result-health > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 7px rgba(79, 242, 197, 0.44);
}

.result-health > span strong {
  font-size: 8px;
}

.story-stage.is-in-view .story-scene.is-active .result-health > span {
  animation: metric-rise 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.story-stage.is-in-view .story-scene.is-active .result-health > span:nth-child(3) {
  animation-delay: 80ms;
}

.story-stage.is-in-view .story-scene.is-active .result-health > span:nth-child(4) {
  animation-delay: 160ms;
}

.result-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  color: var(--story-muted);
  font-size: 8px;
}

.result-footer span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.result-footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(79, 242, 197, 0.5);
}

.proof-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 82px;
  border-top: 1px solid var(--story-line, rgba(255, 255, 255, 0.1));
  border-bottom: 1px solid var(--story-line, rgba(255, 255, 255, 0.1));
}

.proof-rail article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 27px 24px 28px 0;
}

.proof-rail article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 24px;
}

.proof-rail > article > span {
  color: var(--mint);
  font-size: 9px;
  font-weight: 850;
}

.proof-rail article div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proof-rail strong {
  color: #f4f5fb;
  font-size: 14px;
}

.proof-rail p {
  margin: 0;
  color: #8f99af;
  font-size: 11px;
  line-height: 1.55;
}

.steps-grid li {
  min-height: 405px;
  cursor: default;
}

.steps-grid li::after {
  display: none;
}

.steps-grid li.is-active {
  z-index: auto;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.steps-grid li.is-active .step-icon {
  background: #eeedff;
  box-shadow: none;
  color: #5546d2;
  transform: none;
}

.step-motion {
  position: absolute;
  right: 30px;
  bottom: 27px;
  left: 30px;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid #e2e5ed;
  border-radius: 13px;
  background: #f7f8fc;
  padding: 11px 12px;
  color: #72798a;
  font-size: 9px;
  font-weight: 760;
}

.step-motion strong {
  color: #34394a;
  font-size: 9px;
}

.step-motion-start i {
  position: relative;
  height: 2px;
  flex: 1;
  overflow: hidden;
  border-radius: 99px;
  background: #dfe3ec;
}

.step-motion-start i b {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6152e5;
  box-shadow: 0 0 0 5px rgba(97, 82, 229, 0.1);
  transform: translateX(0);
  transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.steps-grid li:hover .step-motion-start i b {
  transform: translateX(clamp(55px, 8vw, 105px));
}

.step-motion-token span {
  color: #525a6d;
  letter-spacing: 0.08em;
}

.step-motion-token i {
  width: 1px;
  height: 20px;
  margin-left: auto;
  background: #d9dde7;
}

.step-motion-token strong {
  color: #17815e;
  opacity: 0.55;
  transform: translateX(7px);
  transition:
    opacity 300ms ease,
    transform 360ms ease;
}

.steps-grid li:hover .step-motion-token strong {
  opacity: 1;
  transform: none;
}

.step-motion-result {
  justify-content: center;
}

.step-motion-result span,
.step-motion-result strong {
  border-radius: 8px;
  background: #eceaff;
  padding: 7px 9px;
  color: #5547cd;
}

.step-motion-result i {
  color: #9da4b4;
  font-style: normal;
}

.step-motion-result b {
  position: absolute;
  top: 5px;
  right: 8px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #ff6f91;
  color: #fff;
  font-size: 7px;
  transform: scale(0.82);
  transition: transform 260ms ease;
}

.steps-grid li:hover .step-motion-result b {
  transform: scale(1.15);
}

.faq-question > span {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.faq-question > span::before,
.faq-question > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.faq-question > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-question > span {
  transform: rotate(45deg);
}

html[data-theme="light"] body:not(.legal-page) .preview-sync-line {
  border-color: #dce4ef;
  background: #fff;
  color: #425168;
}

html[data-theme="light"] body:not(.legal-page) .preview-sync-line small {
  color: #7b879a;
}

html[data-theme="light"] body:not(.legal-page) .story-shell {
  --story-line: rgba(17, 21, 38, 0.1);
  --story-muted: #637087;
  --story-panel: #fff;
  --story-panel-soft: #f3f6fa;
  --story-surface: rgba(17, 21, 38, 0.035);
  --story-text: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .story-step:hover,
html[data-theme="light"] body:not(.legal-page) .story-step.is-active {
  background: linear-gradient(90deg, rgba(100, 84, 255, 0.08), transparent 88%);
}

html[data-theme="light"] body:not(.legal-page) .story-stage {
  background:
    linear-gradient(rgba(49, 67, 101, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 67, 101, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 90% 5%, rgba(100, 84, 255, 0.13), transparent 36%),
    var(--story-panel);
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow:
    0 30px 72px rgba(49, 67, 101, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] body:not(.legal-page) .story-pipeline span.is-active {
  color: #4f40c5;
}

html[data-theme="light"] body:not(.legal-page) .scene-chart {
  background:
    repeating-linear-gradient(to bottom, transparent 0 44px, rgba(49, 67, 101, 0.045) 45px),
    var(--story-surface);
}

html[data-theme="light"] body:not(.legal-page) .stock-demand-panel {
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(49, 67, 101, 0.045) 40px),
    var(--story-surface);
}

html[data-theme="light"] body:not(.legal-page) .demand-map strong {
  background: #fff;
}

html[data-theme="light"] body:not(.legal-page) .proof-rail {
  border-color: rgba(17, 21, 38, 0.1);
}

html[data-theme="light"] body:not(.legal-page) .proof-rail article + article {
  border-color: rgba(17, 21, 38, 0.1);
}

html[data-theme="light"] body:not(.legal-page) .proof-rail strong {
  color: #171b2d;
}

html[data-theme="light"] body:not(.legal-page) .proof-rail p {
  color: #626d84;
}

html[data-theme="light"] body:not(.legal-page) .story-shell {
  --story-line: rgba(44, 52, 78, 0.14);
  --story-muted: #536077;
  --story-panel: #fdfdff;
  --story-panel-soft: #edf1f7;
  --story-surface: rgba(64, 73, 103, 0.065);
}

html[data-theme="light"] body:not(.legal-page) .result-insight,
html[data-theme="light"] body:not(.legal-page) .result-metrics > span,
html[data-theme="light"] body:not(.legal-page) .risk-signal-preview,
html[data-theme="light"] body:not(.legal-page) .stock-demand-panel,
html[data-theme="light"] body:not(.legal-page) .scene-order-card,
html[data-theme="light"] body:not(.legal-page) .deficit-equation > span {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

html[data-theme="dark"] body:not(.legal-page) .problem-section {
  background:
    radial-gradient(circle at 15% 0%, rgba(100, 84, 255, 0.08), transparent 28%),
    #080d1a;
  color: #f5f7ff;
}

html[data-theme="dark"] body:not(.legal-page) .how-section {
  background:
    radial-gradient(circle at 84% 14%, rgba(100, 84, 255, 0.09), transparent 27%),
    #090e1c;
  color: #f5f7ff;
}

html[data-theme="dark"] body:not(.legal-page) .faq-section {
  background:
    radial-gradient(circle at 8% 22%, rgba(100, 84, 255, 0.07), transparent 24%),
    #090e1c;
  color: #f5f7ff;
}

html[data-theme="dark"] body:not(.legal-page) .problem-copy > p,
html[data-theme="dark"] body:not(.legal-page) .section-heading-centered p:last-child,
html[data-theme="dark"] body:not(.legal-page) .faq-grid > div:first-child > p:not(.eyebrow),
html[data-theme="dark"] body:not(.legal-page) .faq-answer p {
  color: #9ba6bd;
}

html[data-theme="dark"] body:not(.legal-page) .steps-grid {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body:not(.legal-page) .steps-grid li,
html[data-theme="dark"] body:not(.legal-page) .steps-grid li.is-active {
  background: #0e1628;
  color: #f5f7ff;
}

html[data-theme="dark"] body:not(.legal-page) .steps-grid p {
  color: #939eb5;
}

html[data-theme="dark"] body:not(.legal-page) .step-number {
  color: #69748c;
}

html[data-theme="dark"] body:not(.legal-page) .step-icon {
  background: rgba(100, 84, 255, 0.13);
  color: #9f94ff;
}

html[data-theme="dark"] body:not(.legal-page) .step-motion {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] body:not(.legal-page) .step-motion span,
html[data-theme="dark"] body:not(.legal-page) .step-motion strong {
  color: #bdc5d6;
}

html[data-theme="dark"] body:not(.legal-page) .step-motion-start i {
  background: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] body:not(.legal-page) .step-motion-token i {
  background: rgba(255, 255, 255, 0.11);
}

html[data-theme="dark"] body:not(.legal-page) .step-motion-token strong {
  color: #68d9ba;
}

html[data-theme="dark"] body:not(.legal-page) .step-motion-result span,
html[data-theme="dark"] body:not(.legal-page) .step-motion-result strong {
  background: rgba(100, 84, 255, 0.15);
  color: #b7afff;
}

html[data-theme="dark"] body:not(.legal-page) .faq-list,
html[data-theme="dark"] body:not(.legal-page) .faq-item {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body:not(.legal-page) .faq-question {
  color: #f5f7ff;
}

html[data-theme="dark"] body:not(.legal-page) .faq-question > span {
  background: rgba(100, 84, 255, 0.14);
  color: #aaa1ff;
}

html[data-theme="dark"] body:not(.legal-page) .faq-item.is-open .faq-question > span {
  background: #6253dc;
  color: #fff;
}

html[data-theme="dark"] body:not(.legal-page) .final-cta {
  border-top: 1px solid rgba(130, 112, 255, 0.16);
  border-bottom: 1px solid rgba(130, 112, 255, 0.13);
  background:
    radial-gradient(circle at 82% 22%, rgba(108, 88, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #0c1224, #15123a 56%, #10162b);
}

html[data-theme="dark"] body:not(.legal-page) .final-cta .button-light {
  border-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(135deg, #6958ef, #7a67ff);
  box-shadow: 0 16px 40px rgba(61, 42, 181, 0.28);
  color: #fff;
}

html[data-theme="light"] body:not(.legal-page) .how-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(100, 84, 255, 0.12), transparent 27%),
    linear-gradient(180deg, #f8f9fc, #f1efff 48%, #f8f9fc);
}

html[data-theme="light"] body:not(.legal-page) .final-cta {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 29%),
    linear-gradient(135deg, #5646dd, #6d5bf2 54%, #7b69ff);
}

@keyframes sync-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.65);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes story-status-ping {
  0% {
    opacity: 0.8;
    transform: scale(0.7);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes pipeline-flow {
  to {
    transform: translateX(100%);
  }
}

@keyframes story-card-arrive {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes story-bar-grow {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes demand-point-in {
  from {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    opacity: 1;
    transform: scale(1.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes telegram-bubble-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1040px) {
  .product-preview {
    animation: none;
  }

  .story-scroll {
    height: auto;
  }

  .story-pin {
    position: relative;
    top: auto;
  }

  .story-pin::before,
  .story-pin::after {
    display: none;
  }

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

  .product-preview:hover {
    transform: translateY(-4px);
  }

  .story-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .story-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--story-line);
    border-radius: 19px;
    background: var(--story-line);
  }

  .story-step,
  .story-pin .story-step {
    min-height: 132px;
    border: 0;
    background: var(--story-panel);
    padding: 20px;
  }

  .story-step::before {
    top: auto;
    right: 22px;
    bottom: 0;
    left: 22px;
    width: auto;
    height: 3px;
    transform: scaleX(0.2);
  }

  .story-step.is-active::before {
    transform: scaleX(1);
  }

  .story-step:hover,
  .story-step.is-active {
    padding-left: 20px;
  }

  .story-step:nth-child(1) {
    border-top-left-radius: 18px;
  }

  .story-step:nth-child(2) {
    border-top-right-radius: 18px;
  }

  .story-step:nth-child(3) {
    border-bottom-left-radius: 18px;
  }

  .story-step:nth-child(4) {
    border-bottom-right-radius: 18px;
  }

  .story-visual {
    position: relative;
    top: auto;
  }

  .story-pin .story-stage {
    min-height: 570px;
  }

  .story-pin .story-scenes {
    min-height: 418px;
  }

  .story-pin .telegram-scene {
    min-height: 400px;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  body:not(.legal-page) {
    padding-bottom: 74px;
  }

  .quick-nav {
    top: auto;
    right: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 4px;
    transform: translateX(50%);
  }

  .quick-nav a {
    width: 42px;
    height: 42px;
  }

  .quick-nav a::before {
    display: none;
  }

  .quick-nav a:hover,
  .quick-nav a.is-active {
    transform: none;
  }

  .back-to-top {
    top: auto;
    right: 20px;
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
    width: 44px;
    height: 44px;
  }

  .back-to-top::before {
    display: none;
  }
}

@media (max-width: 760px) {
  body:not(.legal-page) {
    padding-bottom: 74px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .theme-toggle {
    width: 39px;
    height: 39px;
    border-radius: 10px;
  }

  .header-actions .button-small {
    gap: 7px;
    padding-inline: 12px;
  }

  .quick-nav {
    top: auto;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 4px;
    transform: translateX(50%);
  }

  .quick-nav a {
    width: 40px;
    height: 40px;
  }

  .quick-nav a::before {
    display: none;
  }

  .quick-nav a:hover,
  .quick-nav a.is-active {
    transform: none;
  }

  .back-to-top {
    top: auto;
    right: 14px;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
    width: 44px;
    height: 44px;
  }

  .back-to-top::before {
    display: none;
  }

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

  .signal-group {
    gap: 30px;
    padding-right: 30px;
  }

  .signal-group span {
    font-size: 11px;
  }

  .preview-sync-line {
    font-size: 7px;
  }

  .story-shell {
    gap: 18px;
  }

  .story-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    border: 1px solid var(--story-line);
    border-radius: 17px;
    background: var(--story-line);
    gap: 1px;
    padding: 0;
  }

  .story-step,
  .story-pin .story-step {
    min-width: 0;
    min-height: 104px;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: var(--story-panel);
    padding: 14px;
  }

  .story-step::before {
    right: 14px;
    left: 14px;
  }

  .story-step:hover,
  .story-step.is-active {
    padding-left: 14px;
  }

  .story-step-copy {
    gap: 5px;
  }

  .story-step-copy small {
    font-size: 7px;
  }

  .story-step-copy strong {
    font-size: 13px;
  }

  .story-step-copy > span {
    display: none;
  }

  .story-mobile-controls {
    display: grid;
    grid-template-columns: 42px auto 1fr 42px;
    align-items: center;
    gap: 12px;
  }

  .story-stage,
  .story-pin .story-stage {
    min-height: 545px;
    border-radius: 21px;
    padding: 16px;
  }

  .story-stage-status {
    padding: 6px 8px;
    font-size: 7px;
  }

  .story-pipeline {
    gap: 4px;
    margin: 14px 0;
  }

  .story-pipeline span {
    padding: 5px 6px;
    font-size: 6px;
  }

  .story-scenes,
  .story-pin .story-scenes {
    min-height: 418px;
  }

  .scene-order-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .scene-order-icon {
    width: 36px;
    height: 36px;
  }

  .scene-order-card > b {
    grid-column: 2;
    font-size: 12px;
  }

  .scene-chart {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 225px;
    padding: 17px;
  }

  .scene-chart-copy {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }

  .scene-chart-copy > strong {
    font-size: 30px;
    text-align: right;
  }

  .scene-chart-bars {
    height: 130px;
  }

  .scene-chart-bars i {
    width: 20px;
  }

  .demand-map {
    height: 205px;
  }

  .risk-signal-preview {
    padding: 14px;
  }

  .stock-demand-panel {
    min-height: 165px;
    gap: 11px;
    padding: 14px;
  }

  .stock-demand-bars {
    min-height: 94px;
    gap: 10px;
  }

  .stock-demand-bars > span {
    height: 103px;
  }

  .deficit-equation {
    gap: 4px;
  }

  .deficit-equation > span {
    min-height: 70px;
    padding: 7px;
  }

  .deficit-equation small {
    font-size: 6px;
  }

  .deficit-equation strong {
    font-size: 12px;
  }

  .telegram-scene,
  .story-pin .telegram-scene {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 410px;
  }

  .telegram-phone {
    max-width: 100%;
    justify-self: center;
  }

  .telegram-explain {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .telegram-explain span {
    flex-direction: column;
    gap: 6px;
    font-size: 8px;
    text-align: center;
  }

  .result-metrics {
    gap: 6px;
  }

  .result-metrics > span {
    min-height: 94px;
    padding: 10px;
  }

  .result-metrics strong {
    font-size: 21px;
  }

  .result-insight {
    grid-template-columns: 38px 1fr;
    padding: 13px;
  }

  .result-insight-mark {
    width: 36px;
    height: 36px;
  }

  .accuracy-tag {
    grid-column: 2;
    justify-self: start;
  }

  .proof-rail {
    grid-template-columns: 1fr;
    margin-top: 50px;
  }

  .proof-rail article {
    padding: 22px 0;
  }

  .proof-rail article + article {
    border-top: 1px solid var(--story-line);
    border-left: 0;
    padding-left: 0;
  }

  .steps-grid li {
    min-height: 390px;
  }

  .legal-actions {
    gap: 8px;
    margin-left: auto;
  }

  .legal-actions .theme-toggle {
    width: 39px;
    height: 39px;
  }

  .legal-actions .text-link {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .brand-name {
    display: none;
  }

  .button-small .telegram-mark {
    display: none;
  }

  .preview-periods button {
    font-size: 8px;
  }

  .legal-actions .text-link {
    font-size: 12px;
  }

  .faq-question {
    min-height: 68px;
    font-size: 15px;
  }

  .faq-answer p {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
}