/*
Theme Name: XXX Gay Directory
Description: Custom directory theme. Pairs with the "XXX Gay Directory" plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

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

:root {
  --bg: #0f1014;
  --panel: #181a20;
  --panel-2: #1f222a;
  --border: #2a2d36;
  --text: #e7e9ee;
  --muted: #8a8f9c;
  --accent: #ef2d56;
  --accent-2: #ff3a66;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* WP admin bar compensation */
body.admin-bar .topbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
}

.brand-logo {
  background: linear-gradient(135deg, #f5c542, #d4a017);
  color: #1a1208;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(212, 160, 23, 0.3);
}

.search {
  flex: 1;
  max-width: 720px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
}

.search-icon { color: var(--muted); font-size: 16px; }
.search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
}
.search input::placeholder { color: var(--muted); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.sort-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  list-style: none;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 20;
}
.sort-menu li {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.sort-menu li:hover { background: rgba(255, 255, 255, 0.05); }
.sort-menu li.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  font-size: 18px;
}
.icon-btn:hover { background: var(--panel-2); }

.pill {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pill-blog { background: var(--accent); color: white; }
.pill-blog:hover { background: var(--accent-2); }
.pill-top {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Featured banner */
.featured {
  margin: 18px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.featured-left { display: flex; align-items: center; gap: 14px; }
.featured-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5568, #2d3748);
  background-size: cover;
  background-position: center;
}
.featured-tag {
  color: #ffd34d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.featured-title { font-size: 16px; font-weight: 700; }
.featured-cta {
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
}
.featured-cta:hover { background: var(--accent-2); }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 0 24px 32px;
}
@media (max-width: 1400px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-head {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.card-head .head-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
}
.card-head .head-emoji { font-size: 14px; line-height: 1; }

.list { list-style: none; flex: 1; }
.list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
}
.list li:hover { background: var(--panel-2); }

/* Persists while the hover popover is open, so the user can see which row
   the popover belongs to as they move their mouse onto it. */
.list li.list-item-active {
  background: rgba(236, 72, 153, 0.08);
  outline: 1.5px solid rgba(236, 72, 153, 0.55);
  outline-offset: -1.5px;
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.10);
  position: relative;
  z-index: 2;
}
.list li.list-item-active .name { color: #fff; }

.rank {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  width: 18px;
  text-align: center;
}
.dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #3a3f4d, #232730);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}
.badge {
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.info {
  color: var(--muted);
  font-size: 13px;
  opacity: 0.6;
}

.card-foot {
  display: block;
  text-align: center;
  padding: 12px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  margin: 10px;
  border-radius: 10px;
}
.card-foot:hover { background: var(--accent-2); }

/* Hover popover */
.item-popover {
  position: absolute;
  display: none;
  width: 525px;
  max-width: calc(100vw - 32px);
  background: #2c303a;
  border: 1px solid #404654;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 100;
  pointer-events: auto;
}
.pop-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.pop-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a3f4d, #232730);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.pop-title { font-weight: 700; font-size: 14px; color: var(--text); }
.pop-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pop-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pop-visit, .pop-detail {
  display: inline-block;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}
.pop-visit { background: var(--accent); color: white; }
.pop-visit:hover { background: var(--accent-2); }
.pop-detail {
  background: transparent;
  color: var(--text);
  border: 1px solid #4a5060;
}
.pop-detail:hover {
  background: #3a3f4d;
  border-color: #6b7282;
}
.pop-detail[hidden] { display: none; }

.empty-grid {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: 40px;
  background: linear-gradient(180deg, #0f1014 0%, #14161c 100%);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.footer-newsletter {
  background: linear-gradient(135deg, rgba(239, 45, 86, 0.12), rgba(212, 160, 23, 0.08));
  border-bottom: 1px solid var(--border);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.newsletter-text { max-width: 460px; }
.newsletter-text h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.newsletter-text p { font-size: 13px; line-height: 1.5; }
.newsletter-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 45, 86, 0.15);
}
.newsletter-form input[type="email"]::placeholder { color: var(--muted); }
.newsletter-form button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0 22px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.newsletter-form button:hover { background: var(--accent-2); }

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding: 48px 24px 36px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 20px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

.footer-brand .brand-logo {
  display: inline-block;
  margin-bottom: 14px;
}
.footer-tagline {
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 360px;
}
.footer-stats {
  display: flex;
  gap: 22px;
  margin-bottom: 20px;
}
.footer-stat .num {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.footer-stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.social-row {
  display: flex;
  gap: 8px;
}
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--muted);
  text-decoration: none;
  transition: transform .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.social-link:hover {
  transform: translateY(-2px);
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

.footer-col h4 {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-col a:hover { color: var(--text); }
.footer-col a .pin {
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  max-width: 1400px;
  margin: 0 auto;
}
.footer-bottom .legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-bottom .legal-links a {
  color: var(--muted);
  text-decoration: none;
}
.footer-bottom .legal-links a:hover { color: var(--text); }
.footer-bottom .copy { color: var(--muted); }
.footer-bottom .age-pill {
  background: var(--accent);
  color: white;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.4px;
}

/* ============================================================
   Content pages (About / Contact / Submit)
   ============================================================ */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.page-hero {
  text-align: center;
  padding: 30px 16px 38px;
  margin-bottom: 28px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.page-hero.hero-accent {
  background:
    radial-gradient(800px 280px at 50% 0%, rgba(239,45,86,.18), transparent 70%),
    var(--panel);
}
.page-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffd34d;
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid rgba(245, 197, 66, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.page-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 12px;
}
.page-lede {
  max-width: 680px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.hero-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; }
}

.page-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 30px;
}
.page-content h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 28px 0 12px;
  letter-spacing: -0.2px;
}
.page-content h2:first-child { margin-top: 0; }
.page-content p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 14px;
}
.page-content p strong { color: var(--text); }
.page-content a { color: var(--accent); text-decoration: none; }
.page-content a:hover { text-decoration: underline; }

.page-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.page-bullets li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.page-bullets li:last-child { border-bottom: none; }
.page-bullets li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: white;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}
.page-bullets li strong { color: var(--text); }

.page-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}
@media (max-width: 900px) {
  .page-aside { position: static; }
}
.aside-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px;
}
.aside-card h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 10px;
}
.aside-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 10px;
}
.aside-card a { color: var(--accent); text-decoration: none; }
.aside-card a:hover { text-decoration: underline; }
.aside-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.aside-stats li { display: flex; flex-direction: column; }
.aside-stats .num {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.4px;
}
.aside-stats .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-list li {
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.aside-list li strong { color: var(--text); display: inline-block; min-width: 80px; }

.aside-cta {
  background: linear-gradient(135deg, rgba(239, 45, 86, 0.15), rgba(255, 58, 102, 0.07));
  border-color: rgba(239, 45, 86, 0.3);
}

/* Buttons */
.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-accent:hover { background: var(--accent-2); text-decoration: none; }
/* Force white text inside page-content / aside-card where contextual `a { color: var(--accent) }` rules win on specificity */
.page-content a.btn-accent,
.aside-card a.btn-accent { color: #fff; }
.page-content a.btn-accent:hover,
.aside-card a.btn-accent:hover { color: #fff; }

.btn-ghost {
  display: inline-block;
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--panel); border-color: var(--accent); }

/* Forms */
.page-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-form h2 {
  margin-top: 8px;
  margin-bottom: 4px;
}
.page-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.page-form label > span {
  color: var(--text);
}
.page-form input[type="text"],
.page-form input[type="email"],
.page-form input[type="url"],
.page-form input[type="tel"],
.page-form select,
.page-form textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  font-weight: 400;
}
.page-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.page-form textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.page-form input:focus,
.page-form select:focus,
.page-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 45, 86, 0.15);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.page-form label.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}
.page-form label.checkbox input { margin-top: 2px; accent-color: var(--accent); }
.page-form label.checkbox a { color: var(--accent); }
.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.form-hint {
  font-size: 12.5px;
  color: var(--muted);
}
.form-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.06));
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #d1fadc;
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 22px;
}
.form-success h3 { color: #4ade80; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.form-success p { color: #d1fadc; margin: 0; font-size: 13.5px; }
.form-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fecaca;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 13.5px;
}
.form-error strong { color: #fff; }

/* Footer "List Your Website" CTA strip */
.footer-cta-strip {
  background:
    radial-gradient(700px 200px at 70% 50%, rgba(239,45,86,.20), transparent 70%),
    linear-gradient(180deg, #14161c, #0f1014);
  border-bottom: 1px solid var(--border);
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-cta-strip .cta-text h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.footer-cta-strip .cta-text p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  max-width: 520px;
}
.footer-cta-strip .btn-cta-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(239, 45, 86, 0.35);
  transition: transform .12s ease, background .12s ease;
}
.footer-cta-strip .btn-cta-big:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}

