:root {
  --bg: #050506;
  --surface: #0b0b0d;
  --surface2: #101013;
  --text: #f7f7f5;
  --muted: #969699;
  --line: rgba(255, 255, 255, 0.055);
  --line2: rgba(255, 255, 255, 0.11);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1220px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 94px;
}
body {
  margin: 0;
  background:
    radial-gradient(1000px 600px at 62% -10%, rgba(255, 255, 255, 0.07), transparent 70%),
    var(--bg);
  color: var(--text);
  font:
    400 16px/1.65 'Helvetica Neue',
    'Segoe UI',
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.024;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
::selection {
  background: #fff;
  color: #000;
}
.wrap {
  width: min(var(--max), calc(100% - 44px));
  margin: auto;
}
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 10px 14px;
  border-radius: 10px;
}
.skip:focus {
  top: 12px;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding: 16px 0 20px;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 6, 0.96),
    rgba(5, 5, 6, 0.78),
    transparent
  );
  transition: transform 0.55s var(--ease);
}
.site-nav.hidden {
  transform: translateY(-120%);
}
.nav-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}
.brand img {
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
}
.brand-name {
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.16em;
  transform: translateY(1px);
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
}
.nav-links a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #808083;
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a[aria-current='page'],
.nav-links a.is-current {
  color: #fff;
}
.nav-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.lang {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang a {
  color: #666669;
  padding: 5px 3px;
}
.lang a.active {
  color: #fff;
}
.slash {
  color: #3d3d40;
}
.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    background 0.35s ease,
    border-color 0.35s ease;
}
.btn.primary,
.nav-cta {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.12);
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.012);
}
.btn:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 46px rgba(255, 255, 255, 0.17);
}
.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: #0b0b0d;
  color: #fff;
}
.menu-btn span {
  display: block;
  width: 14px;
  height: 1px;
  background: #fff;
  margin: 4px auto;
}

.page-index {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 9px;
}
.page-index button {
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #4a4a4d;
  opacity: 0.55;
  transition: 0.35s var(--ease);
}
.page-index button.active {
  background: #fff;
  opacity: 1;
  transform: scale(1.5);
}

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 135px 0 85px;
  isolation: isolate;
}
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.13), transparent 34%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.045), transparent 30%);
  filter: blur(2px);
  z-index: -2;
}
.hero:after {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 35%,
    rgba(255, 255, 255, 0.016) 43%,
    transparent 62%
  );
  animation: ambient 14s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes ambient {
  from {
    transform: scale(1) translate3d(-1%, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(1%, 1%, 0);
  }
}
.hero-content {
  max-width: 940px;
}
.hero-mark {
  width: 88px;
  height: 88px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 38px rgba(255, 255, 255, 0.2));
  animation: heroMark 1.05s var(--ease) both;
}
.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(58px, 8.3vw, 124px);
  line-height: 0.86;
  letter-spacing: -0.065em;
  font-weight: 700;
}
.hero-copy {
  max-width: 700px;
  margin: 26px auto 0;
  color: #aaa;
  font-size: clamp(15px, 1.35vw, 18px);
}
@keyframes heroMark {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}
.hero-note {
  margin-top: 15px;
  color: #68686b;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.scroll-hint {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #5f5f62;
  animation: hint 2.7s ease-in-out infinite;
}
.scroll-hint:after {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  background: linear-gradient(#888, transparent);
  margin: 9px auto 0;
}
@keyframes hint {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 5px);
  }
}

.section {
  padding: 88px 0;
}
.section-tight {
  padding: 68px 0;
}
.section.alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}
.section-head {
  max-width: 760px;
  margin-bottom: 46px;
}
.kicker {
  margin: 0 0 11px;
  color: #77777a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h2 {
  margin: 0;
  font-size: clamp(35px, 5.1vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.lead {
  margin: 15px 0 0;
  color: #949497;
  font-size: 15px;
  max-width: 690px;
}
.statement {
  min-height: 62svh;
  display: grid;
  place-items: center;
  text-align: center;
}
.statement p {
  margin: 0;
  max-width: 980px;
  font-size: clamp(36px, 6.2vw, 82px);
  line-height: 1.01;
  letter-spacing: -0.055em;
  font-weight: 600;
}
.statement span {
  color: #6d6d70;
}

.process {
  display: grid;
  grid-template-columns: 0.58fr 1.42fr;
  gap: 48px;
  align-items: stretch;
}
.process-copy {
  padding-top: 8px;
}
.process-step {
  padding: 17px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: opacity 0.45s ease;
}
.process-step:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.process-step.active {
  opacity: 1;
}
.process-step:not(.active) {
  opacity: 0.34;
}
.process-step strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.process-step h3 {
  margin: 5px 0 3px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.process-step p {
  margin: 0;
  color: #77777a;
  font-size: 12px;
  max-width: 430px;
}
.process-visual {
  position: relative;
  min-height: 600px;
  border-radius: 24px;
  background: linear-gradient(155deg, #151518, #080809 72%);
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  overflow: hidden;
}
.process-visual:before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.13), transparent 27%),
    radial-gradient(circle at 30% 85%, rgba(255, 255, 255, 0.035), transparent 35%);
  filter: blur(10px);
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.07);
  }
}
.console {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 7%;
  bottom: 7%;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 17px;
  background: #080809;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
}
.console-bar {
  height: 43px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 6px;
}
.console-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4f4f52;
}
.console-bar strong {
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #67676a;
}
.console-body {
  display: grid;
  grid-template-columns: 140px 1fr;
  height: calc(100% - 43px);
}
.console-side {
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  padding: 18px 13px;
}
.console-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 20px;
}
.console-item {
  padding: 9px 9px;
  border-radius: 7px;
  color: #5f5f62;
  font-size: 10px;
  margin-bottom: 2px;
}
.console-item.active {
  background: #151518;
  color: #fff;
}
.console-main {
  padding: 23px;
}
.metric-label {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #616164;
}
.metric {
  font-size: clamp(32px, 4.7vw, 57px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 700;
  margin-top: 7px;
}
.metric-meta {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.mini {
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: #0d0d10;
  border-radius: 11px;
  padding: 11px 12px;
  min-width: 118px;
}
.mini small {
  display: block;
  color: #5f5f62;
  font-size: 8px;
}
.mini strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
.graph {
  height: 128px;
  margin-top: 11px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: #0d0d10;
  position: relative;
  overflow: hidden;
}
.graph svg {
  width: 100%;
  height: 100%;
}
.live-loop {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 9%;
  display: grid;
  gap: 8px;
}
.loop-card {
  height: 53px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 8, 9, 0.88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
  animation: loopFade 12s infinite var(--ease);
  opacity: 0.1;
  transform: translateY(8px);
}
.loop-card strong {
  font-size: 9px;
  letter-spacing: 0.09em;
}
.loop-card span {
  font-size: 10px;
  color: #7b7b7e;
}
.loop-card:nth-child(1) {
  animation-delay: 0s;
}
.loop-card:nth-child(2) {
  animation-delay: 3s;
}
.loop-card:nth-child(3) {
  animation-delay: 6s;
}
.loop-card:nth-child(4) {
  animation-delay: 9s;
}
@keyframes loopFade {
  0%,
  18% {
    opacity: 1;
    transform: none;
    filter: brightness(1.08);
  }
  25%,
  100% {
    opacity: 0.1;
    transform: translateY(8px);
    filter: brightness(0.7);
  }
}
.scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.65), transparent);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.35);
  animation: scan 4.8s linear infinite;
  left: -5%;
}
@keyframes scan {
  0% {
    left: -5%;
  }
  100% {
    left: 105%;
  }
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card {
  padding: 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  min-height: 200px;
  transition:
    transform 0.55s var(--ease),
    background 0.45s ease,
    box-shadow 0.55s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.028);
  box-shadow:
    0 25px 55px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.num {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #6f6f72;
}
.card h3 {
  margin: 28px 0 9px;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.card p {
  margin: 0;
  color: #87878a;
  font-size: 12px;
}

.data-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.data-panel {
  padding: 29px;
  border-radius: 20px;
  background: #0b0b0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.data-panel h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}
.data-panel p {
  color: #858589;
  font-size: 12px;
}
.signal {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}
.signal-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #0f0f12;
}
.signal-row span {
  color: #707074;
  font-size: 10px;
}
.signal-row strong {
  font-size: 10px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.price {
  padding: 28px;
  border-radius: 21px;
  background: #0b0b0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.price.featured {
  background: linear-gradient(145deg, #151518, #0b0b0d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 75px rgba(0, 0, 0, 0.24);
}
.tag {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #a4a4a6;
}
.price h3 {
  margin: 23px 0 5px;
  font-size: 23px;
  letter-spacing: -0.03em;
}
.period {
  color: #707074;
  font-size: 10px;
}
.price-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 23px 0 5px;
}
.code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #747478;
}
.amount {
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.055em;
}
.decimal {
  font-size: 17px;
  color: #999;
}
.price-note {
  min-height: 40px;
  color: #737377;
  font-size: 10px;
}
.price .btn {
  width: 100%;
  margin-top: 15px;
}
.currency-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}
.currency-bar span {
  font-size: 10px;
  color: #707074;
  margin-right: 3px;
}
.currency-bar button {
  border: 1px solid transparent;
  background: transparent;
  color: #6c6c6f;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.currency-bar button.active {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111114;
  color: #fff;
}
.currency-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: #666;
  font-size: 10px;
  margin-top: 13px;
}

