/* Niche landers — same visual system as index/home. Funnel DOM/IDs stay intact. */
.hg-lander {
  --n-accent: var(--hg-accent);
  --n-accent-2: var(--hg-accent-2);
  --n-hot: var(--hg-hot);
  --n-radius: 28px;
  --n-btn-radius: 999px;
  --n-ink: #071018;
  --primary: var(--hg-accent);
  --secondary: var(--hg-accent-2);
  --bg-dark: var(--hg-bg);
  --bg-darker: #05080e;
  align-items: stretch !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--hg-font) !important;
  animation: none !important;
  color: var(--hg-ink) !important;
}
html:has(body.hg-lander),
html:has(body.hg-lander) body {
  background: var(--hg-bg) !important;
  animation: none !important;
  font-family: var(--hg-font) !important;
  background-image: none !important;
}

/* Hidden funnel states MUST beat CTA display:!important */
.hg-lander .hidden-step,
.hg-lander .hidden,
.hg-lander [hidden] {
  display: none !important;
}

.hg-lander > main {
  align-self: center;
  width: 100%;
  max-width: 1120px;
  padding: 18px 16px 48px;
}
.hg-lander .hg-header,
.hg-lander .hg-footer {
  width: 100%;
  align-self: stretch;
}

/* Kill leftover template chrome */
.hg-lander header:not(.hg-header) { display: none !important; }
.hg-lander > footer:not(.hg-footer),
.hg-lander footer.fixed,
.hg-lander footer.bg-gradient-to-r { display: none !important; }

.hg-lander h1,
.hg-lander h2,
.hg-lander h3,
.hg-lander .game-font {
  font-family: var(--hg-display) !important;
}

/* Funnel card = hub hero card (scoped to main so locker overlay stays full-screen) */
.hg-lander main .main-section,
.hg-lander main .glow-border,
.hg-lander main .glow,
.hg-lander main .temu-border,
.hg-lander main .pubg-border,
.hg-lander main .weplay-border,
.hg-lander main .cod-border,
.hg-lander main .cod-card {
  width: min(520px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 28px 22px 24px !important;
  border: 1px solid var(--hg-line) !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(184, 255, 60, 0.08), rgba(16, 24, 39, 0.35)) !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  clip-path: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: none !important;
  overflow: visible !important;
}
.hg-lander main .main-section:hover,
.hg-lander main .glow-border:hover,
.hg-lander main .glow:hover,
.hg-lander main .temu-border:hover,
.hg-lander main .pubg-border:hover,
.hg-lander main .weplay-border:hover,
.hg-lander main .cod-border:hover {
  transform: none !important;
  box-shadow: none !important;
}

.hg-lander .cyber-title,
.hg-lander .temu-title,
.hg-lander .niche-title,
.hg-lander .title,
.hg-lander .pubg-title,
.hg-lander .weplay-title,
.hg-lander .cod-title,
.hg-lander #title,
.hg-lander #doneTitle {
  margin: 0 0 10px !important;
  font-family: var(--hg-display) !important;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hg-ink) !important;
  text-shadow: none !important;
  filter: none !important;
}
.hg-lander #title::after { content: none !important; }

.hg-step-note {
  margin: 0 0 16px !important;
  color: var(--hg-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 77, 141, 0.14);
  color: #ffd1e2 !important;
}

.hg-lander .w-full.bg-zinc-800,
.hg-lander .progress:not(#progressBar) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: auto !important;
  min-height: 6px;
}
.hg-lander .progress-bar,
.hg-lander #progressBar,
.hg-lander .progress > div,
.hg-lander .pubg-progress,
.hg-lander .weplay-progress,
.hg-lander .progress-glow {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--hg-accent), var(--hg-accent-2)) !important;
  animation: none !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.hg-lander label,
.hg-lander .temu-label,
.hg-lander .cod-label,
.hg-lander .pubg-label,
.hg-lander .weplay-label,
.hg-lander .text-gray-300 {
  color: var(--hg-muted) !important;
  text-shadow: none !important;
}
.hg-lander label,
.hg-lander .temu-label,
.hg-lander .cod-label,
.hg-lander .pubg-label,
.hg-lander .weplay-label {
  display: block;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  margin-bottom: 8px !important;
}

.hg-lander input,
.hg-lander select,
.hg-lander textarea,
.hg-lander .temu-input,
.hg-lander .pubg-input,
.hg-lander .weplay-input,
.hg-lander .cod-input,
.hg-lander .niche-input,
.hg-lander .input {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--hg-line) !important;
  background: rgba(7, 11, 18, 0.72) !important;
  color: var(--hg-ink) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.hg-lander input:focus,
