/* Inner pages on agency dark system — bridges legacy + ax-* layouts
   Must beat #main > .page-hero / #main > .section from main.css */

body.agency-page #main > .page-hero,
body.agency-page #main > article.page-hero,
body.agency-page .page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 3.5rem) 0 3.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(199, 154, 58, 0.14), transparent 60%),
    #0a0b10 !important;
  background-color: #0a0b10 !important;
  color: #f4f5f7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.agency-page .page-hero h1 {
  color: #fff;
  max-width: min(18ch, 100%);
  overflow-wrap: anywhere;
}

body.agency-page .page-hero .lead,
body.agency-page .page-hero p {
  color: rgba(244, 245, 247, 0.78);
  max-width: 40rem;
}

body.agency-page .page-hero .eyebrow,
body.agency-page .section .eyebrow,
body.agency-page .ax-section .eyebrow {
  color: #c79a3a;
}

body.agency-page #main > .section:not(.section-navy),
body.agency-page #main > .section-tight:not(.section-navy),
body.agency-page .section,
body.agency-page .section-tight {
  background: #0a0b10 !important;
  background-color: #0a0b10 !important;
  color: #f4f5f7;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.agency-page #main > .section-navy,
body.agency-page #main > .section-navy.stack-layer,
body.agency-page #main > .section-navy[data-stack],
body.agency-page .section-navy,
body.agency-page .section-cta {
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(199, 154, 58, 0.12), transparent 55%),
    #11131a !important;
  background-color: #11131a !important;
  color: #f4f5f7;
}

body.agency-page .section h1,
body.agency-page .section h2,
body.agency-page .section h3,
body.agency-page .section-navy h2,
body.agency-page .cta-band h2 {
  color: #fff;
}

body.agency-page .section p,
body.agency-page .section li,
body.agency-page .lead,
body.agency-page .section-navy .lead,
body.agency-page .cta-band .lead {
  color: rgba(244, 245, 247, 0.75);
}

body.agency-page .divider-gold {
  background: linear-gradient(90deg, #c79a3a, transparent);
}

body.agency-page .media-frame {
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

body.agency-page .benefit-item,
body.agency-page .price-card,
body.agency-page .contact-card,
body.agency-page .article-teaser,
body.agency-page .panel:not(.panel-dark) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4f5f7;
  border-radius: 1.2rem;
}

body.agency-page .benefit-item h3,
body.agency-page .price-card h3,
body.agency-page .contact-card h3,
body.agency-page .article-teaser h2,
body.agency-page .panel h3 {
  color: #fff;
}

body.agency-page .benefit-num {
  color: #c79a3a;
}

body.agency-page .price-card.featured {
  background: linear-gradient(180deg, rgba(199, 154, 58, 0.14), rgba(255, 255, 255, 0.03));
  border-color: rgba(199, 154, 58, 0.45);
  box-shadow: 0 0 40px -16px rgba(199, 154, 58, 0.35);
}

body.agency-page .price-card .price,
body.agency-page .price-card .ax-price-val {
  color: #fff;
}

body.agency-page .price-card ul li,
body.agency-page .price-card p,
body.agency-page .contact-card p,
body.agency-page .article-teaser p,
body.agency-page .article-meta {
  color: rgba(244, 245, 247, 0.72);
}

body.agency-page .article-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}

@media (min-width: 720px) {
  body.agency-page .article-teaser {
    grid-template-columns: minmax(200px, 280px) 1fr;
    align-items: stretch;
  }
}

body.agency-page .article-teaser:hover {
  border-color: rgba(199, 154, 58, 0.4);
  transform: translateY(-3px);
}

body.agency-page .article-teaser-media {
  display: block;
  aspect-ratio: 1200 / 630;
  background: #151821;
  overflow: hidden;
}

body.agency-page .article-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}

body.agency-page .article-teaser:hover .article-teaser-media img {
  transform: scale(1.04);
}

body.agency-page .article-teaser-body {
  display: block;
  padding: 1.25rem 1.25rem 1.4rem;
}

body.agency-page .article-teaser h2 {
  color: #fff !important;
  font-size: 1.15rem;
}

body.agency-page .article-cover {
  margin: 1.5rem 0 0;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #151821;
  aspect-ratio: 1200 / 630;
}

body.agency-page .article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.agency-page .article-hero .prose > .lead {
  margin-bottom: 0;
}

body.agency-page .panel-dark {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4f5f7;
}

body.agency-page .panel-dark h2,
body.agency-page .panel-dark a {
  color: #fff;
}

body.agency-page .panel-dark a[href^="https://wa"],
body.agency-page .panel-dark a[style] {
  color: #e0b85a !important;
}

body.agency-page .btn-ghost,
body.agency-page .btn-ghost-light {
  color: #f4f5f7 !important;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

body.agency-page .btn-ghost:hover,
body.agency-page .btn-ghost-light:hover {
  border-color: rgba(199, 154, 58, 0.5);
  color: #fff !important;
}

body.agency-page .btn-primary {
  background: linear-gradient(135deg, #3d4d9a, #1e2a5e);
  color: #fff !important;
}

body.agency-page .story-list li,
body.agency-page .story-list-light li {
  color: rgba(244, 245, 247, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}

body.agency-page .story-list strong {
  color: #fff;
}

body.agency-page .prose {
  color: rgba(244, 245, 247, 0.82);
}

body.agency-page .prose h1,
body.agency-page .prose h2,
body.agency-page .prose h3,
body.agency-page .prose h4,
body.agency-page .prose strong {
  color: #fff;
}

body.agency-page .prose a {
  color: #e0b85a;
}

body.agency-page .prose a:hover {
  color: #f0d28a;
}

body.agency-page .prose code {
  background: rgba(255, 255, 255, 0.08);
  color: #f0d28a;
}

body.agency-page .prose blockquote {
  border-left-color: #c79a3a;
  color: rgba(244, 245, 247, 0.7);
}

body.agency-page .cta-box {
  margin-top: 2.5rem;
  padding: 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.agency-page .cta-box h2 {
  color: #fff;
}

body.agency-page .contact-card a {
  color: #e0b85a;
}

body.agency-page .nav-drawer {
  background: #11131a;
}

body.agency-page .nav-drawer a {
  color: #f4f5f7;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.agency-page main#main {
  background: #0a0b10;
  min-height: 50vh;
}

/* Inner-page overlap: solid fills + rounded leading edge */
body.agency-page #main > .stack-layer + .stack-layer,
body.agency-page #main > [data-stack] + [data-stack] {
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow:
    0 -24px 60px -28px rgba(0, 0, 0, 0.7),
    0 -1px 0 rgba(255, 255, 255, 0.06);
  overflow: visible;
}

body.agency-page #main > .page-hero.stack-layer,
body.agency-page #main > article.page-hero.stack-layer {
  background-color: #0a0b10 !important;
}

/* Fitur module cards with icons */
.ax-module-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .ax-module-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .ax-module-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.ax-module-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .ax-module-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.ax-module-card {
  padding: 1.5rem 1.35rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}

.ax-module-card .ai-icon,
.contact-card .ai-icon {
  margin-bottom: 0.85rem;
  display: inline-flex;
}

.price-card .btn-liquid,
.contact-card .btn-liquid,
.cta-box .btn-liquid,
.panel .btn-liquid {
  margin-top: 0.25rem;
}

.ax-module-card:hover {
  border-color: rgba(199, 154, 58, 0.4);
  transform: translateY(-3px);
}

.ax-module-card h3 {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 1.1rem;
}

.ax-module-card p {
  margin: 0;
  color: rgba(244, 245, 247, 0.72);
  font-size: 0.95rem;
}