.payment-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
}
.pay-panel {
  padding: 28px;
  border-radius: 20px;
  background: #0b0b0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.pay-panel h3 {
  margin: 0;
  font-size: 23px;
}
.pay-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 20px;
}
.pay-option {
  min-height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: #0d0d10;
  color: #fff;
  text-align: left;
  padding: 15px;
  transition:
    transform 0.45s var(--ease),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.45s var(--ease);
}
.pay-option:hover,
.pay-option.selected {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.23);
  background: #151517;
  box-shadow: 0 17px 35px rgba(0, 0, 0, 0.18);
}
.pay-option strong {
  display: block;
  font-size: 11px;
}
.pay-option span {
  display: block;
  color: #707074;
  font-size: 9px;
  margin-top: 6px;
}
.pay-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pay-big {
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.pay-side p {
  color: #757579;
  font-size: 11px;
  max-width: 300px;
}

.faq {
  max-width: 900px;
}
.faq details {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.faq details:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:after {
  content: '+';
  color: #666;
  font-size: 20px;
  font-weight: 400;
}
.faq details[open] summary:after {
  content: '−';
}
.faq details p {
  margin: 11px 0 0;
  color: #838387;
  font-size: 12px;
  max-width: 760px;
}

.contact {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 62px;
  align-items: start;
}
.contact h2 {
  font-size: clamp(45px, 5.8vw, 80px);
}
.contact-copy p {
  max-width: 420px;
  color: #858589;
  font-size: 12px;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: grid;
  gap: 6px;
}
.field.full {
  grid-column: 1/-1;
}
.field label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #87878a;
}
.field input,
.field textarea {
  width: 100%;
  background: #0b0b0d;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 12px 13px;
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.field input:focus,
.field textarea:focus {
  border-color: rgba(255, 255, 255, 0.27);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.035);
}
.check {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  color: #737377 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 10px !important;
}
.check input {
  width: auto;
  margin-top: 3px;
}
.error {
  min-height: 12px;
  color: #ff8585;
  font-size: 9px;
}
.status {
  min-height: 18px;
  color: #858589;
  font-size: 10px;
}
.status.ok {
  color: #b8efcf;
}

.footer {
  padding: 54px 0 22px;
  background: #070708;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-brand img {
  width: 29px;
  height: 29px;
  border-radius: 0;
  object-fit: contain;
}
.footer-brand span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.footer-copy {
  max-width: 340px;
  color: #646467;
  font-size: 10px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.footer-links h4 {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #858589;
}
.footer-links a {
  display: block;
  margin: 6px 0;
  color: #646467;
  font-size: 10px;
}
.footer-links a:hover {
  color: #fff;
}
.footer-bottom {
  margin-top: 32px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #4e4e51;
  font-size: 9px;
}

.checkout {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.checkout.open {
  opacity: 1;
  pointer-events: auto;
}
.checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(15px);
}
.checkout-panel {
  position: relative;
  width: min(620px, calc(100% - 28px));
  padding: 29px;
  border-radius: 23px;
  background: #0b0b0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 35px 110px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.5s var(--ease);
}
.checkout.open .checkout-panel {
  transform: none;
}
.checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 20px;
}
.checkout-summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px;
  border-radius: 13px;
  background: #111114;
  margin: 19px 0;
}
.checkout-summary span {
  font-size: 11px;
  color: #7d7d80;
}
.checkout-summary strong {
  font-size: 15px;
}
.checkout-panel .btn {
  width: 100%;
  margin-top: 15px;
}
.checkout-note {
  color: #666;
  font-size: 9px;
  margin: 12px 0 0;
}

.reveal {
  opacity: 1;
  transform: none;
}
.reveal.visible {
  animation: revealUp 0.82s var(--ease) both;
}
@keyframes revealUp {
  from {
    opacity: 0.42;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1050px) {
  .nav-links {
    gap: 13px;
  }
  .nav-links a {
    font-size: 9px;
  }
  .nav-cta {
    display: none;
  }
  .process {
    grid-template-columns: 1fr;
  }
  .process-visual {
    min-height: 540px;
  }
  .data-split,
  .payment-grid,
  .contact {
    grid-template-columns: 1fr;
  }
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-index {
    display: none;
  }
}
@media (max-width: 820px) {
  .wrap {
    width: min(var(--max), calc(100% - 30px));
  }
  .nav-links {
    display: none;
  }
  .menu-btn {
    display: block;
  }
  .nav-tools {
    margin-left: auto;
  }
  .hero {
    padding-top: 112px;
  }
  .hero h1 {
    font-size: clamp(52px, 12vw, 78px);
  }
  .grid3 {
    grid-template-columns: 1fr;
  }
  .price-grid {
    grid-template-columns: 1fr;
  }
  .pay-options {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom {
    display: block;
  }
  .footer-bottom div {
    margin-top: 5px;
  }
  .console-body {
    grid-template-columns: 92px 1fr;
  }
  .console-side {
    padding: 13px 8px;
  }
  .console-main {
    padding: 18px;
  }
  .metric-meta {
    overflow: auto;
  }
  .mini {
    min-width: 106px;
  }
}
@media (max-width: 560px) {
  .brand-name {
    font-size: 15px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .hero-mark {
    width: 75px;
    height: 75px;
  }
  .section {
    padding: 70px 0;
  }
  .section-tight {
    padding: 55px 0;
  }
  .process-visual {
    min-height: 430px;
  }
  .console {
    left: 4%;
    right: 4%;
    top: 6%;
    bottom: 6%;
  }
  .console-main {
    padding: 15px;
  }
  .metric {
    font-size: 34px;
  }
  .graph {
    height: 105px;
  }
  .live-loop {
    left: 6%;
    right: 6%;
    bottom: 6%;
  }
  .pay-options {
    grid-template-columns: 1fr;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .statement {
    min-height: 52svh;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* SYCLOPS 1.2: recorrido real, descarga y documentos públicos. */
.real-demo {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(18px, 3vw, 30px);
  background: #08090b;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.48);
  isolation: isolate;
}
.real-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.real-demo__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #08090b;
}
.real-demo__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.018);
  pointer-events: none;
  transition:
    opacity 0.85s ease,
    transform 5.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.real-demo__slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.real-demo__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-demo__slide figcaption {
  position: absolute;
  left: clamp(14px, 2.5vw, 28px);
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 26px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(13px, 2vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: #fff;
  background: rgba(7, 8, 10, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.real-demo__slide figcaption strong {
  display: block;
  margin-bottom: 3px;
  font-size: clamp(14px, 1.7vw, 20px);
}
.real-demo__slide figcaption span {
  display: block;
  max-width: 680px;
  color: #b8b9bd;
  font-size: clamp(11px, 1.15vw, 14px);
}
.real-demo__badge {
  flex: none;
  color: #d9dadc !important;
  font:
    600 10px/1.2 'JetBrains Mono',
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.real-demo__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.real-demo__controls button {
  width: 34px;
  height: 8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: rgba(255, 255, 255, 0.16);
  transition:
    width 0.45s var(--ease),
    background 0.3s ease;
}
.real-demo__controls button:hover,
.real-demo__controls button:focus-visible {
  background: rgba(255, 255, 255, 0.45);
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.real-demo__controls button.is-active {
  width: 58px;
  background: #fff;
}
.real-demo-note {
  margin: 18px auto 0;
  max-width: 820px;
  color: #8f9094;
  text-align: center;
  font-size: 13px;
}
.download-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(28px, 7vw, 92px);
  align-items: center;
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.1), transparent 38%), #0b0c0e;
}
.download-panel__mark {
  width: min(250px, 62%);
  justify-self: center;
  filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.48));
}
.download-panel h2 {
  margin: 10px 0 14px;
  font-size: clamp(34px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.download-panel p {
  color: #aaa;
}
.download-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0;
}
.download-panel__meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #c4c5c7;
  font:
    600 10px/1 'JetBrains Mono',
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.download-panel__hash {
  margin-top: 16px;
  overflow-wrap: anywhere;
  color: #6f7075 !important;
  font:
    400 10px/1.65 'JetBrains Mono',
    ui-monospace,
    monospace;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(30px, 8vw, 110px);
  align-items: start;
}
.legal-index {
  position: sticky;
  top: 110px;
  padding: 20px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: rgba(12, 12, 14, 0.72);
}
.legal-index strong,
.legal-index a {
  display: block;
}
.legal-index strong {
  margin-bottom: 13px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-index a {
  padding: 7px 0;
  color: #929397;
  font-size: 13px;
}
.legal-index a:hover,
.legal-index a:focus-visible {
  color: #fff;
}
.legal-document {
  max-width: 820px;
}
.legal-document section {
  scroll-margin-top: 110px;
  padding: 0 0 38px;
  border-bottom: 1px solid var(--line);
}
.legal-document section + section {
  padding-top: 38px;
}
.legal-document h2 {
  margin: 0 0 14px;
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: -0.025em;
}
.legal-document p,
.legal-document li {
  color: #b2b3b6;
}
.legal-document a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-version {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: #aaa;
  font:
    600 10px/1 'JetBrains Mono',
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .real-demo__slide figcaption {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .real-demo__badge {
    display: none !important;
  }
  .download-panel,
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .download-panel__mark {
    width: min(160px, 48%);
    grid-row: 1;
  }
  .legal-index {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .real-demo__slide {
    transform: none;
    transition: opacity 0.01ms linear;
  }
}

.process-step {
  min-height: 132px;
}
.process-step.active h3 {
  transform: translateX(4px);
}
.process-step h3 {
  transition: transform 0.55s var(--ease);
}

.process-visual .console {
  z-index: 2;
}
.live-loop {
  z-index: 4;
}
.scan {
  z-index: 3;
}
.process-copy {
  z-index: 5;
}

/* =========================================================
   SYCLOPS · Scrollcraft / interaction layer
   ========================================================= */
:root {
  --sc-progress: 0;
  --sc-mouse-x: 50%;
  --sc-mouse-y: 50%;
}
html {
  scroll-behavior: smooth;
}
body {
  overscroll-behavior-y: none;
}

/* The page keeps semantic flow, while off-viewport material de-emphasizes itself.
   This makes the viewport feel curated without deleting content from the DOM. */
[data-section],
.page-hero,
.section:not([data-section]) {
  position: relative;
  transition:
    opacity 0.75s var(--ease),
    transform 0.9s var(--ease),
    filter 0.75s ease;
}
[data-section].scroll-past,
[data-section].scroll-future {
  opacity: 0.3;
  transform: translate3d(0, 22px, 0) scale(0.992);
  filter: saturate(0.8);
}
[data-section].scroll-active {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Remove the previous static reveal behaviour: elements can enter AND leave the viewport. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.9s var(--ease),
    filter 0.9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.reveal.exit {
  opacity: 0;
  transform: translate3d(0, -20px, 0) scale(0.99);
  filter: blur(5px);
}

/* Interactive typography */
.title-reactive {
  position: relative;
  display: inline-block;
  isolation: isolate;
  transform: translate3d(calc((var(--tx, 0) * 1px)), calc((var(--ty, 0) * 1px)), 0);
  transition:
    transform 0.42s var(--ease),
    letter-spacing 0.42s var(--ease),
    text-shadow 0.42s ease;
}
.title-reactive:after {
  content: '';
  position: absolute;
  inset: -8% -3%;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.14),
    transparent 35%
  );
  opacity: var(--glow, 0);
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.title-reactive.is-hovered {
  --glow: 0.9;
  letter-spacing: -0.045em;
}
.title-reactive.is-hovered::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: scaleX(var(--underline, 0));
  transform-origin: center;
  transition: transform 0.55s var(--ease);
}

/* Every framed surface reacts to the pointer rather than sitting dead on the page. */
.card,
.data-panel,
.price,
.pay-panel,
.story-visual,
.process-visual {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  position: relative;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry))
    translateY(var(--lift));
  transform-style: preserve-3d;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.45s ease;
}
.card::after,
.data-panel::after,
.price::after,
.pay-panel::after,
.story-visual::after,
.process-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.085),
    transparent 32%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}
.tilt-active {
  --lift: -7px;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
.tilt-active::after {
  opacity: 1;
}

/* Scroll-progress rail */
.scroll-rail {
  position: fixed;
  right: 12px;
  top: 50%;
  width: 2px;
  height: 144px;
  transform: translateY(-50%);
  z-index: 85;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
  opacity: 0.85;
}
.scroll-rail span {
  display: block;
  width: 100%;
  height: calc(var(--sc-progress) * 100%);
  background: #fff;
  border-radius: 999px;
  transform-origin: top;
  transition: height 0.2s linear;
}
.scroll-rail .rail-label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-size: 7px;
  letter-spacing: 0.2em;
  color: #69696d;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Process demo: controlled depth, one active card, no collisions. */
.process {
  min-height: 650px;
}
.process-copy {
  position: sticky;
  top: 24vh;
  align-self: start;
}
.process-step {
  cursor: pointer;
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--ease),
    border-color 0.45s ease;
  padding-left: 0;
}
.process-step:not(.active) {
  transform: translateX(0);
}
.process-step.active {
  transform: translateX(10px);
}
.process-step.active strong {
  color: #fff;
}
.process-step h3 {
  transition:
    transform 0.55s var(--ease),
    letter-spacing 0.55s var(--ease);
}
.process-step.active h3 {
  transform: none;
  letter-spacing: -0.02em;
}
.process-visual {
  height: clamp(560px, 68vh, 730px);
  min-height: 560px;
  position: sticky;
  top: 15vh;
}
.console {
  transition:
    transform 0.75s var(--ease),
    box-shadow 0.75s var(--ease);
}
.process-visual[data-stage='2'] .console {
  transform: translate3d(0, -5px, 0) rotateX(1deg);
}
.process-visual[data-stage='3'] .console {
  transform: translate3d(0, -10px, 0) rotateX(1.5deg);
}
.live-loop {
  bottom: 8%;
  gap: 0;
  min-height: 53px;
  display: block;
}
.loop-card {
  position: absolute;
  inset: 0;
  height: 53px;
  display: flex;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.98);
  animation: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s var(--ease),
    filter 0.55s ease,
    box-shadow 0.55s ease;
}
.loop-card[data-active='true'] {
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.loop-card:not([data-active='true']) {
  pointer-events: none;
}
.loop-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  border-radius: 99px;
}
.loop-progress span {
  display: block;
  height: 100%;
  width: 25%;
  background: #fff;
  transform-origin: left;
  transition: transform 0.75s var(--ease);
  transform: scaleX(var(--loop-p, 0.25));
}
.process-visual[data-stage='2'] .loop-progress span {
  transform: scaleX(0.5);
}
.process-visual[data-stage='3'] .loop-progress span {
  transform: scaleX(0.75);
}
.process-visual[data-stage='4'] .loop-progress span {
  transform: scaleX(1);
}
.scan {
  opacity: 0.38;
}

/* Product figures visibly respond to the story state. */
.process-visual[data-stage='1'] .metric {
  transform: translateY(4px);
  opacity: 0.82;
}
.process-visual[data-stage='2'] .metric {
  transform: translateY(0);
  opacity: 0.92;
}
.process-visual[data-stage='3'] .metric {
  transform: translateY(-3px);
  opacity: 1;
}
.metric,
.metric-meta,
.graph {
  transition:
    transform 0.7s var(--ease),
    opacity 0.7s ease;
}

/* Cursor light on the viewport */
body.has-pointer::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    420px circle at var(--sc-mouse-x) var(--sc-mouse-y),
    rgba(255, 255, 255, 0.035),
    transparent 65%
  );
}

