/* PopiAds — landing page (redesign v2) */

.na-lp { background: var(--na-bg); color: var(--na-text); border-radius: 14px; overflow: hidden; position: relative; }
.na-lp a { color: inherit; }
.na-lp h2 { font-size: 30px; line-height: 1.15; text-align: center; margin: 0 0 10px; letter-spacing: -0.01em; text-wrap: balance; }
.na-lp section { padding: 72px 32px; max-width: 1120px; margin: 0 auto; position: relative; }
.na-lp__lead { text-align: center; color: var(--na-text-dim); max-width: 52ch; margin: 0 auto 34px; font-size: 16px; }

/* Tela cheia (template full-screen do plugin) */
body.na-fullscreen { margin: 0 !important; padding: 0 !important; background: #0E1116; }
body.na-fullscreen .na-lp { border: 0; border-radius: 0; min-height: 100vh; }

/* Nav */
.na-lp__nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; max-width: 1120px; margin: 0 auto; position: sticky; top: 0; z-index: 20; background: rgba(14,17,22,.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--na-border); }
.na-lp__brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; text-decoration: none; }
.na-lp__logo { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--na-primary), var(--na-accent)); display: inline-block; }
.na-lp__links { display: flex; align-items: center; gap: 22px; }
.na-lp__links a { color: var(--na-text-dim); text-decoration: none; font-size: 14px; transition: color .15s; }
.na-lp__links a:hover { color: var(--na-text); }
.na-lp__links a.na-btn { color: inherit; }

/* Hero */
.na-lp__hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 40px; }
.na-lp__glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 720px; height: 420px; pointer-events: none;
	background: radial-gradient(60% 60% at 50% 40%, rgba(79,124,255,.22), rgba(124,92,255,.12) 45%, transparent 70%); filter: blur(20px); z-index: 0; }
