@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #F8F7F4;
  --s0: #EEECEA;
  --s1: #FFFFFF;
  --s2: #F4F2EE;
  --s3: #E8E6E1;
  --tx: #0D0D0D;
  --t2: rgba(13, 13, 13, .52);
  --t3: rgba(13, 13, 13, .28);
  --bd: rgba(13, 13, 13, .08);
  --bds: rgba(13, 13, 13, .16);
  --lm: #DAFF47;
  --rd: #D43B2D;
  --rs: 8px;
  --serif: 'Instrument Serif', Georgia, serif;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.hero-serif {
  font-family: var(--serif);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(.72) translateY(24px); }
  65% { transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes floatA { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-12px); } }
@keyframes floatB { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-9px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes floatD { 0%, 100% { transform: rotate(-.8deg) translateY(-3px); } 50% { transform: rotate(-.8deg) translateY(6px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes magicBlink {
  0%, 100% { opacity: 1; text-shadow: none; }
  40% { opacity: .1; text-shadow: 0 0 12px #FF6B00; }
  55% { opacity: 1; text-shadow: 0 0 18px rgba(255,107,0,.8), 0 0 32px rgba(255,107,0,.4); }
  70% { opacity: .3; }
  80% { opacity: 1; text-shadow: 0 0 8px rgba(255,107,0,.5); }
}

.lv {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lm);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ===== Login layout ===== */

.login-wrap {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.login-side {
  width: 460px;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 52px;
  position: relative;
  z-index: 2;
  box-shadow: 2px 0 24px rgba(0, 0, 0, .06);
  text-align: center;
}

.login-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tx), #555, var(--lm));
}

.wordmark {
  margin-bottom: 2px;
}

.wm-main {
  font-size: 22px;
  font-weight: 800;
  color: #0D0D0D;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.wm-sub {
  font-size: 12px;
  color: #999;
  font-style: italic;
  font-family: var(--serif);
  margin-top: 1px;
}

.wm-shopee {
  font-size: 15px;
  font-weight: 700;
  color: #FF6B00;
  animation: magicBlink 2.8s ease-in-out infinite;
  margin-top: 3px;
}

.login-char {
  width: 150px;
  height: auto;
  margin: 6px 0 10px;
}

.login-title {
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #0D0D0D;
  font-weight: 400;
  margin-bottom: 26px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.login-form label {
  display: block;
  text-align: left;
}

.login-form label span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0D0D0D;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 7px;
}

.login-form input {
  width: 100%;
  background: #F5F5F3;
  border: 1.5px solid #E5E3DE;
  border-radius: 9px;
  padding: 13px 15px;
  font-size: 15px;
  color: #0D0D0D;
  transition: border-color .15s, background .15s;
  outline: none;
}

.login-form input:focus {
  border-color: #0D0D0D;
  background: #fff;
}

.login-form input::placeholder {
  color: #B5B2AA;
}

.login-btn {
  width: 100%;
  background: #DAFF47;
  color: #000;
  border: none;
  border-radius: 9px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s, box-shadow .15s;
  margin-top: 4px;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(218, 255, 71, .5);
}

.login-btn:active {
  transform: scale(.97);
}

.login-btn:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.login-notice {
  margin-top: 18px;
  width: 100%;
  background: rgba(212, 59, 45, .08);
  color: var(--rd);
  border: 1px solid rgba(212, 59, 45, .2);
  border-radius: var(--rs);
  padding: 11px 14px;
  font-size: 13px;
  text-align: center;
}

/* ===== Hero ===== */

.login-hero {
  flex: 1;
  background: var(--lm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 55% 40%, rgba(255, 255, 255, .35) 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(13, 13, 13, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 13, 13, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 480px;
  width: 100%;
}

.hero-head {
  text-align: center;
  margin-bottom: 44px;
  animation: fadeUp .6s ease both;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(13, 13, 13, .14);
  background: rgba(13, 13, 13, .06);
  border-radius: 99px;
  padding: 7px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: rgba(13, 13, 13, .7);
  font-weight: 600;
}

.hero-h2 {
  font-size: 46px;
  line-height: 1.03;
  letter-spacing: -1.5px;
  color: #0d0d0d;
  margin-bottom: 12px;
  font-weight: 400;
}

.hero-h2 em {
  font-style: italic;
  white-space: nowrap;
}

.type-caret {
  display: inline-block;
  width: 3px;
  height: .8em;
  margin-left: 4px;
  background: #0d0d0d;
  vertical-align: -.02em;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.hero-p {
  font-size: 14px;
  color: rgba(13, 13, 13, .55);
  line-height: 1.7;
}

.hero-cards {
  position: relative;
  height: 280px;
}

.pcard {
  position: absolute;
}

.pcard-1 {
  top: 0;
  left: 0;
  right: 48px;
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
  animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) .15s both, floatA 4s ease-in-out .7s infinite;
}

.pcard-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pcard-top img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}

.pcard-info {
  flex: 1;
  min-width: 0;
}

.pcard-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #F0ECE5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-info small {
  display: block;
  font-size: 11px;
  color: rgba(240, 236, 229, .45);
  margin-top: 2px;
}

.pcard-tag {
  background: rgba(218, 255, 71, .18);
  color: #DAFF47;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  flex-shrink: 0;
}

.pcard-sent {
  background: #111;
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(240, 236, 229, .4);
}

.pcard-2 {
  bottom: 0;
  left: 48px;
  right: 0;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) .45s both, floatB 3.8s ease-in-out 1s infinite;
}

.pcard-2 img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}

.pcard-3 {
  top: 10px;
  right: 0;
  width: 140px;
  background: #1E1E1E;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  padding: 13px 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
  animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) .7s both, floatC 5s ease-in-out 1.25s infinite;
}

.pcard-lb {
  font-size: 10px;
  font-weight: 700;
  color: rgba(240, 236, 229, .35);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.pcard-stat {
  font-size: 26px;
  letter-spacing: -1px;
  color: #F0ECE5;
  line-height: 1;
}

.pcard-up {
  font-size: 11px;
  color: #DAFF47;
  margin-top: 3px;
  font-weight: 600;
}

.pcard-4 {
  bottom: 60px;
  left: 0;
  width: 160px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) .95s both, floatD 4.5s ease-in-out 1.5s infinite;
}

.pcard-4 img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}

.pcard-4 .pcard-info strong {
  font-size: 11px;
  font-weight: 600;
  max-width: 100px;
}

.pcard-4 .pcard-info small {
  font-size: 10px;
  color: rgba(240, 236, 229, .35);
}

.pcard-5 {
  top: 120px;
  right: -8px;
  background: #DAFF47;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(218, 255, 71, .35);
  animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both, floatC 3.5s ease-in-out 1.7s infinite;
}

.pcard5-lb {
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, .5);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.pcard5-n {
  font-size: 22px;
  font-weight: 800;
  color: #000;
  line-height: 1;
  letter-spacing: -1px;
  margin: 1px 0;
}

/* ===== Invite page (single centered panel) ===== */

.invite-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 24px;
}

.invite-wrap .login-side {
  width: 100%;
  max-width: 460px;
  box-shadow: var(--sh, 0 4px 24px rgba(0, 0, 0, .06));
  border-radius: 16px;
  border: 1px solid var(--bd);
}

.invite-copy {
  margin-bottom: 8px;
}

.invite-copy h1 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.8px;
  color: #0D0D0D;
  margin-bottom: 8px;
}

.invite-copy p {
  font-size: 14px;
  color: var(--t2);
  line-height: 1.55;
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
  body {
    overflow: auto;
    height: auto;
  }

  .login-wrap {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .login-side {
    width: 100%;
    padding: 40px 28px;
  }

  .login-hero {
    display: none;
  }
}

/* ==================================================================
   Landing page (public sales page)
   ================================================================== */

.lp {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.lp b { font-weight: 700; }

@keyframes lpFloat1 { 0%, 100% { transform: translateZ(60px) translateY(0) rotate(-3deg); } 50% { transform: translateZ(60px) translateY(-16px) rotate(-3deg); } }
@keyframes lpFloat2 { 0%, 100% { transform: translateZ(90px) translateY(0) rotate(4deg); } 50% { transform: translateZ(90px) translateY(-13px) rotate(4deg); } }
@keyframes lpFloat3 { 0%, 100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(40px) translateY(-10px); } }
@keyframes lpOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } }
@keyframes lpMsgIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Nav ---- */
.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 30px;
  background: rgba(248, 247, 244, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding .25s, background .25s, border-color .25s;
}
.lp-nav.scrolled {
  padding: 10px 30px;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--bd);
}
.lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tx); }
.lp-brand-txt { display: flex; flex-direction: column; line-height: 1; }
.lp-brand-txt b { font-size: 16px; letter-spacing: 1px; }
.lp-brand-txt i { font-style: normal; font-size: 10.5px; color: var(--t2); letter-spacing: .5px; }
.lp-links { display: flex; gap: 26px; margin-left: auto; }
.lp-links a { text-decoration: none; color: var(--t2); font-size: 14px; font-weight: 500; transition: color .15s; }
.lp-links a:hover { color: var(--tx); }
.lp-enter {
  border: none; background: var(--tx); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.lp-enter:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(13, 13, 13, .22); }
.lp-burger { display: none; border: none; background: none; font-size: 22px; }

/* ---- Buttons ---- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; padding: 13px 26px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.lp-btn.primary { background: var(--lm); color: #0D0D0D; }
.lp-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(218, 255, 71, .5); }
.lp-btn.ghost { background: rgba(13, 13, 13, .06); color: var(--tx); }
.lp-btn.ghost:hover { background: rgba(13, 13, 13, .1); }
.lp-btn.outline { background: transparent; color: var(--tx); border: 1.5px solid var(--bds); }
.lp-btn.outline:hover { border-color: var(--tx); }
.lp-btn.full { width: 100%; }
.lp-btn.big { padding: 15px 32px; font-size: 16px; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Hero ---- */
.lp-hero { position: relative; padding: 150px 30px 90px; overflow: hidden; }
.lp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: lpOrb 9s ease-in-out infinite; }
.lp-orb.o1 { width: 420px; height: 420px; background: var(--lm); top: -80px; right: 8%; }
.lp-orb.o2 { width: 340px; height: 340px; background: #B7E7FF; bottom: -120px; left: -60px; animation-delay: 2s; }
.lp-gridbg {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--bd) 1px, transparent 1px), linear-gradient(90deg, var(--bd) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
  opacity: .6;
}
.lp-hero-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.lp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--bd); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--t2);
  box-shadow: 0 4px 14px rgba(13, 13, 13, .05);
}
.lp-hero-copy h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; margin: 20px 0 18px; letter-spacing: -.5px; }
.lp-type { font-style: italic; }
.lp-caret { display: inline-block; width: 3px; height: .9em; background: var(--lm); margin-left: 3px; vertical-align: -2px; animation: pulse 1s steps(1) infinite; }
.lp-sub { font-size: 18px; line-height: 1.55; color: var(--t2); max-width: 520px; }
.lp-cta { display: flex; gap: 12px; margin: 26px 0 20px; flex-wrap: wrap; }
.lp-cta.center { justify-content: center; }
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-trust li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--t2); font-weight: 500; }
.lp-ck { color: #12A150; flex-shrink: 0; }

/* ---- 3D hero scene ---- */
.lp-stage { perspective: 1300px; height: 460px; position: relative; }
.lp-scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(6deg);
  transition: transform .3s ease-out;
}
.lp-phone {
  position: absolute; top: 20px; left: 50%; width: 300px; margin-left: -150px;
  background: #fff; border-radius: 26px; padding: 16px;
  border: 1px solid var(--bd);
  box-shadow: 0 40px 80px rgba(13, 13, 13, .22);
  transform: translateZ(20px);
}
.lp-phone-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 4px 6px 12px; border-bottom: 1px solid var(--bd); }
.lp-phone-top .lv { animation: none; }
.lp-chat { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.lp-msg {
  display: flex; gap: 10px; align-items: center;
  background: #F0FBD8; border: 1px solid rgba(13, 13, 13, .06); border-radius: 14px; padding: 10px;
  animation: lpMsgIn .5s both;
}
.lp-msg.delay1 { animation-delay: .5s; }
.lp-msg-img { width: 42px; height: 42px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--bd); }
.lp-msg-body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lp-msg-body b { font-size: 13.5px; }
.lp-msg-body small { font-size: 11.5px; color: var(--t2); }
.lp-msg-link { font-size: 11px; color: #12A150; font-weight: 700; margin-top: 2px; }
.lp-msg-sent { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); font-weight: 600; padding: 2px 4px; animation: lpMsgIn .5s both .95s; }
.lp-msg-sent .lv { animation: pulse 1.8s ease-in-out infinite; }
.lp-fcard {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 12px 15px;
  box-shadow: 0 20px 44px rgba(13, 13, 13, .16);
}
.lp-fcard span { font-size: 22px; }
.lp-fcard b { font-size: 14px; display: block; }
.lp-fcard small { font-size: 11px; color: var(--t2); }
.lp-fcard.f1 { top: 8px; left: -6px; animation: lpFloat1 6s ease-in-out infinite; }
.lp-fcard.f2 { bottom: 70px; right: -14px; animation: lpFloat2 7s ease-in-out infinite; }
.lp-fcard.f3 { bottom: 0; left: 12px; flex-direction: column; align-items: flex-start; gap: 0; background: var(--lm); border-color: var(--lm); animation: lpFloat3 5.5s ease-in-out infinite; }
.lp-fcard.f3 b { font-size: 22px; font-family: var(--serif); }
.lp-fcard.f3 small { color: rgba(13, 13, 13, .6); font-weight: 600; }

/* ---- Section shells ---- */
.lp-steps, .lp-plans, .lp-faq, .lp-docs, .lp-terms, .lp-final { max-width: 1120px; margin: 0 auto; padding: 80px 30px; }
.lp-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.lp-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #12A150; margin-bottom: 12px; }
.lp-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.5px; }
.lp-head p { margin-top: 12px; color: var(--t2); font-size: 16px; }

/* ---- Steps ---- */
.lp-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-step {
  position: relative; background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 30px 26px;
  transition: transform .2s, box-shadow .2s;
}
.lp-step:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(13, 13, 13, .1); }
.lp-step-n { position: absolute; top: 20px; right: 22px; font-family: var(--serif); font-size: 30px; color: var(--s3); }
.lp-step-ic { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; font-size: 26px; background: #F0FBD8; border-radius: 15px; margin-bottom: 16px; }
.lp-step b { display: block; font-size: 18px; margin-bottom: 8px; }
.lp-step small { font-size: 14px; line-height: 1.55; color: var(--t2); }

/* ---- Plans ---- */
.lp-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.lp-plan {
  position: relative; background: #fff; border: 1.5px solid var(--bd); border-radius: 22px; padding: 32px 26px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-plan:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(13, 13, 13, .12); }
.lp-plan.featured { border-color: var(--lm); box-shadow: 0 24px 60px rgba(218, 255, 71, .28); transform: scale(1.03); }
.lp-plan.featured:hover { transform: scale(1.03) translateY(-6px); }
.lp-plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--lm); color: #0D0D0D; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.lp-plan h3 { font-size: 20px; }
.lp-plan-groups { font-size: 13px; color: var(--t2); margin-top: 2px; font-weight: 600; }
.lp-plan-price { font-family: var(--serif); font-size: 46px; line-height: 1; margin: 16px 0 20px; }
.lp-plan-price span { font-size: 20px; vertical-align: super; margin-right: 3px; }
.lp-plan-price small { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--t3); font-weight: 500; }
.lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; flex: 1; }
.lp-plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--t2); }

