/* Ferroe — clean professional landing (purple accent) */

body.site-clean {
  background: #07070f;
  color: #e2e8f0;
}

.site-clean .landing-v2,
.site-clean.landing-v2 {
  background: #07070f;
}

.site-clean .hero-orb,
.site-clean #hero-canvas,
.site-clean .hero-scroll-hint {
  display: none !important;
}

.site-clean .hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: #07070f;
  position: relative;
}

.site-clean .hero-content {
  max-width: 720px;
  margin: 0 auto;
}

.site-clean .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: rgba(168, 85, 247, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: #c4b5fd;
  margin-bottom: 28px;
}

.site-clean .hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
}

.site-clean .hero-title {
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: #fff;
}

.site-clean .hero-title em {
  font-style: italic;
  color: #a855f7;
}

.site-clean .hero-subtitle {
  font-size: clamp(15px, 2.2vw, 18px);
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 520px;
  margin-inline: auto;
}

.site-clean .hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.site-clean .hero-trust {
  font-size: 13px;
  color: #64748b;
}

.site-clean .btn-hero-primary {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
}

.site-clean .btn-hero-secondary {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-clean .btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.site-clean .btn-hero-secondary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Navbar */
.site-clean .navbar {
  background: rgba(7, 7, 15, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.site-clean .navbar.navbar-scrolled {
  background: rgba(7, 7, 15, 0.95);
}

.site-clean .navbar-link {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  transition: color .18s ease;
}

.site-clean .navbar-link:hover,
.site-clean .navbar-link.active {
  color: #fff;
}

.site-clean .navbar-link:focus {
  outline: none;
}

.site-clean .navbar-link:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-clean .btn-nav-dashboard {
  padding: 9px 20px;
  font-size: 14px;
  border-radius: 999px;
}

.site-clean .navbar-brand {
  font-weight: 800;
  font-size: 15px;
}

.site-clean .navbar-logo img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.site-clean .reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.site-clean .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.site-clean .pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 720px) {
  .site-clean .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Why section — 3 cards only */
.site-clean .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .site-clean .why-grid {
    grid-template-columns: 1fr;
  }
}

.site-clean .why-card {
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.site-clean .why-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.site-clean .why-card p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.65;
}

/* Sections */
.site-clean .section {
  padding: 80px 24px;
}

.site-clean .section-tag {
  color: #a855f7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-clean .section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.site-clean .section-subtitle {
  color: #94a3b8;
  font-size: 15px;
  margin-top: 10px;
}

/* Footer */
.site-clean footer.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #07070f;
  padding: 56px 24px 28px;
}

.site-clean .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 40px;
}

@media (max-width: 900px) {
  .site-clean .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-clean .footer-grid {
    grid-template-columns: 1fr;
  }
}

.site-clean .footer-brand-block .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.site-clean .footer-brand-block img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.site-clean .footer-brand-block .footer-name {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}

.site-clean .footer-tagline {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  max-width: 240px;
}

.site-clean .footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.site-clean .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-clean .footer-col a {
  font-size: 14px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}

.site-clean .footer-col a:hover {
  color: #c4b5fd;
}

.site-clean .footer-col a svg {
  width: 14px;
  height: 14px;
  opacity: 0.55;
}

.site-clean .footer-discord-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.site-clean .footer-discord-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.06);
}

.site-clean .footer-discord-card svg {
  width: 28px;
  height: 28px;
  color: #fff;
  flex-shrink: 0;
}

.site-clean .footer-discord-card strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}

.site-clean .footer-discord-card span {
  font-size: 12px;
  color: #64748b;
}

.site-clean .footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}

.site-clean .footer-disclaimer {
  max-width: 1100px;
  margin: 12px auto 0;
  font-size: 11px;
  color: #334155;
  line-height: 1.5;
}

