/* stylelint-disable selector-id-pattern */
/* stylelint-disable selector-class-pattern */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: #eef3fb;
  --border: #dbe4f0;
  --pink: #2f6bff;
  --teal: #1e40af;
  --white: #0f1b33;
  --grey: #55627a;
  --grey2: #8593ab;
  --pink-rgb: 47 107 255;
  --teal-rgb: 30 64 175;
}

@keyframes appFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softPulse {
  0%,
  100% {
    box-shadow: 0 4px 28px rgb(var(--pink-rgb) / 35%);
  }

  50% {
    box-shadow: 0 4px 38px rgb(var(--pink-rgb) / 60%);
  }
}

@keyframes shimmerBg {
  0% {
    background-position: 0% 50%;
  }

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

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

html {
  scroll-behavior: smooth;
  background: #f6f8fc;
}

body {
  font-family: Montserrat, sans-serif;
  background: linear-gradient(160deg, #f6f8fc 0%, #eef3fb 50%, #f6f8fc 100%);
  background-repeat: no-repeat;
  color: var(--white);
  font-size: 15px;
  overflow-x: hidden;
  min-height: 100vh;
}

.screen {
  display: none;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem 3rem;
}

.screen.active {
  display: flex;
  animation: appFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.inner {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.BB {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* BUTTONS */
.btn {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 50px;
  font-family: Montserrat, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.btn:active {
  transform: scale(0.97);
}

.btn-pink {
  background: linear-gradient(95deg, #1e3a8a, #2f6bff, #3b82f6, #60a5fa);
  background-size: 200% 100%;
  color: #fff !important;
  box-shadow: 0 4px 28px rgb(var(--pink-rgb) / 40%);
  animation: softPulse 2.8s ease-in-out infinite, shimmerBg 6s ease infinite;
  /* iOS 27 fix: keep the pulsing box-shadow/shimmer repaints on this button's
     own compositing layer so they don't jitter the blurred avatars sitting
     next to it (S7/S8/S9). */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (hover: hover) {
  .btn-pink:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }
}

.btn-teal {
  background: var(--teal);
  color: #0d0d0d !important;
  font-weight: 800;
}

.btn-dark {
  background: var(--card2);
  color: var(--grey) !important;
  border: 1px solid var(--border);
}

/* INPUT */
input[type="text"] {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.2rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--white);
  font-size: 1rem;
  font-family: Montserrat, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

input[type="text"]:focus {
  border-color: var(--pink);
}

input[type="text"]::placeholder {
  color: var(--grey2);
}

.inp-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.at {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey);
  font-size: 0.95rem;
  pointer-events: none;
  font-weight: 600;
}

/* CARDS */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}

.card-pink {
  border-color: rgb(var(--pink-rgb) / 30%);
  box-shadow: 0 0 20px rgb(var(--pink-rgb) / 6%);
}

/* SCAN */
.sstatus {
  background: rgb(var(--teal-rgb) / 8%);
  border: 1px solid rgb(var(--teal-rgb) / 20%);
  border-radius: 50px;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 0.85rem;
  transition: all 0.4s;
}

.sstatus.found {
  background: var(--teal);
  color: #0d0d0d;
  font-weight: 800;
}

.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.83rem;
}

.srow:last-child {
  border-bottom: none;
}

.srow .sl {
  color: var(--grey);
}

.srow .sv {
  color: var(--white);
  font-weight: 600;
}

.srow.done .sl {
  color: var(--teal);
}

.sspin {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.sck {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(var(--teal-rgb) / 15%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--teal);
  font-weight: 800;
}

/* AVATAR RING */
.avring {
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
}

.avborder {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--pink), #3b82f6, #5b9dff, var(--pink));
  animation: spin 3s linear infinite;
}

.avinner {
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avinner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avinit {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  color: var(--pink);
}

/* POPUP */
.pop-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 85%);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pop-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.pop-box {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 2rem 1.5rem 2.5rem;
  width: 100%;
  max-width: 430px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pop-overlay.show .pop-box {
  transform: translateY(0);
}

/* PROGRESS */
.prog {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-bottom: 1rem;
}

.pseg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
}

.pseg.a,
.pseg.d {
  background: var(--teal);
}

/* STATS */
.sbox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.9rem;
}

.snum {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--pink);
  display: block;
  margin-bottom: 0.2rem;
}

/* VISITOR ROWS */
.vrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}

.vrow:last-child {
  border-bottom: none;
}

.vav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pink);
  background: var(--card2);
}