.na-lp__hero-copy { position: relative; z-index: 1; }
.na-lp__hero h1 { font-size: 50px; line-height: 1.05; margin: 16px 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.na-lp__hero p { color: var(--na-text-dim); font-size: 18px; max-width: 48ch; line-height: 1.6; }
.na-lp__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.na-lp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.na-lp__chips span { font-size: 12px; font-weight: 600; color: var(--na-text-dim); border: 1px solid var(--na-border); background: var(--na-surface); border-radius: 999px; padding: 6px 12px; }
.na-lp__legal { font-size: 12px; color: var(--na-text-dim); margin-top: 18px; }
.na-grad { background: linear-gradient(90deg, var(--na-primary), var(--na-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero mock (browser + native block) */
.na-lp__hero-mock { position: relative; z-index: 1; }
.na-mock-browser { background: var(--na-surface); border: 1px solid var(--na-border); border-radius: 14px; overflow: hidden; box-shadow: var(--na-shadow); animation: na-float 6s ease-in-out infinite; }
@keyframes na-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.na-mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--na-border); background: var(--na-surface-2); }
.na-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a4150; }
.na-mock-bar span:nth-child(1) { background: #E5484D; } .na-mock-bar span:nth-child(2) { background: #F4B740; } .na-mock-bar span:nth-child(3) { background: #2FBF71; }
.na-mock-bar i { flex: 1; height: 16px; border-radius: 6px; background: var(--na-bg); margin-left: 8px; }
.na-mock-body { padding: 18px; }
.na-mock-h { height: 22px; width: 70%; border-radius: 6px; background: var(--na-surface-2); margin-bottom: 14px; }
.na-mock-line { height: 9px; border-radius: 5px; background: var(--na-surface-2); margin: 8px 0; }
.na-mock-line.short { width: 60%; }
.na-mock-sponsored { border: 1px solid var(--na-border); border-radius: 12px; padding: 12px; margin: 16px 0; background: var(--na-bg); position: relative; }
.na-mock-tag { position: absolute; top: -9px; left: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b6a6ff; background: rgba(124,92,255,.16); border: 1px solid rgba(124,92,255,.4); padding: 2px 8px; border-radius: 999px; }
.na-mock-native { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.na-native-card { background: var(--na-surface); border: 1px solid var(--na-border); border-radius: 10px; padding: 10px; }
.na-native-card__img { height: 74px; border-radius: 7px; background: linear-gradient(135deg,#2a3550,#3a2a55); margin-bottom: 8px; }
.na-native-card__img--2 { background: linear-gradient(135deg,#24404a,#402a3a); }
.na-native-card__brand { font-size: 10px; color: var(--na-text-dim); text-transform: uppercase; letter-spacing: .04em; }
.na-native-card__title { font-size: 12.5px; font-weight: 600; margin-top: 3px; line-height: 1.3; }

/* Stats band */
.na-lp__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid var(--na-border); border-bottom: 1px solid var(--na-border); max-width: 1120px; padding: 30px 32px; }
.na-lp__stats div { text-align: center; }
.na-lp__stats strong { display: block; font-size: 19px; }
.na-lp__stats span { font-size: 13px; color: var(--na-text-dim); }

/* Dois lados */
.na-lp__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.na-lp__side { padding: 30px; }
.na-lp__side h2 { text-align: left; font-size: 24px; margin: 14px 0 14px; }
.na-lp__ul { list-style: none; padding: 0; margin: 0 0 22px; }
.na-lp__ul li { position: relative; padding-left: 26px; margin: 10px 0; color: var(--na-text-dim); font-size: 15px; }
.na-lp__ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--na-success); font-weight: 800; }

/* Cards genéricos */
.na-card { background: var(--na-surface); border: 1px solid var(--na-border); border-radius: 14px; padding: 20px; }

/* Como funciona */
.na-lp__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.na-lp__steps .na-card h3 { margin: 10px 0 6px; font-size: 17px; }
.na-lp__steps .na-card p { color: var(--na-text-dim); margin: 0; font-size: 14px; }
.na-step-n { width: 34px; height: 34px; border-radius: 10px; background: rgba(79,124,255,.14); color: #b9caff; display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* Formatos */
.na-lp__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.na-lp__grid3 .na-card h3 { margin: 12px 0 6px; font-size: 17px; }
.na-lp__grid3 .na-card p { color: var(--na-text-dim); margin: 0; font-size: 14px; }
.na-fmt__demo { height: 74px; border-radius: 10px; background: var(--na-bg); border: 1px solid var(--na-border); padding: 10px; display: grid; gap: 6px; }
.na-fmt__demo i { background: linear-gradient(135deg,#2a3550,#3a2a55); border-radius: 5px; display: block; }
.na-fmt__demo--grid { grid-template-columns: 1fr 1fr; }
.na-fmt__demo--list { grid-template-columns: 34px 1fr; grid-auto-rows: 1fr; }
.na-fmt__demo--list i:nth-child(odd) { grid-column: 1; }
.na-fmt__demo--inline { grid-template-columns: 1fr; }

/* Features */
.na-feat__ico { width: 40px; height: 40px; border-radius: 11px; background: var(--na-surface-2); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #b9caff; }
.na-feat h3 { margin: 12px 0 6px; font-size: 16px; }
.na-feat p { color: var(--na-text-dim); margin: 0; font-size: 14px; }
.na-lp__features .na-card { transition: border-color .15s, transform .15s; }
.na-lp__features .na-card:hover { border-color: #3a4457; transform: translateY(-2px); }

/* FAQ */
.na-lp__faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.na-lp__faqgrid .na-card strong { display: block; margin-bottom: 6px; }
.na-lp__faqgrid .na-card p { color: var(--na-text-dim); margin: 0; font-size: 14px; }

/* CTA final */
.na-lp__cta-final { padding-top: 20px; }
.na-lp__cta-card { border-radius: 18px; padding: 48px 32px; text-align: center; border: 1px solid var(--na-border);
	background: radial-gradient(80% 140% at 50% 0%, rgba(79,124,255,.18), transparent 60%), var(--na-surface); }
.na-lp__cta-card h2 { margin-bottom: 8px; }
.na-lp__cta-card p { color: var(--na-text-dim); margin: 0 0 22px; }
.na-lp__cta-card .na-lp__cta { justify-content: center; }

/* Footer */
.na-lp__footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; border-top: 1px solid var(--na-border); color: var(--na-text-dim); font-size: 13px; max-width: 1120px; margin: 0 auto; flex-wrap: wrap; gap: 10px; }
.na-lp__footer a { color: var(--na-text-dim); text-decoration: none; }
.na-lp__footer a:hover { color: var(--na-text); }

/* Gold / iGaming */
.na-pill--gold { background: rgba(240,200,96,.14); color: #f0d488; }
.na-grad-gold { background: linear-gradient(90deg,#f4cf74,#e0973d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.na-btn--gold { background: linear-gradient(135deg,#f4cf74,#e0a441); color: #241a05; font-weight: 700; border-color: transparent; }
.na-btn--gold:hover { filter: brightness(1.06); }
.na-lp__igaming { padding-top: 8px; }
.na-lp__ig-inner {
	display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center;
	border-radius: 20px; padding: 44px; border: 1px solid rgba(240,200,96,.22);
	background: radial-gradient(90% 130% at 100% 0%, rgba(224,151,61,.15), transparent 55%), var(--na-surface);
}
.na-lp__ig-copy h2 { text-align: left; font-size: 30px; margin: 14px 0 12px; }
.na-lp__ig-copy > p { color: var(--na-text-dim); font-size: 16px; margin: 0 0 18px; max-width: 52ch; }
.na-lp__ul--check li::before { color: #e0a441; }
.na-lp__ig-legal { font-size: 12px; color: var(--na-text-dim); margin-top: 16px; }
.na-lp__ig-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.na-ig-tile { background: var(--na-bg); border: 1px solid var(--na-border); border-radius: 14px; padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; }
.na-ig-tile__k { font-size: 20px; font-weight: 800; color: #f0d488; }
.na-ig-tile__v { font-size: 12px; color: var(--na-text-dim); }

/* Cadastro (modal) */
body.na-noscroll { overflow: hidden; }
.na-su { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.na-su[hidden] { display: none; }
.na-su__backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.72); backdrop-filter: blur(4px); }
.na-su__card { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--na-surface); border: 1px solid var(--na-border); border-radius: 18px; padding: 30px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.5); max-height: 92vh; overflow-y: auto; }
.na-su__x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--na-text-dim); font-size: 24px; line-height: 1; cursor: pointer; }
.na-su__x:hover { color: var(--na-text); }
.na-su__dots { display: flex; gap: 6px; margin-bottom: 18px; }
.na-su__dot { width: 26px; height: 4px; border-radius: 3px; background: var(--na-surface-2); transition: background .2s; }
.na-su__dot.is-on { background: var(--na-primary); }
.na-su__h { font-size: 21px; margin: 0 0 4px; }
.na-su__p { color: var(--na-text-dim); font-size: 14px; margin: 0 0 18px; }
.na-role { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--na-bg); border: 1px solid var(--na-border); border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; color: var(--na-text); transition: border-color .15s, transform .1s; }
.na-role:hover { border-color: var(--na-primary); transform: translateY(-1px); }
.na-role__ico { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--na-surface-2); display: flex; align-items: center; justify-content: center; font-size: 19px; color: #b9caff; }
.na-role strong { display: block; font-size: 15px; }
.na-role small { display: block; color: var(--na-text-dim); font-size: 12.5px; margin-top: 2px; }
.na-role__arrow { margin-left: auto; color: var(--na-text-dim); }
.na-su__field { margin-bottom: 12px; }
.na-su__field label { display: block; font-size: 12px; color: var(--na-text-dim); margin-bottom: 5px; }
.na-su__input { width: 100%; height: 42px; background: var(--na-bg); border: 1px solid var(--na-border); border-radius: 10px; color: var(--na-text); padding: 0 12px; font-size: 14px; box-sizing: border-box; }
.na-su__input:focus { outline: none; border-color: var(--na-primary); }
.na-su__submit { width: 100%; margin-top: 6px; }
.na-su__back { background: none; border: none; color: var(--na-text-dim); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 8px; }
.na-su__back:hover { color: var(--na-text); }
.na-su__err { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.4); color: #f0999b; font-size: 13px; padding: 9px 12px; border-radius: 9px; margin-bottom: 12px; }
.na-su__fine { font-size: 11px; color: var(--na-text-dim); text-align: center; margin: 12px 0 0; }
.na-su__step--ok { text-align: center; padding: 20px 0; }
.na-su__check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(47,191,113,.16); color: var(--na-success); display: flex; align-items: center; justify-content: center; font-size: 28px; }

/* Responsivo */
@media (max-width: 900px) {
	.na-lp__hero { grid-template-columns: 1fr; gap: 32px; }
	.na-lp__hero-mock { max-width: 460px; }
	.na-lp__sides { grid-template-columns: 1fr; }
	.na-lp__stats { grid-template-columns: 1fr 1fr; gap: 22px; }
	.na-lp__ig-inner { grid-template-columns: 1fr; padding: 30px; }
}
@media (max-width: 760px) {
	.na-lp__grid3, .na-lp__steps, .na-lp__faqgrid { grid-template-columns: 1fr; }
	.na-lp__links a:not(.na-btn) { display: none; }
}
@media (max-width: 480px) {
	.na-lp section { padding: 48px 18px; }
	.na-lp__nav { padding: 14px 18px; }
	.na-lp h2 { font-size: 24px; }
	.na-lp__hero h1 { font-size: 33px; }
	.na-lp__hero p { font-size: 16px; }
	.na-lp__cta .na-btn { flex: 1; }
	.na-lp__footer { flex-direction: column; text-align: center; }
	.na-lp__cta-card { padding: 34px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.na-mock-browser { animation: none; }
}

/* ---------- L1: Push Ads na LP (hero alternado só com CSS, mock de notificação, secção, aceite de termos, rodapé legal) ---------- */
.na-pill--push { background: rgba(79,124,255,.16); color: #b9caff; }
.na-lp__hero-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.na-lp__switch { display: inline-flex; border: 1px solid var(--na-border); border-radius: 999px; background: var(--na-surface); padding: 3px; margin-bottom: 14px; position: relative; z-index: 1; }
.na-lp__switch label { cursor: pointer; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--na-text-dim); user-select: none; transition: background .15s, color .15s; }
.na-lp__switch label:hover { color: var(--na-text); }
.na-lp__hero-pane { display: none; }
#na-hero-native:checked ~ .na-lp__hero-copy .na-lp__hero-pane--native,
#na-hero-push:checked ~ .na-lp__hero-copy .na-lp__hero-pane--push { display: block; }
#na-hero-native:checked ~ .na-lp__hero-copy .na-lp__switch-native,
#na-hero-push:checked ~ .na-lp__hero-copy .na-lp__switch-push { background: var(--na-primary); color: #fff; }
.na-lp__hero-radio:focus-visible ~ .na-lp__hero-copy .na-lp__switch { outline: 2px solid var(--na-primary); outline-offset: 2px; }
/* mock: notificações push sobre o navegador; só aparecem com "Push" selecionado; o bloco native esmaece */
.na-mock-push { position: absolute; display: none; width: 300px; max-width: 86%; border-radius: 14px; font-family: var(--na-font); box-shadow: 0 12px 34px rgba(0,0,0,.45); z-index: 2; }
.na-mock-push--android { right: -14px; top: 26px; background: #1c1f26; color: #e9ecf2; border: 1px solid #2c313c; animation: na-float 6s ease-in-out infinite; }
.na-mock-push--desktop { left: -18px; bottom: 22px; background: #fff; color: #1f1f1f; border: 1px solid #d5d9e0; border-radius: 8px; animation: na-float 7s ease-in-out infinite reverse; }
.na-mock-push__app { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #aab2c0; padding: 10px 14px 4px; }
.na-mock-push__app i { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#ea4335 0 33%, #fbbc04 33% 66%, #34a853 66% 100%); position: relative; flex: none; }
.na-mock-push__bar { display: flex; justify-content: space-between; font-size: 12px; color: #5f6368; padding: 8px 12px; border-bottom: 1px solid #eceff3; background: #f6f7f9; border-radius: 8px 8px 0 0; }
.na-mock-push__row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 14px 14px; }
.na-mock-push--desktop .na-mock-push__row { padding: 12px; }
.na-mock-push__ico { width: 38px; height: 38px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--na-primary), var(--na-accent)); }
.na-mock-push__row b { display: block; font-size: 14px; line-height: 1.3; }
.na-mock-push__row small { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 2px; color: #c5ccd8; }
.na-mock-push--desktop .na-mock-push__row small { color: #3c4043; }
#na-hero-push:checked ~ .na-lp__hero-mock .na-mock-push { display: block; }
#na-hero-push:checked ~ .na-lp__hero-mock .na-mock-sponsored { opacity: .35; }
#na-hero-push:checked ~ .na-lp__hero-mock .na-mock-browser { animation: none; }
/* secção Push Ads */
.na-lp__push { text-align: center; }
.na-lp__push-pill { margin-bottom: 12px; }
.na-lp__push .na-lp__sides { margin-top: 28px; text-align: left; }
.na-lp__push .na-lp__side h2 { font-size: 22px; }
.na-lp__ul--push li::before { color: #b9caff; }
.na-lp__push-how { margin-top: 56px; }
.na-lp__push .na-lp__steps { text-align: left; }
/* aceite de termos no cadastro + rodapé legal */
.na-su__terms { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--na-text-dim); margin: 6px 0 12px; cursor: pointer; line-height: 1.45; }
.na-su__terms input { margin: 3px 0 0; accent-color: var(--na-primary); flex: none; }
.na-su__terms a { color: var(--na-primary); text-decoration: underline; }
.na-lp__footer-legal a { color: var(--na-text-dim); }
@media (max-width: 900px) {
	.na-mock-push--android { right: 0; }
	.na-mock-push--desktop { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.na-mock-push { animation: none; }
}