/*
  Agenz Foundation V100
  Final light-surface guard for public marketing pages.
  Dark pixels may remain inside photography/video, but no public content panel
  should read as a black or navy UI block.
*/

:root {
  --v100-ink: #111a35;
  --v100-copy: #5d6880;
  --v100-muted: #7b879e;
  --v100-blue: #155fd1;
  --v100-blue-deep: #0b4eae;
  --v100-blue-soft: #eaf2ff;
  --v100-blue-pale: #f5f8ff;
  --v100-paper: #ffffff;
  --v100-canvas: #f7f9fd;
  --v100-line: rgba(28, 64, 126, .14);
  --v100-line-strong: rgba(21, 95, 209, .24);
  --v100-shadow: 0 24px 64px rgba(28, 58, 112, .10), 0 2px 8px rgba(28, 58, 112, .04);
  --v100-shadow-soft: 0 14px 36px rgba(28, 58, 112, .08), 0 1px 4px rgba(28, 58, 112, .04);
}

html body:not(.hub-page):not(.academy-classroom) {
  color: var(--v100-ink) !important;
  background: var(--v100-canvas) !important;
  color-scheme: light !important;
}

html body:not(.hub-page):not(.academy-classroom) main {
  color: var(--v100-ink) !important;
  background: var(--v100-canvas) !important;
}

/* Public section surfaces */
html body:not(.hub-page):not(.academy-classroom) :where(
  .section,
  .section-dark,
  .section-light,
  .academy-section,
  .academy-dark,
  .academy-soft,
  .academy-cta,
  .cta-band,
  .umkm-section,
  .library-section,
  .library-preview-band,
  .library-philosophy,
  .payment-section,
  .design-workspace-section,
  .design-universe-section,
  .template-market,
  .package-section,
  .ther-case-study
) {
  color: var(--v100-ink) !important;
  border-color: var(--v100-line) !important;
  background-color: var(--v100-paper) !important;
  background-image: none !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .section:nth-of-type(even),
  .academy-section:nth-of-type(even),
  .academy-soft,
  .brief-section,
  .library-preview-band,
  .library-philosophy,
  .payment-section,
  .template-market
) {
  background-color: var(--v100-blue-pale) !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .section-dark,
  .academy-dark,
  .academy-cta,
  .cta-band
) :where(h1, h2, h3, h4, strong, b, span, p, li, a) {
  color: var(--v100-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .section-dark,
  .academy-dark,
  .academy-cta,
  .cta-band
) :where(p, li) {
  color: var(--v100-copy) !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .gradient-word,
  .academy-heading h2 span,
  .academy-dark h2 span,
  .academy-cta h2 span
) {
  color: var(--v100-blue) !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Services: readable horizontal system cards on a calm light canvas */
html body.services-page #services-list {
  color: var(--v100-ink) !important;
  background: var(--v100-blue-pale) !important;
}

html body.services-page #services-list .showcase-rail-controls {
  margin: 8px 0 24px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--v100-line) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: var(--v100-shadow-soft) !important;
}

html body.services-page #services-list .showcase-rail-controls > span {
  color: var(--v100-copy) !important;
}

html body.services-page #services-list .showcase-rail-controls button {
  color: var(--v100-blue) !important;
  border-color: var(--v100-line-strong) !important;
  background: var(--v100-paper) !important;
}

html body.services-page #services-list .showcase-rail-controls button:hover {
  color: #fff !important;
  background: var(--v100-blue) !important;
}

html body.services-page .services-grid {
  gap: 20px !important;
  padding: 5px 2px 30px !important;
}

html body.services-page .services-grid > .service-card {
  flex-basis: min(420px, 86vw) !important;
  min-height: 700px !important;
  color: var(--v100-ink) !important;
  border: 1px solid var(--v100-line) !important;
  background: var(--v100-paper) !important;
  box-shadow: var(--v100-shadow) !important;
}

html body.services-page .service-card-visual {
  border-bottom: 1px solid var(--v100-line) !important;
  background: var(--v100-blue-soft) !important;
}

html body.services-page .service-card-visual::after {
  background: linear-gradient(to top, rgba(245, 248, 255, .96), rgba(245, 248, 255, 0) 52%) !important;
}