/* ============================================================
   Blog (listing + single)
   ============================================================ */
.blog-wrap, .single-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 28px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  transition: background .12s, border-color .12s, color .12s;
}
.filter-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.filter-pill .count {
  background: rgba(255,255,255,.08);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--muted);
}
.filter-pill.active .count {
  background: rgba(0,0,0,.18);
  color: white;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239,45,86,.4);
}

.post-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2a2f3b, #14161c);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.post-thumb-empty {
  background:
    radial-gradient(400px 200px at 30% 30%, rgba(239,45,86,.18), transparent 60%),
    linear-gradient(135deg, #2a2f3b, #14161c);
}
.post-cat-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15,16,20,.85);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
}

.post-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.post-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 0;
}
.post-title a {
  color: inherit;
  text-decoration: none;
}
.post-title a:hover { color: var(--accent-2); }
.post-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: auto;
}
.post-meta .post-author { color: var(--text); font-weight: 600; }
.post-meta .dot-sep { opacity: 0.5; }

.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.blog-pagination .nav-links,
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin: 0 2px;
}
.blog-pagination .page-numbers:hover {
  border-color: var(--accent);
}
.blog-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ============================================================
   Single post
   ============================================================ */
.single-article {
  max-width: 760px;
  margin: 0 auto;
}

