/* SummitPay — landing v3: refinos visuais por cima da v2 (mesmo fundo branco e mesmo azul). */

/* ---------- topo: grade tecnológica com luz passando ---------- */
.v3-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background-image:
    linear-gradient(rgba(2,128,158, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,128,158, .09) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  mask-image: radial-gradient(75% 80% at 60% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 80% at 60% 45%, #000 20%, transparent 78%);
}
/* faixa de luz que varre a grade devagar */
.v3-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(1,175,214, .10) 45%, rgba(111,229,255, .16) 50%, rgba(1,175,214, .10) 55%, transparent);
  animation: v3Sweep 9s ease-in-out infinite;
}
/* pulsos de dados correndo pelas linhas */
.v3-grid i { position: absolute; height: 1px; width: 120px; left: -140px;
  background: linear-gradient(90deg, transparent, var(--mag), var(--mag-l));
  box-shadow: 0 0 10px rgba(1,175,214, .7); opacity: 0;
  animation: v3Pulse 7s linear infinite;
}
.v3-grid i::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--mag-l); box-shadow: 0 0 10px var(--mag); }
.v3-grid i:nth-child(1) { top: 192px; animation-delay: -1s; }
.v3-grid i:nth-child(2) { top: 448px; animation-delay: -4.5s; animation-duration: 9s; }
.v3-grid i:nth-child(3) { top: 640px; animation-delay: -3s; animation-duration: 8s; }
.v3-grid i:nth-child(4) { top: 320px; animation-delay: -6s; animation-duration: 10s; animation-direction: reverse; }
@keyframes v3Sweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(360%); } }
@keyframes v3Pulse {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 280px)); opacity: 0; }
}

/* ---------- destaques em itálico com brilho azul ---------- */
.v3 .v2-h2 em, .v3 .v2-hero__title em {
  background: linear-gradient(100deg, var(--mag-d) 0%, var(--mag) 30%, #4adeff 50%, var(--mag) 70%, var(--mag-d) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .1em .06em 0; margin-right: -.1em;
  animation: v3Shimmer 7s ease-in-out infinite;
}
.v3 .v2-h2--light em {
  background-image: linear-gradient(100deg, var(--mag) 0%, var(--mag-l) 35%, #ffffff 50%, var(--mag-l) 65%, var(--mag) 100%);
}
@keyframes v3Shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ---------- linha com o que a plataforma faz ---------- */
.v3-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; max-width: 620px; }
.v2-js .v3-feats { opacity: 0; translate: 0 20px; animation: v2StageIn 1s var(--ease) .75s forwards; }
.v3-feats li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  font: 500 .74rem var(--mono); color: var(--mag-d);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s ease, transform .3s var(--spring), box-shadow .25s ease;
}
.v3-feats li:hover { border-color: var(--mag); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(1,175,214, .8); }
.v3-feats svg { width: 15px; height: 15px; fill: none; stroke: var(--mag); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- simulador com borda que acende ---------- */
.v3 .v2-sim { position: relative; }
.v3 .v2-sim::before, .v3-ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--v3a, 0deg), transparent 0 70%, var(--mag) 82%, var(--mag-l) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: v3Spin 6s linear infinite;
}
@property --v3a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes v3Spin { to { --v3a: 360deg; } }