.contact-link {
  transition:
    opacity 0.3s ease,
    text-decoration-color 0.3s ease;
}
.contact-link:hover {
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.contact-phone {
  color: #86868a;
  font-size: 13px;
}

/* Mobile: sticky composition yields a clean one-screen-at-a-time narrative. */
@media (max-width: 820px) {
  .scroll-rail {
    right: 6px;
    height: 110px;
  }
  .process {
    display: block;
    min-height: 0;
  }
  .process-copy {
    position: relative;
    top: auto;
    margin-bottom: 26px;
  }
  .process-visual {
    position: relative;
    top: auto;
    height: 520px;
    min-height: 520px;
  }
  .process-step.active {
    transform: none;
  }
  .nav-links {
    display: none;
  }
  .menu-btn {
    display: block;
  }
  .nav-tools {
    gap: 8px;
  }
  .nav-cta {
    padding: 0 14px;
  }
}
@media (max-width: 560px) {
  .wrap {
    width: min(var(--max), calc(100% - 30px));
  }
  .scroll-rail {
    display: none;
  }
  .process-visual {
    height: 485px;
    min-height: 485px;
  }
  .live-loop {
    left: 7%;
    right: 7%;
  }
  .loop-card {
    height: 50px;
    padding: 9px 10px;
  }
  .loop-card span {
    font-size: 9px;
  }
  .title-reactive.is-hovered {
    letter-spacing: inherit;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-section],
  .reveal,
  .title-reactive,
  .card,
  .data-panel,
  .price,
  .pay-panel,
  .story-visual,
  .process-visual,
  .loop-card {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  body.has-pointer::after,
  .scroll-rail {
    display: none;
  }
}
.footer-direct-contact {
  margin: 12px 0 0;
  color: #7b7b7e;
  font-size: 11px;
  line-height: 1.8;
}
.footer-direct-contact a {
  color: #d6d6d8;
  transition: opacity 0.3s ease;
}
.footer-direct-contact a:hover {
  opacity: 0.7;
}

/* =========================================================
   SYCLOPS · visual correction layer v2
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Seamless chapters: no visible section boxes or alternating page slabs. */
.section.alt {
  background: transparent;
}
.section {
  position: relative;
  isolation: isolate;
}
.section:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.045),
    transparent
  );
  opacity: 0.45;
  pointer-events: none;
}
[data-section],
.page-hero,
.section:not([data-section]) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Symbol navigation: left rail instead of a crowded top text bar. */
.site-nav {
  padding: 13px 0 17px;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 6, 0.94),
    rgba(5, 5, 6, 0.56),
    transparent
  );
  backdrop-filter: blur(12px);
}
.nav-inner {
  grid-template-columns: auto 1fr auto;
  gap: 20px;
}
.nav-links {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 96;
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 9px 7px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(7, 7, 8, 0.58);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3);
}
.nav-links a {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #66676b;
  transition:
    transform 0.45s var(--ease),
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.45s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current='page'],
.nav-links a.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.085);
  transform: translateX(2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}
.nav-links a:after {
  content: attr(data-label);
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(11, 11, 13, 0.94);
  color: #a7a7aa;
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.35s var(--ease);
}
.nav-links a:hover:after,
.nav-links a:focus-visible:after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.nav-symbol {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  transform: translateY(-1px);
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover .nav-symbol,
.nav-links a[aria-current='page'] .nav-symbol {
  transform: translateY(-1px) rotate(12deg) scale(1.08);
}
.nav-cta {
  min-height: 40px;
}

/* Logo reacts independently: subtle orbital lift instead of layout movement. */
.brand {
  perspective: 800px;
}
.brand img {
  transition:
    transform 0.55s var(--ease),
    filter 0.55s ease;
}
.brand:hover img,
.brand:focus-visible img {
  transform: rotateY(18deg) rotateZ(-3deg) scale(1.08);
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.3));
}
.hero-mark {
  transition:
    transform 0.65s var(--ease),
    filter 0.65s ease;
}
.hero-mark:hover {
  transform: rotateY(12deg) rotateZ(-2deg) scale(1.045);
  filter: drop-shadow(0 0 46px rgba(255, 255, 255, 0.28));
}

/* Titles never change metrics/letter-spacing on hover: only optical movement. */
.title-reactive {
  will-change: transform;
  text-shadow: none !important;
  transition:
    transform 0.45s var(--ease),
    filter 0.45s ease;
}
.title-reactive.is-hovered {
  letter-spacing: inherit;
  filter: brightness(1.08);
}
.title-reactive.is-hovered::before {
  pointer-events: none;
}

/* Bidirectional reveal without transform fights. */
.reveal {
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  filter: blur(8px);
  transition:
    opacity 0.7s var(--ease),
    filter 0.75s var(--ease),
    visibility 0s linear 0.75s;
}
.reveal.visible {
  opacity: 1;
  visibility: visible;
  filter: none;
  transition-delay: 0s;
}
.reveal.exit-up {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px);
  transform: none !important;
}
.reveal.exit-down {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px);
  transform: none !important;
}

/* Process narrative: one text state at a time, fixed slot, no title pile-up. */
.process {
  grid-template-columns: 0.58fr 1.42fr;
  min-height: 690px;
  align-items: start;
}
.process-copy {
  position: sticky;
  top: 24vh;
  align-self: start;
  height: 230px;
  padding-top: 2px;
  z-index: 6;
}
.process-step {
  position: absolute;
  inset: 0;
  min-height: 0;
  margin: 0;
  padding: 0 10px 0 0;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden;
  transform: translate3d(0, 18px, 0) !important;
  pointer-events: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s var(--ease),
    visibility 0s linear 0.55s;
}
.process-step.active {
  opacity: 1 !important;
  visibility: visible;
  transform: none !important;
  pointer-events: auto;
  transition-delay: 0s;
}
.process-step strong {
  font-size: 10px;
  color: #717176;
}
.process-step h3 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.045em;
}
.process-step p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 390px;
}
.process-visual {
  height: clamp(560px, 68vh, 730px);
  min-height: 560px;
  position: sticky;
  top: 15vh;
  z-index: 2;
  overflow: hidden;
}
.console {
  left: 6%;
  right: 6%;
  top: 6%;
  bottom: 19%;
  z-index: 2;
}
.live-loop {
  left: 11%;
  right: 11%;
  bottom: 7%;
  height: 53px;
  min-height: 53px;
  z-index: 4;
  position: absolute;
}
.loop-card {
  position: absolute;
  inset: 0;
  height: 53px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 13px, 0) scale(0.985);
  pointer-events: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s var(--ease),
    filter 0.55s ease,
    box-shadow 0.55s ease,
    visibility 0s linear 0.55s;
}
.loop-card[data-active='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.loop-card:hover {
  transform: translate3d(0, -4px, 0) scale(1.008);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(14, 14, 17, 0.96);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.loop-card span {
  transition:
    transform 0.35s var(--ease),
    color 0.35s ease;
}
.loop-card:hover span {
  transform: translateX(-3px);
  color: #c4c4c7;
}

/* Interactive framed surfaces: visually separated from section structure. */
.card,
.data-panel,
.price,
.pay-panel,
.story-visual,
.process-visual {
  border: 1px solid rgba(255, 255, 255, 0.055);
  background-clip: padding-box;
  overflow: hidden;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.45s ease,
    background 0.4s ease;
}
.card:hover,
.data-panel:hover,
.pay-panel:hover,
.story-visual:hover {
  border-color: rgba(255, 255, 255, 0.13);
}
.signal-row {
  border: 1px solid transparent;
  transition:
    transform 0.4s var(--ease),
    background 0.35s ease,
    border-color 0.35s ease;
}
.signal-row:hover {
  transform: translateX(5px);
  background: #141418;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Pricing: every offer must read as a card, not disappear into the background. */
.price-grid {
  align-items: stretch;
}
.price {
  min-height: 390px;
  background: linear-gradient(160deg, #17171a, #0e0e11 74%);
  border-color: rgba(255, 255, 255, 0.085);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.price:nth-child(2) {
  background: linear-gradient(160deg, #202024, #111114 74%);
  border-color: rgba(255, 255, 255, 0.11);
}
.price.featured {
  background: linear-gradient(160deg, #f0f0ed, #d8d8d5 74%);
  color: #070708;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.35);
}
.price.featured .tag,
.price.featured .code {
  color: #28282b;
  border-color: rgba(0, 0, 0, 0.16);
}
.price.featured .period,
.price.featured .price-note {
  color: #5e5e61;
}
.price.featured .decimal {
  color: #4e4e51;
}
.price .btn {
  min-height: 48px;
}
.price:not(.featured) .btn.ghost {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
}
.price:not(.featured) .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.11);
}

/* Payment tiles and floating utility cards are tactile, not dead panels. */
.pay-option {
  position: relative;
  overflow: hidden;
}
.pay-option:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.09),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pay-option:hover:before,
.pay-option.selected:before {
  opacity: 1;
}

/* Direct contacts: always visible without competing with the content. */
.contact-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 88;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(8, 8, 9, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.36);
}
.contact-dock-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  color: #77777b;
  font-size: 9px;
  line-height: 1;
  transition:
    color 0.3s ease,
    background 0.35s ease,
    transform 0.4s var(--ease);
}
.contact-dock-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.contact-dock-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #d1d1d3;
  font-weight: 700;
}
.contact-direct {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}
.contact-direct strong {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8d91;
}
.contact-direct a {
  font-size: 14px;
  color: #e7e7e5;
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--ease);
}
.contact-direct a:hover {
  opacity: 0.7;
  transform: translateX(3px);
}