.single-hero {
  text-align: left;
  padding: 6px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.single-cat-link {
  display: inline-block;
  background: rgba(239,45,86,.12);
  border: 1px solid rgba(239,45,86,.3);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  margin-bottom: 14px;
}
.single-cat-link:hover { background: rgba(239,45,86,.18); }
.single-title {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--text);
  margin: 4px 0 14px;
}
.single-deck {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
}

.single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}
.meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meta-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.meta-name {
  display: block;
  color: var(--text);
  font-weight: 700;
}
.meta-sub {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}
.meta-share {
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-label {
  color: var(--muted);
  font-size: 12px;
  margin-right: 4px;
}
.share-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
}
.share-btn:hover {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

.single-cover {
  margin: 0 0 28px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.single-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.single-body {
  font-size: 16px;
  line-height: 1.75;
  color: #cfd4de;
}
.single-body > * { margin-bottom: 18px; }
.single-body h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 32px 0 14px;
}
.single-body h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 26px 0 12px;
}
.single-body a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-body a:hover { color: white; }
.single-body strong { color: var(--text); }
.single-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 18px;
  margin: 22px 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
}
.single-body ul, .single-body ol {
  padding-left: 22px;
}
.single-body li {
  margin-bottom: 8px;
}
.single-body code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13.5px;
  color: #ffd6dd;
}
.single-body pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}
.single-body img {
  border-radius: 10px;
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
}

