:root {
  /* Backgrounds */
  --ag-bg-primary: #0d0e14;
  --ag-bg-secondary: #14151e;
  --ag-bg-surface: #1a1b25;
  --ag-bg-card: rgba(20, 21, 30, 0.8);

  /* Borders */
  --ag-border: rgba(255, 255, 255, 0.06);
  --ag-border-hover: rgba(255, 255, 255, 0.12);

  /* Text */
  --ag-text-primary: #f0f0f4;
  --ag-text-secondary: rgba(255, 255, 255, 0.6);
  --ag-text-muted: rgba(255, 255, 255, 0.35);

  /* Fonts (match agency homepage exactly) */
  --heading: "Inter", system-ui, sans-serif;
  --serif: "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Space Mono", monospace;

  /* Accent */
  --accent: #734BF2;
  --ag-accent: #734BF2;
  --ag-accent-hover: #6340d4;
  --ag-accent-glow: rgba(115, 75, 242, 0.15);

  /* Feature colors (from homepage) */
  --ag-teal: #27d3bc;
  --ag-coral: #ff492c;
  --ag-gold: #ffc800;
  --ag-amber: #f59e0b;
}

/* Override legacy light-mode variables from agency.v2.css */
body.agency-page {
  --text-primary: #f0f0f4;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.35);
  --border: rgba(255, 255, 255, 0.06);
  --navy-light: #1a1b25;
  --teal: #27d3bc;
  --accent: #734BF2;
}

/* Dark mode: blog cards */
body.agency-page .ag-blog-card {
  background: #1a1b25;
}
body.agency-page .ag-blog-card:hover {
  box-shadow: 0 8px 32px rgba(115, 75, 242, 0.1);
}

/* Dark mode: blog post content */
body.agency-page .ag-blog-content h2,
body.agency-page .ag-blog-content h3 {
  color: #f0f0f4;
}
body.agency-page .ag-blog-content strong {
  color: #f0f0f4;
}
body.agency-page .ag-blog-content pre {
  background: #14151e;
}
body.agency-page .ag-blog-sidebar-title {
  color: rgba(255, 255, 255, 0.35);
}
body.agency-page #agBlogTocNav a {
  color: rgba(255, 255, 255, 0.45);
}
body.agency-page #agBlogTocNav a:hover,
body.agency-page #agBlogTocNav a.active {
  color: #734BF2;
}
body.agency-page .ag-blog-sidebar-num {
  color: rgba(255, 255, 255, 0.25);
}
body.agency-page .ag-inline-cta-headline {
  color: #f0f0f4;
}
body.agency-page .ag-inline-cta-sub {
  color: rgba(255, 255, 255, 0.6);
}
body.agency-page .ag-inline-cta-btn {
  background: #1a1b25;
  color: #f0f0f4;
  border-color: rgba(115, 75, 242, 0.3);
}
body.agency-page .ag-inline-cta-btn:hover {
  background: #14151e;
  color: #fff;
}

/* Dark mode: nav solid overrides */
body.agency-page .ag-nav--solid .ag-nav-links > a,
body.agency-page .ag-nav--solid .ag-nav-links > .ag-nav-svc-trigger > a {
  color: rgba(255, 255, 255, 0.55) !important;
}
body.agency-page .ag-nav--solid .ag-nav-links > a:hover,
body.agency-page .ag-nav--solid .ag-nav-links > .ag-nav-svc-trigger > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}

/* Dark mode: comparison layout content */
body.agency-page .agc-content {
  color: rgba(255, 255, 255, 0.6);
}
body.agency-page .agc-content h2,
body.agency-page .agc-content h3 {
  color: #f0f0f4;
}
body.agency-page .agc-content strong {
  color: #f0f0f4;
}
body.agency-page .agc-content td {
  color: rgba(255, 255, 255, 0.6);
}
body.agency-page .agc-content th {
  color: #f0f0f4;
  background: rgba(115, 75, 242, 0.08);
  border-bottom-color: rgba(115, 75, 242, 0.15);
}
body.agency-page .agc-content td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.agency-page .agc-content tr:hover td {
  background: rgba(115, 75, 242, 0.04);
}
body.agency-page .agc-content blockquote {
  background: rgba(115, 75, 242, 0.06);
  color: rgba(255, 255, 255, 0.55);
}