/* Modules page — matches homepage shell */
.site-clean .modules-page-hero {
  padding: 110px 24px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.site-clean .mod-showcase {
  padding: 0 24px 80px;
  background: #07070f;
}

.site-clean .mod-showcase-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.site-clean .mod-summary-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.site-clean .mod-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}

.site-clean .mod-summary-pill .status-svg {
  width: 16px;
  height: 16px;
}

.site-clean .mod-status-safe {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
  color: #86efac;
}

.site-clean .mod-status-risk {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.22);
  color: #fde68a;
}

.site-clean .mod-status-bad {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.22);
  color: #fecaca;
}

.site-clean .mod-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px 0 32px;
}

.site-clean .mod-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

.site-clean .mod-filter-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

.site-clean .mod-filter:hover {
  border-color: rgba(168, 85, 247, 0.3);
  color: #e2e8f0;
  background: rgba(168, 85, 247, 0.05);
}

.site-clean .mod-filter:active {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.4);
  color: #fff;
}

.site-clean .mod-filter:focus {
  outline: none;
}

.site-clean .mod-filter:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.45);
  outline-offset: 2px;
}

.site-clean .mod-filter.active {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.45);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.1);
}

.site-clean .mod-filter.active .mod-filter-icon {
  opacity: 0.95;
}

.site-clean .mod-group {
  margin-bottom: 36px;
}

.site-clean .mod-group.is-hidden {
  display: none;
}

.site-clean .mod-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.site-clean .mod-group-head h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.site-clean .mod-group-count {
  font-size: 12px;
  color: #64748b;
}

.site-clean .mod-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .site-clean .mod-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .site-clean .mod-cards {
    grid-template-columns: 1fr;
  }
}

.site-clean .mod-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.site-clean .mod-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.site-clean .mod-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.site-clean .mod-status .status-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.site-clean .mod-status-safe {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.06);
}

.site-clean .mod-status-risk {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.06);
}

.site-clean .mod-status-bad {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.06);
}

.site-clean .mod-showcase-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: #64748b;
}

/* FAQ — clean overrides */
.site-clean .faq-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.site-clean .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.site-clean .faq-question:hover {
  background: rgba(255, 255, 255, 0.03);
}

.site-clean .faq-question.open {
  color: #c4b5fd;
}

.site-clean .faq-toggle {
  font-size: 18px;
  color: #64748b;
  flex-shrink: 0;
}

.site-clean .faq-answer {
  display: none;
  padding: 0 18px 16px;
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.7;
}

.site-clean .faq-answer.open {
  display: block;
}

/* Pricing cards — subtle, no glow */
.site-clean .pricing-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.site-clean .pricing-card-featured {
  border-color: rgba(168, 85, 247, 0.35);
}

.site-clean .review-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.site-clean .review-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* Footer — nav icons, payment strip, legal */
.site-clean .footer-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.site-clean .footer-pay-strip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.site-clean .footer-pay-strip .pay-paypal {
  display: flex;
  align-items: center;
  line-height: 0;
}

.site-clean .footer-pay-strip .pay-paypal img {
  height: 20px;
  width: auto;
  display: block;
}

.site-clean .footer-pay-strip .pay-crypto img {
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 50%;
}

.site-clean .footer-col ul.footer-connect {
  gap: 8px;
}

.site-clean .footer-col a.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
  transition: color 0.15s;
}

.site-clean .footer-col a.footer-nav-link:hover {
  color: #c4b5fd;
}

.site-clean .footer-col a.footer-nav-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.55;
}

.site-clean .footer-col .footer-link-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
  transition: color 0.15s;
}

.site-clean .footer-col .footer-link-discord:hover {
  color: #c4b5fd;
}

.site-clean .footer-col .footer-link-discord svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
}

.site-clean .footer-brand-block .footer-tagline {
  max-width: 200px;
}

.site-clean .footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.site-clean .footer-bottom a {
  color: #64748b;
  font-size: 12px;
  transition: color 0.15s;
}

.site-clean .footer-bottom a:hover {
  color: #c4b5fd;
}