/* FAQ: clear, useful answers with one deliberate open item at a time. */
.faq {
  max-width: 980px;
}
.faq details {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: transparent;
  transition: background 0.35s ease;
}
.faq details:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.faq summary {
  position: relative;
  padding: 22px 54px 22px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  transition:
    padding 0.4s var(--ease),
    color 0.3s ease;
}
.faq summary:after {
  content: '+';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  color: #7b7b7f;
  transition:
    transform 0.4s var(--ease),
    color 0.3s ease;
}
.faq details[open] summary {
  color: #fff;
}
.faq details[open] summary:after {
  transform: translateY(-50%) rotate(45deg);
  color: #fff;
}
.faq details p {
  margin: 0;
  padding: 0 54px 24px 0;
  color: #88888c;
  font-size: 13px;
  max-width: 820px;
  line-height: 1.75;
}
.faq details:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 72%);
}

/* Remove competing right-hand legacy rail. The left nav owns the navigation. */
.page-index,
.scroll-rail {
  display: none !important;
}

@media (max-width: 1050px) {
  .nav-links {
    left: 12px;
  }
  .process {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .process-copy {
    position: relative;
    top: auto;
    height: 190px;
    margin-bottom: 22px;
  }
  .process-visual {
    position: relative;
    top: auto;
  }
}
@media (max-width: 820px) {
  .site-nav {
    padding: 10px 0 12px;
  }
  .nav-links {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    padding: 6px;
    border-radius: 16px;
  }
  .nav-links a {
    width: 36px;
    height: 36px;
  }
  .nav-links a:after {
    left: 50%;
    top: auto;
    bottom: 45px;
    transform: translateX(-50%) translateY(6px);
  }
  .nav-links a:hover:after,
  .nav-links a:focus-visible:after {
    transform: translateX(-50%) translateY(0);
  }
  .contact-dock {
    left: 12px;
    right: 12px;
    bottom: 68px;
    justify-content: center;
  }
  .contact-dock-item {
    flex: 1;
    justify-content: center;
  }
  .contact-dock-item > span:last-child {
    font-size: 8px;
  }
  .process-copy {
    height: 185px;
  }
  .process-visual {
    height: 525px;
    min-height: 525px;
  }
  .console {
    left: 4%;
    right: 4%;
    top: 5%;
    bottom: 21%;
  }
  .live-loop {
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
}
@media (max-width: 560px) {
  .wrap {
    width: min(var(--max), calc(100% - 28px));
  }
  .brand-name {
    font-size: 14px;
  }
  .nav-tools .lang {
    display: none;
  }
  .nav-cta {
    display: none;
  }
  .hero {
    padding-top: 108px;
  }
  .hero h1 {
    font-size: clamp(46px, 14vw, 74px);
  }
  .section {
    padding: 68px 0;
  }
  .process-copy {
    height: 175px;
  }
  .process-visual {
    height: 485px;
    min-height: 485px;
  }
  .console {
    left: 3%;
    right: 3%;
    top: 4%;
    bottom: 24%;
  }
  .console-side {
    display: none;
  }
  .console-body {
    grid-template-columns: 1fr;
  }
  .console-main {
    padding: 15px;
  }
  .metric {
    font-size: 32px;
  }
  .metric-meta {
    gap: 8px;
  }
  .mini {
    min-width: 0;
    flex: 1;
  }
  .live-loop {
    left: 5%;
    right: 5%;
    bottom: 7%;
  }
  .loop-card {
    height: 49px;
    padding: 8px 10px;
  }
  .loop-card strong {
    font-size: 8px;
  }
  .loop-card span {
    font-size: 8px;
  }
  .price {
    min-height: 360px;
  }
  .contact-dock {
    flex-direction: column;
    gap: 2px;
  }
  .contact-dock-item {
    min-height: 31px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a,
  .brand img,
  .hero-mark,
  .title-reactive,
  .reveal,
  .process-step,
  .loop-card,
  .card,
  .data-panel,
  .price,
  .pay-panel,
  .story-visual,
  .process-visual,
  .signal-row,
  .pay-option,
  .contact-dock-item,
  .faq summary {
    transition: none !important;
  }
}

/* =========================================================
   SYCLOPS · FINAL PRECISION POLISH
   ========================================================= */

/* Titles: metrics never change on hover. Each word is its own reactive unit. */
.title-reactive {
  display: inline;
  position: relative;
  transform: none !important;
  letter-spacing: inherit !important;
  transition: none !important;
  text-shadow: none !important;
}
.title-word {
  display: inline;
  opacity: 0.28;
  filter: blur(4px);
  transition:
    opacity 0.55s var(--ease),
    filter 0.55s var(--ease),
    text-shadow 0.35s ease;
  will-change: opacity, filter;
}
.title-word.word-visible {
  opacity: 1;
  filter: none;
}
.title-word:hover {
  opacity: 1;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.18),
    0 0 34px rgba(255, 255, 255, 0.08);
}
.title-reactive::before,
.title-reactive::after {
  display: none !important;
  content: none !important;
}

/* Logo uses the same optical language: glow only, never displacement. */
.brand img {
  --logo-glow: 0;
  transform: none !important;
  filter: drop-shadow(0 0 calc(22px * var(--logo-glow)) rgba(255, 255, 255, 0.25));
  transition:
    filter 0.35s ease,
    opacity 0.35s ease;
}
.brand:hover img {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.16));
}

/* Top navigation: real labels first, symbolic rail only after the first section. */
.site-nav {
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease,
    transform 0.5s var(--ease);
}
.nav-links {
  gap: 22px;
  transition:
    gap 0.45s var(--ease),
    padding 0.45s var(--ease),
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}
.nav-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  width: auto;
  height: 34px;
  padding: 0 2px;
  overflow: visible;
  transition:
    color 0.3s ease,
    width 0.45s var(--ease),
    padding 0.45s var(--ease),
    background 0.35s ease,
    transform 0.35s var(--ease);
}
.nav-text {
  display: block;
  opacity: 1;
  transform: translateY(0);
  white-space: nowrap;
  transition:
    opacity 0.25s ease,
    transform 0.45s var(--ease),
    width 0.45s var(--ease);
}
.nav-symbol {
  display: block;
  position: absolute;
  opacity: 0;
  transform: scale(0.72) rotate(-8deg);
  font-size: 15px;
  line-height: 1;
  transition:
    opacity 0.25s ease,
    transform 0.45s var(--ease);
}
.nav-links a::after {
  content: none !important;
}
.site-nav.nav-docked {
  background: transparent;
  backdrop-filter: none;
}
.site-nav.nav-docked .nav-links {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 48px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 17px;
  background: rgba(8, 8, 10, 0.68);
  backdrop-filter: blur(18px);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.site-nav.nav-docked .nav-links a {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  color: #68686c;
}
.site-nav.nav-docked .nav-text {
  position: absolute;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}
.site-nav.nav-docked .nav-symbol {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.site-nav.nav-docked .nav-links a:hover,
.site-nav.nav-docked .nav-links a:focus-visible,
.site-nav.nav-docked .nav-links a.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  transform: translateX(2px);
}
@media (max-width: 820px) {
  .site-nav.nav-docked .nav-links {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    width: auto;
    gap: 6px;
  }
  .site-nav.nav-docked .nav-links a {
    width: 35px;
  }
  .nav-links {
    display: none;
  }
  .menu-btn {
    display: block;
  }
  .nav-links.mobile-open {
    display: grid;
    position: absolute;
    top: 68px;
    left: 15px;
    right: 15px;
    width: auto;
    padding: 17px;
    gap: 14px;
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
  }
  .nav-links.mobile-open .nav-text {
    opacity: 1;
    width: auto;
    position: relative;
    transform: none;
    pointer-events: auto;
  }
  .nav-links.mobile-open .nav-symbol {
    display: none;
  }
}

/* Big framed elements float gently. Nested utility cards do not. */
@property --float-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes syclopsFloat {
  0%,
  100% {
    --float-y: -1px;
  }
  50% {
    --float-y: 2px;
  }
}
.float-surface {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  animation: syclopsFloat 6.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry))
    translateY(calc(var(--lift) + var(--float-y)));
  transform-style: preserve-3d;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.float-surface::after {
  opacity: 0;
}
.float-surface:hover {
  --lift: -2px;
  box-shadow:
    0 23px 58px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Product demo: explanatory left copy stays stacked; the floating loop is separated from the console. */
.process {
  align-items: stretch;
  min-height: 650px;
}
.process-copy {
  position: sticky;
  top: 24vh;
  align-self: start;
  height: auto;
  padding-top: 8px;
}
.process-step {
  position: relative;
  min-height: 132px;
  margin: 0;
  padding: 17px 0 18px;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0.32 !important;
  visibility: visible;
  transform: none !important;
  pointer-events: auto;
  transition:
    opacity 0.45s ease,
    color 0.35s ease;
}
.process-step:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.process-step.active {
  opacity: 1 !important;
}
.process-step h3 {
  margin: 5px 0 3px;
  transform: none !important;
  letter-spacing: -0.03em !important;
  transition: none !important;
}
.process-step p {
  color: #77777a;
}
.process-visual {
  position: relative;
  min-height: 600px;
  height: clamp(560px, 68vh, 730px);
  overflow: hidden;
}
.process-visual .console {
  left: 6%;
  right: 6%;
  top: 7%;
  bottom: 22%;
  z-index: 2;
}
.process-visual .live-loop {
  left: 11%;
  right: 11%;
  bottom: 7%;
  height: 53px;
  z-index: 4;
}
.process-visual .loop-card {
  position: absolute;
  inset: 0;
  height: 53px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 9px, 0) scale(0.985);
  animation: none;
  transition:
    opacity 0.5s var(--ease),
    visibility 0s linear 0.5s,
    transform 0.6s var(--ease),
    box-shadow 0.35s ease;
}
.process-visual .loop-card[data-active='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.process-visual .loop-card:hover {
  transform: translateY(-3px) scale(1.006);
}

