.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  position: relative;
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s,
    box-shadow 0.3s;
}
.t-light .card {
  box-shadow: 0 1px 2px rgba(16, 22, 31, 0.04);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line);
  }
  .t-light .card:hover {
    box-shadow: 0 16px 40px rgba(16, 22, 31, 0.08);
  }
}
.card.lit {
  border-color: var(--accent-line);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid transparent;
  background: radial-gradient(
      240px circle at var(--mx, -200px) var(--my, -200px),
      var(--glow),
      transparent 70%
    )
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .card:hover::after {
    opacity: 1;
  }
}
.card-tag {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}
.card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
}

.ben {
  --ben-w: clamp(288px, 76vw, 560px);
  --ben-gap: 22px;
}
.ben-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ben-viewport::-webkit-scrollbar {
  display: none;
}
.ben-viewport:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
  border-radius: 20px;
}
.ben.is-carousel .ben-viewport {
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.ben-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: var(--ben-gap);
  padding: 22px max(0px, calc(50% - var(--ben-w) / 2)) 46px;
}
.ben-card {
  position: relative;
  flex: 0 0 var(--ben-w);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.45s var(--ease-out),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.ben.is-carousel .ben-card {
  transform: scale(0.95);
  cursor: pointer;
}
.ben.is-carousel .ben-card.is-active {
  transform: none;
  cursor: default;
  background: var(--card-2);
  border-color: var(--accent-line);
  box-shadow: 0 16px 40px rgba(16, 22, 31, 0.08);
}
.ben-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease-out);
}
.ben.is-carousel .ben-card.is-active::before {
  transform: scaleX(1);
}
.ben-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.ben-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}
.ben-now p,
.ben-then p {
  font-size: 14.5px;
  line-height: 1.7;
}
.ben-now p {
  color: var(--text-2);
}
.ben-then {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
}
.ben-then::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--action-line),
    var(--accent-line) 60%,
    transparent
  );
}
.ben-then p {
  color: var(--text);
}
.ben-then strong {
  color: var(--accent);
  font-weight: 600;
}
.ben-dots {
  display: none;
  justify-content: center;
  margin-top: 8px;
}
.ben.is-carousel .ben-dots {
  display: flex;
}
.ben-dot {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.ben-dot span {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}
.ben-dot:hover span {
  background: var(--text-2);
}
.ben-dot.is-active span {
  background: var(--accent-line);
}
.ben-dot span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btn-grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.t-dark .ben-dot span::after {
  background: var(--brand-grad);
}
.ben-dot.is-active span::after {
  transform: scaleX(1);
}
.ben.is-auto .ben-dot.is-active span::after {
  animation: benFill 5.5s linear;
}
.ben.is-auto.is-paused .ben-dot.is-active span::after {
  animation-play-state: paused;
}
@keyframes benFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.stage {
  --stage-nav-h: 20px;
  --stage-gap: 26px;
  --frame-w: min(100%, calc((88vh - 46px) * 2.108));
  --cam-ms: 1.4s;
  --fade-ms: 0.8s;
  --card-ms: 0.6s;
  display: grid;
  position: relative;
}
.stage-view,
.stage-stops {
  grid-area: 1 / 1;
}
.stage-view {
  display: none;
}
.stage-stops {
  position: relative;
  z-index: 1;
  list-style: none;
  counter-reset: stop;
}
.stage-stop .stop-eyebrow::before {
  content: counter(stop, decimal-leading-zero) ' · ';
  color: var(--accent);
}
.stage-stop {
  counter-increment: stop;
  --half: calc(50 / var(--z));
  --cxc: clamp(var(--half), var(--cx), calc(100 - var(--half)));
  --cyc: clamp(var(--half), var(--cy), calc(100 - var(--half)));
}
@media (min-width: 720px) {
  .stage-stop {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
  }
  .stop-shot {
    margin-top: 0;
  }
}
.stop-card {
  position: relative;
  border-radius: 16px;
}
.stop-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 12px;
}
.stop-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.stop-card p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.7;
}
.stop-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1920 / 911;
  margin-top: 20px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}
.stop-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform-origin: 0 0;
  transform: translate(
      calc(50% - var(--cxc) * 1% * var(--z)),
      calc(50% - var(--cyc) * 1% * var(--z))
    )
    scale(var(--z));
}

