/* =========================================================
   FreeQRHub — Premium Redesign v2
   New fonts, refined color system, trust signals, conversion
   Loads AFTER styles.css — safe override, no breakage
   ========================================================= */

/* ── GOOGLE FONTS ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Color system — warmer, more trustworthy */
  --bg: #f5f7fa;
  --bg-soft: #edf0f7;
  --paper: #ffffff;
  --paper-2: #fafbff;

  --ink: #0d1b2a;
  --ink-2: #1e3048;
  --muted: #5c6f82;
  --muted-2: #8fa1b3;

  --line: #dde3ec;
  --line-strong: #c2ccd8;
  --border: #dde3ec;

  /* Primary: deep emerald-teal */
  --accent: #0ea47c;
  /* Secondary: confident indigo (replaces harsh purple) */
  --accent-2: #3b5bdb;
  --accent-3: #22c4e0;

  --success: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* Updated gradient — emerald → sky → indigo */
  --gradient: linear-gradient(135deg, #0ea47c 0%, #22c4e0 44%, #3b5bdb 100%);
  --gradient-soft: linear-gradient(135deg, rgba(14,164,124,.09), rgba(34,196,224,.09), rgba(59,91,219,.09));

  /* Shadows — slightly warmer */
  --shadow-xs: 0 2px 10px rgba(13,27,42,.05);
  --shadow-sm: 0 8px 24px rgba(13,27,42,.07);
  --shadow: 0 18px 50px rgba(13,27,42,.09);
  --shadow-lg: 0 28px 80px rgba(13,27,42,.13);

  --focus-ring: 0 0 0 3px rgba(59,91,219,.22);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Lato', ui-sans-serif, system-ui, sans-serif;

  /* Radii — slightly softer */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

/* ── TYPOGRAPHY ────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top left, rgba(34,196,224,.07), transparent 24%),
    radial-gradient(circle at top right, rgba(59,91,219,.07), transparent 22%),
    linear-gradient(180deg, #f7f9fd 0%, #f2f6fc 100%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -.022em;
}

h1 {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.038em;
}

/* ── DARK MODE TOKENS ──────────────────────────────────── */
html.theme-dark {
  --bg: #070d16;
  --bg-soft: #0a1322;
  --paper: #0d1b2a;
  --paper-2: #0f2035;

  --ink: #e2edf8;
  --ink-2: #c0d3e5;
  --muted: #7a93ac;
  --muted-2: #627d96;

  --line: #1e3048;
  --line-strong: #2a4260;
  --border: #1e3048;
}

html.theme-dark body {
  background:
    radial-gradient(circle at top left, rgba(34,196,224,.09), transparent 24%),
    radial-gradient(circle at top right, rgba(59,91,219,.11), transparent 24%),
    linear-gradient(180deg, #070d16 0%, #090f1c 100%);
}

/* ── CARDS & SECTIONS ──────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  border-color: rgba(221,227,236,.9);
}

.card:hover {
  border-color: rgba(59,91,219,.15);
}

/* ── BUTTONS ───────────────────────────────────────────── */
button,
.btn {
  font-family: var(--font-display);
  box-shadow: 0 12px 28px rgba(59,91,219,.16);
}

button:hover,
.btn:hover {
  box-shadow: 0 16px 36px rgba(59,91,219,.22);
}

.btn.outline {
  color: var(--accent-2);
  border-color: rgba(59,91,219,.24);
}

button.ghost:hover,
a.ghost:hover,
.btn.outline:hover {
  background: var(--accent-2);
}

/* ── NAV ───────────────────────────────────────────────── */
.fqh-home-topnav {
  background: rgba(255,255,255,.88);
  border-color: rgba(221,227,236,.92);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
}

.fqh-home-topnav__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 8px 14px;
  transition: all .18s ease;
}

.fqh-home-topnav__links a.active {
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 8px 22px rgba(59,91,219,.18);
}

.fqh-home-topnav__links a:hover:not(.active) {
  background: rgba(59,91,219,.07);
  color: var(--accent-2);
  border-color: transparent;
}

html.theme-dark .fqh-home-topnav {
  background: rgba(10,19,34,.88);
  border-color: rgba(30,48,72,.9);
}

/* ── TRUST BAR ─────────────────────────────────────────── */
.fqh-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  padding: 10px 16px;
  margin: 0 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(14,164,124,.16);
  background: linear-gradient(135deg, rgba(14,164,124,.06), rgba(34,196,224,.06));
  font-family: var(--font-display);
}