.hg-lander select:focus,
.hg-lander .temu-input:focus,
.hg-lander .pubg-input:focus,
.hg-lander .weplay-input:focus,
.hg-lander .cod-input:focus,
.hg-lander .niche-input:focus,
.hg-lander .input:focus {
  outline: 0 !important;
  border-color: var(--hg-accent) !important;
  box-shadow: 0 0 0 3px rgba(184, 255, 60, 0.18) !important;
  background: rgba(7, 11, 18, 0.88) !important;
}

.hg-lander .claimBtn,
.hg-lander .hg-btn,
.hg-lander .temu-btn,
.hg-lander .pubg-btn,
.hg-lander .weplay-btn,
.hg-lander .cod-btn,
.hg-lander .niche-btn,
.hg-lander .btn,
.hg-lander button.bg-\[\#00ffc8\],
.hg-lander a.bg-amber-400,
.hg-lander #continueBtn1,
.hg-lander #continueBtn2,
.hg-lander #continueBtn3,
.hg-lander #startGeneratorBtn,
.hg-lander #verifyBtn,
.hg-lander #copyBtn,
.hg-lander #generateAnother,
.hg-lander .home-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px !important;
  margin-top: 4px;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--hg-accent), var(--hg-accent-2)) !important;
  color: #071018 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(184, 255, 60, 0.18) !important;
  text-transform: none !important;
  transform: none !important;
  filter: none !important;
  cursor: pointer;
}
.hg-lander .claimBtn:hover,
.hg-lander .btn:hover,
.hg-lander .temu-btn:hover,
.hg-lander .pubg-btn:hover,
.hg-lander .weplay-btn:hover,
.hg-lander .cod-btn:hover,
.hg-lander .niche-btn:hover,
.hg-lander #verifyBtn:hover,
.hg-lander #continueBtn1:hover,
.hg-lander #continueBtn2:hover,
.hg-lander #continueBtn3:hover,
.hg-lander #startGeneratorBtn:hover,
.hg-lander #copyBtn:hover,
.hg-lander #generateAnother:hover,
.hg-lander .home-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.05) !important;
  color: #071018 !important;
  background: linear-gradient(90deg, var(--hg-accent), var(--hg-accent-2)) !important;
}
.hg-lander .claimBtn:disabled,
.hg-lander .btn:disabled,
.hg-lander #continueBtn1:disabled,
.hg-lander #continueBtn2:disabled,
.hg-lander #continueBtn3:disabled,
.hg-lander #startGeneratorBtn:disabled,
.hg-lander .is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Re-hide after CTA display:!important */
.hg-lander .hidden-step,
.hg-lander .hidden,
.hg-lander button.hidden,
.hg-lander #verifyBtn.hidden,
.hg-lander #continueBtn3.hidden,
.hg-lander #startGeneratorBtn.hidden,
.hg-lander [hidden] {
  display: none !important;
}

.hg-lander #changeDeviceBtn {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--hg-accent-2) !important;
  box-shadow: none !important;
  font-size: 0.86rem !important;
  text-decoration: underline !important;
  filter: none !important;
  transform: none !important;
}