.single-tags {
  margin: 26px 0 0;
}
.single-tags a {
  display: inline-block;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  text-decoration: none;
  margin-right: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.single-tags a:hover { color: var(--text); border-color: var(--accent); }

.single-author-card {
  display: flex;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  margin-top: 38px;
}
.single-author-card .avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.single-author-card .card-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.single-author-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 6px;
}
.single-author-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 12px;
}

.related-posts {
  max-width: 1200px;
  margin: 60px auto 0;
}
.related-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   Homepage extras: trust strip / about / FAQ + contact
   ============================================================ */

/* --- 1. Trust section: header + numbered editorial cards --- */
.trust-strip {
  margin: 44px 24px 0;
  padding: 0 4px;
}

.trust-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
}
.trust-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffd34d;
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid rgba(245, 197, 66, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.trust-title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.18;
  margin: 0 0 14px;
}
.trust-deck {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .trust-strip-inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .trust-strip-inner { grid-template-columns: 1fr; } }

.trust-tile {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px 22px;
  text-align: left;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.trust-tile:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #d4a017);
  opacity: 0.55;
  transition: opacity .18s ease;
}
.trust-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 45, 86, 0.45);
}
.trust-tile:hover:before { opacity: 1; }

.trust-num {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(239,45,86,0.55);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 14px;
  font-feature-settings: "tnum";
}
.trust-tile:hover .trust-num {
  -webkit-text-stroke: 1.5px var(--accent-2);
}
.trust-tile h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.trust-tile p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* --- 2. Short About --- */
.hp-about {
  margin: 32px 24px;
}
.hp-about-inner {
  background:
    radial-gradient(900px 280px at 80% 0%, rgba(212,160,23,.10), transparent 70%),
    linear-gradient(180deg, var(--panel), #14161c);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 38px 32px;
  text-align: center;
}
.hp-about-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffd34d;
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid rgba(245, 197, 66, 0.25);
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.hp-about-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--text);
  margin: 0 0 14px;
}
.hp-about-body {
  max-width: 720px;
  margin: 0 auto 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.hp-about-body strong { color: var(--text); }
.hp-about-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- 3. FAQ + Contact --- */
.hp-faq-contact {
  margin: 32px 24px 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) { .hp-faq-contact { grid-template-columns: 1fr; } }

.hp-section-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 8px 0 18px;
}
.hp-section-title.small { font-size: 22px; }

.faq-col, .contact-col { min-width: 0; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.faq-item[open] { border-color: rgba(239,45,86,.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--panel-2); }
.faq-item .faq-q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.4;
  letter-spacing: inherit;
}
.faq-item .chev {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border-radius: 50%;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.faq-item[open] .chev {
  transform: rotate(45deg);
  background: var(--accent);
  color: white;
}
.faq-body {
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.faq-body p { margin: 0 0 8px; }
.faq-body a { color: var(--accent-2); text-decoration: none; }
.faq-body a:hover { text-decoration: underline; }

/* Contact card */
.contact-card {
  background:
    radial-gradient(500px 220px at 80% 0%, rgba(239,45,86,.14), transparent 70%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
  position: sticky;
  top: 84px;
}
.contact-lede {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.55;
}

.hp-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.hp-contact-form input[type="text"],
.hp-contact-form input[type="email"],
.hp-contact-form textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  font-weight: 400;
}
.hp-contact-form input:focus,
.hp-contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 45, 86, 0.15);
}
.hp-contact-form textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
.hp-contact-form label.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}
.hp-contact-form label.checkbox input { margin-top: 2px; accent-color: var(--accent); }
.hp-contact-form label.checkbox a { color: var(--accent-2); }
.hp-contact-form button {
  margin-top: 4px;
}

/* ============================================================
   Full-width "Get Listed" CTA banner
   ============================================================ */