/* Floating-card light belongs to the frame; title backgrounds remain completely transparent. */
.card,
.data-panel,
.price,
.pay-panel,
.story-visual,
.feature-panel.big {
  background-clip: padding-box;
}
.title-reactive,
.title-word {
  background: transparent !important;
}

/* Smooth currency swaps instead of hard replacement. */
.is-currency-changing {
  opacity: 0.18;
  filter: blur(4px);
  transform: translateY(4px);
  transition:
    opacity 0.17s ease,
    filter 0.17s ease,
    transform 0.17s ease;
}
[data-price-plan],
[data-equivalent-plan],
[data-price-code],
[data-currency-note],
#checkoutAmount {
  transition:
    opacity 0.17s ease,
    filter 0.17s ease,
    transform 0.17s ease;
}

/* Region selector. */
body.region-lock {
  overflow: hidden;
}
.region-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.32s ease;
}
.region-modal.is-closing {
  opacity: 0;
}
.region-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 4, 0.72);
  backdrop-filter: blur(18px);
}
.region-panel {
  position: relative;
  width: min(560px, calc(100% - 30px));
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(145deg, #151518, #09090b);
  box-shadow:
    0 35px 110px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(255, 255, 255, 0.05);
  text-align: left;
  animation: regionIn 0.65s var(--ease) both;
}
@keyframes regionIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.region-kicker {
  display: block;
  margin-bottom: 14px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #77777b;
}
.region-panel h2 {
  margin: 0;
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: -0.055em;
  line-height: 0.96;
}
.region-panel p {
  max-width: 440px;
  margin: 16px 0 24px;
  color: #858589;
  font-size: 13px;
}
.region-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.region-options button {
  min-height: 76px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: #0e0e11;
  color: #efefed;
  text-align: left;
  font-weight: 600;
  transition:
    transform 0.35s var(--ease),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}
.region-options button:hover {
  transform: translateY(-3px);
  background: #151518;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.28);
}
.region-panel small {
  display: block;
  margin-top: 13px;
  color: #5f5f63;
  font-size: 9px;
}

/* A restrained edge glow gives the canvas depth without making the page look lit from everywhere. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 110px rgba(255, 255, 255, 0.045),
    inset 0 0 220px rgba(255, 255, 255, 0.018);
}
body > * {
  position: relative;
  z-index: 2;
}
body > .contact-dock,
body > .region-modal {
  z-index: 1000;
}
@media (max-width: 620px) {
  .region-panel {
    padding: 25px;
  }
  .region-options {
    grid-template-columns: 1fr;
  }
  .process-visual .console {
    bottom: 24%;
  }
  .process-visual .live-loop {
    left: 7%;
    right: 7%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-word {
    opacity: 1;
    filter: none;
    transition: none;
  }
  .float-surface {
    animation: none !important;
  }
  .region-panel {
    animation: none;
  }
}

/* =========================================================
   SYCLOPS · V3 FLUID INTERACTION PASS
   ========================================================= */

/* Words move optically only. No letter-spacing, width or layout changes on hover. */
.title-reactive {
  display: inline;
  position: relative;
  letter-spacing: inherit !important;
  transform: none !important;
  transition: none !important;
  text-shadow: none !important;
}
.title-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  opacity: 0.28;
  filter: blur(4px);
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0);
  transition:
    opacity 0.62s var(--ease),
    filter 0.62s ease,
    transform 0.36s var(--ease);
  will-change: transform, opacity, filter;
  cursor: default;
}
.title-word.word-visible {
  opacity: 1;
  filter: none;
}
.title-word:hover {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0);
}
.title-reactive::before,
.title-reactive::after,
.title-word::before,
.title-word::after {
  display: none !important;
  content: none !important;
}

/* Logo: same motion language as words, never changes its place in the layout. */
.brand {
  perspective: 900px;
}
.brand img {
  --logo-x: 0px;
  --logo-y: 0px;
  --logo-rx: 0deg;
  --logo-ry: 0deg;
  transform: translate3d(var(--logo-x), var(--logo-y), 0) rotateX(var(--logo-rx))
    rotateY(var(--logo-ry));
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.12));
  transition:
    transform 0.38s var(--ease),
    filter 0.38s ease;
}
.brand:hover img {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

/* Top nav is full-width and stable until the dock point. Both states use fixed coordinates, so the move can interpolate. */
.site-nav {
  height: 76px;
  padding: 15px 0 19px;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 6, 0.96),
    rgba(5, 5, 6, 0.78),
    transparent
  );
  transition:
    height 0.72s var(--ease),
    opacity 0.55s ease,
    background 0.55s ease;
}
.nav-inner {
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-links {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translate3d(-50%, 0, 0);
  display: flex;
  gap: 22px;
  z-index: 96;
  transition:
    left 0.78s var(--ease),
    top 0.78s var(--ease),
    transform 0.78s var(--ease),
    gap 0.55s var(--ease),
    padding 0.55s var(--ease),
    opacity 0.4s ease;
}
.nav-tools {
  transition:
    opacity 0.38s ease,
    transform 0.7s var(--ease);
}
.nav-links a {
  transition:
    color 0.28s ease,
    background 0.42s ease,
    border-color 0.42s ease,
    transform 0.35s var(--ease),
    width 0.6s var(--ease),
    height 0.6s var(--ease);
}
.nav-text {
  transition:
    opacity 0.32s ease,
    transform 0.65s var(--ease),
    width 0.65s var(--ease);
}
.nav-symbol {
  transition:
    opacity 0.35s ease,
    transform 0.65s var(--ease);
}
.site-nav.nav-docked {
  height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.site-nav.nav-docked .brand {
  position: fixed;
  left: 13px;
  top: 11px;
  width: 42px;
  height: 42px;
  justify-content: center;
  z-index: 99;
  pointer-events: auto;
}
.site-nav.nav-docked .brand-name {
  display: none;
}
.site-nav.nav-docked .brand img {
  width: 29px;
  height: 29px;
}
.site-nav.nav-docked .brand::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.38);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  z-index: -1;
}
.site-nav.nav-docked .nav-tools {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.site-nav.nav-docked .nav-links {
  left: 17px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  display: grid;
  gap: 7px;
  width: 48px;
  padding: 7px;
  justify-items: center;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 17px;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.site-nav.nav-docked .nav-links a {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  color: #68686c;
}
.site-nav.nav-docked .nav-text {
  width: 0;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(-9px);
  pointer-events: none;
}
.site-nav.nav-docked .nav-symbol {
  position: static;
  opacity: 1;
  transform: scale(1) rotate(0);
}
.site-nav.nav-docked .nav-links a:hover,
.site-nav.nav-docked .nav-links a:focus-visible,
.site-nav.nav-docked .nav-links a.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  transform: translateX(2px);
}

/* Section containers remain visually continuous; only content animates. */
.section.alt {
  background: transparent;
}
.section {
  position: relative;
}
.section::before {
  display: none;
}
.section-head.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}
.section-head.reveal .lead {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.section-head.reveal .title-reactive + .lead {
  transition-delay: 0.28s;
}
.section-head.reveal:has(.title-word.word-visible) .lead {
  opacity: 1;
  transform: none;
}

/* The process keeps the original explanatory left stack untouched; only the demo card is isolated. */
.process .process-copy {
  position: sticky;
  top: 24vh;
  z-index: 5;
}
.process-visual .console {
  z-index: 2;
}
.process-visual .live-loop {
  z-index: 4;
}
.process-visual .loop-card {
  box-sizing: border-box;
}

/* Big outer surfaces float; nested surfaces do not inherit the motion. */
.float-surface {
  animation: syclopsFloat 7.4s ease-in-out infinite;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(calc(var(--lift, 0px) + var(--float-y, 0px)));
}
@keyframes syclopsFloat {
  0%,
  100% {
    --float-y: -1px;
  }
  50% {
    --float-y: 2px;
  }
}

/* Smooth currency / language transitions. */
.is-currency-changing {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(5px);
  transition:
    opacity 0.26s var(--ease),
    filter 0.26s ease,
    transform 0.26s var(--ease);
}
[data-price-plan],
[data-equivalent-plan],
[data-price-code],
[data-currency-note],
#checkoutAmount {
  transition:
    opacity 0.26s var(--ease),
    filter 0.26s ease,
    transform 0.26s var(--ease);
}
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #050506;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.48s var(--ease);
}
body.page-ready .page-transition {
  opacity: 0;
}
body.page-leaving .page-transition {
  opacity: 1;
}

/* FAQ answer expansion is measured instead of relying on the browser's abrupt <details> open state. */
.faq details p {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.58s var(--ease),
    opacity 0.42s ease,
    margin-top 0.5s var(--ease);
}
.faq details[open] p {
  margin-top: 11px;
  opacity: 1;
}
.faq summary {
  transition:
    color 0.28s ease,
    transform 0.35s var(--ease);
}
.faq summary:hover {
  transform: translateX(2px);
}

@media (max-width: 820px) {
  .site-nav {
    height: 70px;
  }
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    transform: none;
    display: none;
  }
  .site-nav.nav-docked .nav-links {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    width: auto;
    gap: 6px;
  }
  .site-nav.nav-docked .brand {
    left: 12px;
    top: 10px;
  }
}

.trial-note {
  margin: 12px 0 0;
  color: #8b8b8f;
  font-size: 10px;
  line-height: 1.5;
}
.trial-note[hidden] {
  display: none;
}

.site-nav .brand:hover img,
.site-nav .brand:focus-visible img {
  transform: translate3d(var(--logo-x), var(--logo-y), 0) rotateX(var(--logo-rx))
    rotateY(var(--logo-ry)) !important;
}

/* Sequential word construction: stable title-level activation, word-level stagger. */
.title-word {
  transition-delay: calc(var(--word-i, 0) * 38ms);
}
.title-reactive .title-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(18px);
  transition:
    opacity 0.58s var(--ease),
    filter 0.58s var(--ease),
    transform 0.62s var(--ease);
  will-change: transform, opacity, filter;
}
.title-reactive.wordcraft-active .title-word {
  opacity: 1;
  filter: none;
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(0);
}
.title-reactive[data-craft-direction='up'] .title-word {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(-18px);
}
.title-reactive.wordcraft-active[data-craft-direction='up'] .title-word {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(0);
}
.region-modal {
  z-index: 6000;
}

/* =========================================================
   SYCLOPS · V4 PRECISION INTERACTION PASS
   ========================================================= */
/* Titles: no glow; only restrained optical motion and stable word-by-word construction. */
.title-reactive,
.title-word {
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.title-reactive {
  will-change: transform;
}
.title-word:hover {
  filter: none;
  text-shadow: none;
}

/* Hero mark remains above the central title and reacts without leaving its slot. */
.hero-content > .hero-mark {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translate3d(var(--logo-x, 0px), var(--logo-y, 0px), 0)
    rotateX(var(--logo-rx, 0deg)) rotateY(var(--logo-ry, 0deg));
  transition: transform 0.55s var(--ease);
}

/* Bidirectional reveals: down = rise in, up = descend in. */
.reveal {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px);
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--ease),
    filter 0.7s var(--ease),
    transform 0.72s var(--ease),
    visibility 0s linear 0.72s;
  transition-delay: calc(var(--reveal-i, 0) * 38ms);
}
html[data-scroll-direction='up'] .reveal {
  transform: translateY(-24px);
}
.reveal.visible {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translateY(0);
  transition-delay: calc(var(--reveal-i, 0) * 38ms);
}