.vav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BLURRED CARD ROWS (S7, S8, S9) */
.blur-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.blur-card:last-child {
  margin-bottom: 0;
}

.bav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card2);
  position: relative;
}

.bav-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #333, #444);
  filter: blur(6px);
}

.btxt {
  flex: 1;
  min-width: 0;
}

.bnm {
  height: 9px;
  border-radius: 4px;
  background: var(--card2);
  width: 130px;
  filter: blur(5px);
  margin-bottom: 5px;
}

.bsb {
  height: 7px;
  border-radius: 4px;
  background: var(--card2);
  width: 90px;
  filter: blur(4px);
}

/* TESTIMONIAL */
.testi {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.testi:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.thd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.tav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(var(--pink-rgb) / 10%);
  border: 1px solid rgb(var(--pink-rgb) / 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pink);
  flex-shrink: 0;
  overflow: hidden;
}

.tav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stars {
  font-size: 0.72rem;
  color: #fbbf24;
  letter-spacing: 1px;
}

.testi p {
  font-size: 0.82rem;
  color: rgb(15 27 51 / 78%);
  line-height: 1.65;
}

/* OFFER FEATURES GRID */
.feat-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.feat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
}

.feat-box-icon {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.feat-box-title {
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.feat-box-desc {
  font-size: 0.75rem;
  color: var(--grey);
  line-height: 1.4;
}

/* CHECKLIST */
.ci {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.ck {
  color: var(--pink);
  flex-shrink: 0;
  font-weight: 800;
  margin-top: 1px;
  font-size: 1rem;
}

/* NOTIF */
.notif {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 500;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 0.35s;
  opacity: 0;
  width: calc(100% - 2.5rem);
  max-width: 400px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 60%);
}

.notif.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  background: var(--card2);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.ndot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: blink 0.9s infinite;
}

/* BLURRED / LOCKED notification (every 2nd slot in the loop): the photo and the
   @handle are obscured so the visitor stays unrevealed. The blurred avatar is
   promoted to its own GPU layer so the blinking .ndot beside it can't cause the
   iOS 27 compositing jitter. */
.notif.locked .nav {
  filter: blur(5px);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.notif.locked #notifUser {
  -webkit-user-select: none;
  user-select: none;
}

/* SPINNER */
.spin-d {
  position: relative;
  width: 72px;
  height: 72px;
}

.spin-d .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.spin-d .r1 {
  border-top-color: var(--teal);
  animation: spin 1s linear infinite;
}

.spin-d .r2 {
  inset: 8px;
  border-top-color: var(--pink);
  animation: spin 0.7s linear infinite reverse;
}

.spin-d .r3 {
  inset: 16px;
  border-top-color: rgb(255 255 255 / 7%);
  animation: spin 1.3s linear infinite;
}

/* MINI AVATARS (S4) */

/* carousel */
#deepAvs {
  overflow: hidden;
  width: 100%;
  margin: 0.6rem 0;
}

#carTrack {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  width: max-content;
}

#carTrack.running {
  animation: car-scroll 10s linear infinite;
}

@keyframes car-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.cav {
  display: block;
  width: 66px;
  height: 66px;
  min-width: 66px;
  min-height: 66px;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #ffffff26;
  background: #eef3fb;
  flex-shrink: 0;
  position: relative;
}

/* SCAN PROGRESS DOTS */
.scan-dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.5rem 0;
}

.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.sdot.on {
  background: var(--pink);
}