/* ---- FAQ ---- */
.lp-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { background: #fff; border: 1px solid var(--bd); border-radius: 16px; overflow: hidden; transition: border-color .2s; }
.lp-faq-item.open { border-color: var(--bds); }
.lp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 20px 22px; text-align: left; font-size: 16px; font-weight: 600; color: var(--tx); }
.lp-faq-q i { font-style: normal; font-size: 24px; color: #12A150; transition: transform .25s; flex-shrink: 0; }
.lp-faq-item.open .lp-faq-q i { transform: rotate(45deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.lp-faq-item.open .lp-faq-a { max-height: 240px; }
.lp-faq-a p { padding: 0 22px 20px; color: var(--t2); font-size: 14.5px; line-height: 1.6; }

/* ---- Docs ---- */
.lp-doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-doc { background: #fff; border: 1px solid var(--bd); border-radius: 18px; padding: 14px; transition: transform .2s, box-shadow .2s; }
.lp-doc:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(13, 13, 13, .1); }
.lp-doc-thumb {
  position: relative; height: 118px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, #E9F7C4, #CDEBF7);
  display: flex; align-items: center; justify-content: center;
}
.lp-play { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0D0D0D; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(13, 13, 13, .18); }
.lp-soon { position: absolute; top: 10px; right: 10px; background: rgba(13, 13, 13, .8); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; }
.lp-doc b { display: block; font-size: 15px; padding: 0 4px; }
.lp-doc small { display: block; font-size: 12.5px; color: var(--t2); padding: 4px 4px 6px; line-height: 1.45; }

/* ---- Terms ---- */
.lp-terms-box { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 12px 30px; }
.lp-term { padding: 22px 0; border-bottom: 1px solid var(--bd); }
.lp-term:last-child { border-bottom: none; }
.lp-term b { font-size: 16px; display: block; margin-bottom: 7px; }
.lp-term p { font-size: 14px; line-height: 1.6; color: var(--t2); }

/* ---- Final CTA + footer ---- */
.lp-final { text-align: center; }
.lp-final h2 { font-size: clamp(28px, 4vw, 46px); }
.lp-final p { margin: 14px 0 26px; color: var(--t2); font-size: 17px; }
.lp-foot { max-width: 1120px; margin: 0 auto; padding: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--bd); color: var(--t2); font-size: 13px; }
.lp-foot-links { margin-left: auto; }
.lp-foot-links a { color: var(--t2); text-decoration: none; }
.lp-foot-links a:hover { color: var(--tx); }
.login-back { position: absolute; top: 16px; left: 18px; background: none; border: none; color: var(--t2); font-size: 13px; font-weight: 600; }
.login-back:hover { color: var(--tx); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .lp-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--bd);
    max-height: 0; overflow: hidden; transition: max-height .3s;
  }
  .lp-links.open { max-height: 320px; }
  .lp-links a { padding: 15px 30px; border-top: 1px solid var(--bd); }
  .lp-burger { display: block; margin-left: auto; }
  .lp-enter { display: none; }
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-stage { height: 420px; order: -1; margin-bottom: 10px; }
  .lp-step-grid, .lp-plan-grid { grid-template-columns: 1fr; }
  .lp-plan.featured { transform: none; }
  .lp-plan.featured:hover { transform: translateY(-6px); }
  .lp-doc-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .lp-hero { padding: 120px 20px 60px; }
  .lp-steps, .lp-plans, .lp-faq, .lp-docs, .lp-terms, .lp-final { padding: 56px 20px; }
  .lp-doc-grid { grid-template-columns: 1fr; }
  .lp-nav { padding: 12px 18px; }
}

/* ==================================================================
   Premium motion layer (landing) — 3D tactile buttons + card tilt
   ================================================================== */

:root {
  --lm-deep: #B8DC1E;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes lpNavIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

.lp-nav { animation: lpNavIn .5s cubic-bezier(.22, .9, .3, 1) both; }

.lp-btn { position: relative; overflow: hidden; will-change: transform; }

.lp-btn.primary {
  box-shadow: 0 3px 0 var(--lm-deep), 0 8px 20px rgba(218, 255, 71, .35);
}

.lp-btn.primary:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 6px 0 var(--lm-deep), 0 18px 38px rgba(218, 255, 71, .5);
}

.lp-btn.primary:active {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 1px 0 var(--lm-deep), 0 4px 10px rgba(218, 255, 71, .3);
}

.lp-btn.primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22, .9, .3, 1);
  pointer-events: none;
}

.lp-btn.primary:hover::after { left: 135%; }

.lp-btn.ghost:active,
.lp-btn.outline:active { transform: scale(.97); }

.lp-enter { position: relative; overflow: hidden; }

.lp-enter:active { transform: translateY(1px) scale(.98); }

/* Plan cards: real 3D tilt toward the cursor side */
.lp-plan { transform-style: preserve-3d; }

.lp-plan:hover {
  transform: translateY(-8px) rotateX(2.5deg);
  border-color: var(--bds);
}

.lp-plan.featured:hover {
  transform: scale(1.03) translateY(-8px) rotateX(2.5deg);
  border-color: var(--lm);
}

.lp-plan .lp-btn { transform: translateZ(14px); }

/* Steps: icon springs on hover */
.lp-step-ic { transition: transform .25s var(--ease-pop); }
.lp-step:hover .lp-step-ic { transform: scale(1.14) rotate(-5deg); }

/* Docs: thumb zoom + play pop */
.lp-doc-thumb { overflow: hidden; }
.lp-doc-thumb, .lp-play { transition: transform .25s var(--ease-pop), box-shadow .25s; }
.lp-doc:hover .lp-play { transform: scale(1.16); box-shadow: 0 12px 28px rgba(13, 13, 13, .26); }

/* FAQ: plus glows lime when open */
.lp-faq-item.open .lp-faq-q i { color: var(--lm-deep); }

/* Login button matches the tactile language */
.login-btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(13, 13, 13, .55), 0 8px 20px rgba(13, 13, 13, .2);
  transition: transform .18s var(--ease-pop), box-shadow .18s;
}

.login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(13, 13, 13, .55), 0 14px 30px rgba(13, 13, 13, .28); }
.login-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(13, 13, 13, .55); }

@media (prefers-reduced-motion: reduce) {
  .lp-nav, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .lp-btn, .lp-plan, .lp-step-ic, .lp-play, .login-btn { transition: none !important; }
}

/* ==================================================================
   Nilah monochrome premium layer
   Public home + login
   ================================================================== */

:root {
  --bg: #F7F6F2;
  --s0: #EDEBE6;
  --s1: #FFFFFF;
  --s2: #F1F0EC;
  --s3: #DFDDD7;
  --tx: #101010;
  --t2: rgba(16, 16, 16, .58);
  --t3: rgba(16, 16, 16, .34);
  --bd: rgba(16, 16, 16, .10);
  --bds: rgba(16, 16, 16, .18);
  --lm: #101010;
  --lm-deep: #000000;
  --paper: #FBFAF7;
  --ink: #101010;
  --muted: #77736B;
  --shadow-soft: 0 22px 70px rgba(16, 16, 16, .09);
  --shadow-tight: 0 10px 28px rgba(16, 16, 16, .08);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(16, 16, 16, .045), transparent 28%),
    linear-gradient(180deg, #FBFAF7 0%, #F4F3EF 100%);
}

.lv {
  background: var(--ink);
  box-shadow: 0 0 0 5px rgba(16, 16, 16, .07);
}

.lp {
  background:
    linear-gradient(rgba(16, 16, 16, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 16, .028) 1px, transparent 1px),
    var(--paper);
  background-size: 34px 34px, 34px 34px, auto;
}

.lp-nav {
  top: 14px;
  left: 18px;
  right: 18px;
  border: 1px solid rgba(16, 16, 16, .08);
  border-radius: 999px;
  background: rgba(251, 250, 247, .74);
  box-shadow: 0 8px 28px rgba(16, 16, 16, .055);
}

.lp-nav.scrolled {
  padding: 10px 20px;
  background: rgba(255, 255, 255, .86);
  border-color: rgba(16, 16, 16, .11);
}

.lp-brand-txt b {
  letter-spacing: 2.5px;
}

.lp-brand-txt i,
.lp-links a,
.lp-trust li,
.lp-sub,
.lp-head p {
  color: var(--muted);
}

.lp-enter,
.lp-btn.primary,
.lp-plan.featured .lp-btn.primary {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22), 0 14px 30px rgba(16, 16, 16, .16);
}

.lp-enter:hover,
.lp-btn.primary:hover {
  box-shadow: 0 5px 0 rgba(0, 0, 0, .22), 0 20px 44px rgba(16, 16, 16, .18);
}

.lp-btn.ghost,
.lp-btn.outline {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--bd);
  color: var(--ink);
  box-shadow: none;
}

.lp-btn.ghost:hover,
.lp-btn.outline:hover {
  background: #fff;
  border-color: var(--bds);
}

.lp-btn.primary::after {
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .24), transparent);
}

.lp-hero {
  padding-top: 170px;
}

.lp-orb {
  display: none;
}

.lp-gridbg {
  opacity: .75;
  background-image:
    linear-gradient(rgba(16, 16, 16, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 16, .04) 1px, transparent 1px);
}

.lp-pill {
  background: rgba(255, 255, 255, .76);
  border-color: rgba(16, 16, 16, .09);
  color: var(--muted);
  box-shadow: 0 8px 24px rgba(16, 16, 16, .055);
}

.lp-hero-copy h1,
.lp-head h2,
.lp-final h2 {
  color: var(--ink);
  letter-spacing: -.02em;
}

.lp-type,
.hero-h2 em {
  color: var(--ink);
}

.lp-caret,
.type-caret {
  background: var(--ink);
}

.lp-ck,
.lp-eyebrow,
.lp-faq-q i,
.lp-msg-link,
.pcard-up {
  color: var(--ink);
}

.lp-stage {
  min-height: 460px;
}

.lp-phone {
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(16, 16, 16, .10);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.lp-phone-top {
  color: var(--ink);
}

.lp-msg {
  background: #F2F1ED;
  border-color: rgba(16, 16, 16, .07);
}

.lp-msg-img {
  font-size: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
}

.lp-msg:nth-child(1) .lp-msg-img::before,
.lp-msg:nth-child(2) .lp-msg-img::before {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.lp-msg:nth-child(1) .lp-msg-img::before { content: "01"; }
.lp-msg:nth-child(2) .lp-msg-img::before { content: "02"; }

.lp-fcard {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(16, 16, 16, .10);
  box-shadow: var(--shadow-tight);
  backdrop-filter: blur(14px);
}

.lp-fcard span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0;
}

.lp-fcard.f1 span::before { content: "N"; font-size: 12px; font-weight: 800; }
.lp-fcard.f2 span::before { content: "24"; font-size: 10px; font-weight: 800; }

.lp-fcard.f3 {
  background: #101010;
  border-color: #101010;
  color: #fff;
}

.lp-fcard.f3 small {
  color: rgba(255, 255, 255, .58);
}

.lp-steps,
.lp-plans,
.lp-faq,
.lp-docs,
.lp-terms,
.lp-final {
  border-top: 1px solid rgba(16, 16, 16, .07);
}

.lp-step,
.lp-plan,
.lp-faq-item,
.lp-doc,
.lp-terms-box {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 16, .09);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.lp-step:hover,
.lp-plan:hover,
.lp-doc:hover {
  box-shadow: var(--shadow-tight);
  border-color: rgba(16, 16, 16, .16);
}

.lp-step-ic,
.lp-doc-thumb {
  background: #F0EFEB;
  color: var(--ink);
}

.lp-step-ic {
  font-size: 0;
}

.lp-step:nth-child(1) .lp-step-ic::before,
.lp-step:nth-child(2) .lp-step-ic::before,
.lp-step:nth-child(3) .lp-step-ic::before {
  font-size: 18px;
  font-weight: 800;
}

.lp-step:nth-child(1) .lp-step-ic::before { content: "01"; }
.lp-step:nth-child(2) .lp-step-ic::before { content: "02"; }
.lp-step:nth-child(3) .lp-step-ic::before { content: "03"; }

.lp-plan.featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.lp-plan-tag,
.lp-soon {
  background: var(--ink);
  color: #fff;
}

.lp-plan-price,
.lp-fcard.f3 b {
  font-family: var(--serif);
}

.lp-doc-thumb {
  background:
    linear-gradient(rgba(16, 16, 16, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 16, .06) 1px, transparent 1px),
    #F2F1ED;
  background-size: 20px 20px;
}

.lp-play {
  color: #fff;
  background: var(--ink);
}

.lp-final {
  padding-bottom: 110px;
}

.lp-foot {
  border-top-color: rgba(16, 16, 16, .08);
}

/* Login premium */
.login-wrap {
  background: var(--paper);
}

.login-side {
  width: min(500px, 42vw);
  background:
    linear-gradient(rgba(16, 16, 16, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 16, .025) 1px, transparent 1px),
    #FBFAF7;
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: none;
  border-right: 1px solid rgba(16, 16, 16, .08);
}

.login-stripe {
  display: none;
}

.login-back {
  top: 22px;
  left: 26px;
  padding: 9px 13px;
  border: 1px solid rgba(16, 16, 16, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(10px);
}

.wm-main {
  letter-spacing: 4px;
}

.wm-shopee {
  color: var(--muted);
  animation: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
}

.login-char {
  filter: grayscale(1) contrast(1.08);
  opacity: .9;
  margin-top: 22px;
}

.login-title {
  font-size: clamp(40px, 4vw, 58px);
  letter-spacing: -.04em;
  margin-bottom: 30px;
}

.login-form {
  max-width: 390px;
}

.login-form label span {
  color: var(--muted);
  letter-spacing: 1.2px;
}

.login-form input {
  min-height: 58px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 16, .10);
  border-radius: 18px;
}

.login-form input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(16, 16, 16, .06);
}

.login-btn {
  min-height: 58px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .24), 0 18px 36px rgba(16, 16, 16, .18);
}

.login-btn:hover {
  box-shadow: 0 6px 0 rgba(0, 0, 0, .24), 0 24px 48px rgba(16, 16, 16, .2);
}

.login-hero {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .10), transparent 34%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #0B0B0B;
  background-size: auto, 48px 48px, 48px 48px, auto;
}

.hero-glow,
.hero-grid {
  display: none;
}

.hero-inner {
  max-width: 650px;
}

.hero-pill {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .11);
  color: rgba(255, 255, 255, .66);
}

.hero-h2 {
  color: #fff;
  font-size: clamp(46px, 6vw, 74px);
  letter-spacing: -.04em;
}

.hero-p {
  color: rgba(255, 255, 255, .54);
}

.type-caret {
  background: #fff;
}

.login-preview {
  position: relative;
  width: min(520px, 88%);
  margin: 36px auto 0;
  display: grid;
  gap: 14px;
}

.login-preview-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px);
}

