/* Anti-Scam V4 visual layer
 * Shared by the homepage and reader-facing document pages.
 * Artwork stays decorative; content cards retain strong contrast.
 */

.anti-scam-page-v4 .anti-scam-hero,
.anti-scam-page-v4 main > .section-band {
  background-repeat: no-repeat;
  background-size: cover, min(58vw, 760px) auto;
}

.anti-scam-page-v4 .anti-scam-hero {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(110deg, rgba(7, 18, 35, 0.99) 0%, rgba(10, 27, 52, 0.95) 55%, rgba(9, 31, 58, 0.86) 100%),
    url("./img/anti-scam/anti-scam-hero.webp");
  background-position: center, right center;
  box-shadow: inset 0 -1px 0 rgba(125, 211, 252, 0.08);
}

.anti-scam-page-v4 .anti-scam-hero-main,
.anti-scam-page-v4 .anti-scam-hero-side {
  position: relative;
  z-index: 1;
}

.anti-scam-page-v4 #act-now {
  background-image:
    linear-gradient(110deg, rgba(24, 32, 45, 0.98) 0%, rgba(24, 32, 45, 0.95) 63%, rgba(21, 35, 52, 0.89) 100%),
    url("./img/anti-scam/anti-scam-common-scenarios.webp");
  background-position: center, right 46%;
}