.site-clean .reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 20px;
  color: var(--text-dim);
  font-size: 15px;
}

.site-clean #pricing.section-tight-top {
  padding-top: 48px;
}

.site-clean .legal-page {
  padding: 120px 24px 80px;
  max-width: 720px;
  margin: 0 auto;
}

.site-clean .legal-page h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 8px;
}

.site-clean .legal-updated {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 36px;
}

.site-clean .legal-page h2 {
  font-size: 17px;
  font-weight: 700;
  color: #e2e8f0;
  margin: 28px 0 10px;
}

.site-clean .legal-page p,
.site-clean .legal-page li {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 12px;
}

.site-clean .legal-page ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.site-clean .legal-page li {
  margin-bottom: 6px;
}

.site-clean .legal-page a {
  color: #c4b5fd;
}

@media (max-width: 900px) {
  .site-clean .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-clean .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Homepage ambience ──────────────────────────────────────────────────────
   Subtle purple glow behind the hero plus small entrance/hover motion. Kept
   deliberately low-contrast so it reads as depth rather than decoration, and
   every animation is behind prefers-reduced-motion. */

.hero {
  position: relative;
  isolation: isolate;
  /* style.css sets overflow:hidden on .hero, which clips the blurred glows at
     the section edge and leaves a hard line across the page. Removing our own
     declaration was not enough — the base rule still applied — so override it
     explicitly. Sideways bleed is contained on <body> with overflow-x: clip,
     which unlike overflow:hidden creates no scroll container, so sticky keeps
     working and the glow is free to fall off downward. */
  overflow: visible;
}

/* Keep the sideways bleed off-screen without clipping the vertical falloff. */
body.site-clean {
  overflow-x: clip;
}

/* Two slow-drifting radial glows. Blurred and low-alpha so they never compete
   with the headline for attention. Each one fades to fully transparent well
   inside its own box, so the glow dissolves instead of ending on an edge. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
}

.hero::before {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -18%;
  left: -10%;
  background: radial-gradient(circle,
      rgba(168, 85, 247, 0.42) 0%,
      rgba(168, 85, 247, 0.16) 42%,
      rgba(168, 85, 247, 0) 68%);
  animation: ferroe-drift-a 22s ease-in-out infinite alternate;
}

.hero::after {
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  right: -8%;
  bottom: -22%;
  background: radial-gradient(circle,
      rgba(124, 58, 237, 0.36) 0%,
      rgba(124, 58, 237, 0.14) 44%,
      rgba(124, 58, 237, 0) 70%);
  animation: ferroe-drift-b 27s ease-in-out infinite alternate;
}

@keyframes ferroe-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 8%, 0) scale(1.12); }
}

@keyframes ferroe-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7%, -6%, 0) scale(1); }
}

/* Hero content rises in once on load, staggered so it does not arrive as a
   single block. */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-actions,
.hero-trust {
  animation: ferroe-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.hero-badge    { animation-delay: 0.05s; }
.hero-title    { animation-delay: 0.13s; }
.hero-subtitle { animation-delay: 0.21s; }
.hero-actions  { animation-delay: 0.29s; }
.hero-trust    { animation-delay: 0.37s; }

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

/* The live dot in the badge breathes rather than blinks. */
.hero-badge-dot {
  animation: ferroe-pulse 2.4s ease-in-out infinite;
}

@keyframes ferroe-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0); }
}

/* Primary call to action picks up a soft glow on hover. */
.btn-hero-primary {
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -8px rgba(168, 85, 247, 0.65);
}

/* Cards lift slightly and warm their border on hover. */
.pricing-card,
.faq-item {
  transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.42);
  box-shadow: 0 18px 44px -20px rgba(168, 85, 247, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-trust,
  .hero-badge-dot {
    animation: none;
  }
  .btn-hero-primary:hover,
  .pricing-card:hover {
    transform: none;
  }
}