/* HSTEP */
.hstep {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.hstep:last-child {
  border-bottom: none;
}

.hnum {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* OFFER PRICE BOX */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.75rem;
}

/* ANIMATIONS */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.15;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgb(var(--pink-rgb) / 20%);
  }

  50% {
    box-shadow: 0 0 40px rgb(var(--pink-rgb) / 60%);
  }
}

@keyframes scan-line {
  0% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

.fi {
  animation: fade-up 0.4s ease both;
}

/* ===== APP-STYLE SUBTLE ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference) {
  .screen.active .vrow,
  .screen.active .feat-box,
  .screen.active .sbox {
    animation: appFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .screen.active .vrow:nth-child(1),
  .screen.active .sbox:nth-child(1),
  .screen.active .feat-box:nth-child(1) { animation-delay: 0.04s; }

  .screen.active .vrow:nth-child(2),
  .screen.active .sbox:nth-child(2),
  .screen.active .feat-box:nth-child(2) { animation-delay: 0.1s; }

  .screen.active .vrow:nth-child(3),
  .screen.active .sbox:nth-child(3),
  .screen.active .feat-box:nth-child(3) { animation-delay: 0.16s; }

  .screen.active .vrow:nth-child(4),
  .screen.active .sbox:nth-child(4),
  .screen.active .feat-box:nth-child(4) { animation-delay: 0.22s; }

  .screen.active .vrow:nth-child(5) { animation-delay: 0.28s; }
  .screen.active .vrow:nth-child(6) { animation-delay: 0.34s; }
}

.feat-box,
.sbox,
.card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
}

.feat-box:active,
.sbox:active {
  transform: scale(0.98);
}

.btn-teal:active,
.btn-dark:active {
  transform: scale(0.97);
}

/* ===== LIGHT SCREENS: s4 (scanning) + s10 (offer) ===== */
#s4,
#s10 {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 60%, #eef3fb 100%);
  --bg: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: #f4f1f9;
  --border: #ece7f3;
  --white: #0f1b33;
  --grey: #55627a;
  --grey2: #8593ab;
  color: #0f1b33;
}

/* headings/plain text inside light screens that inherit body white */
#s4 h1, #s4 h2, #s4 h3, #s4 h4, #s4 p, #s4 span, #s4 div, #s4 li, #s4 strong, #s4 b,
#s10 h1, #s10 h2, #s10 h3, #s10 h4, #s10 p, #s10 span, #s10 div, #s10 li, #s10 strong, #s10 b {
  color: #0f1b33;
}

/* but preserve explicit inline-colored elements (pink/grey/teal accents) */
#s4 [style*="color: var(--pink)"], #s10 [style*="color: var(--pink)"] { color: var(--pink) !important; }
#s4 [style*="color: var(--grey)"], #s10 [style*="color: var(--grey)"] { color: var(--grey) !important; }
#s4 [style*="color: var(--teal)"], #s10 [style*="color: var(--teal)"] { color: var(--teal) !important; }
#s4 [style*="color:#"], #s10 [style*="color:#"],
#s4 [style*="color: #"], #s10 [style*="color: #"] { color: revert; }

/* keep pink accents readable on white */
#s4 .card,
#s10 .card,
#s4 .feat-box,
#s10 .feat-box,
#s4 .sbox,
#s10 .sbox {
  box-shadow: 0 4px 20px rgb(120 80 200 / 8%);
}

/* offer price highlight stays gradient-instagram tinted */
#s10 .card-pink {
  border-color: rgb(var(--pink-rgb) / 25%);
  background: rgb(var(--pink-rgb) / 4%);
}

/* s10 CTA buttons GREEN (like reference) */
#s10 .btn-pink {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  background-size: auto !important;
  color: #fff !important;
  box-shadow: 0 4px 28px rgb(16 185 129 / 35%) !important;
  animation: none !important;
}

@media (hover: hover) {
  #s10 .btn-pink:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }
}