.js-cam .stage-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--stage-gap);
}
.js-cam .stage-stops {
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
}
.js-cam .stage-stop {
  grid-area: 1 / 1;
  width: var(--frame-w);
  margin-inline: auto;
  padding-top: calc(var(--stage-nav-h) + var(--stage-gap));
  padding-inline: 28px;
  display: flex;
  align-items: center;
}
.js-cam .stage:not(.is-playing) .stage-nav {
  visibility: hidden;
}
.js-cam .stage:not(.is-playing) .stage-stops {
  display: none;
}
.js-cam .stage.is-playing {
  position: fixed;
  inset: 0;
  z-index: 340;
  padding: 0 4%;
  align-content: center;
  background: var(--bg);
  --frame-w: min(1280px, 92vw, calc((88vh - 46px) * 2.108));
}
.js-cam .stage.is-playing .stage-nav {
  animation: stageBarIn 0.55s var(--ease-out) 0.12s backwards;
}
@keyframes stageBarIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.stage-idle {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--stage-nav-h) + var(--stage-gap));
}
.js-cam .stage:not(.is-playing) .stage-idle {
  display: flex;
}
.stage-idle .stop-card {
  width: min(400px, 64%);
  text-align: center;
}
.stop-btn {
  margin-top: 22px;
  font-size: 14px;
  padding: 13px 28px;
  border: none;
}
html:not(.js-cam) .stop-btn {
  display: none;
}
.js-cam .stage-stop[data-side='right'] {
  justify-content: flex-end;
}
.js-cam .stage-stop[data-scene] {
  justify-content: center;
}
.js-cam .stop-card {
  width: min(360px, 36%);
  padding: 24px 26px 26px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(241, 245, 251, 0.07);
  backdrop-filter: blur(14px);
}
.js-cam .stage-stop .stop-card {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity var(--card-ms) var(--ease-out),
    transform var(--card-ms) var(--ease-out);
}
.js-cam .stage-stop.is-current .stop-card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.js-cam .stage-stop[data-scene] .stop-card {
  text-align: center;
  transition:
    opacity var(--fade-ms) var(--ease-out),
    transform var(--fade-ms) var(--ease-out);
}
.js-cam .stage-stop[data-scene]:not(.is-current) .stop-card {
  transform: translateY(52px);
}
.js-cam .stop-shot {
  display: none;
}
.stage-frame {
  position: relative;
  width: var(--frame-w);
  margin: 0 auto;
  aspect-ratio: 1920 / 911;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  contain: layout paint;
}
.stage-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: var(--brand-grad);
}
.stage-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: translate(
      calc(50% - var(--cx, 50) * 1% * var(--z, 1)),
      calc(50% - var(--cy, 50) * 1% * var(--z, 1))
    )
    scale(var(--z, 1));
  transition: transform var(--cam-ms) var(--ease-out);
  will-change: transform;
}
.cam-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--fade-ms) ease,
    visibility 0s linear var(--fade-ms);
}
.cam-shot.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--fade-ms) ease,
    visibility 0s;
}
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 100px 24px rgba(8, 12, 20, 0.6);
}
.stage-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: var(--frame-w);
  margin: 0 auto;
}
.stage-nav-step {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.stage-ticks {
  display: flex;
  gap: 2px;
}
.stage-tick {
  width: 44px;
  height: var(--stage-nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.stage-tick span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background 0.3s ease;
}
.stage-tick:hover span {
  background: var(--text-2);
}
.stage-tick:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 6px;
}
.stage-tick.is-active span {
  background: var(--brand-grad);
}
.stage-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.stage-count strong {
  font-weight: 500;
  color: var(--accent);
}
.stage-exit {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  background: none;
  border: none;
  padding: 13px 10px;
  margin: -13px -10px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.stage-exit:hover {
  color: var(--text);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.how-line {
  position: absolute;
  top: 31px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.how-line-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.how-step {
  text-align: center;
  padding: 0 16px;
}
.how-num {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--text-2);
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  transition:
    border-color 0.3s,
    color 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}
.how-step.lit .how-num {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--card-2);
  box-shadow: 0 0 24px var(--accent-soft);
}
.how-step h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.how-step p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.65;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.features-grid .card {
  grid-column: span 2;
  transition:
    transform 0.55s var(--ease-out),
    border-color 0.45s,
    box-shadow 0.55s;
}
.features-grid .card:nth-child(-n + 2) {
  grid-column: span 3;
}
@media (hover: hover) {
  .features-grid .card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 20px 44px rgba(16, 22, 31, 0.12);
  }
  .features-grid .features-more:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 22, 31, 0.04);
  }
}
.panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.card p + .panel-label {
  margin-top: 20px;
}
.features-grid .card ul {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.features-grid .card ul li {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.features-grid .card ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  position: absolute;
  left: 0;
  top: 7px;
}
.features-grid .features-more {
  grid-column: span 6;
  padding: 26px 30px 28px;
}
.features-grid .features-more ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 36px;
  margin-top: 18px;
}
.features-grid .features-more li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.features-grid .features-more li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--action);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.proof-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.proof-stars {
  display: flex;
  gap: 3px;
  color: var(--accent);
}
.proof-quote {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.75;
  flex: 1;
}
.proof-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proof-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  flex-shrink: 0;
}
.proof-name {
  font-size: 13px;
  font-weight: 600;
}
.proof-role {
  font-size: 11.5px;
  color: var(--muted);
}