.hg-lander #countDisplay,
.hg-lander .note,
.hg-lander #generatorAmount,
.hg-lander #typingCode,
.hg-lander #promoCodeDisplay,
.hg-lander .promo-glow,
.hg-lander .animate-count,
.hg-lander .text-\[\#00ffc8\],
.hg-lander .text-amber-400,
.hg-lander .text-green-400,
.hg-lander .success {
  color: var(--hg-accent) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  animation: none !important;
  transform: none !important;
}
.hg-lander #generatingText,
.hg-lander #generatingStep,
.hg-lander #selectedAmountDisplay,
.hg-lander #scarcityMessage,
.hg-lander #verifyMessage,
.hg-lander #countdownTimer,
.hg-lander #doneMsg,
.hg-lander #successText,
.hg-lander #instruction,
.hg-lander #desc,
.hg-lander .text-gray-400 {
  color: var(--hg-muted) !important;
}

.hg-resource-fill {
  background: linear-gradient(90deg, var(--hg-accent), var(--hg-accent-2)) !important;
}
.hg-resource-meta { color: var(--hg-accent) !important; }

.hg-lander .main-section > img,
.hg-lander .main-section img[alt*="Generator"],
.hg-lander .main-section img[alt*="Temu"],
.hg-lander .main-section img[alt*="Monopoly"],
.hg-lander .main-section img[alt*="Coupon"],
.hg-lander .main-section img[alt*="Tinder"],
.hg-lander .glow-border img,
.hg-lander .glow img,
.hg-lander .temu-border img {
  width: 100%;
  height: 148px !important;
  object-fit: cover;
  border-radius: 18px !important;
  margin-bottom: 14px !important;
  background: #0b1220;
  filter: none !important;
}

/* Related tools = hub cards */
.hg-lander main > section.grid,
.hg-lander main .grid.grid-cols-2,
.hg-lander main section .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px !important;
}
@media (max-width: 760px) {
  .hg-lander main .grid.grid-cols-2,
  .hg-lander main section .grid { grid-template-columns: 1fr 1fr; }
}
.hg-lander main section a.p-4,
.hg-lander main .grid > a {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px !important;
  background: rgba(16, 24, 39, 0.82) !important;
  border: 1px solid var(--hg-line) !important;
  padding: 0 !important;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.hg-lander main .grid > a:hover { transform: translateY(-6px); }
.hg-lander main .grid > a img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
.hg-lander main .grid > a span {
  display: block;
  padding: 10px 12px 14px;
  color: var(--hg-ink) !important;
  font-weight: 800;
  font-size: 0.88rem;
}
.hg-lander [data-key="recommendTitle"],
.hg-lander main > section > h2 {
  color: var(--hg-ink) !important;
  text-shadow: none !important;
  font-size: 1.25rem !important;
  text-align: left;
  width: min(1120px, 100%);
  margin: 18px auto 12px !important;
}

/* SEO articles — hub readable panels */
.hg-lander #seoArticle,
.hg-lander article.prose,
.hg-lander .seo-section {
  width: min(860px, 100%);
  margin: 8px auto 28px !important;
  padding: 22px;
  border: 1px solid var(--hg-line);
  border-radius: 22px;
  background: rgba(16, 24, 39, 0.55);
  text-align: left;
}
.hg-lander #seoArticle h1,
.hg-lander #seoArticle h2,
.hg-lander #seoArticle h3,
.hg-lander .prose h1,
.hg-lander .prose h2,
.hg-lander .prose h3,
.hg-lander .seo-section h2,
.hg-lander #seoArticle [class*="text-["],
.hg-lander #seoArticle .text-amber-400,
.hg-lander #seoArticle .text-red-400,
.hg-lander .uc-glow,
.hg-lander .coin-glow,
.hg-lander .promo-glow,
.hg-lander .text-\[\#00ffc8\],
.hg-lander .text-\[\#ff6b35\] {
  color: var(--hg-accent) !important;
  text-shadow: none !important;
}
.hg-lander #seoArticle p,
.hg-lander .prose p,
.hg-lander .prose li,
.hg-lander .seo-section p,
.hg-lander .seo-section li {
  color: var(--hg-muted) !important;
}

.hg-lander .terminal-window {
  border: 1px solid var(--hg-line) !important;
  background: rgba(7, 11, 18, 0.9) !important;
  border-radius: 16px !important;
  color: var(--hg-accent) !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.hg-lander .terminal-header {
  background: rgba(16, 24, 39, 0.9) !important;
  border-bottom: 1px solid var(--hg-line) !important;
}
.hg-lander .coupon-code,
.hg-lander .promo-code,
.hg-lander #visiblePart,
.hg-lander #hiddenPart,
.hg-lander #fullCode {
  color: var(--hg-accent) !important;
  text-shadow: none !important;
  background: rgba(7, 11, 18, 0.72) !important;
  border: 1px solid var(--hg-line) !important;
  border-radius: 16px !important;
  font-family: ui-monospace, "Courier New", monospace !important;
}
.hg-lander .promo-code .hidden-part {
  color: var(--hg-muted) !important;
  opacity: 0.7;
}

.hg-lander .cyber-logo,
.hg-lander .niche-logo,
.hg-lander .logo {
  filter: none !important;
  transform: none !important;
}

.hg-lander .loading-animation {
  border-color: var(--hg-line) !important;
  border-top-color: var(--hg-accent) !important;
}

[data-niche] {
  --n-accent: var(--hg-accent);
  --n-accent-2: var(--hg-accent-2);
  --n-radius: 28px;
  --n-btn-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .hg-lander, .hg-lander * { animation: none !important; }
}