/* Section: Hero — landing_cta_unico (above-fold dominant) */

.trx-hero {
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
  overflow: hidden;
  isolation: isolate;
}
.trx-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(124, 58, 237, 0.16), transparent 60%),
    radial-gradient(700px 420px at -10% 15%, rgba(255, 61, 113, 0.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, #fafafb 100%);
}

.trx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 61, 113, 0.08);
  color: var(--brand-primary);
}

.trx-hero__headline {
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: var(--space-3) 0 var(--space-5);
  max-width: 18ch;
}

.trx-hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.trx-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trx-hero__btn { position: relative; }
.trx-hero__btn-arrow { transition: transform 0.2s ease; }
.trx-hero__btn:hover .trx-hero__btn-arrow { transform: translateX(4px); }

.trx-hero__micro {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.trx-hero__visual { position: relative; }
.trx-hero__frame {
  aspect-ratio: 16/9;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  transform: translateZ(0);
}
.trx-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trx-hero__halo {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 194, 168, 0.45), transparent 70%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

.trx-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  display: block;
}
.trx-hero__scroll-line {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--ink-muted));
  border-radius: 2px;
  animation: trx-hero-scroll 2.2s ease-in-out infinite;
}
@keyframes trx-hero-scroll {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
}

@media (max-width: 960px) {
  .trx-hero { padding-top: var(--space-7); padding-bottom: var(--space-8); }
  .trx-hero__headline { max-width: none; }
  .trx-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trx-hero__scroll-line { animation: none; }
  .trx-hero__btn-arrow { transition: none; }
}