.login-preview-card.main {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.preview-product-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.login-preview-card strong,
.login-preview-card b {
  display: block;
  font-size: 15px;
}

.login-preview-card small,
.login-preview-line {
  color: rgba(255, 255, 255, .58);
}

.login-preview-card.main > span {
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.login-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.login-preview-card.mini {
  padding: 18px;
}

.login-preview-card.mini b {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
}

.login-preview-line {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.login-preview-line i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
}

@media (max-width: 900px) {
  .lp-nav {
    top: 10px;
    left: 12px;
    right: 12px;
    border-radius: 24px;
  }

  .lp-links {
    border-radius: 0 0 24px 24px;
  }

  .login-side {
    width: 100%;
    min-height: 100vh;
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .lp-hero {
    padding-top: 118px;
  }

  .lp-stage {
    min-height: 360px;
  }

  .lp-phone {
    width: 270px;
    margin-left: -135px;
  }

  .lp-fcard.f1 {
    left: 0;
  }

  .lp-fcard.f2 {
    right: 0;
  }
}

/* ==================================================================
   Landing/login upgrade: radial intro, flip cards, files and pagination
   ================================================================== */

.lp-section-pager {
  position: fixed;
  z-index: 45;
  right: 18px;
  top: 50%;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.lp-section-pager a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 118px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  color: rgba(16, 16, 16, .42);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(12px);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

.lp-section-pager a span {
  font-family: var(--serif);
  font-size: 15px;
}

.lp-section-pager a.active,
.lp-section-pager a:hover {
  color: var(--ink);
  border-color: rgba(16, 16, 16, .14);
  background: rgba(255, 255, 255, .88);
  transform: translateX(-4px);
}

.flip-plan {
  min-height: 430px;
  padding: 0;
  perspective: 1200px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.flip-plan:hover {
  box-shadow: none;
}

.flip-plan-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 430px;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}

.flip-plan:hover .flip-plan-inner,
.flip-plan:focus-visible .flip-plan-inner {
  transform: rotateY(180deg);
}

.flip-plan-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 32px 26px;
  border: 1px solid rgba(16, 16, 16, .10);
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 58px rgba(16, 16, 16, .08);
  backface-visibility: hidden;
  backdrop-filter: blur(14px);
}

.flip-back {
  transform: rotateY(180deg);
  background: #101010;
  color: #fff;
  border-color: #101010;
}

.flip-back .lp-ck,
.flip-back li,
.flip-back small {
  color: rgba(255, 255, 255, .72);
}

.flip-front p {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 22px;
}

.flip-plan-label {
  width: max-content;
  margin-bottom: 26px;
  padding: 7px 11px;
  border: 1px solid rgba(16, 16, 16, .12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.flip-plan .lp-btn {
  margin-top: auto;
}

.lp-plan-fallback,
.signup-fallback {
  margin-top: 12px;
  color: currentColor;
  opacity: .55;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.lp-files {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(16, 16, 16, .10);
  border-radius: 28px;
  background: rgba(255, 255, 255, .74);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(16, 16, 16, .08);
  backdrop-filter: blur(14px);
}

.lp-files-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 8px;
  border-bottom: 1px solid rgba(16, 16, 16, .08);
}

.lp-files-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--muted);
  padding: 13px 16px;
  font-weight: 800;
  white-space: nowrap;
}

.lp-files-tabs button span {
  font-family: var(--serif);
  font-size: 18px;
  color: rgba(16, 16, 16, .30);
}

.lp-files-tabs button.active {
  background: #101010;
  color: #fff;
}

.lp-files-tabs button.active span {
  color: rgba(255, 255, 255, .56);
}

.lp-files-preview {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 34px;
  align-items: center;
  padding: 30px;
}

.lp-video-shell {
  position: relative;
  min-height: 270px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    #101010;
  background-size: 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lp-video-shell::after {
  content: "Video em breve";
  position: absolute;
  left: 22px;
  bottom: 20px;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-video-shell small {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(255, 255, 255, .62);
  font-weight: 800;
}

.lp-video-play {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #101010;
}

.lp-files-preview h3 {
  font-size: clamp(28px, 4vw, 42px);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.03em;
  margin: 8px 0 12px;
}

.lp-files-preview p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.signup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, .48);
  backdrop-filter: blur(10px);
}

.signup-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 32px;
  border: 1px solid rgba(16, 16, 16, .10);
  border-radius: 28px;
  background: #FBFAF7;
  box-shadow: 0 38px 110px rgba(0, 0, 0, .28);
}

.signup-card h2 {
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
  font-weight: 400;
  margin: 8px 0 10px;
}

.signup-card p {
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 22px;
}

.signup-card label {
  display: block;
  margin-bottom: 12px;
}

.signup-card label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signup-card input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(16, 16, 16, .12);
  border-radius: 16px;
  background: #fff;
  outline: none;
}

.signup-card input:focus {
  border-color: #101010;
  box-shadow: 0 0 0 4px rgba(16, 16, 16, .06);
}

.signup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(16, 16, 16, .10);
  border-radius: 999px;
  background: #fff;
  font-size: 24px;
  line-height: 1;
}

.signup-notice {
  padding: 12px 14px;
  border: 1px solid rgba(212, 59, 45, .22);
  border-radius: 16px;
  background: rgba(212, 59, 45, .06);
  color: #b52a20;
  font-size: 13px;
}

.login-hero {
  background: #050505 !important;
}

.hero-inner {
  max-width: 760px;
}

.radial-intro {
  position: relative;
  width: min(620px, 92%);
  height: 430px;
  margin: 34px auto 0;
}

.radial-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  color: #fff;
  transform: translate(-50%, -50%);
}

.radial-core b {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
}

.radial-core small {
  color: rgba(255, 255, 255, .54);
}

.radial-product {
  position: absolute;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 310px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  backdrop-filter: blur(14px);
  animation: radialFloat 6s ease-in-out infinite;
}

.radial-photo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: #101010;
  font-size: 12px;
  font-weight: 900;
}

.radial-product strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radial-product small {
  display: block;
  color: rgba(255, 255, 255, .52);
  font-size: 12px;
}

.radial-product em {
  font-style: normal;
  font-weight: 900;
  color: #fff;
}

.rp-1 { left: 0; top: 34px; animation-delay: 0s; }
.rp-2 { right: 0; top: 92px; animation-delay: .45s; }
.rp-3 { left: 44px; bottom: 56px; animation-delay: .9s; }
.rp-4 { right: 38px; bottom: 18px; animation-delay: 1.35s; }
.rp-5 { left: 50%; top: 0; transform: translateX(-50%); animation-delay: 1.8s; }

@keyframes radialFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@media (max-width: 980px) {
  .lp-section-pager {
    display: none;
  }
}

@media (max-width: 760px) {
  .lp-files-preview {
    grid-template-columns: 1fr;
  }

  .flip-plan,
  .flip-plan-inner,
  .flip-plan-face {
    min-height: 390px;
  }

  .radial-intro {
    height: 360px;
    width: 100%;
  }

  .radial-core {
    width: 138px;
    height: 138px;
  }

  .radial-product {
    width: 260px;
  }

  .rp-1 { left: 0; top: 20px; }
  .rp-2 { right: 0; top: 82px; }
  .rp-3 { left: 0; bottom: 54px; }
  .rp-4 { right: 0; bottom: 4px; }
  .rp-5 { display: none; }
}

/* ---- "Como funciona": gradient animado suave + cards passando um por um ---- */
.lp-steps.lp-como {
  position: relative;
  overflow: hidden;
  border-top: none;
  border-radius: 28px;
}
.lp-como-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #eef1f8 0%, #f6eef4 34%, #eef6f2 67%, #eef1f8 100%);
  background-size: 300% 300%;
  opacity: .85;
  animation: lpComoGradient 18s ease-in-out infinite;
}
.lp-steps.lp-como > .lp-head,
.lp-steps.lp-como > .lp-step-grid { position: relative; z-index: 1; }

/* cada card pulsa em sequência (um por um) via --i */
.lp-step {
  animation: lpStepPulse 3.9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.3s);
}

@keyframes lpComoGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes lpStepPulse {
  0%, 33%, 100% { transform: translateY(0); box-shadow: none; }
  11% { transform: translateY(-9px); box-shadow: 0 18px 38px rgba(13, 13, 13, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-como-bg, .lp-step { animation: none !important; }
}

/* ---- Hero: órbita de comissões em volta do WhatsApp real (verde) ---- */
.lp-stage-orbit {
  perspective: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.ri-stage { position: relative; overflow: visible; }
.ri-orbit { position: absolute; inset: 0; animation: riSpin 34s linear infinite; will-change: transform; }
.ri-arm { position: absolute; inset: 0; transform: rotate(var(--a)); }
.ri-node { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); animation: riNodeIn .5s ease both; }
.ri-node-upright { display: flex; flex-direction: column; align-items: center; gap: 5px; animation: riSpin 34s linear infinite reverse; }
@keyframes riSpin { to { transform: rotate(360deg); } }
@keyframes riNodeIn { from { opacity: 0; } to { opacity: 1; } }
.ri-node-label {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(16, 16, 16, .1);
  box-shadow: 0 6px 16px rgba(13, 13, 13, .1);
  font-size: 13px; font-weight: 700; color: #0d0d0d; white-space: nowrap;
}
.ri-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; }
.ri-hub {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 22px; position: relative;
}
.ri-hub-wa { background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(37, 211, 102, .32); }
.ri-hub-wa::before, .ri-hub-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  border: 1.5px solid rgba(37, 211, 102, .4);
  animation: riPulse 2.6s ease-out infinite;
}
.ri-hub-wa::after { animation-delay: 1.3s; }
@keyframes riPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } }

/* highlight animado (animate-ui) na palavra Shopee — brilho passando, em mono */
.hl-shimmer {
  background: linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 38%, #c0c0ba 50%, #0d0d0d 62%, #0d0d0d 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  animation: hlShimmer 2.8s ease-in-out infinite;
}
@keyframes hlShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ri-orbit, .ri-node-upright, .ri-hub-wa::before, .ri-hub-wa::after, .hl-shimmer { animation: none !important; }
  .hl-shimmer { -webkit-text-fill-color: currentColor; color: inherit; }
}

/* ---- Nav minimal (sem logo "N", sem pager lateral) ---- */
.lp-nav-min { justify-content: space-between; }
.lp-wordmark { font-weight: 800; letter-spacing: .22em; font-size: 18px; color: var(--ink, #0d0d0d); }
.lp-section-pager { display: none !important; }

/* ---- Órbita: fotos de produto reais + nó da Shopee laranja ---- */
.ri-node-photo .ri-node-upright, .ri-node-shopee .ri-node-upright { gap: 0; }
.ri-photo {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: 16px; position: relative;
  background: #fff; border: 1px solid rgba(16, 16, 16, .08);
  box-shadow: 0 10px 24px rgba(13, 13, 13, .14);
}
.ri-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.ri-photo.is-skeleton {
  background: linear-gradient(110deg, #efeeea 30%, #f8f7f4 50%, #efeeea 70%);
  background-size: 220% 100%;
  animation: hlShimmer 1.6s linear infinite;
}
.ri-photo-badge {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 999px;
  background: #0d0d0d; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(13, 13, 13, .22);
}
.ri-shopee {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: 18px; background: #EE4D2D; color: #fff;
  box-shadow: 0 12px 28px rgba(238, 77, 45, .42);
  position: relative; overflow: hidden;
}
.ri-shopee svg { width: 62%; height: 62%; position: relative; z-index: 1; }
.hl-shimmer-orange::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: hlShimmer 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ri-photo.is-skeleton, .hl-shimmer-orange::after { animation: none !important; }
}

/* Login: fotos reais nos cards de produto */
.radial-photo { overflow: hidden; }
.radial-photo.has-img { background: #fff; color: transparent; }
.radial-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Login: menos cards sobrepostos (4 cards espalhados, nome com reticências) ---- */
.radial-product { grid-template-columns: 40px minmax(0, 1fr) auto; }
.radial-product > div { min-width: 0; }
.radial-product strong { max-width: 100%; }
@media (min-width: 901px) {
  .radial-product { width: 264px; }
  .rp-1 { left: 0; top: 0; right: auto; bottom: auto; }
  .rp-2 { right: 0; left: auto; top: 96px; bottom: auto; }
  .rp-3 { left: 0; right: auto; bottom: 96px; top: auto; }
  .rp-4 { right: 0; left: auto; bottom: 0; top: auto; }
}

/* ---- Rastro de produtos seguindo o cursor (fundo com produtos passando) ---- */
.login-hero { position: relative; }
.cursor-trail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.trail-item {
  position: absolute; width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: trailPop .95s ease forwards;
}
.trail-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
@keyframes trailPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg); }
  22% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.8) translateY(26px); }
}
/* conteúdo acima do rastro */
.login-hero .hero-inner { position: relative; z-index: 2; }
.lp-hero .lp-hero-inner { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cursor-trail { display: none; } }

/* ==================================================================
   CINEMATIC DARK — site público (landing / planos / login).
   Escopado em .cn; a página de convite (sem .cn) mantém o tema claro.
   ================================================================== */
body:has(.cn) { background: #07070b; color: #f2f2f4; }

.cn {
  --ink: #f4f4f6;
  --dim: rgba(255,255,255,.62);
  --dim2: rgba(255,255,255,.4);
  --line: rgba(255,255,255,.1);
  --glass: rgba(255,255,255,.045);
  --glass2: rgba(255,255,255,.07);
  --orange: #EE4D2D;
  --green: #25D366;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #07070b;
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cn > *:not(.cn-bg) { position: relative; z-index: 1; }
.cn .hero-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }

/* ---- fundo ambiente cinematográfico ---- */
.cn-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cn-aura { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; }
.cn-aura.a1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: radial-gradient(circle, rgba(238,77,45,.5), transparent 70%); animation: cnDrift1 22s ease-in-out infinite; }
.cn-aura.a2 { width: 42vw; height: 42vw; right: -6vw; top: 14vh; background: radial-gradient(circle, rgba(37,211,102,.42), transparent 70%); animation: cnDrift2 26s ease-in-out infinite; }
.cn-aura.a3 { width: 50vw; height: 50vw; left: 24vw; bottom: -20vw; background: radial-gradient(circle, rgba(120,110,255,.4), transparent 70%); animation: cnDrift3 30s ease-in-out infinite; }
.cn-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%); }
.cn-grain { position: absolute; inset: -50%; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cn-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(0,0,0,.72) 100%); }
@keyframes cnDrift1 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6vw,4vh) scale(1.12);} }
@keyframes cnDrift2 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-5vw,6vh) scale(1.15);} }
@keyframes cnDrift3 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(4vw,-5vh) scale(1.1);} }