.getlisted-cta {
  position: relative;
  margin: 44px 0 0;
  padding: 56px 24px 60px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: #0c0d12;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.getlisted-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(800px 400px at 20% 30%, rgba(239, 45, 86, 0.28), transparent 60%),
    radial-gradient(700px 380px at 85% 80%, rgba(212, 160, 23, 0.18), transparent 65%),
    radial-gradient(900px 500px at 50% 110%, rgba(239, 45, 86, 0.22), transparent 70%),
    linear-gradient(180deg, #0c0d12, #0f1014);
}
.getlisted-bg:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 80%);
}

.getlisted-inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

.getlisted-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f5c542, #d4a017);
  color: #1a1208;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 22px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(245, 197, 66, 0.28);
}

.getlisted-title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--text);
  margin: 0 0 18px;
}
.getlisted-title .brand-inline {
  background: linear-gradient(135deg, #f5c542, #d4a017);
  color: #1a1208;
  padding: 4px 14px;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: baseline;
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35);
}

.getlisted-deck {
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: #c9cdd6;
  max-width: 700px;
  margin: 0 auto 26px;
}
.getlisted-deck strong { color: #fff; }

.getlisted-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.getlisted-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  box-shadow:
    0 6px 22px rgba(239, 45, 86, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.getlisted-btn:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(239, 45, 86, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.getlisted-link {
  color: #c9cdd6;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
}
.getlisted-link:hover {
  color: #fff;
  border-bottom-color: var(--accent);
}

.getlisted-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.getlisted-points li {
  font-size: 13px;
  color: #a0a5b0;
  font-weight: 500;
}

@media (max-width: 600px) {
  .getlisted-cta { padding: 44px 20px 48px; }
  .getlisted-title .brand-inline {
    padding: 3px 10px;
    font-size: 0.9em;
  }
  .getlisted-actions { gap: 12px; }
  .getlisted-btn { padding: 14px 24px; font-size: 14px; }
}

/* ============================================================
   Dual Featured banner — Week (pink) + Month (blue)
   ============================================================ */
.featured-pair {
  margin: 26px 24px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) {
  .featured-pair { grid-template-columns: 1fr; }
}

.featured-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.featured-card:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* Week — pink */
.featured-week:before {
  background:
    radial-gradient(420px 220px at 0% 50%, rgba(236, 72, 153, 0.22), transparent 65%),
    radial-gradient(360px 200px at 100% 50%, rgba(236, 72, 153, 0.10), transparent 70%);
}
.featured-week:hover {
  transform: translateY(-2px);
  border-color: #ec4899;
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.45),
    0 18px 40px -12px rgba(236, 72, 153, 0.45);
}
.featured-week:hover:before { opacity: 1; }
.featured-week .featured-tag { color: #f9a8d4; }
.featured-week .featured-cta {
  background: #ec4899;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
}
.featured-week .featured-cta:hover { background: #db2777; }

/* Month — blue */
.featured-month:before {
  background:
    radial-gradient(420px 220px at 0% 50%, rgba(59, 130, 246, 0.22), transparent 65%),
    radial-gradient(360px 200px at 100% 50%, rgba(59, 130, 246, 0.10), transparent 70%);
}
.featured-month:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.45),
    0 18px 40px -12px rgba(59, 130, 246, 0.5);
}
.featured-month:hover:before { opacity: 1; }
.featured-month .featured-tag { color: #93c5fd; }
.featured-month .featured-cta {
  background: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}
.featured-month .featured-cta:hover { background: #2563eb; }

.featured-card .featured-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.featured-card .featured-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4a5568, #2d3748);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.featured-card .featured-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.featured-card .featured-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.featured-card .featured-cta {
  color: white;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.featured-card .featured-cta:hover { transform: translateY(-1px); }

.featured-card .featured-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 360px;
  white-space: normal;
}

.featured-avatar-empty {
  display: grid !important;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  border-style: dashed !important;
  border-width: 1.5px !important;
}
.featured-week .featured-avatar-empty {
  border-color: rgba(236, 72, 153, 0.55) !important;
  color: #f9a8d4;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(236, 72, 153, 0.04)) !important;
}
.featured-month .featured-avatar-empty {
  border-color: rgba(59, 130, 246, 0.55) !important;
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.04)) !important;
}

.featured-card.featured-card-empty .featured-title {
  font-size: 15px;
  font-weight: 700;
}
.featured-card.featured-card-empty .featured-card-left {
  align-items: flex-start;
}

/* ============================================================
   SEO / A11y helpers
   ============================================================ */

/* Make the homepage logo H1 visually identical to the previous span */
h1.brand-h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  display: inline-block;
}