/* second CTA RED (print 2) */
#s10 .btn-red-cta {
  background: #e8453c !important;
  box-shadow: 0 4px 28px rgb(232 69 60 / 32%) !important;
}

/* Discount downsell entrance animations */
@keyframes discFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes discRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Clean theme: white text on solid-blue surfaces ──────────────── */
/* In the light theme --teal is a deep blue used as a solid fill, so
   the near-black label baked into these components disappears. Force
   white for legibility. */
.sstatus.found {
  color: #ffffff !important;
}
.btn-teal {
  color: #ffffff !important;
}

/* ══════════ S6 DASHBOARD: airy, equal-height stat cards ══════════ */
#s6 #statGrid {
  gap: 0.6rem;
  grid-auto-rows: 1fr; /* every row the same height */
}
#s6 .sbox {
  min-height: 100px;
  padding: 0.85rem 0.95rem !important;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(70, 95, 155, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#s6 .snum {
  font-size: 2.1rem;
  margin-bottom: 0.28rem;
}
#s6 .sbox > span:last-child {
  line-height: 1.25;
}
/* Keep the rest tidy so the CTA stays above the fold */
#s6 .inner > div { margin-bottom: 0.65rem !important; }
#s6 .inner > p { margin-bottom: 0.5rem !important; }
#s6 .prog { margin-bottom: 0.65rem !important; }
#s6 .inner > div[style*="gap: 0.85rem"] { padding: 0.7rem 0.85rem !important; }
#s6 .inner > div[style*="glow-pulse"] {
  padding: 0.6rem 0.75rem !important;
  font-size: 0.77rem !important;
  line-height: 1.4 !important;
}

/* ══════════ CTA DAS TELAS DE RESULTADO (fixo no fim do conteúdo) ══════════
   Sem flutuar: o botão fica logo abaixo do conteúdo, na mesma largura dos
   cards, com espaçamento consistente em todas as telas. */
.has-float .inner {
  display: flex;
  flex-direction: column;
}

/* o que vem logo antes do botão não soma margem: espaço igual em toda tela */
.has-float .inner > :has(+ .btn-float),
#s6 .inner > :has(+ .btn-float) {
  margin-bottom: 0 !important;
}