/* ---- nav ---- */
.cn-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px,5vw,60px); backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(7,7,11,.7), transparent); }
.cn-brand { font-weight: 800; letter-spacing: .28em; font-size: 17px; cursor: pointer; }
.cn-nav-links { display: flex; align-items: center; gap: 8px; }
.cn-nav-links button { background: none; border: 0; color: var(--dim); font: inherit; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s; }
.cn-nav-links button:hover, .cn-nav-links button.on { color: #fff; }
.cn-nav-cta { color: #07070b !important; background: #fff !important; font-weight: 700 !important; }
.cn-nav-cta:hover { background: rgba(255,255,255,.88) !important; }

/* ---- botões ---- */
.cn-btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease-pop, ease), background .2s, box-shadow .3s, border-color .2s; }
.cn-btn span { transition: transform .2s; }
.cn-btn:hover span { transform: translateX(3px); }
.cn-btn.big { padding: 18px 34px; font-size: 16px; }
.cn-btn.full { width: 100%; justify-content: center; }
.cn-btn-primary { background: #fff; color: #07070b; box-shadow: 0 10px 40px rgba(255,255,255,.14); }
.cn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(255,255,255,.22); }
.cn-btn-ghost { background: rgba(255,255,255,.05); color: #fff; border-color: var(--line); }
.cn-btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.cn-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.cn-btn-outline:hover { border-color: #fff; transform: translateY(-2px); }
.cn-link { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }

/* ---- eyebrow ---- */
.cn-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--dim); backdrop-filter: blur(8px); }
.cn-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: cnPulse 2s ease-in-out infinite; }
@keyframes cnPulse { 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

/* ---- hero ---- */
.cn-hero { position: relative; min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px clamp(20px,5vw,60px) 60px; gap: 22px; }
.cn-title { font-size: clamp(44px, 8vw, 104px); line-height: .98; margin: 6px 0 0; max-width: 15ch; }
.cn-title-sm { font-size: clamp(38px, 6vw, 74px); }
.cn-w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.4em); animation: cnWordIn .85s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * .085s + .12s); }
@keyframes cnWordIn { to { opacity: 1; filter: blur(0); transform: none; } }
.cn-lead { max-width: 620px; font-size: clamp(16px,2.1vw,20px); line-height: 1.55; color: var(--dim); margin: 0; }
.cn-lead b { color: #fff; font-weight: 600; }
.cn-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.cn-scroll { width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px; position: relative; margin-top: 18px; }
.cn-scroll::before { content:""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 3px; background: rgba(255,255,255,.55); transform: translateX(-50%); animation: cnScroll 1.8s ease-in-out infinite; }
@keyframes cnScroll { 0%{ opacity:0; transform: translate(-50%,0);} 40%{opacity:1;} 100%{ opacity:0; transform: translate(-50%,12px);} }

/* ---- marquee de produtos reais ---- */
.cn-marquee { position: relative; width: min(920px, 96vw); margin-top: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cn-marquee-track { display: flex; gap: 12px; width: max-content; animation: cnMarquee 40s linear infinite; }
.cn-marquee:hover .cn-marquee-track { animation-play-state: paused; }
@keyframes cnMarquee { to { transform: translateX(-33.33%); } }
.cn-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.cn-chip img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.cn-chip-txt { display: flex; flex-direction: column; text-align: left; }
.cn-chip-txt b { font-size: 13px; white-space: nowrap; }
.cn-chip-txt em { font-style: normal; font-size: 11.5px; color: var(--dim2); white-space: nowrap; }

/* ---- steps ---- */
.cn-steps { max-width: 1080px; margin: 0 auto; padding: 80px clamp(20px,5vw,60px); text-align: center; }
.cn-h2 { font-size: clamp(30px,4.5vw,54px); margin: 14px 0 44px; }
.cn-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cn-step { text-align: left; padding: 30px 26px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: transform .3s, border-color .3s, background .3s; }
.cn-step:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.2); background: var(--glass2); }
.cn-step-n { font-family: var(--serif); font-size: 40px; color: rgba(255,255,255,.28); }
.cn-step h3 { margin: 10px 0 8px; font-size: 21px; }
.cn-step p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55; }

/* ---- final CTA ---- */
.cn-final { max-width: 760px; margin: 0 auto; padding: 70px clamp(20px,5vw,60px) 90px; text-align: center; }
.cn-final h2 { font-size: clamp(30px,5vw,58px); margin: 0 0 12px; }
.cn-final p { color: var(--dim); margin: 0 0 26px; font-size: 17px; }
.cn-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 26px clamp(20px,5vw,60px); border-top: 1px solid var(--line); color: var(--dim2); font-size: 13px; }

/* ---- planos ---- */
.cn-plans { max-width: 1120px; margin: 0 auto; padding: 60px clamp(20px,5vw,60px) 90px; text-align: center; }
.cn-plans .cn-lead { margin: 14px auto 40px; }
.cn-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.cn-plan { position: relative; display: flex; flex-direction: column; text-align: left; padding: 30px 26px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); transition: transform .18s ease, border-color .3s, box-shadow .3s; transform-style: preserve-3d; }
.cn-plan.is-featured { border-color: rgba(255,255,255,.24); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: 0 30px 90px rgba(238,77,45,.14); }
.cn-plan-tag { position: absolute; top: -11px; left: 26px; padding: 4px 12px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.cn-plan-groups { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); }
.cn-plan h3 { margin: 8px 0 0; font-size: 24px; }
.cn-plan-price { font-family: var(--serif); font-size: 52px; line-height: 1; margin: 14px 0 18px; }
.cn-plan-price span { font-size: 20px; color: var(--dim); margin-right: 4px; }
.cn-plan-price small { font-family: 'DM Sans',sans-serif; font-size: 14px; color: var(--dim2); font-weight: 500; }
.cn-plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cn-plan li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.cn-ck { color: var(--green); flex-shrink: 0; }
.cn-plans-note { color: var(--dim2); margin-top: 26px; font-size: 14px; }