/* Top navigation is unchanged until the hero is passed; dock is a separate animated layer. */
.site-nav {
  z-index: 90;
  transition:
    transform 0.58s var(--ease),
    opacity 0.38s ease,
    filter 0.45s ease;
}
.site-nav.nav-docked {
  transform: translateY(-115%);
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
}
.nav-dock-layer {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none !important;
}
.nav-dock-layer .dock-brand {
  position: fixed;
  left: 12px;
  top: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 98;
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  transition:
    opacity 0.36s ease,
    transform 0.62s var(--ease);
}
.nav-dock-layer .dock-brand::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: -1;
}
.nav-dock-layer .dock-brand img {
  width: 29px;
  height: 29px;
}
.nav-dock-layer .dock-brand .brand-name {
  display: none;
}
.nav-dock-layer .dock-links {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateX(-28px) translateY(-50%);
  display: grid;
  gap: 7px;
  justify-items: center;
  width: 48px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 17px;
  background: rgba(8, 8, 10, 0.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition:
    opacity 0.34s ease,
    transform 0.66s var(--ease);
}
.nav-dock-layer.is-visible {
  pointer-events: none !important;
}
.nav-dock-layer .dock-brand,
.nav-dock-layer .dock-links,
.nav-dock-layer .dock-links a {
  pointer-events: auto;
}
.nav-dock-layer.is-visible .dock-brand {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.nav-dock-layer.is-visible .dock-links {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
  transition-delay: 0.08s;
}
.nav-dock-layer .dock-links a {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #77777b;
  transition:
    color 0.28s ease,
    background 0.35s ease,
    transform 0.38s var(--ease);
}
.nav-dock-layer .dock-links a:hover,
.nav-dock-layer .dock-links a:focus-visible,
.nav-dock-layer .dock-links a.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}
.nav-dock-layer .nav-text {
  position: absolute;
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}
.nav-dock-layer .nav-symbol {
  font-size: 19px;
  line-height: 1;
  transform: none;
}
.nav-dock-layer .dock-links a::after {
  content: attr(data-label);
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translate(-6px, -50%);
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(11, 11, 13, 0.95);
  color: #a7a7aa;
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    transform 0.35s var(--ease);
}
.nav-dock-layer .dock-links a:hover::after,
.nav-dock-layer .dock-links a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Replace abstract glyphs with immediately legible symbols. */
.nav-dock-layer .dock-links a:nth-child(1) .nav-symbol {
  font-size: 18px;
}
.nav-dock-layer .dock-links a:nth-child(1) .nav-symbol::after {
  content: '▣';
}
.nav-dock-layer .dock-links a:nth-child(2) .nav-symbol {
  font-size: 18px;
}
.nav-dock-layer .dock-links a:nth-child(2) .nav-symbol::after {
  content: '▤';
}
.nav-dock-layer .dock-links a:nth-child(3) .nav-symbol {
  font-size: 18px;
}
.nav-dock-layer .dock-links a:nth-child(3) .nav-symbol::after {
  content: '◉';
}
.nav-dock-layer .dock-links a:nth-child(4) .nav-symbol {
  font-size: 18px;
}
.nav-dock-layer .dock-links a:nth-child(4) .nav-symbol::after {
  content: '$';
}
.nav-dock-layer .dock-links a:nth-child(5) .nav-symbol {
  font-size: 18px;
}
.nav-dock-layer .dock-links a:nth-child(5) .nav-symbol::after {
  content: '@';
}
.nav-dock-layer .dock-links .nav-symbol {
  font-size: 0;
}
.nav-dock-layer .dock-links .nav-symbol::after {
  font-size: 18px;
}

/* FAQ opens and closes on the same measured curve. */
.faq details {
  overflow: hidden;
}
.faq details p {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition:
    max-height 0.54s var(--ease),
    opacity 0.34s ease,
    margin-top 0.54s var(--ease);
}
.faq details.faq-open p {
  opacity: 1;
  margin-top: 11px;
}
.faq summary {
  cursor: pointer;
  transition:
    color 0.3s ease,
    transform 0.35s var(--ease);
}
.faq details.faq-open summary {
  color: #fff;
}

/* Four genuinely separate floating source cards. */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.source-grid .float-source {
  min-height: 250px;
}
.float-source {
  animation: sourceFloat 8.4s ease-in-out infinite;
  animation-delay: calc(var(--reveal-i, 0) * -0.65s);
}
@keyframes sourceFloat {
  0%,
  100% {
    transform: translate3d(0, -1px, 0);
  }
  50% {
    transform: translate3d(0, 3px, 0);
  }
}
.float-source:hover {
  animation-play-state: paused;
  transform: translateY(-5px) !important;
}

/* Contact remains readable above the dock. */
.contact-dock {
  z-index: 89;
}

@media (max-width: 820px) {
  .nav-dock-layer .dock-links {
    left: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    width: auto;
  }
  .nav-dock-layer.is-visible .dock-links {
    transform: translateX(-50%) translateY(0);
  }
  .nav-dock-layer .dock-links a::after {
    left: 50%;
    top: auto;
    bottom: 44px;
    transform: translate(-50%, 6px);
  }
  .nav-dock-layer .dock-links a:hover::after,
  .nav-dock-layer .dock-links a:focus-visible::after {
    transform: translate(-50%, 0);
  }
  .nav-dock-layer .dock-brand {
    left: 12px;
    top: 10px;
  }
}
@media (max-width: 560px) {
  .grid4 {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dock-layer .dock-brand,
  .nav-dock-layer .dock-links,
  .site-nav,
  .title-word,
  .reveal,
  .float-source,
  .faq details p {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   SYCLOPS · V4B FINISHING
   ========================================================= */
.title-word {
  will-change: transform, opacity;
  transition-duration: 0.72s;
}
.title-word:hover {
  filter: none !important;
  text-shadow: none !important;
}
.hero-mark {
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.1));
}
.hero-mark:hover {
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.11));
}
.nav-dock-layer .dock-links,
.nav-dock-layer .dock-brand {
  will-change: transform, opacity;
}
.nav-dock-layer .dock-links {
  transition-duration: 0.58s;
}
.nav-dock-layer .dock-brand {
  transition-duration: 0.55s;
}
.faq details p {
  max-height: 0 !important;
}
.faq details.faq-open p {
  max-height: var(--faq-height, 0px) !important;
}

@media (max-width: 820px) {
  .nav-dock-layer .dock-brand {
    left: 10px;
    top: 9px;
  }
  .nav-dock-layer .dock-links {
    bottom: 12px;
  }
}

/* =========================================================
   SYCLOPS · FINAL POLISH / STABILITY PASS
   ========================================================= */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* Stable word-by-word scrollcraft: motion is controlled by the title observer, not each tiny span. */
.title-reactive .title-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(16px);
  transition:
    opacity 0.56s var(--ease),
    filter 0.5s ease,
    transform 0.58s var(--ease);
  will-change: transform, opacity, filter;
}
.title-reactive.wordcraft-active .title-word {
  opacity: 1;
  filter: none;
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(0);
}
.title-reactive[data-craft-direction='up'] .title-word {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(-16px);
}
.title-reactive.wordcraft-active[data-craft-direction='up'] .title-word {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) translateY(0);
}
.title-reactive .title-word:hover {
  filter: none;
  text-shadow: none;
}

/* Scrollcraft remains direction-aware without fighting floating transforms. */
.reveal {
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  transform: translateY(16px) !important;
  transition:
    opacity 0.6s var(--ease),
    filter 0.55s ease,
    transform 0.62s var(--ease),
    visibility 0s linear 0.62s !important;
  transition-delay: 0ms !important;
}
html[data-scroll-direction='up'] .reveal {
  transform: translateY(-16px) !important;
}
.reveal.visible {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translateY(0) !important;
}
.float-surface.reveal {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(calc(var(--lift, 0px) + var(--float-y, 0px))) !important;
  transition:
    opacity 0.6s var(--ease),
    filter 0.55s ease,
    box-shadow 0.45s var(--ease),
    border-color 0.35s ease !important;
}
.float-surface.reveal.visible {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(calc(var(--lift, 0px) + var(--float-y, 0px))) !important;
}

/* Pointer response is deliberately restrained: noticeable, but never layout-moving. */
.title-reactive .title-word {
  cursor: default;
}
.hero-mark {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
}
.hero-mark:hover {
  filter: drop-shadow(0 0 23px rgba(255, 255, 255, 0.09));
}

/* Navigation overlay never blocks the underlying page. Only the actual controls receive pointer events. */
.nav-dock-layer,
.nav-dock-layer.is-visible {
  pointer-events: none !important;
}
.nav-dock-layer .dock-brand,
.nav-dock-layer .dock-links,
.nav-dock-layer .dock-links a {
  pointer-events: auto;
}

/* The section lead follows its title's activation state. */
.section-head.reveal:has(.title-reactive.wordcraft-active) .lead {
  opacity: 1;
  transform: none;
}

/* No stale reference container. */
.product-reference {
  display: none !important;
}

/* Cleaner interaction hit areas. */
.btn,
.nav-cta,
.pay-option,
.open-checkout,
.currency-bar button,
.region-options button,
.faq summary,
.menu-btn,
.contact-link,
.brand {
  position: relative;
  z-index: 2;
}