.btn-float {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* ══════════ S1: top CTA looks disabled until an @ is typed ══════════ */
.btn-pink.is-disabled {
  /* keeps the real button colors, just softer + no glow/pulse */
  opacity: 0.6;
  box-shadow: none !important;
  animation: none !important;
  cursor: not-allowed;
  transform: none !important;
}
@media (hover: hover) {
  .btn-pink.is-disabled:hover { opacity: 0.6; transform: none; }
}
/* highlight on the username field when the bottom CTA brings the user back */
@keyframes inpFlash {
  0% { box-shadow: 0 0 0 0 rgb(var(--pink-rgb) / 55%); }
  100% { box-shadow: 0 0 0 12px rgb(var(--pink-rgb) / 0%); }
}
.inp-wrap.inp-flash input[type="text"] {
  border-color: var(--pink);
  animation: inpFlash 0.9s ease-out 2;
}

/* ══════════ PERFORMANCE DE ROLAGEM (navegador do Instagram) ══════════
   As animações antigas do botão (box-shadow pulsando + background-position
   do degradê) e do glow-pulse obrigavam o celular a REPINTAR a página a cada
   frame, disputando com a rolagem. Aqui o mesmo visual é feito só com
   transform/opacity, que roda na GPU sem repintar nada. */
.btn-pink {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: none;
  background-size: 100% 100%;
}

/* degradê que desliza: camada 2x mais larga movida com transform */
.btn-pink::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  z-index: -1;
  background: inherit;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: btnSlide 6s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes btnSlide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* pulso suave do botão: só escala (compositor), sem mexer na sombra */
.btn-pink:not(.is-disabled) {
  animation: btnBreath 2.8s ease-in-out infinite;
}

@keyframes btnBreath {
  0%, 100% { scale: 1; }
  50% { scale: 1.015; }
}

.btn-pink.is-disabled::before { animation: none; }

/* cards com glow pulsando (inline "glow-pulse"): brilho fixo */
[style*="glow-pulse"] {
  animation: none !important;
  box-shadow: 0 0 30px rgb(var(--pink-rgb) / 35%) !important;
}

/* bolinhas piscando: garantir camada própria (opacity sem repintar) */
.ndot,
[style*="animation: blink"] {
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .btn-pink::before, .btn-pink:not(.is-disabled) { animation: none; }
}

/* ══════════ SEM "TRAVA" NA ROLAGEM ══════════
   100vh no navegador do Instagram/Safari = altura com a barra ESCONDIDA, então
   a página ficava sempre um pouco maior que a área visível: rolava uns pixels,
   a barra do Instagram mexia e dava um tranco. 100svh = área visível real. */
body,
.screen {
  min-height: 100vh;
  min-height: 100svh;
}

/* overflow-x: hidden no body pode virar um container de rolagem próprio no
   iOS (rolagem sem inércia / "agarrando"). clip corta sem criar rolagem. */
html,
body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* rolagem suave só quando o código pede (showScreen já passa o behavior) */
html {
  scroll-behavior: auto;
}

/* ══════════ NOTIFICAÇÃO "VISITED YOUR PROFILE" SEM TRAVAR A ROLAGEM ══════════
   Camada própria na GPU + contenção de layout: entrar/sair/trocar texto e foto
   não recalcula nem repinta o resto da página enquanto o usuário rola. */
.notif {
  will-change: transform, opacity;
  contain: layout style;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.notif .nav {
  transform: translateZ(0);
}

/* ══════════ FUNDO NA COR DO SITE (elástico do iPhone mantido) ══════════
   No navegador do Instagram, ao chegar no fim, o iPhone puxava a página além
   do conteúdo e mostrava uma faixa preta (fundo do próprio navegador) antes
   de voltar. Desliga o elástico e pinta tudo que ficar atrás na cor do site. */
html,
body {
  background-color: #f6f8fc;
}

html {
  color-scheme: light;
}

/* ══════════ LISTA "PROFILE VISITORS" (formato app) ══════════ */
.vlist {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 0.75rem;
}

.vlist .vrow,
.vlist .blur-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 74px;
  padding: 0.8rem 1rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}

.vlist #blurList7 .blur-card:last-child { border-bottom: 0; }
.vlist #visitorList:empty + #blurList7 .blur-card:first-child { border-top: 0; }

.vlist .vav,
.vlist .bav {
  width: 48px;
  height: 48px;
  border: 0;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border);
}

.vinfo { flex: 1; min-width: 0; }

.vname {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vsub {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgb(var(--pink-rgb) / 12%);
  color: var(--pink);
}

.vpill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.vpill.on {
  background: rgb(16 185 129 / 14%);
  color: #10b981;
}

.vpill.on i {
  box-shadow: 0 0 0 0 rgb(16 185 129 / 60%);
  animation: onlinePing 1.8s ease-out infinite;
}

@keyframes onlinePing {
  0% { box-shadow: 0 0 0 0 rgb(16 185 129 / 55%); }
  100% { box-shadow: 0 0 0 6px rgb(16 185 129 / 0%); }
}

/* cadeado de contorno (substitui o emoji) em todas as listas bloqueadas */
.lk {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--grey);
  opacity: 0.7;
}

.lk-ico {
  width: 20px;
  height: 20px;
  display: block;
}

.vmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  font-size: 0.82rem;
  color: var(--grey);
}

.vmore .lk-ico { width: 16px; height: 16px; opacity: 0.8; }

/* ══════════ ENTRADAS SUTIS ESTILO APP (telas de resultado) ══════════
   Só transform/opacity, uma vez por tela: leve e sem pesar na rolagem. */