/* ---------- celular: brilho de vidro que segue o mouse ---------- */
.v3 .v2-phone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 58%);
  background-size: 250% 100%; background-position: var(--gx, 70%) 0;
  mix-blend-mode: soft-light; transition: background-position .4s var(--ease);
}
.v3 .v2-phone { box-shadow: 0 0 0 2px #25363a, 0 0 0 7px rgba(1,175,214, .08), 0 70px 120px -50px rgba(0,74,90, .75), inset 0 0 0 2px rgba(255, 255, 255, .06); }

/* ---------- selos ao redor do celular: na frente e sem cobrir o checkout ---------- */
.v3 .v2-chip {
  translate: 0 0 60px; z-index: 6;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 44px -22px rgba(2,105,128, .6), 0 0 0 4px rgba(1,175,214, .06);
}
.v3 .v2-chip--a { top: 24px; left: -30px; opacity: 1; color: #9aa9ad; }
.v3 .v2-chip--a b { color: #9aa9ad; transition: color .3s ease; }
.v3 .v2-chip--a.is-on { color: var(--mute); }
.v3 .v2-chip--a.is-on b { color: var(--mag); }
.v3 .v2-chip--a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c3d3d7; transition: background .3s ease, box-shadow .3s ease; }
.v3 .v2-chip--a.is-on::before { background: var(--mag); box-shadow: 0 0 0 3px rgba(1,175,214, .25); }
.v3 .v2-chip--b { top: auto; bottom: 18px; right: -24px; }

/* ---------- cartões com borda em degradê e luz no hover ---------- */
.v3 .v2-calc, .v3 .v2-plan:not(.v2-plan--black) { position: relative; }
.v3 .v2-calc::before, .v3 .v2-plan:not(.v2-plan--black)::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(130deg, var(--mag-l), var(--mag) 40%, rgba(1,175,214, 0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s ease;
}
.v3 .v2-calc:hover::before, .v3 .v2-plan:not(.v2-plan--black):hover::before { opacity: 1; }
.v3 .v2-calc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%), rgba(1,175,214, .08), transparent 70%);
  transition: opacity .4s ease;
}
.v3 .v2-calc:hover::after { opacity: 1; }
.v3 .v2-calc > * { position: relative; z-index: 1; }

/* ---------- textura leve nas seções claras ---------- */
.v3 .v2-fees, .v3 .v2-faq, .v3 .v2-app { position: relative; isolation: isolate; }
.v3 .v2-fees::before, .v3 .v2-faq::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(2,128,158, .2) 1px, transparent 1.3px);
  background-size: 24px 24px;
  mask-image: radial-gradient(50% 60% at 85% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(50% 60% at 85% 40%, #000, transparent 75%);
}
.v3 .v2-faq::before {
  mask-image: radial-gradient(45% 55% at 10% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(45% 55% at 10% 30%, #000, transparent 75%);
}
.v3 .v2-app::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(2,128,158, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,128,158, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(55% 70% at 25% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(55% 70% at 25% 50%, #000, transparent 75%);
}

/* ---------- menu: fio de luz embaixo ---------- */
.v3 .v2-nav__bar { position: relative; }
.v3 .v2-nav__bar::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--mag), var(--mag-l), var(--mag), transparent);
  opacity: .55;
}

/* ---------- botão principal: halo suave ---------- */
.v3 .v2-btn--xl.v2-btn--mag { box-shadow: 0 18px 36px -16px rgba(1,175,214, .75), 0 0 0 0 rgba(1,175,214, .35), inset 0 1px 0 rgba(255, 255, 255, .25); animation: v3Halo 3.2s ease-out infinite; }
@keyframes v3Halo {
  0% { box-shadow: 0 18px 36px -16px rgba(1,175,214, .75), 0 0 0 0 rgba(1,175,214, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
  70%, 100% { box-shadow: 0 18px 36px -16px rgba(1,175,214, .75), 0 0 0 14px rgba(1,175,214, 0), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

/* ---------- telas menores ---------- */
@media (max-width: 980px) {
  .v3-grid { background-size: 48px 48px; }
  .v3-grid i:nth-child(3), .v3-grid i:nth-child(4) { display: none; }
}
@media (max-width: 600px) {
  .v3 .v2-chip--a { left: 0; top: 60px; }
  .v3 .v2-chip--b { right: 0; bottom: 10px; }
  .v3-feats li { font-size: .72rem; padding: 6px 11px 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-grid::before, .v3-grid i { display: none; }
  .v3 .v2-h2 em, .v3 .v2-hero__title em, .v3 .v2-sim::before, .v3 .v2-btn--xl.v2-btn--mag { animation: none; }
  .v2-js .v3-feats { opacity: 1; translate: none; }
}