/* Softer surface reaction. */
.card:hover,
.data-panel:hover,
.pay-panel:hover,
.story-visual:hover,
.price:hover {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* FAQ uses the same measured track both directions. */
.faq details p {
  overflow: hidden;
  max-height: 0 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  transition:
    max-height 0.56s var(--ease),
    opacity 0.32s ease,
    margin-top 0.56s var(--ease) !important;
}
.faq details.faq-open p {
  max-height: var(--faq-height, 0px) !important;
  margin-top: 11px !important;
  opacity: 1 !important;
}

/* Slightly clearer floating rhythm on outer panels only. */
.float-source,
.float-surface {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .title-reactive .title-word,
  .reveal,
  .float-surface.reveal,
  .nav-dock-layer,
  .faq details p {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   SYCLOPS · V5 STABILITY / FINISH
   ========================================================= */
/* Scroll construction happens once. Once an element is built, it remains stable. */
.reveal {
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  transform: translateY(18px) !important;
  transition:
    opacity 0.72s var(--ease),
    filter 0.7s ease,
    transform 0.72s var(--ease),
    visibility 0s linear 0.72s !important;
  transition-delay: calc(var(--reveal-i, 0) * 42ms) !important;
}
.reveal.visible {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translateY(0) !important;
}
.title-reactive .title-word {
  opacity: 0 !important;
  filter: blur(2px);
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.56s var(--ease),
    filter 0.5s ease,
    transform 0.62s var(--ease) !important;
  transition-delay: calc(var(--word-i, 0) * 36ms) !important;
}
.title-reactive.wordcraft-active .title-word {
  opacity: 1 !important;
  filter: none;
  transform: translate3d(0, 0, 0);
}
/* Mouse reaction belongs to the whole heading, never to individual words. */
.title-reactive {
  --title-x: 0px;
  --title-y: 0px;
  transform: translate3d(var(--title-x), var(--title-y), 0) !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.title-reactive .title-word {
  pointer-events: none;
}
/* Keep hero identity centered in its original slot. */
.hero-content {
  text-align: center;
}
.hero-mark {
  display: block;
  margin-inline: auto;
  --logo-x: 0px;
  --logo-y: 0px;
  --logo-rx: 0deg;
  --logo-ry: 0deg;
  transform: translate3d(var(--logo-x), var(--logo-y), 0) rotateX(var(--logo-rx))
    rotateY(var(--logo-ry));
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Product explanations sit lower, aligned against the animated dashboard rather than above it. */
.process .process-copy {
  position: sticky;
  top: 30vh !important;
}
/* Symbols are always visibly white once the rail is active. */
.site-nav.nav-docked .nav-links a .nav-symbol,
.nav-dock-layer .nav-symbol {
  color: #fff !important;
  opacity: 1 !important;
  font-size: 19px !important;
  line-height: 1;
}
.nav-dock-layer .dock-links .nav-symbol::after {
  color: #fff !important;
}
/* Prevent legacy dock layers from intercepting content and keep the transition graceful. */
.nav-dock-layer {
  pointer-events: none !important;
}
.nav-dock-layer .dock-brand,
.nav-dock-layer .dock-links,
.nav-dock-layer .dock-links a {
  pointer-events: auto;
}
/* FAQ: one measured track, symmetric easing in both directions. */
.faq details {
  overflow: hidden;
}
.faq summary:after {
  content: '+' !important;
  color: #777;
}
.faq details.faq-open summary:after {
  content: '−' !important;
  color: #fff;
}
.faq details p {
  max-height: var(--faq-height, 0px) !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.34s ease,
    margin-top 0.6s var(--ease) !important;
}
.faq details.faq-open p {
  max-height: var(--faq-height, 0px) !important;
  margin-top: 11px !important;
  opacity: 1 !important;
}
/* No floating surface participates in scroll reveal transform math. */
.float-surface {
  will-change: transform;
}
/* Remove all remaining visual video containers. */
.product-reference {
  display: none !important;
}
/* Smooth language/document handoff overlay if present. */
.page-transition {
  transition: opacity 0.5s var(--ease) !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .title-reactive .title-word,
  .title-reactive,
  .hero-mark {
    transition: none !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    filter: none !important;
  }
  .title-reactive .title-word {
    opacity: 1 !important;
    filter: none;
    transform: none;
  }
}

/* V5 rail icons use the actual glyph in the markup. No generated duplicate glyphs. */
.site-nav .nav-symbol::after,
.nav-dock-layer .nav-symbol::after {
  content: none !important;
  display: none !important;
}
.site-nav.nav-docked .nav-links a .nav-symbol {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #fff !important;
  text-shadow: none;
}

/* =========================================================
   SYCLOPS · V6 final motion calibration
   ========================================================= */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 0.78s;
}

/* Navigation migration: top bar exits first, left rail follows after a short handoff. */
.site-nav {
  transition:
    transform 0.44s var(--motion-ease),
    opacity 0.34s ease,
    filter 0.34s ease !important;
}
.site-nav.nav-migrating-out {
  transform: translate3d(0, -18px, 0) !important;
  opacity: 0.45 !important;
  filter: blur(1.5px) !important;
}
.site-nav.nav-docked {
  transform: translate3d(0, -115%, 0) !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}
.site-nav.nav-migrating-in {
  animation: navReturn 0.48s var(--motion-ease) both;
}
@keyframes navReturn {
  from {
    transform: translate3d(0, -14px, 0);
    opacity: 0.65;
    filter: blur(1.5px);
  }
  to {
    transform: none;
    opacity: 1;
    filter: none;
  }
}
.nav-dock-layer .dock-links {
  transform: translate3d(-30px, -50%, 0);
  opacity: 0;
  transition:
    transform 0.62s var(--motion-ease),
    opacity 0.32s ease !important;
}
.nav-dock-layer .dock-brand {
  transform: translate3d(-18px, 0, 0) scale(0.96);
  opacity: 0;
  transition:
    transform 0.54s var(--motion-ease),
    opacity 0.3s ease !important;
}
.nav-dock-layer.is-visible .dock-links {
  transform: translate3d(0, -50%, 0);
  opacity: 1;
}
.nav-dock-layer.is-visible .dock-brand {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition-delay: 0.05s;
}
.nav-dock-layer.is-exiting .dock-links {
  transform: translate3d(-22px, -50%, 0);
  opacity: 0;
}
.nav-dock-layer.is-exiting .dock-brand {
  transform: translate3d(-14px, 0, 0) scale(0.97);
  opacity: 0;
}
.nav-dock-layer .dock-links .nav-symbol {
  color: #fff !important;
}
.nav-dock-layer .dock-links a {
  color: #fff !important;
}

/* Individual words build the heading, then the heading becomes one pointer-reactive object. */
.title-reactive {
  transform: translate3d(var(--title-x, 0px), var(--title-y, 0px), 0) !important;
  transition: transform 0.34s var(--motion-ease) !important;
  cursor: default;
}
.title-reactive .title-word {
  pointer-events: none;
  display: inline-block;
  transform: translate3d(0, 14px, 0);
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity 0.62s var(--motion-ease),
    transform 0.72s var(--motion-ease),
    filter 0.58s ease !important;
  transition-delay: calc(var(--word-i, 0) * 42ms) !important;
}
.title-reactive.wordcraft-active .title-word {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: none;
}
.title-reactive:hover {
  transform: translate3d(
    var(--title-x, 0px),
    calc(var(--title-y, 0px) - 1px),
    0
  ) !important;
}

/* Floating outer surfaces: constant, tiny vertical drift; pointer settles into it without a jump. */
.float-surface {
  --hover-y: 0px;
  animation: syclopsFloat 8.2s ease-in-out infinite !important;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(calc(var(--float-y, 0px) + var(--hover-y, 0px))) !important;
  transition:
    transform 0.78s var(--motion-ease),
    box-shadow 0.52s var(--motion-ease),
    border-color 0.36s ease !important;
}
.float-surface:hover {
  --hover-y: -1px;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.29),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Product story: long sticky track creates a calm, deliberate pause between the three captions. */
@media (min-width: 821px) {
  .process {
    min-height: 210vh !important;
    align-items: start !important;
  }
  .process-copy {
    position: sticky !important;
    top: 30vh !important;
    height: 39vh !important;
    padding-top: 0 !important;
  }
  .process-visual {
    position: sticky !important;
    top: 15vh !important;
    height: 68vh !important;
    min-height: 560px !important;
  }
}
@media (max-width: 820px) {
  .process {
    min-height: 0 !important;
  }
  .process-copy,
  .process-visual {
    position: relative !important;
    top: auto !important;
  }
}

/* Graph stage changes are distinct enough to read, but never jump. */
.process-visual .metric,
.process-visual .metric-meta,
.process-visual .graph svg {
  transition:
    opacity 0.46s var(--motion-ease),
    transform 0.58s var(--motion-ease);
}
.process-visual .graph svg {
  transform-origin: center;
}
.process-visual[data-stage='1'] .graph svg {
  transform: scaleY(0.9) translateY(6px);
}
.process-visual[data-stage='2'] .graph svg {
  transform: scaleY(1) translateY(0);
}
.process-visual[data-stage='3'] .graph svg {
  transform: scaleY(1.08) translateY(-5px);
}

/* FAQ: closing keeps the same measured curve as opening, then releases the native open state. */
.faq details {
  overflow: hidden;
}
.faq details p {
  transition:
    max-height 0.62s var(--motion-ease),
    opacity 0.42s ease,
    margin-top 0.62s var(--motion-ease) !important;
}

/* No decorative title glow. */
.title-reactive,
.title-reactive:hover,
.title-word:hover {
  filter: none !important;
  text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .nav-dock-layer .dock-links,
  .nav-dock-layer .dock-brand,
  .title-reactive,
  .title-reactive .title-word,
  .float-surface,
  .faq details p {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== V7 stability overrides ===== */
/* No pointer based motion. Scroll is the sole motion input. */
.title-reactive,
.title-reactive:hover,
.title-reactive:focus-visible {
  transform: none !important;
  filter: none !important;
  text-shadow: none !important;
  letter-spacing: inherit !important;
}
.title-reactive .title-word {
  pointer-events: none;
}
.float-surface,
.float-surface:hover,
.float-surface:focus-visible {
  --rx: 0deg !important;
  --ry: 0deg !important;
  --lift: 0px !important;
  --hover-y: 0px !important;
  transform: translateY(var(--float-y, 0px)) !important;
}

/* Downward-only construction. Once a word is constructed it stays put while scrolling upward. */
.title-reactive .title-word {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.58s var(--motion-ease),
    transform 0.66s var(--motion-ease),
    filter 0.52s ease !important;
  transition-delay: calc(var(--word-i, 0) * 40ms) !important;
}
.title-reactive.wordcraft-active .title-word {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Replays happen only when the next downward pass begins. */
.reveal {
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  transform: translateY(22px);
  transition:
    opacity 0.62s var(--motion-ease),
    transform 0.68s var(--motion-ease),
    filter 0.56s ease,
    visibility 0s linear 0.68s !important;
}
.reveal.visible {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: none;
  transition-delay: calc(var(--reveal-i, 0) * 34ms) !important;
}

/* Process: more vertical travel, stable sticky visual, distinct stage windows. */
@media (min-width: 821px) {
  .process {
    min-height: 250vh !important;
    display: grid !important;
    grid-template-columns: 0.58fr 1.42fr !important;
    gap: 48px !important;
    align-items: start !important;
  }
  .process-copy {
    position: sticky !important;
    top: 26vh !important;
    height: 46vh !important;
    align-self: start !important;
  }
  .process-step {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 14px, 0) !important;
    pointer-events: none !important;
    transition:
      opacity 0.62s var(--motion-ease),
      transform 0.72s var(--motion-ease),
      visibility 0s linear 0.62s !important;
  }
  .process-step.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .process-step h3 {
    transform: none !important;
    letter-spacing: -0.045em !important;
  }
  .process-visual {
    position: sticky !important;
    top: 15vh !important;
    height: 68vh !important;
    min-height: 560px !important;
  }
}

/* Product visual transitions are state driven, not pointer driven. */
.process-visual .metric,
.process-visual .metric-meta,
.process-visual .graph svg {
  transition:
    opacity 0.52s var(--motion-ease),
    transform 0.68s var(--motion-ease),
    filter 0.5s ease !important;
}
.process-visual .loop-card:hover {
  transform: none !important;
}

/* Keep the hover state of titles visually quiet. */
.title-word:hover {
  filter: none !important;
  text-shadow: none !important;
}

/* ===== V7 PRODUCT PAUSE ===== */
/* Captions are states, not independently scrolling elements. Keeping their box fixed prevents
   the old jump caused by changing position/height while the visual is sticky. */
@media (min-width: 821px) {
  #producto .process {
    overscroll-behavior: contain;
  }
  #producto .process-copy {
    min-height: 46vh;
  }
  #producto .process-step {
    will-change: opacity, transform;
  }
}

#producto .process-step,
#producto .process-step.active {
  transition:
    opacity 0.56s var(--motion-ease),
    transform 0.68s var(--motion-ease),
    visibility 0s linear 0.56s !important;
}

@media (prefers-reduced-motion: reduce) {
  #producto .process-step,
  #producto .process-step.active {
    transition: none !important;
  }
}

/* V7.1 — Product pause: give each caption a substantially wider downward window. */
@media (min-width: 821px) {
  #producto .process {
    min-height: 300vh !important;
  }
}