.fqh-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.fqh-trust-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.fqh-trust-sep {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
  flex-shrink: 0;
}

.fqh-trust-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: .04em;
}

html.theme-dark .fqh-trust-bar {
  border-color: rgba(14,164,124,.2);
  background: linear-gradient(135deg, rgba(14,164,124,.08), rgba(34,196,224,.08));
}

@media (max-width: 640px) {
  .fqh-trust-bar {
    gap: 8px 14px;
  }
  .fqh-trust-item {
    font-size: 12px;
  }
  .fqh-trust-sep {
    display: none;
  }
}

/* ── HERO / GENERATOR COPY ─────────────────────────────── */
.fqh-home-generator-copy-v2 h1,
.fqh-home-generator-copy h1 {
  font-family: var(--font-display);
  line-height: 1.0;
}

.fqh-home-generator-copy-v2 .lead,
.fqh-home-generator-copy .lead {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: clamp(16px, 1.9vw, 18px);
}

.fqh-home-mini-points .hero-point {
  font-family: var(--font-body);
  border-radius: 14px;
  border-color: rgba(221,227,236,.9);
  background: rgba(255,255,255,.9);
}

.fqh-home-mini-points .hero-point strong {
  font-family: var(--font-display);
  color: var(--ink);
}

/* ── GENERATOR CARD ────────────────────────────────────── */
.fqh-home-generator-card-v2 {
  border-radius: 26px;
  border-color: rgba(221,227,236,.9);
  box-shadow:
    0 24px 70px rgba(13,27,42,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.fqh-gen-topbar h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
}

.fqh-preset-btn-v2 {
  font-family: var(--font-display);
  border-radius: 16px;
  border-color: rgba(221,227,236,.92);
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 12px rgba(13,27,42,.05);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.fqh-preset-btn-v2:hover {
  border-color: rgba(59,91,219,.26);
  box-shadow: 0 10px 28px rgba(59,91,219,.10);
}

.fqh-preset-btn-v2.is-active {
  background: var(--gradient);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(59,91,219,.20);
}

html.theme-dark .fqh-preset-btn-v2 {
  background: rgba(13,27,42,.9);
  border-color: var(--line);
}

html.theme-dark .fqh-home-generator-card-v2,
html.theme-dark .fqh-form-card-v2,
html.theme-dark .fqh-preview-card-v2 {
  background: linear-gradient(180deg, rgba(13,27,42,.98), rgba(10,19,34,.98));
  border-color: rgba(30,48,72,.9);
}

/* ── FORM FIELDS ───────────────────────────────────────── */
label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: var(--font-body);
  border-color: var(--line-strong);
  border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(59,91,219,.5);
  box-shadow: 0 0 0 3px rgba(59,91,219,.12), 0 8px 20px rgba(59,91,219,.08);
  outline: 0;
}

/* ── SECTION HEADS ─────────────────────────────────────── */
.fqh-section-head h2 {
  font-family: var(--font-display);
}

.kicker {
  font-family: var(--font-display);
  color: var(--accent-2);
}

.eyebrow {
  font-family: var(--font-display);
  color: var(--accent-2);
  border-color: rgba(59,91,219,.14);
  background: rgba(255,255,255,.85);
}

/* ── GUIDE / TOOL TILES ────────────────────────────────── */
.fqh-guide-tile,
.fqh-tool-tile {
  border-radius: 16px;
  border-color: rgba(221,227,236,.9);
  background: rgba(255,255,255,.92);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.fqh-guide-tile:hover,
.fqh-tool-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(59,91,219,.24);
  box-shadow: 0 14px 32px rgba(59,91,219,.10);
  background: #fff;
}

.fqh-guide-tile strong,
.fqh-tool-tile strong {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 15px;
}

.fqh-guide-tile span,
.fqh-tool-tile span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

html.theme-dark .fqh-guide-tile,
html.theme-dark .fqh-tool-tile {
  background: rgba(255,255,255,.03);
  border-color: var(--line);
}

html.theme-dark .fqh-guide-tile:hover,
html.theme-dark .fqh-tool-tile:hover {
  background: rgba(59,91,219,.10);
  border-color: rgba(59,91,219,.32);
}

/* ── MINI CARDS ────────────────────────────────────────── */
.mini-card {
  border-radius: 16px;
  border-color: rgba(221,227,236,.9);
}

.mini-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
}