/* Dark mode: service/tool page text overrides for inline styles */
body.agency-page .ag-svc-section h3 {
  color: #f0f0f4 !important;
}
body.agency-page .ag-svc-section p {
  color: rgba(255, 255, 255, 0.5) !important;
}
body.agency-page .ag-svc-table th {
  color: rgba(255, 255, 255, 0.5);
}
body.agency-page .ag-svc-table td {
  color: rgba(255, 255, 255, 0.6);
}
body.agency-page .ag-svc-highlight {
  color: #f0f0f4;
}

/* Dark mode: resource hub */
body.agency-page .ag-rh-featured-card,
body.agency-page .ag-rh-article-card,
body.agency-page .ag-rh-topic-card,
body.agency-page .ag-rh-guide-card {
  background: #1a1b25;
}
body.agency-page .ag-rh-featured-card:hover,
body.agency-page .ag-rh-article-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
body.agency-page .ag-rh-featured-img,
body.agency-page .ag-rh-card-img {
  background: #14151e;
}
body.agency-page .ag-rh-card-footer {
  border-top-color: rgba(255, 255, 255, 0.05);
}
body.agency-page .ag-rh-topic-posts {
  border-top-color: rgba(255, 255, 255, 0.05);
}
body.agency-page .ag-rh-newsletter {
  background: linear-gradient(135deg, #14151e, rgba(115, 75, 242, 0.08));
}
body.agency-page .ag-rh-newsletter-input {
  background: #14151e;
  color: #f0f0f4;
}
body.agency-page .ag-rh-newsletter-btn {
  background: #734BF2;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
body.agency-page .ag-rh-cta {
  background: #1a1b25;
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  margin: 48px 0 64px;
}
body.agency-page .ag-rh-cta h3 {
  color: #f0f0f4;
}
body.agency-page .ag-rh-cta p {
  color: rgba(255, 255, 255, 0.6);
}

/* Dark mode: solid nav override */
body.agency-page .ag-nav--solid {
  background: rgba(13, 14, 20, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.agency-page .ag-nav--solid .ag-nav-mobile span {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Dark mode: FAQ items */
body.agency-page .ag-faq-q span {
  color: #f0f0f4;
}
body.agency-page .ag-faq-a-inner {
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   SHARED DESIGN SYSTEM COMPONENTS
   Unified styles for all agency sub-pages
   ======================================== */

/* --- Typography --- */
.ag-ds-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #f0f0f4;
}
.ag-ds-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}
.ag-ds-section-heading {
  font-family: Inter, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f0f0f4;
}
.ag-ds-breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}
.ag-ds-breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.ag-ds-breadcrumb a:hover {
  color: #734BF2;
}
.ag-ds-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Cards --- */
.ag-ds-card {
  background: #1a1b25;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s ease;
}
.ag-ds-card:hover {
  box-shadow: 0 8px 32px rgba(115, 75, 242, 0.1);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
}
.ag-ds-card-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #f0f0f4;
}
.ag-ds-card-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Layout --- */
.ag-ds-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.ag-ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* --- Interactive Elements --- */
.ag-ds-pill {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}
.ag-ds-pill:hover {
  color: #f0f0f4;
  background: rgba(255, 255, 255, 0.08);
}
.ag-ds-pill.active {
  background: #734BF2;
  color: #fff;
  border-color: #734BF2;
}
.ag-ds-search {
  font-family: 'Inter', sans-serif;
  background: #14151e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 16px;
  color: #f0f0f4;
  font-size: 14px;
}
.ag-ds-search:focus {
  border-color: rgba(115, 75, 242, 0.4);
  outline: none;
}
.ag-ds-cta-link {
  color: #734BF2;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ag-ds-cta-link:hover {
  color: #6340d4;
}