/* Screen-reader-only text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--accent);
  color: white;
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 18px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Skip-to-content link (visible on keyboard focus only) */
.skip-link {
  position: absolute;
  top: -50px;
  left: 8px;
  background: var(--accent);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #ffd34d;
  outline-offset: 2px;
}

/* ============================================================
   404 page
   ============================================================ */
.notfound-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  text-align: center;
}
.notfound-code {
  font-size: clamp(80px, 16vw, 160px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.notfound-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-bottom: 14px;
}
.notfound-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 26px;
}
.notfound-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.notfound-search {
  max-width: 460px;
  margin: 0 auto;
}
.notfound-search input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.notfound-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 45, 86, 0.15);
}

/* ============================================================
   Live search dropdown
   ============================================================ */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 50;
  font-size: 13px;
}
.search-dropdown[hidden] { display: none; }

.search-dropdown .sd-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.search-dropdown .sd-section:last-child { border-bottom: none; }

.search-dropdown .sd-section-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 16px 8px;
}

.search-dropdown .sd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease;
}
.search-dropdown .sd-row:hover {
  background: var(--panel-2);
}
.search-dropdown .sd-row:hover .sd-arrow {
  color: var(--accent-2);
  transform: translateX(2px);
}

.search-dropdown .sd-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(239, 45, 86, 0.15), rgba(239, 45, 86, 0.04));
  border: 1px solid rgba(239, 45, 86, 0.25);
  color: var(--accent-2);
  border-radius: 6px;
  font-size: 12px;
}

.search-dropdown .sd-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-dropdown .sd-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-dropdown .sd-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-dropdown mark {
  background: rgba(239, 45, 86, 0.25);
  color: #fff;
  padding: 0 2px;
  border-radius: 3px;
}

.search-dropdown .sd-arrow {
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  transition: transform .12s ease, color .12s ease;
}

.search-dropdown .sd-empty {
  padding: 20px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.search-dropdown .sd-empty strong { color: var(--text); }

@media (max-width: 700px) {
  .search-dropdown {
    left: -4px;
    right: -4px;
  }
}

/* ============================================================
   "Top 100" pill — slow RGB glow (color cycles ~12s)
   Original button look is preserved; only a colored halo
   rotates through every hue via hue-rotate.
   ============================================================ */
.pill-top {
  box-shadow:
    0 0 10px rgba(255, 0, 110, 0.55),
    0 0 22px rgba(255, 0, 110, 0.30);
  animation: pillRgbSlow 12s linear infinite;
}

@keyframes pillRgbSlow {
  to { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pill-top { animation: none; box-shadow: none; }
}

/* ========== LGBTQIA+ tabbed list (front page) ========== */
.lgbtqia-strip {
  margin: 56px 24px 0;
  padding: 0 4px;
}
.lgbtqia-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
}
.lgbtqia-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ff8ad9;
  background: rgba(255, 138, 217, 0.08);
  border: 1px solid rgba(255, 138, 217, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.lgbtqia-title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.18;
  margin: 0 0 14px;
}
.lgbtqia-title .brand-pride {
  background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: inherit;
  padding: 0 2px;
}
.lgbtqia-deck {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 640px;
}

.lgbtqia-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 760px;
}
.lgbtqia-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 78px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background .18s, border-color .18s, transform .18s;
}
.lgbtqia-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 138, 217, 0.35);
  transform: translateY(-1px);
}
.lgbtqia-tab.is-active {
  background: rgba(255, 138, 217, 0.12);
  border-color: #ff8ad9;
}
.lgbtqia-letter {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #ff8ad9;
  letter-spacing: 0.5px;
}
.lgbtqia-word {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.lgbtqia-tab.is-active .lgbtqia-word { color: var(--text); }

.lgbtqia-panels {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px 24px;
  min-height: 140px;
}
.lgbtqia-panel { display: none; }
.lgbtqia-panel.is-active { display: block; }
.lgbtqia-panel h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--text);
}
.lgbtqia-panel p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  font-size: 15px;
}