/* ── FAQ GRID ──────────────────────────────────────────── */
.fqh-faq-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.fqh-faq-grid .mini-card h3 {
  color: var(--accent-2);
  font-size: 16px;
}

@media (max-width: 640px) {
  .fqh-faq-grid { grid-template-columns: 1fr; }
}

/* ── LINK CLOUD ────────────────────────────────────────── */
.fqh-link-cloud a {
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-color: rgba(221,227,236,.9);
}

.fqh-link-cloud a:hover {
  border-color: rgba(59,91,219,.24);
  color: var(--accent-2);
}

html.theme-dark .fqh-link-cloud a {
  background: rgba(255,255,255,.03);
  border-color: var(--line);
  color: var(--ink);
}

/* ── QUALITY GUIDES HUB ────────────────────────────────── */
.fqh-adsense-quality-hub {
  background:
    radial-gradient(circle at top left, rgba(14,164,124,.07), transparent 28%),
    radial-gradient(circle at top right, rgba(59,91,219,.07), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,252,255,.97));
}

html.theme-dark .fqh-adsense-quality-hub {
  background: linear-gradient(180deg, rgba(13,27,42,.98), rgba(10,19,34,.98));
}

/* ── PRO PACK CTA ──────────────────────────────────────── */
.pro-pack {
  background:
    radial-gradient(circle at top right, rgba(59,91,219,.09), transparent 36%),
    radial-gradient(circle at bottom left, rgba(14,164,124,.09), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border-color: rgba(59,91,219,.14);
  border-radius: 22px;
}

.pro-pack__btn {
  background: var(--gradient);
  border: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(59,91,219,.18);
}

.pro-pack__btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 16px 36px rgba(59,91,219,.24);
}

.pro-pack__price {
  font-family: var(--font-display);
  letter-spacing: -.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pro-pack__left h3 {
  font-family: var(--font-display);
  font-size: 20px;
}

/* ── RELATED GUIDES ────────────────────────────────────── */
.related-guides a,
.phase35-related-links a {
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 14px;
  border-color: rgba(221,227,236,.9);
}

.related-guides a:hover,
.phase35-related-links a:hover {
  border-color: rgba(59,91,219,.24);
  color: var(--accent-2);
}

/* ── HERO SECTION ──────────────────────────────────────── */
.fqh-home-hero__content h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 38px);
  line-height: 1.12;
}

.hero-point strong {
  font-family: var(--font-display);
}

/* ── FOOTER ────────────────────────────────────────────── */
.fqh-site-footer {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 36px;
}

.fqh-footer-credit {
  font-family: var(--font-display);
}

.fqh-footer-credit a {
  color: var(--accent-2);
}

.fqh-footer-network a {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border-color: rgba(221,227,236,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  transition: all .16s ease;
}

.fqh-footer-network a:hover {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(59,91,219,.16);
  text-decoration: none;
}

.fqh-site-footer .links a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-2);
}

.fqh-site-footer .links a:hover {
  text-decoration: underline;
}