/* ===== V7.2 PRODUCT SCROLLCRAFT REWORK ===== */
/* Smaller overall section rhythm without collapsing the layout. */
.section {
  padding: 76px 0;
}
.section-tight {
  padding: 58px 0;
}

/* Product track: enough room to breathe, but no artificial multi-screen void. */
@media (min-width: 821px) {
  #producto .process {
    min-height: 128vh !important;
    display: grid !important;
    grid-template-columns: 0.62fr 1.38fr !important;
    gap: 42px !important;
    align-items: start !important;
  }
  #producto .process-copy {
    position: sticky !important;
    top: 28vh !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    display: grid !important;
    gap: 0 !important;
    align-self: start !important;
  }
  #producto .process-step {
    position: relative !important;
    inset: auto !important;
    min-height: 110px !important;
    margin: 0 !important;
    padding: 15px 10px 15px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 0 !important;
    opacity: 0.24 !important;
    visibility: visible !important;
    transform: translate3d(0, 8px, 0) !important;
    pointer-events: auto !important;
    transition:
      opacity 0.18s linear,
      transform 0.22s var(--motion-ease),
      color 0.18s ease !important;
  }
  #producto .process-step:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }
  #producto .process-step.active {
    opacity: 1 !important;
  }
  #producto .process-step h3 {
    margin: 6px 0 4px !important;
  }
  #producto .process-step p {
    margin: 0 !important;
  }
  #producto .process-visual {
    position: sticky !important;
    top: 15vh !important;
    height: 64vh !important;
    min-height: 560px !important;
  }
}
@media (max-width: 820px) {
  .section {
    padding: 64px 0;
  }
  .section-tight {
    padding: 50px 0;
  }
  #producto .process {
    min-height: 0 !important;
    display: block !important;
  }
  #producto .process-copy {
    display: grid !important;
    gap: 0 !important;
    margin-bottom: 26px !important;
  }
  #producto .process-step {
    position: relative !important;
    min-height: 98px !important;
    opacity: 0.34 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.18s linear !important;
  }
  #producto .process-visual {
    position: relative !important;
    top: auto !important;
    height: 520px !important;
    min-height: 520px !important;
  }
}

/* The graph is now a self-contained transaction clip with a clean start/end loop. */
.transaction-clip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0e0e11, #0a0a0c) !important;
}
.transaction-clip:before {
  content: 'TRANSACCIÓN EN VIVO';
  position: absolute;
  left: 14px;
  top: 11px;
  font-size: 7px;
  letter-spacing: 0.16em;
  color: #656568;
}
.tx-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 57%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.05)
  );
}
.tx-node {
  position: absolute;
  top: 57%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 70px;
  text-align: center;
  z-index: 2;
}
.tx-node span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.045),
    0 0 18px rgba(255, 255, 255, 0.18);
}
.tx-node strong {
  font-size: 6.5px;
  letter-spacing: 0.12em;
  color: #8d8d91;
}
.tx-node small {
  font-size: 7px;
  color: #55555a;
}
.tx-start {
  left: 9%;
}
.tx-register {
  left: 30%;
}
.tx-categorize {
  left: 51%;
}
.tx-reconcile {
  left: 72%;
}
.tx-net {
  left: 91%;
}
.tx-cursor {
  position: absolute;
  top: calc(57% - 5px);
  left: 8%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.35);
  animation: txFlow 6.4s linear infinite;
}
.tx-cursor:after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  animation: txPulse 1.1s ease-out infinite;
}
@keyframes txFlow {
  0%,
  4% {
    left: 8%;
    opacity: 0;
    transform: scale(0.7);
  }
  8% {
    opacity: 1;
  }
  25% {
    left: 30%;
  }
  46% {
    left: 51%;
  }
  67% {
    left: 72%;
  }
  88% {
    left: 91%;
    opacity: 1;
    transform: scale(1);
  }
  96%,
  100% {
    left: 91%;
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes txPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

/* No whole-page scroll lock: only the product wheel is converted into the internal track. */
html.product-scroll-paused {
  overscroll-behavior: none;
}

/* Keep headings and cards physically stable while the internal product progress changes. */
#producto .process-step h3,
#producto .process-step p {
  transform: none !important;
  transition: none !important;
}
#producto .process-visual .metric,
#producto .process-visual .mini strong {
  transition: opacity 0.18s linear;
}

@media (prefers-reduced-motion: reduce) {
  .tx-cursor,
  .tx-cursor:after {
    animation: none !important;
  }
}

/* ---------- Muestra en vivo ----------
   Adentro corre la aplicación de verdad, la misma que se instala. No son
   capturas: el visitante ve el programa trabajando.

   La aplicación está pensada para 1280 de ancho, así que se dibuja a ese
   tamaño y se escala con transform. Encogerla con width la haría entrar en su
   propio modo angosto y se vería una interfaz distinta de la que se descarga. */
.real-demo__vivo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: top left;
  /* La escala la calcula el guion contra el ancho real y la deja acá. En CSS
     no se puede dividir un ancho por 1280 y obtener un número para scale(). */
  transform: scale(var(--escala-muestra, 1));
  pointer-events: none;
}

/* La proporción es la de la ventana de la aplicación, no 16/9: con 16/9 se
   recortaría la fila de abajo, que es donde está el total a cobrar. */
.real-demo:has(.real-demo__vivo) .real-demo__viewport {
  aspect-ratio: 1280 / 800;
}

.real-demo__pie {
  position: absolute;
  left: clamp(14px, 2.5vw, 28px);
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(11px, 1.6vw, 16px) clamp(14px, 2vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(8, 9, 11, 0.82);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.4;
}

.real-demo__pie [data-muestra-paso] {
  text-align: right;
}

@media (max-width: 640px) {
  .real-demo__pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .real-demo__pie [data-muestra-paso] {
    text-align: left;
  }
}

/* En un teléfono la muestra no se muestra.
   La aplicación se dibuja a 1280 y en 375 queda al 24 por ciento: un borrón
   ilegible que no dice nada del producto y encima hace trabajar al teléfono
   para nada. SYCLOPS es un programa de computadora de mostrador, así que se
   dice eso y se invita a verlo donde se usa. */
@media (max-width: 700px) {
  .real-demo:has(.real-demo__vivo) .real-demo__viewport {
    display: none;
  }
  .real-demo:has(.real-demo__vivo) .real-demo__pie {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    backdrop-filter: none;
  }
  .real-demo:has(.real-demo__vivo) .real-demo__pie [data-muestra-paso] {
    display: none;
  }
  .real-demo:has(.real-demo__vivo) .real-demo__pie::after {
    content: attr(data-en-telefono);
    color: rgba(255, 255, 255, 0.58);
  }
}

/* Cuando la muestra no se pudo cargar. Pasa si el sitio se abre sin servidor
   o desde una carpeta donde no se publicó `demo/`: mejor decirlo que dejar un
   rectángulo negro, que se lee como que el producto está roto. */
.real-demo.sin-muestra .real-demo__viewport {
  display: none;
}
.real-demo.sin-muestra .real-demo__pie {
  position: static;
  backdrop-filter: none;
}
.real-demo.sin-muestra .real-demo__pie [data-muestra-paso]::before {
  content: attr(data-sin-muestra);
}
.real-demo.sin-muestra .real-demo__pie [data-muestra-paso] {
  font-size: 0;
}
.real-demo.sin-muestra .real-demo__pie [data-muestra-paso]::before {
  font-size: 13px;
}

/* ---------- El isotipo del panel de descarga ----------
   Flota sobre el cuadro y se inclina apenas hacia donde está el puntero. Es
   la única pieza del sitio que se mueve por el mouse: en un panel donde lo
   que se pide es apretar un botón, el movimiento marca dónde mirar.

   El giro es chico a propósito. Un logo que se da vuelta entero se lee como
   un truco; uno que se inclina unos grados se lee como que tiene volumen.

   La transformación la escribe el guion, no una animación de CSS: hacen falta
   la flotación y la inclinación en la misma propiedad, y dos reglas de CSS
   peleando por `transform` terminan con una ganando y la otra sin efecto. */
.download-panel {
  perspective: 900px;
}

.download-panel__mark {
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

/* Con movimiento reducido no flota ni se inclina: el guion ni siquiera se
   engancha, así que la marca queda quieta y derecha. */

/* ---------- Datos de transferencia dentro del checkout ---------- */
.datos-transferencia {
  margin-top: 16px;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: #0d0d10;
  padding: 15px 16px 6px;
  animation: datos-aparecen 0.5s var(--ease) both;
}
@keyframes datos-aparecen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .datos-transferencia {
    animation: none;
  }
}
.sy-nota-transferencia {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.sy-nota-transferencia a {
  color: var(--text);
}
.datos-transferencia__juego {
  padding-bottom: 12px;
}
.datos-transferencia__juego + .datos-transferencia__juego {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.datos-transferencia__juego h4 {
  margin: 0 0 9px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a8f;
  font-weight: 500;
}
.datos-transferencia dl {
  margin: 0;
  display: grid;
  gap: 7px;
}
.datos-transferencia dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.datos-transferencia dt {
  color: #707074;
  font-size: 11px;
  white-space: nowrap;
}
.datos-transferencia dd {
  margin: 0;
  font-size: 12px;
  text-align: right;
  word-break: break-all;
}
.datos-transferencia code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.datos-transferencia code:hover,
.datos-transferencia code:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}
.datos-transferencia code.copiado {
  color: #7ee0a8;
  border-color: transparent;
}
.datos-transferencia code.copiado::after {
  content: ' copiado';
  font-size: 10px;
  letter-spacing: 0.08em;
}
html[lang='en'] .datos-transferencia code.copiado::after {
  content: ' copied';
}

/* El panel puede crecer con los datos de la cuenta: se limita a la ventana y desplaza adentro. */
.checkout-panel {
  max-height: min(92svh, 92vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.checkout-panel::-webkit-scrollbar {
  width: 8px;
}
.checkout-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
/* Los datos de cuenta se desplazan adentro de su recuadro, no empujan al botón fuera de la ventana. */
.datos-transferencia {
  max-height: min(300px, 34svh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ventanas bajas: el título del checkout cede altura para que el botón entre sin desplazar. */
@media (max-height: 860px) {
  .checkout-panel h2 {
    font-size: clamp(26px, 4.4vw, 40px);
    margin-bottom: 4px;
  }
  .checkout-panel {
    padding: 22px;
  }
  .datos-transferencia {
    max-height: min(220px, 28svh);
  }
}
/* El aspa acompaña al desplazamiento del panel. */
.checkout-close {
  position: sticky;
  float: right;
  top: 0;
  margin-left: 12px;
}