html body.services-page .service-card-visual span {
  padding: 7px 10px !important;
  color: var(--v100-blue-deep) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 8px 24px rgba(27, 58, 113, .10) !important;
  backdrop-filter: blur(10px) !important;
}

html body.services-page .service-card :where(h2, h3, strong) {
  color: var(--v100-ink) !important;
}

html body.services-page .service-card :where(p, li) {
  color: var(--v100-copy) !important;
}

html body.services-page .service-card :where(.tag, .service-detail strong, a) {
  color: var(--v100-blue) !important;
}

html body.services-page .service-card .service-detail {
  border-color: var(--v100-line) !important;
}

html body.services-page .service-process-grid {
  overflow: hidden !important;
  border: 1px solid var(--v100-line) !important;
  border-radius: 24px !important;
  background: var(--v100-paper) !important;
  box-shadow: var(--v100-shadow-soft) !important;
}

html body.services-page .service-process {
  color: var(--v100-ink) !important;
  border-color: var(--v100-line) !important;
  background: var(--v100-paper) !important;
}

html body.services-page .service-process :where(h3, strong) {
  color: var(--v100-ink) !important;
}

html body.services-page .service-process p {
  color: var(--v100-copy) !important;
}

html body.services-page .case-products {
  gap: 20px !important;
}

html body.services-page .case-products .product-card {
  color: var(--v100-ink) !important;
  border: 1px solid var(--v100-line) !important;
  background: var(--v100-paper) !important;
  box-shadow: var(--v100-shadow-soft) !important;
}

html body.services-page .case-products .product-card > div {
  min-height: 190px !important;
  border-top: 1px solid var(--v100-line) !important;
  background: var(--v100-paper) !important;
}

html body.services-page .case-products .product-card span {
  color: var(--v100-blue) !important;
}

html body.services-page .case-products .product-card h3 {
  color: var(--v100-ink) !important;
}

html body.services-page .case-products .product-card p {
  color: var(--v100-copy) !important;
}

/* Academy: remove navy UI frames while keeping photography intact */
html body.academy-page .academy-device,
html body.academy-page .academy-lab-device {
  color: var(--v100-ink) !important;
  border: 1px solid var(--v100-line-strong) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), var(--v100-blue-soft)) !important;
  box-shadow: var(--v100-shadow) !important;
}

html body.academy-page .academy-device::before,
html body.academy-page .academy-dark::before {
  opacity: .45 !important;
  background:
    linear-gradient(rgba(21, 95, 209, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 95, 209, .045) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
}

html body.academy-page .academy-device-head,
html body.academy-page .academy-device-head :where(span, small) {
  color: var(--v100-ink) !important;
}

html body.academy-page .academy-device-head small {
  color: var(--v100-copy) !important;
}

html body.academy-page .academy-device-head i {
  background: var(--v100-line-strong) !important;
}

html body.academy-page .academy-proof,
html body.academy-page .academy-band {
  border-color: var(--v100-line) !important;
  background: var(--v100-line) !important;
  box-shadow: var(--v100-shadow-soft) !important;
}

html body.academy-page .academy-proof span,
html body.academy-page .academy-band > div {
  color: var(--v100-copy) !important;
  background: rgba(255, 255, 255, .96) !important;
}

html body.academy-page .academy-proof b,
html body.academy-page .academy-band b {
  color: var(--v100-ink) !important;
}

html body.academy-page :where(
  .featured-course,
  .learning-card,
  .price-card,
  .outcome-grid article,
  .package-compare article,
  .responsibility-list,
  .academy-faq-list details
) {
  color: var(--v100-ink) !important;
  border-color: var(--v100-line) !important;
  background: var(--v100-paper) !important;
  box-shadow: var(--v100-shadow-soft) !important;
}

html body.academy-page .featured-course {
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr) !important;
}

html body.academy-page :where(.featured-course-media, .academy-path-media, .course-hero-media) {
  background: var(--v100-blue-soft) !important;
}