/* ---- login / auth ---- */
.cn-auth { position: relative; min-height: calc(100vh - 90px); display: flex; align-items: center; justify-content: center; padding: 30px clamp(20px,5vw,60px) 70px; }
.cn-auth-card { width: 100%; max-width: 420px; padding: 40px 34px; border-radius: 28px; background: rgba(20,20,26,.6); border: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.cn-auth-card h1 { font-size: clamp(34px,6vw,48px); line-height: 1; margin: 16px 0 8px; }
.cn-auth-sub { color: var(--dim); margin: 0 0 24px; font-size: 15px; }
.cn-form { display: flex; flex-direction: column; gap: 14px; }
.cn-form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.cn-form label small { text-transform: none; letter-spacing: 0; color: var(--dim2); }
.cn-form input { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 15px; transition: border-color .2s, background .2s; }
.cn-form input::placeholder { color: rgba(255,255,255,.32); }
.cn-form input:focus { outline: none; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }
.cn-form .cn-btn { margin-top: 6px; }
.cn-auth-alt { margin: 20px 0 0; text-align: center; color: var(--dim); font-size: 14px; }
.cn-notice { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; background: rgba(212,59,45,.14); border: 1px solid rgba(212,59,45,.3); color: #ffb4ab; font-size: 13.5px; }

/* ---- modal de cadastro (Stripe) ---- */
.cn-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cn-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(6px); animation: cnFade .3s ease; }
.cn-modal-card { position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 34px 30px; border-radius: 26px; background: #101016; border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; animation: cnPop .35s cubic-bezier(.2,.8,.2,1); }
.cn-modal-card h2 { font-size: 30px; margin: 6px 0 0; }
.cn-modal-sub { color: var(--dim); font-size: 14px; margin: 0 0 6px; }
.cn-modal-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.cn-modal-card label small { text-transform: none; letter-spacing: 0; color: var(--dim2); }
.cn-modal-card input { padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #fff; font: inherit; }
.cn-modal-card input:focus { outline: none; border-color: rgba(255,255,255,.5); }
.cn-modal-x { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.cn-modal-x:hover { background: rgba(255,255,255,.16); }
.cn-modal-alt { display: block; width: 100%; text-align: center; color: var(--dim2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; background: transparent; border: 0; padding: 8px 6px; cursor: pointer; }
.cn-modal-alt:hover { color: #fff; }
@keyframes cnFade { from { opacity: 0; } }
@keyframes cnPop { from { opacity: 0; transform: translateY(20px) scale(.97); } }

/* ---- reveal (stagger) ---- */
.cn .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.cn .reveal.in { opacity: 1; transform: none; }
.cn-step.reveal, .cn-plan.reveal { transition-delay: calc(var(--i,0) * .09s); }

/* ---- rastro de produtos no cursor ---- */
.cn-trail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.cn-trail-i { position: absolute; width: 56px; height: 56px; transform: translate(-50%,-50%); will-change: transform, opacity; animation: cnTrail 1s ease forwards; }
.cn-trail-i img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
@keyframes cnTrail { 0%{ opacity:0; transform: translate(-50%,-50%) scale(.4) rotate(-8deg);} 22%{ opacity:.92; transform: translate(-50%,-50%) scale(1) rotate(0);} 100%{ opacity:0; transform: translate(-50%,-50%) scale(.82) translateY(26px);} }

@media (max-width: 860px) {
  .cn-step-grid, .cn-plan-grid { grid-template-columns: 1fr; }
  .cn-nav-links button:not(.cn-nav-cta) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-aura, .cn-marquee-track, .cn-eyebrow i, .cn-scroll::before, .cn-trail { animation: none !important; }
  .cn-w { opacity: 1; filter: none; transform: none; animation: none; }
  .cn .reveal { opacity: 1; transform: none; }
}

/* ==================================================================
   TEMA GRAPHQL — dark navy + magenta (#E10098) + rede de nós.
   Sobrescreve o bloco cinematográfico anterior (vence por ordem).
   ================================================================== */
body:has(.cn) { background: #0b0e14; }
.cn { background: #0b0e14; --green: #E10098; }

/* rede de nós (canvas) atrás do conteúdo, sobre as auras */
.cn-graph { position: absolute; inset: 0; width: 100%; height: 100%; }

/* auras em magenta / violeta / rosa */
.cn-aura.a1 { background: radial-gradient(circle, rgba(225,0,152,.5), transparent 70%); }
.cn-aura.a2 { background: radial-gradient(circle, rgba(150,40,255,.4), transparent 70%); }
.cn-aura.a3 { background: radial-gradient(circle, rgba(255,90,200,.34), transparent 70%); }

/* acentos magenta */
.cn-eyebrow i { background: #E10098; box-shadow: 0 0 12px #E10098; }
.cn-btn-primary { background: #E10098; color: #fff; box-shadow: 0 10px 40px rgba(225,0,152,.35); }
.cn-btn-primary:hover { background: #f30fab; box-shadow: 0 16px 55px rgba(225,0,152,.5); }
.cn-nav-cta { background: #E10098 !important; color: #fff !important; }
.cn-nav-cta:hover { background: #f30fab !important; }
.cn-plan.is-featured { border-color: rgba(225,0,152,.42); box-shadow: 0 30px 90px rgba(225,0,152,.22); }
.cn-plan-tag { background: #E10098; }
.cn-ck { color: #E10098; }
.cn-form input:focus, .cn-modal-card input:focus { border-color: rgba(225,0,152,.7); background: rgba(225,0,152,.06); }
.cn-modal-card { background: #0e1119; }
.cn-scroll::before { background: #E10098; }

/* ---- preenchimento de texto (fill) no título, estilo "loading fill" ---- */
.cn-fill {
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(225,0,152,.5);
  background-image: linear-gradient(180deg, #ff5cc4, #E10098);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cnFillUp 1.9s cubic-bezier(.4,0,.2,1) forwards .25s;
}
@keyframes cnFillUp { to { background-size: 100% 100%; } }

/* ---- rastro do cursor: fotos grandes em preto e branco ---- */
.cn-trail-i { width: 132px; height: 168px; }
.cn-trail-i img { border-radius: 14px; filter: grayscale(1) contrast(1.06) brightness(1.03); box-shadow: 0 22px 55px rgba(0,0,0,.62); }
@keyframes cnTrail { 0%{ opacity:0; transform: translate(-50%,-50%) scale(.5) rotate(-6deg);} 20%{ opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0);} 100%{ opacity:0; transform: translate(-50%,-50%) scale(.9) translateY(30px);} }

@media (prefers-reduced-motion: reduce) {
  .cn-fill { background-size: 100% 100%; animation: none; }
}

/* ==================================================================
   MONOCROMÁTICO — casa com o dashboard B&W. Neutraliza o magenta.
   (vence por ordem sobre o bloco GraphQL)
   ================================================================== */
body:has(.cn) { background: #09090b; }
.cn { background: #09090b; --green: #ffffff; }

/* auras neutras (branco/prata bem suave) */
.cn-aura.a1 { background: radial-gradient(circle, rgba(255,255,255,.13), transparent 70%); }
.cn-aura.a2 { background: radial-gradient(circle, rgba(190,198,214,.1), transparent 70%); }
.cn-aura.a3 { background: radial-gradient(circle, rgba(255,255,255,.09), transparent 70%); }

/* acentos em branco/neutro */
.cn-eyebrow i { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.55); }
.cn-btn-primary { background: #fff; color: #0a0a0b; box-shadow: 0 10px 40px rgba(255,255,255,.12); }
.cn-btn-primary:hover { background: rgba(255,255,255,.9); box-shadow: 0 16px 55px rgba(255,255,255,.2); }
.cn-nav-cta { background: #fff !important; color: #0a0a0b !important; }
.cn-nav-cta:hover { background: rgba(255,255,255,.9) !important; }
.cn-plan.is-featured { border-color: rgba(255,255,255,.28); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 30px 90px rgba(255,255,255,.07); }
.cn-plan-tag { background: #fff; color: #0a0a0b; }
.cn-ck { color: #fff; }
.cn-form input:focus, .cn-modal-card input:focus { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.cn-scroll::before { background: rgba(255,255,255,.6); }

/* preenchimento do título em branco/prata */
.cn-fill {
  -webkit-text-stroke: 1px rgba(255,255,255,.38);
  background-image: linear-gradient(180deg, #ffffff, #b8b8be);
}

/* rastro dentro do .cn-bg fica atrás do conteúdo (garantia de z-index) */
.cn-trail { z-index: 1; }

/* ==================================================================
   Limalha magnética (fundo semitransparente) + tipografia menos formal.
   ================================================================== */
.cn-filings { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }

/* tipografia menos formal: Space Grotesk nos títulos (sai do serif elegante) */
.cn .hero-serif, .cn-plan-price, .cn-step-n { font-family: 'Space Grotesk', 'DM Sans', sans-serif; }
.cn .hero-serif { font-weight: 600; letter-spacing: -.025em; }
.cn-title { letter-spacing: -.03em; line-height: 1.02; }
.cn-fill { -webkit-text-stroke-width: 1.2px; }

/* Spinner do "preparando sua conta" no cadastro do teste grátis. */
.cn-spinner { display: inline-block; width: 34px; height: 34px; border: 3px solid rgba(0, 0, 0, .12); border-top-color: #15131d; border-radius: 50%; animation: cn-spin .8s linear infinite; margin-bottom: 10px; }
@keyframes cn-spin { to { transform: rotate(360deg); } }

/* Selo "7 dias grátis" nos cards de plano. */
.cn-plan-trial { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #56d39a; margin: 4px 0 8px; }

/* ============================================================= */
/* Nova landing clara estilo ManyChat (tema do dashboard: coral) */
/* ============================================================= */
.nl { --co: #FF5C86; --co-deep: #E23B6B; --co-ink: #5E1128; --bb: #89CFF0; --bb-ink: #0B3B52;
  position: relative; z-index: 0; min-height: 100vh; background: transparent;
  color: var(--tx); overflow-x: hidden; }
.nl button { font-family: inherit; cursor: pointer; }
/* Fundo branco + limalha magnética (linhas rosas) atrás do conteúdo */
.nl-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 80% -10%, rgba(255,92,134,.05), transparent 60%), #fff; }
.nl-bg canvas, .nl-bg .cn-filings { position: fixed; inset: 0; width: 100vw; height: 100vh; }

.nl-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 64px); backdrop-filter: blur(10px); background: rgba(248,247,244,.7); border-bottom: 1px solid var(--bd); }
.nl-logo { height: 30px; width: auto; mix-blend-mode: multiply; cursor: pointer; }
.nl-nav-links { display: flex; align-items: center; gap: 8px; }
.nl-nav-links button { border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--tx); padding: 9px 14px; border-radius: 999px; }
.nl-nav-links button:hover { background: rgba(13,13,13,.05); }
.nl-nav-links .on { color: var(--co-deep); }
.nl-nav-cta { background: var(--co) !important; color: var(--co-ink) !important; font-weight: 700 !important; box-shadow: 0 6px 18px rgba(255,92,134,.4); }
.nl-nav-cta:hover { background: var(--co-deep) !important; }

.nl-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
  max-width: 1240px; margin: 0 auto; padding: clamp(36px, 6vw, 84px) clamp(20px, 5vw, 64px) 40px; }
.nl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--co-deep); background: rgba(255,92,134,.1); border: 1px solid rgba(255,92,134,.25); padding: 6px 13px; border-radius: 999px; }
.nl-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--co); box-shadow: 0 0 0 4px rgba(255,92,134,.2); }
.nl-title { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: clamp(38px, 6vw, 74px); line-height: .98;
  letter-spacing: -.02em; margin: 18px 0 0; }
.nl-hl { color: var(--co); }
.nl-lead { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; color: var(--t2); margin: 20px 0 0; max-width: 540px; }
.nl-lead b { color: var(--tx); font-weight: 700; }
.nl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.nl-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; font-size: 15px; font-weight: 700; padding: 14px 24px; border-radius: 999px; transition: transform .15s, box-shadow .15s, background .15s; }
.nl-btn:hover { transform: translateY(-1px); }
.nl-btn-primary { background: var(--co); color: var(--co-ink); box-shadow: 0 10px 26px rgba(255,92,134,.42); }
.nl-btn-primary:hover { background: var(--co-deep); box-shadow: 0 12px 30px rgba(226,59,107,.5); }
.nl-btn-ghost { background: rgba(13,13,13,.05); color: var(--tx); }
.nl-btn-ghost:hover { background: rgba(13,13,13,.09); }
.nl-btn.big { padding: 16px 30px; font-size: 16px; }
.nl-trust { display: block; margin: 22px 0 0; font-size: 12.5px; font-weight: 600; color: var(--t3); letter-spacing: .01em; }

.nl-hero-art { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.nl-orb { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .32; z-index: 0; }
.nl-orb-a { width: 300px; height: 300px; background: var(--co); top: -40px; right: -20px; }
.nl-orb-b { width: 280px; height: 280px; background: var(--bb); bottom: -30px; left: -20px; }
.nl-photo { position: relative; z-index: 1; width: 100%; max-width: 460px; aspect-ratio: 3 / 3.4; border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(13,13,13,.22), 0 0 0 1px rgba(255,255,255,.6); }
.nl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(94,17,40,.35) 100%); }

/* Cards em escadinha DENTRO da foto, menores */
.nl-chat { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; width: min(300px, 84%); }
.nl-note { align-self: flex-start; margin-left: calc(var(--d) * 15px); max-width: 100%;
  display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bd); border-radius: 14px;
  padding: 7px 11px; box-shadow: 0 12px 30px rgba(13,13,13,.22); opacity: 0; transform: translateY(14px) scale(.94);
  animation: nlPop 8s ease-in-out infinite; animation-delay: calc(var(--d) * 1.2s); }
.nl-note-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,92,134,.15); color: var(--co-deep); }
.nl-note-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px var(--bd); }
.nl-bw { filter: grayscale(1) contrast(1.03); }
.nl-note-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f4f4f4; box-shadow: 0 0 0 1px var(--bd); }
.nl-note-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nl-note-body em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--t3); align-self: flex-start; }
.nl-note-body span { font-size: 11.5px; font-weight: 600; color: var(--tx); white-space: nowrap; }
.nl-note-title { font-weight: 700 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.nl-note-price { display: inline-flex !important; align-items: center; gap: 5px; }
.nl-note-price b { color: var(--co-deep); font-size: 13px; }
.nl-note-price s { color: var(--t3); font-weight: 500; font-size: 10.5px; }
.nl-note-price i { font-style: normal; background: var(--co); color: var(--co-ink); font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; }
/* Destaque no nome do app, no rosa da marca */
.nl-hlt { border-radius: 5px; padding: 1px 5px; background: rgba(255,92,134,.16); color: var(--co-deep) !important; }
@keyframes nlPop {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  8% { opacity: 1; transform: translateY(0) scale(1); }
  86% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

.nl-marqueewrap { max-width: 1240px; margin: 0 auto; padding: 8px clamp(20px,5vw,64px) 10px; }
.nl-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nl-marquee-track { display: flex; gap: 12px; width: max-content; animation: nlMarq 40s linear infinite; }
@keyframes nlMarq { to { transform: translateX(-33.33%); } }

.nl-steps { max-width: 1100px; margin: 0 auto; padding: clamp(40px,7vw,90px) clamp(20px,5vw,64px); text-align: center; }
.nl-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--co-deep); }
.nl-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--co); }
.nl-h2 { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: clamp(28px,4vw,46px); letter-spacing: -.02em; margin: 12px 0 34px; }
.nl-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nl-step { background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 26px 22px; text-align: left; box-shadow: 0 10px 30px rgba(13,13,13,.05); }
.nl-step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--co); color: var(--co-ink); font-weight: 800; font-size: 15px; }
.nl-step h3 { font-size: 19px; font-weight: 700; margin: 16px 0 8px; }
.nl-step p { font-size: 14.5px; line-height: 1.55; color: var(--t2); }

.nl-final { max-width: 1000px; margin: 0 auto clamp(40px,7vw,80px); padding: clamp(36px,5vw,64px) clamp(24px,5vw,56px); text-align: center;
  border-radius: 30px; background: linear-gradient(135deg, var(--co), var(--co-deep)); color: #fff; box-shadow: 0 30px 70px rgba(226,59,107,.4); }
.nl-final h2 { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: clamp(26px,3.5vw,42px); letter-spacing: -.02em; }
.nl-final p { margin: 12px 0 24px; opacity: .92; font-size: 16px; }
.nl-final .nl-btn-primary { background: #fff; color: var(--co-deep); box-shadow: 0 12px 30px rgba(13,13,13,.2); }
.nl-final .nl-btn-primary:hover { background: #fff; color: var(--co-ink); }

.nl-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 24px 56px; border-top: 1px solid var(--bd); text-align: center; }
.nl-foot-logo { height: 26px; mix-blend-mode: multiply; }
.nl-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nl-foot-links button { border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--t2); padding: 6px 12px; border-radius: 999px; }
.nl-foot-links button:hover { background: rgba(13,13,13,.05); color: var(--tx); }
.nl-foot > span { font-size: 12.5px; color: var(--t3); }

@media (max-width: 860px) {
  .nl-hero { grid-template-columns: 1fr; text-align: center; }
  .nl-lead { margin-left: auto; margin-right: auto; }
  .nl-cta, .nl-eyebrow { justify-content: center; }
  .nl-hero-art { margin-top: 20px; min-height: 420px; }
  .nl-chat { left: 0; width: min(300px, 86%); }
  .nl-step-grid { grid-template-columns: 1fr; }
}

/* ---- Sub-páginas claras: Planos, Login, Modais ---- */
.nl-sub { display: flex; flex-direction: column; min-height: 100vh; }
.nl-sub .nl-plans, .nl-sub .nl-auth { flex: 1; }
.nl-title-sm { font-size: clamp(30px, 4.5vw, 52px); }
.nl-lead.center { margin-left: auto; margin-right: auto; text-align: center; }
.nl-link { border: 0; background: none; color: var(--co-deep); font-weight: 700; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Planos */
.nl-plans { max-width: 1120px; margin: 0 auto; padding: clamp(40px,6vw,80px) clamp(20px,5vw,64px); text-align: center; }
.nl-plans .nl-kicker { justify-content: center; display: inline-flex; }
.nl-plans .nl-title-sm { margin: 12px 0 10px; }
.nl-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0 20px; text-align: left; }
.nl-plan { position: relative; background: #fff; border: 1px solid var(--bd); border-radius: 22px; padding: 26px 24px; box-shadow: 0 12px 34px rgba(13,13,13,.06);
  transition: transform .2s ease, box-shadow .2s ease; }
.nl-plan.featured { border-color: rgba(255,92,134,.5); box-shadow: 0 20px 50px rgba(255,92,134,.22); }
.nl-plan-tag { position: absolute; top: -12px; left: 24px; background: var(--co); color: var(--co-ink); font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.nl-plan-groups { font-size: 12.5px; font-weight: 700; color: var(--co-deep); letter-spacing: .02em; }
.nl-plan h3 { font-size: 22px; font-weight: 700; margin: 6px 0 6px; }
.nl-plan-price { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: 40px; letter-spacing: -.02em; margin: 4px 0 4px; }
.nl-plan-price span { font-size: 18px; vertical-align: super; margin-right: 2px; }
.nl-plan-price small { font-size: 14px; font-weight: 500; color: var(--t3); }
.nl-plan ul { list-style: none; margin: 14px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nl-plan li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--t2); }
.nl-ck { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,92,134,.14); color: var(--co-deep); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.nl-plan-trial { text-align: center; font-size: 12px; font-weight: 700; color: var(--co-deep); margin: 6px 0 12px; }
.nl-btn.full { width: 100%; justify-content: center; }
.nl-btn-outline { background: transparent; color: var(--tx); border: 1.5px solid var(--bds); }
.nl-btn-outline:hover { border-color: var(--co); color: var(--co-deep); background: rgba(255,92,134,.05); }
.nl-plans-note { font-size: 14px; color: var(--t2); margin-top: 8px; }

/* Login / auth */
.nl-auth { display: flex; align-items: center; justify-content: center; padding: clamp(30px,6vw,70px) 20px; }
.nl-auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--bd); border-radius: 26px; padding: clamp(26px,4vw,40px); box-shadow: 0 30px 70px rgba(13,13,13,.1); text-align: center; }
.nl-auth-card .nl-kicker { justify-content: center; display: inline-flex; }
.nl-auth-title { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: clamp(28px,4vw,40px); letter-spacing: -.02em; margin: 12px 0 6px; }
.nl-auth-sub { color: var(--t2); font-size: 14.5px; margin-bottom: 22px; }
.nl-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.nl-form label { display: flex; flex-direction: column; gap: 6px; }
.nl-form label span { font-size: 12.5px; font-weight: 700; color: var(--t2); }
.nl-form label span small { font-weight: 500; color: var(--t3); }
.nl-form input { width: 100%; font-family: inherit; font-size: 15px; padding: 13px 15px; border: 1px solid var(--bds); border-radius: 12px; background: #fff; color: var(--tx); transition: border-color .15s, box-shadow .15s; }
.nl-form input:focus { outline: none; border-color: var(--co); box-shadow: 0 0 0 4px rgba(255,92,134,.14); }
.nl-form .nl-btn { margin-top: 4px; }
.nl-notice { color: var(--co-deep); font-size: 13.5px; font-weight: 600; margin-top: 12px; background: rgba(255,92,134,.08); border: 1px solid rgba(255,92,134,.22); padding: 9px 12px; border-radius: 12px; }
.nl-auth-mobilenote { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--t2); background: rgba(137,207,240,.14); border: 1px solid rgba(137,207,240,.35); padding: 10px 13px; border-radius: 12px; }
.nl-auth-alt { margin-top: 18px; font-size: 14px; color: var(--t2); }

/* Modais */
.nl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nl-modal-bg { position: absolute; inset: 0; background: rgba(13,13,13,.42); backdrop-filter: blur(4px); animation: nlFade .2s ease; }
@keyframes nlFade { from { opacity: 0; } to { opacity: 1; } }
.nl-modal-card { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 30px clamp(22px,4vw,32px) 28px; box-shadow: 0 40px 90px rgba(13,13,13,.3); display: flex; flex-direction: column; gap: 12px; animation: nlPopIn .28s cubic-bezier(.34,1.56,.64,1); text-align: left; }
@keyframes nlPopIn { 0% { opacity: 0; transform: scale(.94) translateY(12px); } 100% { opacity: 1; transform: none; } }
.nl-modal-x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bd); background: var(--s2); color: var(--t2); font-size: 20px; line-height: 1; cursor: pointer; }
.nl-modal-x:hover { background: var(--co); color: var(--co-ink); border-color: var(--co); }
.nl-modal-card .nl-kicker { display: inline-flex; align-self: flex-start; }
.nl-modal-title { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin: 4px 0 0; }
.nl-modal-sub { color: var(--t2); font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
.nl-modal-card label { display: flex; flex-direction: column; gap: 6px; }
.nl-modal-card label span { font-size: 12.5px; font-weight: 700; color: var(--t2); }
.nl-modal-card label span small { font-weight: 500; color: var(--t3); }
.nl-modal-card input { width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--bds); border-radius: 12px; background: #fff; color: var(--tx); }
.nl-modal-card input:focus { outline: none; border-color: var(--co); box-shadow: 0 0 0 4px rgba(255,92,134,.14); }
.nl-modal-alt { border: 0; background: none; color: var(--t2); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.nl-modal-alt:hover { color: var(--co-deep); }
.nl-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,92,134,.2); border-top-color: var(--co); margin: 0 auto 6px; animation: nlSpin .8s linear infinite; }
@keyframes nlSpin { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .nl-plan-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Páginas legais (Termos / Privacidade) */
.nl-legal { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: clamp(28px,5vw,56px) clamp(20px,5vw,40px) 60px; }
.nl-legal-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bd); background: #fff; color: var(--tx); font-size: 13.5px; font-weight: 700; padding: 8px 15px; border-radius: 999px; cursor: pointer; margin-bottom: 22px; }
.nl-legal-back:hover { border-color: var(--co); color: var(--co-deep); }
.nl-legal h1 { font-family: 'Space Grotesk', var(--serif); font-weight: 700; font-size: clamp(28px,4vw,40px); letter-spacing: -.02em; margin: 0 0 6px; }
.nl-legal-upd { color: var(--t3); font-size: 13px; margin-bottom: 26px; }
.nl-legal h2 { font-size: 18px; font-weight: 700; margin: 26px 0 8px; color: var(--tx); }
.nl-legal p, .nl-legal li { font-size: 15px; line-height: 1.65; color: var(--t2); }
.nl-legal b { color: var(--tx); font-weight: 700; }
.nl-legal ul { margin: 8px 0 8px 2px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.nl-legal a { color: var(--co-deep); font-weight: 600; }
.nl-legal .nl-link { font-size: inherit; }

/* ===== Efeitos: loading-fill text, liquid buttons, flip cards, marquee ===== */
/* Título com preenchimento tipo "loading" no destaque rosa */
.nl-hl { background: linear-gradient(90deg, var(--co-deep) 0 50%, rgba(255,92,134,.6) 50% 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: nlFillText 3.4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes nlFillText { 0% { background-position: 100% 0; } 46% { background-position: 0 0; } 80% { background-position: 0 0; } 100% { background-position: 100% 0; } }

/* Botões liquid (bolha que sobe no hover) */
.nl-btn, .nl-nav-cta, .nl-legal-back { position: relative; overflow: hidden; z-index: 0; }
.nl-btn::after, .nl-nav-cta::after, .nl-legal-back::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 108%;
  width: 190%; aspect-ratio: 1 / 1; border-radius: 50%; transform: translateX(-50%); background: rgba(255,255,255,.32);
  transition: top .5s cubic-bezier(.4,0,.2,1); }
.nl-btn:hover::after, .nl-nav-cta:hover::after, .nl-legal-back:hover::after { top: -45%; }
.nl-btn-ghost::after, .nl-btn-outline::after, .nl-legal-back::after, .nl-nav-links .nl-nav-cta ~ button::after { background: rgba(255,92,134,.18); }
.nl-final .nl-btn-primary::after { background: rgba(255,92,134,.16); }

/* Flip cards nos planos (hover no desktop, toque no mobile) */
.nl-flip { perspective: 1300px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 396px; }
.nl-flip-inner { position: relative; width: 100%; height: 100%; min-height: 396px; transition: transform .6s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.nl-flip:hover .nl-flip-inner, .nl-flip.flipped .nl-flip-inner { transform: rotateY(180deg); }
.nl-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
.nl-flip-back { transform: rotateY(180deg); justify-content: space-between; }
.nl-flip-back ul { flex: 1; }
.nl-flip-front { justify-content: flex-start; }
.nl-flip-front .nl-plan-price { margin-top: 6px; }
.nl-flip-hint { margin-top: auto; font-size: 13px; font-weight: 800; color: var(--co-deep); display: inline-flex; align-items: center; gap: 5px; }
.nl-flip.featured .nl-flip-face { border-color: rgba(255,92,134,.5); box-shadow: 0 20px 50px rgba(255,92,134,.22); }

/* Marquee de produtos repaginado (claro) */
.nl-marquee .cn-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bd);
  border-radius: 14px; padding: 8px 14px 8px 8px; box-shadow: 0 8px 20px rgba(13,13,13,.06); white-space: nowrap; }
.nl-marquee .cn-chip img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #f4f4f4; box-shadow: 0 0 0 1px var(--bd); }
.nl-marquee .cn-chip-txt { display: flex; flex-direction: column; gap: 1px; }
.nl-marquee .cn-chip-txt b { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.nl-marquee .cn-chip-txt em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--co-deep); }

/* Marca-texto rosa (highlight) nas palavras WhatsApp/Telegram/Instagram */
.nl-mark { font-weight: 700; color: var(--tx); white-space: nowrap; padding: 0 3px;
  background-image: linear-gradient(rgba(255,92,134,.38), rgba(255,92,134,.38));
  background-repeat: no-repeat; background-position: 0 86%; background-size: 0% 46%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: nlMark .85s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.45s + var(--m, 0) * .22s); }