@keyframes appRise {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes appRowIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .has-float.active .inner > *:not(.btn-float) {
    animation: appRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .has-float.active .inner > :nth-child(1) { animation-delay: 0s; }
  .has-float.active .inner > :nth-child(2) { animation-delay: 0.04s; }
  .has-float.active .inner > :nth-child(3) { animation-delay: 0.08s; }
  .has-float.active .inner > :nth-child(4) { animation-delay: 0.12s; }
  .has-float.active .inner > :nth-child(5) { animation-delay: 0.16s; }
  .has-float.active .inner > :nth-child(6) { animation-delay: 0.2s; }
  .has-float.active .inner > :nth-child(7) { animation-delay: 0.24s; }
  .has-float.active .inner > :nth-child(8) { animation-delay: 0.28s; }

  .has-float.active .btn-float {
    animation:
      appRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both,
      btnBreath 2.8s ease-in-out 0.9s infinite;
  }

  /* linhas das listas entram uma a uma */
  .has-float.active .vrow,
  .has-float.active .blur-card,
  .has-float.active .ci {
    animation: appRowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .has-float.active #visitorList .vrow:nth-child(1) { animation-delay: 0.2s; }
  .has-float.active #visitorList .vrow:nth-child(2) { animation-delay: 0.26s; }
  .has-float.active #visitorList .vrow:nth-child(3) { animation-delay: 0.32s; }
  .has-float.active .blur-card:nth-child(1) { animation-delay: 0.3s; }
  .has-float.active .blur-card:nth-child(2) { animation-delay: 0.36s; }
  .has-float.active .blur-card:nth-child(3) { animation-delay: 0.42s; }
  .has-float.active .blur-card:nth-child(4) { animation-delay: 0.48s; }
  .has-float.active #visitorList ~ #blurList7 .blur-card:nth-child(1) { animation-delay: 0.38s; }
  .has-float.active #visitorList ~ #blurList7 .blur-card:nth-child(2) { animation-delay: 0.44s; }
  .has-float.active #visitorList ~ #blurList7 .blur-card:nth-child(3) { animation-delay: 0.5s; }

  /* a barra de progresso da etapa atual "enche" ao entrar */
  .has-float.active .pseg.a {
    transform-origin: left center;
    animation: segFill 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }
}

@keyframes segFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.vlist .bnm { width: 140px; height: 11px; filter: blur(4px); opacity: 0.9; background: var(--grey); opacity: 0.35; margin-bottom: 7px; }
.vlist .bsb { width: 95px; height: 8px; filter: blur(3.5px); background: var(--grey); opacity: 0.25; }

/* ══════════ S7 (2/6): lista mais enxuta, botão sobe ══════════ */
#s7 .vlist .vrow,
#s7 .vlist .blur-card {
  min-height: 64px;
  padding: 0.65rem 1rem;
}
#s7 .vlist .vav,
#s7 .vlist .bav { width: 44px; height: 44px; }
#s7 .inner > p { margin-bottom: 0.9rem !important; }
#s7 .vlist { margin-bottom: 0.6rem; }
#s7 .vmore { padding: 0.65rem 1rem; }
#s7 .btn-float { margin-top: 1rem; }

/* ══════════ VISITAS OCULTAS (número borrado) nas linhas abertas ══════════ */
.vpill {
  background: transparent !important;
  color: var(--pink) !important;
  padding: 0;
  font-size: 0.85rem;
  gap: 0.35rem;
}
.vpill .vblur {
  display: inline-block;
  min-width: 1.1em;
  font-weight: 800;
  color: var(--pink);
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  transform: translateZ(0);
}

/* ══════════ DEPOIMENTO NA TELA DE SCAN (S4) ══════════ */
.scan-testi {
  margin-top: 1rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 16px;
  background: var(--card2);
  border: 1px solid var(--border);
  text-align: left;
}

.st-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.st-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--pink) !important;
  background: rgb(var(--pink-rgb) / 12%);
}

#s4 .st-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

#s4 .st-stars {
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #fbbf24 !important;
  line-height: 1.3;
}

#s4 .st-text {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--grey) !important;
}