/* ========== About page expansion ========== */
.about-stats-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 32px 24px;
  padding: 0 4px;
}
@media (max-width: 1100px) { .about-stats-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .about-stats-strip { grid-template-columns: repeat(2, 1fr); } }
.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.about-stat-num {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -1px;
}
.about-stat-num small { font-size: 0.55em; opacity: 0.8; margin-left: 1px; }
.about-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-top: 8px;
}

.about-tabs-section { margin: 56px 24px; padding: 0 4px; }
.about-tabs-head { text-align: center; max-width: 720px; margin: 0 auto 24px; }
.about-tabs-head h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  margin: 8px 0 10px;
  color: var(--text);
  letter-spacing: -0.5px;
}
.about-tabs-head p { color: var(--muted); margin: 0; font-size: 14.5px; line-height: 1.6; }

.about-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 18px;
  max-width: 760px;
}
.about-tab {
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.about-tab:hover { background: rgba(255,255,255,0.08); border-color: rgba(239,45,86,0.35); }
.about-tab.is-active {
  background: rgba(239,45,86,0.12);
  border-color: var(--accent);
  color: var(--text);
}

.about-tab-panels {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px 30px;
}
.about-tab-panel { display: none; }
.about-tab-panel.is-active { display: block; }
.about-tab-panel h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
}
.about-tab-panel p { color: var(--muted); line-height: 1.7; font-size: 14.5px; margin: 0 0 12px; }
.about-tab-panel ul, .about-tab-panel ol { color: var(--muted); line-height: 1.7; font-size: 14.5px; padding-left: 20px; margin: 0 0 12px; }
.about-tab-panel li { margin-bottom: 8px; }
.about-tab-panel strong { color: var(--text); }
.about-step-list { padding-left: 22px; }

.about-chart-section { margin: 56px 24px; padding: 0 4px; }
.about-chart {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 24px 28px;
}
.about-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
@media (max-width: 600px) {
  .about-bar-row { grid-template-columns: 110px 1fr 44px; gap: 8px; font-size: 12px; }
}
.about-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.about-bar-track {
  height: 22px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  overflow: hidden;
}
.about-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff8ad9);
  border-radius: 6px;
  transition: width 0.6s ease;
}
.about-bar-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  text-align: left;
}

/* ========== Phone+country field ========== */
.phone-country-field { display: block; }
.phone-country-hint {
  display: none;
  font-size: 13px;
  font-weight: 800;
  color: #ffd34d;
  letter-spacing: 0.3px;
  margin-top: 6px;
  padding: 3px 10px;
  background: rgba(255, 211, 77, 0.10);
  border: 1px solid rgba(255, 211, 77, 0.30);
  border-radius: 6px;
  width: fit-content;
}
.phone-country-hint::before {
  content: "📍 ";
  margin-right: 4px;
}
.phone-country-hint.phone-country-hint--blocked {
  color: #ff4d6d;
  background: rgba(255, 77, 109, 0.10);
  border-color: rgba(255, 77, 109, 0.35);
  font-size: 13px;
}
.phone-country-hint.phone-country-hint--blocked::before {
  content: "⛔ ";
}

/* ========== Honeypot (off-screen, never visible to humans) ========== */
.xg-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}