@keyframes nlMark { to { background-size: 100% 46%; } }

/* ============ Refino monocromático + estilo workflow (2026-07-13) ===========
   Camada por cima: tira o excesso de rosa (ink domina, coral vira detalhe) e
   estiliza os fios do hero. Reverter = remover este bloco + restaurar o app.js. */
.nl { --nl-ink: #191420; --nl-ink2: #2a2336; --nl-graph: #5b5468; }

/* Botão primário: ink com brilho interno (o "detalhe" dos botões) */
.nl-btn-primary { background: var(--nl-ink); color: #fff; box-shadow: 0 10px 22px rgba(25,20,32,.22), inset 0 1px 0 rgba(255,255,255,.12); }
.nl-btn-primary:hover { background: var(--nl-ink2); box-shadow: 0 14px 28px rgba(25,20,32,.3); }

/* Selo/eyebrow: chip neutro, só a bolinha continua coral */
.nl-eyebrow { color: var(--nl-graph); background: #fff; border-color: #ece9f2; box-shadow: 0 4px 12px rgba(25,20,32,.05); }
.nl-kicker { color: var(--nl-graph); }

/* Marca-texto dos canais: cinza discreto (menos rosa) */
.nl-mark { background-image: linear-gradient(rgba(25,20,32,.10), rgba(25,20,32,.10)); color: var(--nl-ink); }

/* Números dos passos: ink */
.nl-step-n { background: var(--nl-ink); color: #fff; }

/* Orbs do hero: dessaturados e discretos */
.nl-orb { filter: blur(52px) grayscale(.85); opacity: .14; }

/* Bloco final "pronto pra vender?": gradiente ink no lugar do coral */
.nl-final { background: linear-gradient(135deg, var(--nl-ink), #3a3348); box-shadow: 0 30px 70px rgba(25,20,32,.28); }
.nl-final .nl-btn-primary { background: #fff; color: var(--nl-ink); }
.nl-final .nl-btn-primary:hover { background: #fff; color: #000; }

/* ---- Fios do hero (estilo workflow) ---- */
.nl-hero-flow { min-height: 360px; }
.nl-flow { width: 100%; max-width: 420px; height: auto; overflow: visible; position: relative; z-index: 1; }
@keyframes nlflow { to { stroke-dashoffset: -28; } }
@keyframes nldrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nlhub { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.nl-flow .fio { stroke-dasharray: 2 12; animation: nlflow 1.15s linear infinite; }
.nl-flow .nd { transform-box: fill-box; transform-origin: center; }
.nl-flow .d1 { animation: nldrift 3.5s ease-in-out infinite; }
.nl-flow .d2 { animation: nldrift 3.9s ease-in-out infinite .5s; }
.nl-flow .d3 { animation: nldrift 3.6s ease-in-out infinite .8s; }
.nl-flow .hb { transform-box: fill-box; transform-origin: center; animation: nlhub 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nl-flow * { animation: none !important; } }

/* ================= Design novo (Claude Design) — landing + login =========== */
.dc, .dc * { box-sizing: border-box; }
.dc { font-family: 'Inter', system-ui, sans-serif; color: #0F0F1A; -webkit-font-smoothing: antialiased; }
@keyframes dcFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dcBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dcGlow { 0%, 100% { box-shadow: 0 8px 24px rgba(255,43,110,0.13); } 50% { box-shadow: 0 8px 36px rgba(255,43,110,0.42), 0 0 0 10px rgba(255,43,110,0.07); } }
@keyframes dcWater { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0% 0 0 0); } }
@keyframes dcShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes dcDrift { 0%, 100% { transform: translate(0,0); } 33% { transform: translate(30px, -20px); } 66% { transform: translate(-20px, 15px); } }
.dc a:hover { color: #FF2B6E; }
.dc-cta { transition: transform .15s, box-shadow .15s, filter .15s; }
.dc-cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
.dc-cta:active { transform: translateY(0); }
/* Movimento dos cards de plano (o "animate-ui" que o dono pediu) */
.dc-plan { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s; will-change: transform; }
.dc-plan:hover { transform: translateY(-8px); }
.dc-plan-lite:hover { box-shadow: 0 20px 44px rgba(15,15,26,.1); }
.dc-plan-dark:hover { box-shadow: 0 34px 74px rgba(255,43,110,.28); }
/* Login inputs */
.dc-input { outline: none; transition: border-color .2s, box-shadow .2s; }
.dc-input:focus { border-color: #FF2B6E !important; box-shadow: 0 0 0 3px rgba(255,43,110,.12) !important; }
/* FAQ */
.dc-faq-btn { font-family: 'Inter', sans-serif; }
@media (max-width: 860px) {
  .dc-hero { flex-direction: column !important; gap: 40px !important; padding: 48px 22px 64px !important; min-height: auto !important; }
  .dc-hero-art { display: none !important; }
  .dc-nav { padding: 0 22px !important; }
  .dc-plans-grid { grid-template-columns: 1fr !important; }
  .dc-sec { padding: 64px 22px !important; }
}

/* ==========================================================================
   Landing + Login v2 (estilo LinkQR: base zinc, Plus Jakarta / Outfit, rosa
   discreto). Namespaced com prefixo .nx- pra nao colidir com dc-/nl-/cn-.
   ========================================================================== */
.nx{
  --bg:#FAFAFA; --card:#FFFFFF; --tint:#F4F4F5;
  --ink:#09090B; --t2:#52525B; --t3:#A1A1AA;
  --bd:#E4E4E7; --bd-soft:rgba(228,228,231,.6);
  --acc:#EC4E7E; --acc-press:#DB2F68; --acc-soft:rgba(236,78,126,.08);
  --wa:#25D366; --tg:#229ED9; --ig:#E1306C; --px:#32BCAD; --pu:#8B5CF6;
  --sh:0 1px 2px rgba(9,9,11,.05);
  --sh-md:0 4px 24px rgba(9,9,11,.06),0 1px 2px rgba(9,9,11,.04);
  --sh-lg:0 20px 50px rgba(9,9,11,.10),0 2px 8px rgba(9,9,11,.05);
  --head:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --body:"Outfit",-apple-system,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.nx h1,.nx h2,.nx h3,.nx h4{font-family:var(--head);letter-spacing:-.03em;line-height:1.08;margin:0}
.nx p{margin:0}
.nx .nx-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.nx a{color:inherit;text-decoration:none}

.nx-brand{font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.04em;display:inline-flex;align-items:center;cursor:pointer}
.nx-brand .n{color:var(--acc)}

.nx-btn{font-family:var(--body);font-weight:600;border-radius:999px;cursor:pointer;border:0;font-size:15px;transition:transform .12s,background .15s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.nx-btn:active{transform:scale(.97)}
.nx-primary{background:var(--acc);color:#fff;padding:11px 24px;box-shadow:0 4px 14px rgba(236,78,126,.28)}
.nx-primary:hover{background:var(--acc-press)}
.nx-light{background:#fff;color:var(--ink);padding:11px 24px;border:1px solid var(--bd);box-shadow:var(--sh)}
.nx-ghost{background:none;color:var(--t2);padding:9px 12px}
.nx-lg{font-size:16px;padding:15px 30px}

.nx-nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nx-nav-links{display:flex;gap:30px}
.nx-nav-links button{font-family:var(--body);font-size:15px;color:var(--t2);font-weight:500;background:none;border:0;cursor:pointer}
.nx-nav-links button:hover{color:var(--ink)}
.nx-nav-cta{display:flex;align-items:center;gap:10px}
@media(max-width:820px){ .nx-nav-links{display:none} }

.nx-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:70px 0 60px}
@media(max-width:900px){ .nx-hero{grid-template-columns:1fr;gap:36px;padding:44px 0 40px;text-align:center} }
.nx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:7px 14px;border-radius:999px;margin-bottom:22px}
.nx-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.nx-hero h1{font-size:56px;font-weight:800;letter-spacing:-.045em;margin-bottom:20px;text-wrap:balance}
@media(max-width:900px){ .nx-hero h1{font-size:40px} }
.nx-lead{font-size:18px;color:var(--t2);line-height:1.6;max-width:480px;margin-bottom:30px}
@media(max-width:900px){ .nx-lead{margin-left:auto;margin-right:auto} }
.nx-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
@media(max-width:900px){ .nx-hero-cta{justify-content:center} }
.nx-trust{font-size:14px;color:var(--t3);font-weight:500}

.nx-mock{position:relative;background:#fff;border:1px solid var(--bd);border-radius:24px;padding:22px;box-shadow:var(--sh-lg)}
.nx-mock-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.nx-mock-h b{font-family:var(--head);font-weight:700;font-size:15px}
.nx-live{font-size:12px;color:var(--wa);font-weight:600;display:flex;align-items:center;gap:6px}
.nx-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.nx-chan{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--bd);border-radius:15px;margin-bottom:10px;background:#fff}
.nx-chan:last-child{margin-bottom:0}
.nx-chan .ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.nx-chan .ct{flex:1;min-width:0}
.nx-chan .ct b{font-family:var(--head);font-weight:700;font-size:14.5px;display:block}
.nx-chan .ct span{font-size:12.5px;color:var(--t3)}
.nx-cbadge{font-size:11px;font-weight:700;color:var(--wa);background:rgba(37,211,102,.1);padding:4px 9px;border-radius:999px}

.nx-sec{padding:66px 0}
.nx-sec-head{text-align:center;max-width:560px;margin:0 auto 44px}
.nx-sec-head h2{font-size:38px;font-weight:800;margin-bottom:12px;text-wrap:balance}
.nx-sec-head p{font-size:17px;color:var(--t2)}
.nx-kicker{font-size:13px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:block}

.nx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){ .nx-grid{grid-template-columns:1fr} }
.nx-feat{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:26px;transition:transform .18s,box-shadow .18s}
.nx-feat:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.nx-feat .fi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.nx-feat h3{font-size:19px;font-weight:700;margin-bottom:8px}
.nx-feat p{font-size:14.5px;color:var(--t2);line-height:1.55;margin-bottom:14px}
.nx-more{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:5px}

.nx-why{background:var(--ink);border-radius:28px;padding:52px 44px;color:#fff}
@media(max-width:900px){ .nx-why{padding:38px 24px} }
.nx-why .nx-sec-head h2{color:#fff}
.nx-why .nx-sec-head p{color:rgba(255,255,255,.6)}
.nx-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:900px){ .nx-why-grid{grid-template-columns:1fr;gap:26px} }
.nx-why-item{text-align:center}
.nx-why-item .wi{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:24px;margin:0 auto 16px}
.nx-why-item h3{font-size:19px;font-weight:700;margin-bottom:8px}
.nx-why-item p{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.55}

.nx-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:900px){ .nx-plans{grid-template-columns:1fr;max-width:400px;margin:0 auto} }
.nx-plan{background:#fff;border:1px solid var(--bd);border-radius:24px;padding:30px}
.nx-plan.on{border-color:var(--acc);box-shadow:0 20px 44px rgba(236,78,126,.14);position:relative}
.nx-plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 15px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.nx-plan-name{font-size:13px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.nx-price{display:flex;align-items:baseline;gap:2px;margin-bottom:6px;font-family:var(--head);font-variant-numeric:tabular-nums}
.nx-price .c{font-size:19px;font-weight:700;align-self:flex-start;margin-top:8px}
.nx-price .v{font-size:46px;font-weight:800;letter-spacing:-.04em}
.nx-price .d{font-size:22px;font-weight:800}
.nx-price .m{font-size:14px;color:var(--t3);font-weight:500;margin-left:4px;align-self:flex-end;margin-bottom:8px;font-family:var(--body)}
.nx-plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:22px 0;padding:22px 0 0;border-top:1px solid var(--bd)}
.nx-plan li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.nx-plan li .k{color:var(--acc);font-weight:800;flex-shrink:0}
.nx-plan .nx-btn{width:100%}

.nx-faq{max-width:720px;margin:0 auto}
.nx-faq details{background:#fff;border:1px solid var(--bd);border-radius:16px;margin-bottom:12px;overflow:hidden}
.nx-faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--head);font-weight:700;font-size:16px}
.nx-faq summary::-webkit-details-marker{display:none}
.nx-faq summary .pl{color:var(--t3);font-size:22px;font-weight:400;transition:transform .25s;flex-shrink:0}
.nx-faq details[open] summary .pl{transform:rotate(45deg);color:var(--acc)}
.nx-faq details p{padding:0 22px 22px;color:var(--t2);font-size:15px;line-height:1.65}

.nx-final{text-align:center;padding:76px 24px;background:linear-gradient(135deg,#FDF0F5,#FFF);border:1px solid var(--bd);border-radius:32px;margin:20px 0}
.nx-final h2{font-size:42px;font-weight:800;margin-bottom:14px;text-wrap:balance}
.nx-final p{font-size:17px;color:var(--t2);margin-bottom:30px}

.nx-foot{border-top:1px solid var(--bd);padding:52px 0 30px;margin-top:20px}
.nx-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px;margin-bottom:38px}
@media(max-width:700px){ .nx-foot-grid{grid-template-columns:1fr 1fr} }
.nx-foot-brand p{font-size:14px;color:var(--t2);line-height:1.6;max-width:280px;margin-top:12px}
.nx-foot h4{font-family:var(--head);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:14px}
.nx-foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.nx-foot ul button{font-family:var(--body);font-size:14.5px;color:var(--t2);background:none;border:0;cursor:pointer;text-align:left;padding:0}
.nx-foot ul button:hover{color:var(--ink)}
.nx-foot-bottom{border-top:1px solid var(--bd);padding-top:22px;font-size:13px;color:var(--t3);text-align:center}

/* LOGIN */
.nx-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:radial-gradient(circle at 50% 0%,rgba(236,78,126,.05),transparent 60%),var(--bg)}
.nx-login-card{width:100%;max-width:448px;background:#fff;border:1px solid var(--bd-soft);border-radius:24px;padding:40px;box-shadow:var(--sh-md)}
.nx-login-brand{display:flex;justify-content:center;margin-bottom:26px}
.nx-login-brand .nx-brand{font-size:24px}
.nx-login-card h1{font-size:26px;font-weight:800;text-align:center;margin-bottom:6px}
.nx-login-card .nx-sub{text-align:center;color:var(--t2);font-size:15px;margin-bottom:28px}
.nx-field{margin-bottom:16px}
.nx-field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;font-family:var(--head)}
.nx-field input{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:13px 15px;font-size:16px;font-family:var(--body);color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.nx-field input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.nx-login-card .nx-primary{width:100%;padding:14px;margin-top:4px}
.nx-signup{text-align:center;font-size:14.5px;color:var(--t2);margin-top:22px}
.nx-signup button{color:var(--acc);font-weight:600;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:14.5px}
.nx-login-notice{margin-top:16px;font-size:13px;font-weight:600;color:#DB2F68;background:rgba(236,78,126,.08);border:1px solid rgba(236,78,126,.22);padding:10px 13px;border-radius:12px}
.nx-login-legal{text-align:center;margin-top:26px;display:flex;gap:18px;justify-content:center}
.nx-login-legal button{font-size:12.5px;color:var(--t3);background:none;border:0;cursor:pointer;font-family:var(--body)}

/* ==========================================================================
   Landing + Login v3 "ManyChat" (aprovada 2026-07-18): roxo #7A3FF2, fonte
   Bricolage Grotesque, badge amarelo, botoes pilula, foto + baloes de chat,
   animacoes estilo Animate UI em CSS/JS puro. Prefixo .mc- (nao colide).
   ========================================================================== */
.mc{
  --pp:#7A3FF2; --pp-d:#5E2AD6; --pp-dd:#4A1FB8; --pp-l:#C9B4FA; --pp-soft:#8B57F4;
  --yellow:#F4E10A; --ink:#160A2E; --t2:#5B5670;
  --disp:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --bodyf:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-family:var(--bodyf); color:var(--ink); background:#fff; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.mc h1,.mc h2,.mc h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1;margin:0}
.mc p{margin:0}
.mc button{font-family:inherit;cursor:pointer}

/* hero roxo com gradiente animado + bolhas + particulas */
.mc-hero{position:relative;color:#fff;padding:16px 22px 40px;overflow:hidden;
  background:linear-gradient(130deg,#6A2FE8,#8B49FF,#5E2AD6,#7A3FF2);
  background-size:300% 300%;animation:mcGrad 14s ease-in-out infinite}
@keyframes mcGrad{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
.mc-bbl{position:absolute;border-radius:50%;filter:blur(28px);opacity:.35;pointer-events:none}
.mc-bbl.b1{width:220px;height:220px;background:#A576FF;top:-60px;right:-70px;animation:mcFloat 9s ease-in-out infinite}
.mc-bbl.b2{width:150px;height:150px;background:#5318D6;bottom:60px;left:-60px;animation:mcFloat 12s ease-in-out infinite reverse}
.mc-bbl.b3{width:90px;height:90px;background:#C9A8FF;top:36%;right:8%;animation:mcFloat 7s ease-in-out infinite 1.2s}
@keyframes mcFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.08)}}
.mc-ptc{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.65);pointer-events:none;animation:mcPtc linear infinite}
@keyframes mcPtc{0%{transform:translateY(0);opacity:0}12%{opacity:.8}88%{opacity:.6}100%{transform:translateY(-130px);opacity:0}}

.mc-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0 30px;position:relative;max-width:1080px;margin:0 auto}
.mc-logo{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.03em;color:#fff;background:none;border:0;cursor:pointer}
.mc-nav-in{display:flex;align-items:center;gap:8px}
.mc-nav-in .mc-enter{background:none;border:0;color:#fff;font-weight:600;font-size:14px;padding:9px 14px;opacity:.9}
.mc-nav-in .mc-start{background:#fff;color:var(--ink);border:0;border-radius:999px;font-weight:700;font-size:13px;padding:10px 18px}

.mc-hero-grid{max-width:1080px;margin:0 auto}
.mc-badge{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:#1c1300;font-weight:800;font-size:12px;letter-spacing:.02em;padding:9px 15px;border-radius:8px;margin-bottom:26px;font-family:var(--disp);position:relative;overflow:hidden}
.mc-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-110%);animation:mcShine 3.2s ease-in-out infinite}
@keyframes mcShine{0%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}
.mc-hero h1{font-size:44px;line-height:.98;margin-bottom:22px;text-wrap:balance;position:relative;max-width:640px}
.mc-sw{display:inline-block;opacity:0;transform:translateY(22px) rotate(2deg);filter:blur(5px);animation:mcSplit .65s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.35s + var(--i)*.07s)}
@keyframes mcSplit{to{opacity:1;transform:none;filter:none}}
.mc-hl{background:linear-gradient(var(--yellow),var(--yellow)) left center / 0% 78% no-repeat;color:#1c1300;padding:0 6px;border-radius:4px;animation:mcHl .8s ease-out forwards 1.5s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes mcHl{to{background-size:100% 78%}}
.mc-hl .mc-sw{color:inherit}
/* padding-right: a caixa tem a largura da palavra mais larga ("WhatsApp"), e o
   overflow:hidden cortava a última letra (o glifo passa um tico da largura de
   avanço). A folga interna resolve; a margem negativa devolve o espaço pra o
   "." não ficar afastado. */
.mc-rot{display:inline-grid;overflow:hidden;height:1em;vertical-align:bottom;padding-right:.14em;margin-right:-.10em}
.mc-rot span{grid-area:1/1;line-height:1;opacity:0;transform:translateY(105%);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.mc-rot span.on{opacity:1;transform:none}
.mc-rot span.out{opacity:0;transform:translateY(-105%)}
.mc-lead{font-size:16px;color:var(--pp-l);line-height:1.5;margin-bottom:30px;max-width:420px}
.mc-ctas{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;max-width:420px}
.mc-btn{border:0;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.06em;padding:19px;text-transform:uppercase;font-family:var(--bodyf);transition:transform .12s;position:relative;overflow:hidden}
.mc-btn:active{transform:scale(.97)}
.mc-btn-white{background:#fff;color:var(--ink)}
.mc-btn-white::before{content:"";position:absolute;left:0;right:0;bottom:-100%;height:100%;background:var(--yellow);transition:bottom .35s cubic-bezier(.22,1,.36,1);z-index:0;border-radius:inherit}
.mc-btn-white:hover::before,.mc-btn-white:focus-visible::before{bottom:0}
.mc-btn-white span{position:relative;z-index:1}
.mc-btn-soft{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.mc-ripple{position:absolute;border-radius:50%;background:rgba(122,63,242,.25);transform:scale(0);animation:mcRip .55s ease-out forwards;pointer-events:none}
.mc-btn-soft .mc-ripple,.mc-btn-p .mc-ripple{background:rgba(255,255,255,.35)}
@keyframes mcRip{to{transform:scale(3);opacity:0}}
.mc-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--pp-l);font-size:12.5px;font-weight:600}
.mc-trust b{color:#fff;font-weight:800;font-family:var(--disp);font-size:16px;font-variant-numeric:tabular-nums}
.mc-trust .sep{width:1px;height:26px;background:rgba(255,255,255,.2)}

/* foto + chat */
.mc-show{position:relative;background:#1c1030}
.mc-photo{width:100%;display:block;object-fit:cover;object-position:50% 72%;max-height:560px}
.mc-show-top{position:absolute;top:0;left:0;right:0;padding:22px;background:linear-gradient(180deg,var(--pp) 8%,rgba(122,63,242,.85) 55%,transparent);color:#fff}
.mc-show-top .eyb{font-family:var(--disp);font-weight:800;font-size:22px;margin-bottom:12px}
.mc-chips{display:flex;gap:16px;flex-wrap:wrap}
.mc-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:20px;color:rgba(255,255,255,.45);transition:color .45s}
.mc-chip.on{color:#fff}
.mc-bubs{position:absolute;left:22px;right:22px;bottom:24px;display:flex;flex-direction:column;gap:10px}
.mc-bub{max-width:78%;background:var(--pp);color:#fff;padding:13px 15px;border-radius:18px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(16px) scale(.94)}
.mc-bub.show{animation:mcBub .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes mcBub{to{opacity:1;transform:none}}
.mc-bub .b-btn{margin-top:10px;background:var(--pp-soft);border-radius:12px;padding:11px;text-align:center;font-weight:700;font-size:13px}
.mc-bub.prod{padding:8px 8px 10px;background:#fff;color:var(--ink);max-width:200px}
.mc-bub-prod{width:100%;border-radius:12px;display:block}
.mc-bub-cap{font-size:11.5px;font-weight:700;padding:8px 4px 0;color:#6B5E8C;font-family:var(--disp)}
.mc-bub.com{display:flex;align-items:center;gap:9px;background:none;box-shadow:none;padding:0;max-width:none;align-self:flex-end}
.mc-bub-av{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:grayscale(1);box-shadow:0 4px 12px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.85)}
.mc-bub.com .pill{background:#2A2440;color:#fff;padding:12px 16px;border-radius:18px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.mc-tdots{display:inline-flex;gap:4px;align-items:center;height:10px}
.mc-tdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);animation:mcDot 1s ease-in-out infinite}
.mc-tdots i:nth-child(2){animation-delay:.15s}.mc-tdots i:nth-child(3){animation-delay:.3s}
@keyframes mcDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}

/* faixa avatares */
.mc-loved{background:#fff;text-align:center;padding:34px 22px 26px}
.mc-loved b{font-family:var(--disp);font-weight:800;font-size:17px;display:block;margin-bottom:14px}
.mc-avg{display:flex;justify-content:center}
.mc-avg span{width:44px;height:44px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:800;font-size:15px;margin-left:-10px;transition:transform .25s cubic-bezier(.22,1,.36,1);box-shadow:0 4px 12px rgba(30,10,60,.18)}
.mc-avg span:first-child{margin-left:0}
.mc-avg span:hover{transform:translateY(-8px) scale(1.12);z-index:2}

/* CTA final */
.mc-final{background:#fff;text-align:center;padding:30px 26px 70px;position:relative;overflow:hidden;max-width:720px;margin:0 auto}
.mc-splat{width:52px;height:52px;margin:0 auto 22px;color:var(--ink);animation:mcSpin 14s linear infinite;display:block}
@keyframes mcSpin{to{transform:rotate(360deg)}}
.mc-final h2{font-size:34px;line-height:1.02;margin-bottom:16px;text-wrap:balance}
.mc-gtx{background:linear-gradient(90deg,#7A3FF2,#C13584,#7A3FF2);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mcGtx 4s linear infinite}
@keyframes mcGtx{to{background-position:200% center}}
.mc-final p{font-size:15.5px;color:var(--t2);max-width:380px;margin:0 auto 28px;line-height:1.5}
.mc-btn-p{background:var(--pp);color:#fff;display:inline-block;padding:19px 40px}
.mc-cf{position:absolute;width:8px;height:8px;pointer-events:none;animation:mcCf .9s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes mcCf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* footer */
.mc-foot{background:var(--pp-dd);color:#fff;padding:44px 26px}
.mc-foot-in{max-width:1080px;margin:0 auto}
.mc-foot .mc-logo{margin-bottom:16px;display:inline-block;padding:0}
.mc-foot p{color:var(--pp-l);font-size:13.5px;line-height:1.6;max-width:300px;margin-bottom:22px}
.mc-foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.mc-foot-links button{background:none;border:0;color:#fff;font-size:14px;font-weight:600}
.mc-foot small{color:var(--pp-l);font-size:12.5px}

/* reveals no scroll */
.mc-rv{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s}
.mc-rv.rv-up{transform:translateY(30px)}
.mc-rv.rv-zoom{transform:scale(.92)}
.mc-rv.in{opacity:1;transform:none;filter:none}

/* desktop: hero em 2 colunas, foto vira cartao arredondado */
@media(min-width:900px){
  .mc-hero{padding:20px 40px 64px}
  .mc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .mc-hero h1{font-size:56px}
  .mc-show{max-width:1080px;margin:-120px auto 0;position:relative;z-index:2;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(30,10,60,.25)}
  .mc-show-wrap{background:linear-gradient(180deg,var(--pp) 40%,#fff 40%);padding:0 40px 20px}
  .mc-ctas{flex-direction:row}
  .mc-ctas .mc-btn{flex:1}
}
@media(max-width:899px){ .mc-show-wrap{padding:0} .mc-desk-art{display:none} }

/* ---------- LOGIN roxo ---------- */
.mc-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden;
  background:linear-gradient(130deg,#6A2FE8,#8B49FF,#5E2AD6,#7A3FF2);background-size:300% 300%;animation:mcGrad 14s ease-in-out infinite}
.mc-login-card{width:100%;max-width:430px;background:#fff;border-radius:26px;padding:38px 34px;box-shadow:0 30px 80px rgba(22,10,46,.4);position:relative;z-index:2}
.mc-login-brand{display:flex;justify-content:center;margin-bottom:22px}
.mc-login-brand .mc-logo{color:var(--ink);font-size:26px}
.mc-login-card h1{font-size:28px;font-weight:800;text-align:center;margin-bottom:6px;font-family:var(--disp)}
.mc-login-card .sub{text-align:center;color:var(--t2);font-size:14.5px;margin-bottom:26px}
.mc-field{margin-bottom:15px}
.mc-field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em}
.mc-field input{width:100%;background:#F7F5FC;border:1.5px solid #E7E0F5;border-radius:14px;padding:13px 15px;font-size:16px;font-family:var(--bodyf);color:var(--ink);outline:none;transition:border .15s,box-shadow .15s;box-sizing:border-box}
.mc-field input:focus{border-color:var(--pp);box-shadow:0 0 0 3px rgba(122,63,242,.15)}
.mc-login-card .mc-btn{width:100%;margin-top:6px}
.mc-signup{text-align:center;font-size:14px;color:var(--t2);margin-top:20px}
.mc-signup button{color:var(--pp);font-weight:700;background:none;border:0;font-size:14px}
.mc-login-notice{margin-top:14px;font-size:13px;font-weight:600;color:#C22957;background:rgba(236,78,126,.08);border:1px solid rgba(236,78,126,.25);padding:10px 13px;border-radius:12px}
.mc-login-legal{text-align:center;margin-top:22px;display:flex;gap:18px;justify-content:center}
.mc-login-legal button{font-size:12px;color:#9A93AD;background:none;border:0}

@media (prefers-reduced-motion:reduce){
  .mc *,.mc *::before,.mc *::after{animation:none!important;transition:none!important}
  .mc-sw,.mc-bub,.mc-rv{opacity:1!important;transform:none!important;filter:none!important}
  .mc-hl{background-size:100% 78%}
  .mc-rot span.on{opacity:1;transform:none}
}

/* ==== ManyChat v3: planos, termos/privacidade e modais de cadastro ==== */

/* topo roxo compartilhado das subpaginas */
.mc-subhero{position:relative;color:#fff;padding:16px 22px 46px;overflow:hidden;
  background:linear-gradient(130deg,#6A2FE8,#8B49FF,#5E2AD6,#7A3FF2);
  background-size:300% 300%;animation:mcGrad 14s ease-in-out infinite;text-align:center}
.mc-subhero .mc-nav{text-align:left}
.mc-subhero h1{font-size:38px;line-height:1;margin:26px auto 12px;text-wrap:balance;max-width:640px}
.mc-subhero .sub{color:var(--pp-l);font-size:15.5px;max-width:460px;margin:0 auto;line-height:1.5}
.mc-subhero .mc-badge{margin:0 0 4px}

/* planos */
.mc-plans-wrap{background:#F7F5FC;padding:34px 22px 60px}
.mc-plans{display:grid;grid-template-columns:1fr;gap:18px;max-width:1020px;margin:0 auto}
@media(min-width:900px){ .mc-plans{grid-template-columns:repeat(3,1fr);align-items:start} }
.mc-plan{background:#fff;border-radius:24px;padding:28px 26px;position:relative;box-shadow:0 10px 30px rgba(30,10,60,.07)}
.mc-plan.on{box-shadow:0 24px 54px rgba(122,63,242,.22);border:2px solid var(--pp)}
.mc-plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#1c1300;font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.05em;padding:6px 16px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.mc-plan-name{font-family:var(--disp);font-size:13px;font-weight:800;color:#8B84A3;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.mc-plan-groups{display:inline-block;font-size:12px;font-weight:700;color:var(--pp);background:rgba(122,63,242,.1);padding:4px 11px;border-radius:999px;margin-bottom:14px}
.mc-price{display:flex;align-items:baseline;gap:2px;font-family:var(--disp);font-variant-numeric:tabular-nums;margin-bottom:4px}
.mc-price .c{font-size:17px;font-weight:800;align-self:flex-start;margin-top:7px}
.mc-price .v{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.mc-price .d{font-size:20px;font-weight:800}
.mc-price .m{font-size:13px;color:#8B84A3;margin-left:4px;align-self:flex-end;margin-bottom:6px;font-family:var(--bodyf);font-weight:600}
.mc-plan-trial{font-size:12.5px;color:#8B84A3;font-weight:600;margin-bottom:6px}
.mc-plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:18px 0 22px;padding:18px 0 0;border-top:1.5px solid #EFEAF9}
.mc-plan li{display:flex;gap:9px;font-size:14.5px;align-items:flex-start;color:#2C2540}
.mc-plan li .k{color:var(--pp);font-weight:800;flex-shrink:0}
.mc-plan .mc-btn{width:100%}
.mc-btn-outline{background:#fff;color:var(--pp);border:2px solid rgba(122,63,242,.35)}
.mc-plans-note{text-align:center;font-size:13.5px;color:#8B84A3;margin-top:26px}
.mc-plans-note button{background:none;border:0;color:var(--pp);font-weight:700;font-size:13.5px}

/* termos / privacidade */
.mc-legal-wrap{background:#F7F5FC;padding:30px 22px 60px}
.mc-legal{max-width:720px;margin:0 auto;background:#fff;border-radius:24px;padding:34px 30px;box-shadow:0 10px 30px rgba(30,10,60,.07)}
.mc-legal-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--pp);font-weight:700;font-size:14px;margin-bottom:18px;padding:0}
.mc-legal h1{font-size:30px;margin-bottom:6px}
.mc-legal-upd{font-size:12.5px;color:#8B84A3;margin-bottom:22px}
.mc-legal h2{font-family:var(--disp);font-size:18px;font-weight:800;margin:24px 0 8px}
.mc-legal p{font-size:14.5px;color:#3A3350;line-height:1.7;margin-bottom:10px}
.mc-legal ul{margin:0 0 12px 20px}
.mc-legal li{font-size:14.5px;color:#3A3350;line-height:1.7;margin-bottom:5px}
.mc-legal a{color:var(--pp);font-weight:600}
.mc-legal .nl-link{background:none;border:0;color:var(--pp);font-weight:700;font-size:inherit;padding:0;cursor:pointer}

/* modais (cadastro / teste gratis / provisionando) */
/* O modal e anexado ao body, FORA do .mc onde as variaveis da marca vivem.
   Sem redeclarar aqui, var(--pp) nao resolve e o botao roxo fica transparente
   (fundo invisivel, texto branco). */
.mc-modal{--pp:#7A3FF2;--pp-d:#5E2AD6;--pp-dd:#4A1FB8;--pp-l:#C9B4FA;--pp-soft:#8B57F4;--yellow:#F4E10A;--ink:#160A2E;--t2:#5B5670;--disp:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;--bodyf:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;font-family:var(--bodyf, -apple-system,system-ui,sans-serif)}
.mc-modal-bg{position:absolute;inset:0;background:rgba(22,10,46,.66);backdrop-filter:blur(6px);animation:mcFade .25s ease-out}
@keyframes mcFade{from{opacity:0}}
.mc-modal-card{position:relative;width:100%;max-width:430px;max-height:92vh;max-height:90dvh;overflow-y:auto;background:#fff;border-radius:24px;padding:30px 28px;box-shadow:0 30px 80px rgba(22,10,46,.45);animation:mcPop .35s cubic-bezier(.22,1,.36,1)}
@keyframes mcPop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.mc-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:#F1EDFA;color:#5B5670;font-size:19px;line-height:1;display:grid;place-items:center}
.mc-modal-kicker{display:inline-flex;align-items:center;gap:7px;background:var(--yellow,#F4E10A);color:#1c1300;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:11px;letter-spacing:.03em;padding:7px 13px;border-radius:8px;margin-bottom:14px;text-transform:uppercase}
.mc-modal-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em;margin:0 0 6px;color:#160A2E}
.mc-modal-sub{font-size:13.5px;color:#5B5670;line-height:1.55;margin:0 0 18px}
.mc-modal-card label{display:block;margin-bottom:12px}
.mc-modal-card label span{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#160A2E;margin-bottom:6px}
.mc-modal-card label small{font-weight:600;color:#8B84A3;text-transform:none;letter-spacing:0}
.mc-modal-card input{width:100%;background:#F7F5FC;border:1.5px solid #E7E0F5;border-radius:13px;padding:12px 14px;font-size:15px;font-family:inherit;color:#160A2E;outline:none;transition:border .15s,box-shadow .15s;box-sizing:border-box}
.mc-modal-card input:focus{border-color:#7A3FF2;box-shadow:0 0 0 3px rgba(122,63,242,.15)}
/* Olhinho de mostrar/ocultar senha. Vale pro login e pros cadastros. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px!important}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:0;padding:6px;margin:0;cursor:pointer;color:#8B84A3;display:grid;place-items:center;line-height:0;border-radius:8px}
.pw-toggle:hover{color:#5B5670}
.pw-toggle svg{width:20px;height:20px;display:block}
/* Botão fixo no rodapé do modal: em navegador dentro de app o modal precisa
   rolar e o botão sumia embaixo da dobra. Sticky mantém ele sempre visível; a
   sombra branca por cima esconde o conteúdo que rola atrás da borda. */
.mc-modal-card .mc-btn{width:100%;margin-top:12px;position:sticky;bottom:0;box-shadow:0 -16px 16px 8px #fff,0 8px 20px rgba(122,63,242,.28)}
.mc-modal-alt{display:block;text-align:center;margin-top:14px;font-size:13px;color:#7A3FF2;font-weight:700;background:none;border:0;width:100%;text-decoration:none;cursor:pointer}
.mc-modal-notice{margin:4px 0 10px;font-size:13px;font-weight:600;color:#C22957;background:rgba(236,78,126,.08);border:1px solid rgba(236,78,126,.25);padding:10px 13px;border-radius:12px}
.mc-spinner{display:inline-block;width:44px;height:44px;border-radius:50%;border:4px solid #EFEAF9;border-top-color:#7A3FF2;animation:mcSpinFast .8s linear infinite;margin-bottom:14px}
@keyframes mcSpinFast{to{transform:rotate(360deg)}}

/* ── Esqueci minha senha ── */
.mc-forgot { text-align: center; margin: 14px 0 0; }
.mc-forgot button {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  color: #6b21e8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.mc-forgot button:hover { color: #4c14ad; }
.mc-forgot-form { margin-top: 6px; }
.mc-forgot-cancel {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  color: #6b7280; font-weight: 600;
}
.mc-forgot-cancel:hover { color: #111827; }
.mc-forgot-done {
  margin: 0 0 14px; padding: 14px; border-radius: 12px;
  background: #f5f1ff; color: #4c14ad; font-size: 14.5px; line-height: 1.5; text-align: center;
}

/* Conteudo estatico que o robo de busca le antes do JS. Fica legivel caso
   apareca por um instante, mas o app.js troca por completo ao carregar. */
.mc-seo { max-width: 720px; margin: 0 auto; padding: 40px 22px; color: #1f2937; line-height: 1.6; }
.mc-seo h1 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; color: #111827; }
.mc-seo h2 { font-size: 19px; margin: 28px 0 10px; color: #111827; }
.mc-seo ul { padding-left: 20px; }
.mc-seo li { margin-bottom: 6px; }
.mc-seo a { color: #6b21e8; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   Escolha do pagamento (/assinar) e retorno do Pix (/pix-recebido)
   ══════════════════════════════════════════════════════════════════════════ */
.as-tela {
  /* flex em vez de grid+place-items: com justify-items:center o card virava
     item de grid e ENCOLHIA pro tamanho do texto (media: 134px numa tela de
     375). No flex o width:100% do card vale de verdade. */
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: linear-gradient(135deg, #7A3FF2 0%, #5E2AD6 55%, #4B1FB0 100%);
  position: relative; overflow: hidden;
  font-family: "Inter", system-ui, sans-serif;
}
.as-tela::before, .as-tela::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.as-tela::before { width: 540px; height: 540px; top: -200px; right: -150px; background: radial-gradient(circle, rgba(244,225,10,.16), transparent 68%); }
.as-tela::after { width: 470px; height: 470px; bottom: -190px; left: -140px; background: radial-gradient(circle, rgba(184,76,230,.28), transparent 68%); }

.as-card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: #fff; border-radius: 22px; padding: 30px 26px 24px;
  box-shadow: 0 26px 70px rgba(20, 8, 50, .38);
}
.as-marca {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -.03em; color: #5E2AD6; margin-bottom: 16px;
}
.as-card h1 {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; line-height: 1.2;
  margin: 0 0 8px; color: #111827; letter-spacing: -.02em;
}
.as-sub { font-size: 14.5px; color: #4b5563; line-height: 1.5; margin: 0 0 20px; }

/* o plano dela, em destaque */
.as-plano {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, #7A3FF2, #5E2AD6); color: #fff;
  border-radius: 16px; padding: 14px 16px; margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(94, 42, 214, .3);
}
.as-plano-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-plano-rot { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .8; }
.as-plano-tx b { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; letter-spacing: -.02em; }
.as-plano-tx small { font-size: 12.5px; opacity: .85; }
.as-plano-preco { text-align: right; flex: none; }
.as-plano-preco b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; letter-spacing: -.02em; }
.as-plano-preco small { font-size: 11.5px; opacity: .8; }

/* as duas formas de pagar */
.as-opcoes { display: flex; flex-direction: column; gap: 10px; }
.as-op {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px;
  padding: 14px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.as-op:hover { border-color: #7A3FF2; box-shadow: 0 4px 16px rgba(94, 42, 214, .12); }
.as-op:active { transform: scale(.99); }
.as-op:disabled { opacity: .6; cursor: default; }
/* o Pix ganha destaque: e a opcao que ela provavelmente quer no Brasil */
.as-op-pix { border-color: #7A3FF2; background: #FAF7FF; }
.as-op-ic { font-size: 24px; flex: none; line-height: 1; }
.as-op-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.as-op-tx b { font-size: 15px; font-weight: 700; color: #111827; }
.as-op-tx small { font-size: 12.5px; color: #6b7280; line-height: 1.4; }
.as-op-seta { font-size: 22px; color: #9aa1ae; flex: none; }

.as-troca { text-align: center; font-size: 13px; color: #6b7280; margin: 18px 0 0; }
.as-troca a { color: #6b21e8; font-weight: 600; }
/* Vira botão de verdade: antes era um link pra /planos, rota que nunca existiu. */
.as-troca button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: #6b21e8; font-weight: 600; text-decoration: underline;
}

/* Troca de plano na própria tela — mandar pra outra página fazia ela perder
   o caminho do pagamento. */
.as-planos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.as-plano-op {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 13px; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px solid #e5e7eb; font-family: inherit;
}
.as-plano-op:hover { border-color: #c4b5fd; }
.as-plano-op.atual { border-color: #7A3FF2; background: #f8f5ff; }
.as-plano-op-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.as-plano-op-tx b { font-size: 14.5px; font-weight: 700; color: #111827; }
.as-plano-op-tx small { font-size: 12px; color: #6b7280; }
.as-plano-op-pr {
  flex: none; font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px; font-weight: 700; color: #5E2AD6; letter-spacing: -.02em;
}
.as-rodape { text-align: center; font-size: 12.5px; color: #9aa1ae; margin: 12px 0 0; line-height: 1.45; }

/* botões */
.as-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  min-height: 48px; line-height: 48px; border-radius: 13px; border: 0;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px;
}
.as-btn-p { background: linear-gradient(135deg, #7A3FF2, #5E2AD6); color: #fff; }
.as-btn-s { background: #f3f4f6; color: #374151; }
.as-btn-zap { background: #25D366; color: #fff; box-shadow: 0 5px 16px rgba(37, 211, 102, .34); }

/* retorno do Pix */
.as-ok { text-align: center; }
.as-ok .as-marca { text-align: left; }
.as-ok-selo {
  width: 62px; height: 62px; margin: 6px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; color: #fff;
  background: linear-gradient(135deg, #34C759, #1A9C55);
  box-shadow: 0 6px 20px rgba(26, 156, 85, .34);
}

/* tela do Pix (QR + copia e cola + espera) */
.as-qr { display: block; width: 210px; height: 210px; margin: 4px auto 16px; border-radius: 12px; }
.as-cc-rot { display: block; font-size: 12.5px; color: #6b7280; margin-bottom: 6px; font-weight: 600; }
.as-cc { display: flex; gap: 8px; }
.as-cc input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 11px; border: 1px solid #d8dbe2;
  font: inherit; font-size: 12.5px; color: #374151; background: #f9fafb;
}
.as-cc button {
  flex: none; padding: 0 16px; border-radius: 11px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7A3FF2, #5E2AD6); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px;
}
.as-espera {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 12px 14px; border-radius: 13px; background: #FAF7FF; border: 1px solid #E4D8FF;
  font-size: 13.5px; color: #4B1FB0; line-height: 1.4;
}
.as-espera-bola {
  width: 10px; height: 10px; border-radius: 50%; flex: none; background: #7A3FF2;
  animation: asPulsa 1.4s ease-in-out infinite;
}
@keyframes asPulsa { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.as-espera.ok { background: #EAF9F0; border-color: #B7E7C9; color: #1A7F46; }
.as-espera.ok .as-espera-bola { background: #34C759; animation: none; }
@media (prefers-reduced-motion: reduce) { .as-espera-bola { animation: none; } }

/* ── Botão de suporte (WhatsApp) ── */
.nl-suporte {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px 11px 13px; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none;
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform .15s, box-shadow .15s;
}
.nl-suporte:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(37, 211, 102, .5); color: #fff; }
.nl-suporte-ic { display: grid; place-items: center; line-height: 0; }
/* no celular fica só o ícone, pra não cobrir o conteúdo */
@media (max-width: 560px) {
  .nl-suporte { padding: 13px; right: 14px; bottom: 14px; }
  .nl-suporte-tx { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nl-suporte { transition: none; } }

/* suporte discreto dentro das telas de pagamento */
.as-suporte {
  display: block; text-align: center; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: #1A9C55; text-decoration: none;
}
.as-suporte:hover { text-decoration: underline; }