.anti-scam-page-v4 #latest-signals,
.anti-scam-page-v4 #weekly-snapshot {
  background-image:
    linear-gradient(110deg, rgba(8, 35, 57, 0.98) 0%, rgba(12, 28, 48, 0.95) 63%, rgba(9, 27, 50, 0.88) 100%),
    url("./img/anti-scam/anti-scam-latest-tracking.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 #featured-share {
  background-image:
    linear-gradient(110deg, rgba(15, 23, 42, 0.98) 0%, rgba(18, 29, 49, 0.95) 63%, rgba(20, 36, 58, 0.87) 100%),
    url("./img/anti-scam/anti-scam-experience-share.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 #quick-check {
  background-image:
    linear-gradient(110deg, rgba(24, 32, 45, 0.97) 0%, rgba(24, 32, 45, 0.94) 63%, rgba(20, 38, 56, 0.87) 100%),
    url("./img/anti-scam/anti-scam-quick-check.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 #pattern-map,
.anti-scam-page-v4 #phrase-watch {
  background-image:
    linear-gradient(110deg, rgba(11, 20, 37, 0.98) 0%, rgba(13, 26, 47, 0.95) 63%, rgba(8, 30, 55, 0.88) 100%),
    url("./img/anti-scam/anti-scam-pattern-breakdown.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 #official-resources {
  background-image:
    linear-gradient(110deg, rgba(24, 32, 45, 0.98) 0%, rgba(24, 32, 45, 0.95) 63%, rgba(19, 39, 55, 0.89) 100%),
    url("./img/anti-scam/anti-scam-quick-check.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 #anti-scam-faq {
  background-image:
    linear-gradient(110deg, rgba(17, 24, 39, 0.98) 0%, rgba(17, 26, 43, 0.95) 63%, rgba(12, 31, 53, 0.88) 100%),
    url("./img/anti-scam/anti-scam-common-scenarios.webp");
  background-position: center, right center;
}

.anti-scam-page-v4 main > .section-band {
  overflow: hidden;
  border-color: rgba(125, 211, 252, 0.13);
  box-shadow: 0 20px 55px rgba(2, 6, 23, 0.22);
}

.anti-scam-page-v4 main > .section-band > .section-head,
.anti-scam-page-v4 main > .section-band > .archive-grid,
.anti-scam-page-v4 main > .section-band > .anti-scam-single-grid,
.anti-scam-page-v4 main > .section-band > .case-grid,
.anti-scam-page-v4 main > .section-band > .anti-scam-illustrated-row,
.anti-scam-page-v4 main > .section-band > .type-grid,
.anti-scam-page-v4 main > .section-band > .phrase-grid,
.anti-scam-page-v4 main > .section-band > .resource-grid,
.anti-scam-page-v4 main > .section-band > .faq-grid {
  position: relative;
  z-index: 1;
}

.anti-scam-page-v4 main > .section-band .archive-card,
.anti-scam-page-v4 main > .section-band .case-card,
.anti-scam-page-v4 main > .section-band .type-card,
.anti-scam-page-v4 main > .section-band .resource-card,
.anti-scam-page-v4 main > .section-band .faq-card,
.anti-scam-page-v4 main > .section-band .checklist-panel {
  background-color: rgba(8, 18, 34, 0.88);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.anti-scam-page-v4 .anti-scam-hero-visual img,
.anti-scam-page-v4 .anti-scam-icon-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.anti-scam-page-v4 .anti-scam-hero-visual img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.anti-scam-page-v4 a:focus-visible,
.anti-scam-doc-page-v4 a:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
}

/* Reader-facing pages */
.anti-scam-doc-page-v4 {
  min-height: 100vh;
  color-scheme: dark;
  background:
    radial-gradient(circle at 85% 8%, rgba(14, 165, 233, 0.13), transparent 28rem),
    radial-gradient(circle at 12% 42%, rgba(245, 158, 11, 0.07), transparent 24rem),
    #07111f;
}

.anti-scam-doc-page-v4 .doc-hero {
  max-width: 1120px;
  margin: 22px auto 0;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 24px 24px 12px 12px;
  background:
    linear-gradient(105deg, rgba(7, 18, 35, 0.99) 0%, rgba(10, 27, 52, 0.95) 62%, rgba(9, 31, 58, 0.82) 100%),
    url("./img/anti-scam/anti-scam-hero.webp") right center / min(58vw, 680px) auto no-repeat;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
}

.anti-scam-doc-page-v4 .doc-brand .brand-logo {
  width: 70px;
  height: auto;
}

.anti-scam-doc-page-v4 .doc-hero h1 {
  max-width: 780px;
  margin-top: 20px;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.anti-scam-doc-page-v4 .doc-description {
  max-width: 760px;
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.8;
}

.anti-scam-doc-page-v4 .back-home {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.anti-scam-doc-page-v4 .doc-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: 1120px;
  margin: 10px auto 0;
  padding: 9px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 12px;
  background: rgba(7, 17, 31, 0.93);
  box-shadow: 0 12px 35px rgba(2, 6, 23, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.anti-scam-doc-page-v4 .doc-nav a {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 9px;
  text-decoration: none;
}

.anti-scam-doc-page-v4 .doc-nav a:hover,
.anti-scam-doc-page-v4 .doc-nav a.is-active {
  color: #f8fafc;
  background: rgba(14, 165, 233, 0.2);
}

.anti-scam-doc-page-v4 .doc-emergency-strip {
  max-width: 1120px;
  margin: 14px auto 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.3), rgba(15, 23, 42, 0.92));
}

.anti-scam-doc-page-v4 .doc-emergency-strip strong {
  color: #fde68a;
}

.anti-scam-doc-page-v4 .doc-emergency-strip span {
  flex: 1;
  color: #e2e8f0;
  line-height: 1.6;
}

.anti-scam-doc-page-v4 .doc-emergency-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.anti-scam-doc-page-v4 .doc-emergency-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 9px;
  font-weight: 700;
  text-decoration: none;
  color: #07111f;
  background: #fbbf24;
}

.anti-scam-doc-page-v4 .doc-emergency-actions a:last-child {
  color: #e0f2fe;
  background: rgba(14, 165, 233, 0.2);
}

.anti-scam-doc-page-v4 .doc-layout {
  max-width: 1120px;
  margin: 16px auto 56px;
}

.anti-scam-doc-page-v4 .doc-content {
  overflow-wrap: anywhere;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 18px;
  background: rgba(10, 22, 39, 0.94);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28);
}

.anti-scam-doc-page-v4 .markdown-view-body {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.85;
}

.anti-scam-doc-page-v4 .markdown-view-body > h1:first-child {
  margin-top: 0;
}

.anti-scam-doc-page-v4 .markdown-view-body h1,
.anti-scam-doc-page-v4 .markdown-view-body h2,
.anti-scam-doc-page-v4 .markdown-view-body h3 {
  scroll-margin-top: 88px;
  text-wrap: balance;
}

.anti-scam-doc-page-v4 .markdown-view-body h2 {
  margin-top: 2.2em;
  padding-top: 0.2em;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
}

.anti-scam-doc-page-v4 .markdown-view-body li {
  margin-block: 0.42em;
}

.anti-scam-doc-page-v4 .markdown-view-body a {
  text-underline-offset: 0.22em;
}

.anti-scam-doc-page-v4 .markdown-view-body img,
.anti-scam-doc-page-v4 .markdown-view-body table,
.anti-scam-doc-page-v4 .markdown-view-body pre {
  max-width: 100%;
}

.anti-scam-doc-page-v4 .anti-scam-doc-footer {
  max-width: 1120px;
  margin: -34px auto 30px;
  padding: 0 18px;
  color: #94a3b8;
  text-align: center;
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .anti-scam-page-v4 .anti-scam-hero,
  .anti-scam-page-v4 main > .section-band {
    background-size: cover, 680px auto;
  }

  .anti-scam-page-v4 .anti-scam-hero {
    background-position: center, 68% top;
  }

  .anti-scam-page-v4 main > .section-band {
    background-position: center, 70% center;
  }

  .anti-scam-doc-page-v4 .doc-hero,
  .anti-scam-doc-page-v4 .doc-nav,
  .anti-scam-doc-page-v4 .doc-emergency-strip,
  .anti-scam-doc-page-v4 .doc-layout {
    margin-left: 14px;
    margin-right: 14px;
  }

  .anti-scam-doc-page-v4 .doc-emergency-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .anti-scam-page-v4 .anti-scam-hero {
    background-image:
      linear-gradient(180deg, rgba(7, 18, 35, 0.99) 0%, rgba(10, 27, 52, 0.97) 65%, rgba(9, 31, 58, 0.91) 100%),
      url("./img/anti-scam/anti-scam-hero.webp");
    background-position: center, 72% top;
  }

  .anti-scam-page-v4 main > .section-band {
    background-size: cover, 560px auto;
    background-position: center, 72% center;
  }

  .anti-scam-page-v4 .anti-scam-icon-visual {
    display: none;
  }

  .anti-scam-doc-page-v4 .doc-hero {
    margin-top: 10px;
    padding: 20px;
    border-radius: 16px 16px 10px 10px;
    background:
      linear-gradient(180deg, rgba(7, 18, 35, 0.98), rgba(10, 27, 52, 0.94)),
      url("./img/anti-scam/anti-scam-hero.webp") 70% top / 560px auto no-repeat;
  }

  .anti-scam-doc-page-v4 .doc-brand .brand-logo {
    width: 54px;
  }

  .anti-scam-doc-page-v4 .doc-hero h1 {
    margin-top: 14px;
  }

  .anti-scam-doc-page-v4 .back-home {
    width: 100%;
    justify-content: center;
  }

  .anti-scam-doc-page-v4 .doc-nav {
    margin-top: 8px;
  }

  .anti-scam-doc-page-v4 .doc-emergency-strip {
    padding: 13px;
  }

  .anti-scam-doc-page-v4 .doc-emergency-actions {
    width: 100%;
  }

  .anti-scam-doc-page-v4 .doc-emergency-actions a {
    flex: 1 1 120px;
    justify-content: center;
  }

  .anti-scam-doc-page-v4 .doc-layout {
    margin-top: 12px;
    margin-bottom: 48px;
  }

  .anti-scam-doc-page-v4 .doc-content {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anti-scam-page-v4 *,
  .anti-scam-doc-page-v4 * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}