html body.academy-page :where(
  .featured-course-media > span,
  .academy-path-media > span,
  .course-media-note
) {
  color: var(--v100-blue-deep) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 28px rgba(27, 58, 113, .10) !important;
  backdrop-filter: blur(12px) !important;
}

html body.academy-page :where(
  .featured-course-media > span,
  .academy-path-media > span,
  .course-media-note
) :where(span, b, strong, small) {
  color: inherit !important;
}

html body.academy-page :where(
  .featured-course-copy,
  .learning-card,
  .price-card,
  .outcome-grid article,
  .package-compare article,
  .responsibility-list
) :where(h2, h3, h4, strong, b) {
  color: var(--v100-ink) !important;
}

html body.academy-page :where(
  .featured-course-copy,
  .learning-card,
  .price-card,
  .outcome-grid article,
  .package-compare article,
  .responsibility-list
) :where(p, li, small) {
  color: var(--v100-copy) !important;
}

html body.academy-page .course-label,
html body.academy-page .featured-course-copy li::before,
html body.academy-page .price-card li::before,
html body.academy-page .package-compare li::before,
html body.academy-page .text-link,
html body.academy-page .responsibility-list b {
  color: var(--v100-blue) !important;
}

html body.academy-page .course-facts {
  border-color: var(--v100-line) !important;
  background: var(--v100-blue-pale) !important;
}

html body.academy-page .course-facts span {
  color: var(--v100-copy) !important;
  border-color: var(--v100-line) !important;
}

html body.academy-page .course-facts b {
  color: var(--v100-ink) !important;
}

html body.academy-page .academy-dark {
  background: var(--v100-blue-soft) !important;
}

html body.academy-page .responsibility-list {
  position: relative !important;
  backdrop-filter: none !important;
}

html body.academy-page .responsibility-list span {
  color: var(--v100-copy) !important;
  border-color: var(--v100-line) !important;
}

html body.academy-page .academy-outline.light {
  color: var(--v100-blue-deep) !important;
  border-color: var(--v100-line-strong) !important;
  background: var(--v100-paper) !important;
}

/* Replace dark media caption UI with light translucent chips site-wide */
html body:not(.hub-page):not(.academy-classroom) :where(
  .media-label,
  .library-card-badge,
  .vision-film-player > span
) {
  color: var(--v100-blue-deep) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 28px rgba(27, 58, 113, .10) !important;
  backdrop-filter: blur(12px) !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .media-label,
  .library-card-badge,
  .vision-film-player > span
) :where(strong, span, small) {
  color: inherit !important;
}

/* Light footer across public pages */
html body:not(.hub-page):not(.academy-classroom) .site-footer {
  color: var(--v100-ink) !important;
  border-top: 1px solid var(--v100-line) !important;
  background: var(--v100-paper) !important;
}

html body:not(.hub-page):not(.academy-classroom) .site-footer :where(h2, h3, strong, b) {
  color: var(--v100-ink) !important;
}

html body:not(.hub-page):not(.academy-classroom) .site-footer :where(p, a) {
  color: var(--v100-copy) !important;
}

html body:not(.hub-page):not(.academy-classroom) .site-footer span {
  color: var(--v100-blue) !important;
}

html body:not(.hub-page):not(.academy-classroom) .site-footer .footer-logo img {
  content: url("/agenz-logo-navy-transparent.png") !important;
  filter: none !important;
}

html body:not(.hub-page):not(.academy-classroom) :where(
  .button-primary,
  .header-cta
) {
  color: #fff !important;
  border-color: var(--v100-blue) !important;
  background: var(--v100-blue) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 900px) {
  html body.academy-page .featured-course {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .service-process-grid {
    border-radius: 20px !important;
  }
}

@media (max-width: 640px) {
  html body.services-page #services-list .showcase-rail-controls {
    align-items: center !important;
    gap: 12px !important;
  }

  html body.services-page #services-list .showcase-rail-controls > span {
    max-width: 190px !important;
    font-size: .52rem !important;
    line-height: 1.45 !important;
  }

  html body.services-page .services-grid > .service-card {
    flex-basis: calc(100vw - 42px) !important;
    min-height: 0 !important;
  }

  html body.services-page .case-products {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .case-products .product-card > div {
    min-height: 0 !important;
  }
}