html.theme-dark .fqh-footer-network a {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark .fqh-footer-network a:hover {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

/* ── STICKY BAR ────────────────────────────────────────── */
.sticky-bar__inner {
  font-family: var(--font-display);
  border-color: rgba(221,227,236,.9);
  box-shadow: 0 16px 50px rgba(13,27,42,.12);
}

.sticky-bar__copy strong {
  font-family: var(--font-display);
}

/* ── BREADCRUMBS ───────────────────────────────────────── */
.breadcrumbs a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* ── ARTICLE CONTENT ───────────────────────────────────── */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--font-display);
}

/* ── TRUST SIGNALS ON HERO CARD ────────────────────────── */
.fqh-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.fqh-social-proof__avatars {
  display: flex;
  align-items: center;
}

.fqh-social-proof__avatars span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-left: -8px;
  flex-shrink: 0;
}

.fqh-social-proof__avatars span:first-child {
  margin-left: 0;
}

.fqh-social-proof__stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: .04em;
}

/* ── PRIVACY BADGE ─────────────────────────────────────── */
.fqh-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(14,164,124,.18);
  background: rgba(14,164,124,.07);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: #0a7a5c;
  text-transform: uppercase;
  letter-spacing: .05em;
}

html.theme-dark .fqh-privacy-badge {
  background: rgba(14,164,124,.12);
  color: #34d399;
}

/* ── QR PREVIEW BOX ────────────────────────────────────── */
.qrbox {
  border-radius: 22px;
  border-color: rgba(197,210,225,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
}

html.theme-dark .qrbox {
  background: linear-gradient(180deg, rgba(10,19,34,.9), rgba(8,14,24,.96));
  border-color: var(--line-strong);
}

/* ── SECTION ENHANCEMENTS ──────────────────────────────── */
.fqh-home-hero.card {
  background:
    radial-gradient(circle at top right, rgba(59,91,219,.08), transparent 32%),
    radial-gradient(circle at bottom left, rgba(14,164,124,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,252,255,.95));
}

/* ── HERO POINTS ───────────────────────────────────────── */
.hero-point {
  font-family: var(--font-body);
  border-radius: 14px;
}

/* ── COOKIE BANNER ─────────────────────────────────────── */
.cookie-banner {
  font-family: var(--font-body);
}

/* ── PHASE BLOCKS ──────────────────────────────────────── */
.phase23-top-quick-links a,
.phase23-snippet-guides a,
.phase23-footer-seo-links a,
.phase13-guides-resources a,
.phase13-money-hubs a,
.phase10-city-hubs a,
.phase9-city-industry a,
.phase6-industry-section a,
.phase4-growth-links a,
.growth-links a,
.fqh-home-growth a,
.phase12-featured-cities a {
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 14px;
  border-color: rgba(221,227,236,.9);
}

.phase23-top-quick-links a:hover,
.phase23-snippet-guides a:hover,
.phase23-footer-seo-links a:hover,
.phase13-guides-resources a:hover,
.phase13-money-hubs a:hover,
.phase10-city-hubs a:hover,
.phase9-city-industry a:hover,
.phase6-industry-section a:hover,
.phase4-growth-links a:hover,
.growth-links a:hover,
.fqh-home-growth a:hover,
.phase12-featured-cities a:hover {
  border-color: rgba(59,91,219,.24);
  color: var(--accent-2);
}

/* ── TABLE ─────────────────────────────────────────────── */
thead th {
  font-family: var(--font-display);
  font-weight: 800;
}

/* ── h-tags within cards ───────────────────────────────── */
.card h2,
.card h3,
.hero-card h2,
.hero-card h3 {
  font-family: var(--font-display);
}

/* ── LOADING / ANIMATION ───────────────────────────────── */
@keyframes trustPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

.fqh-trust-bar .fqh-trust-item__icon {
  animation: none;
}

/* ── PRINT ─────────────────────────────────────────────── */
@media print {
  body { font-family: var(--font-body); }
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 760px) {
  .fqh-trust-bar {
    justify-content: flex-start;
    font-size: 12px;
    padding: 8px 12px;
  }
}