/* ============================================================
   AAA — subpage layer (verticals, blog, legal)
   These pages were light-only. The shared sheet flips the design
   tokens for dark mode; this file fixes the blocks that used
   var(--black) as a BACKGROUND or var(--white) as a TEXT colour
   and would therefore invert into invisibility.
   Everything here is scoped — no blanket colour rules.
   ============================================================ */

#aaaNeural { display: none; }

/* ---------- 1. blocks that are dark BY DESIGN ---------- */
.hero,
.final-cta,
.cta-box {
  background:
    radial-gradient(62% 90% at 10% 0%, rgba(116,84,232,.38), transparent 60%),
    radial-gradient(52% 80% at 92% 100%, rgba(55,138,221,.26), transparent 62%),
    #191238 !important;
  color: #F2EFFF !important;
  position: relative;
  overflow: hidden;
}
.hero > *, .final-cta > *, .cta-box > * { position: relative; z-index: 1; }

.hero::after, .final-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(174,150,251,.16) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
          mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
}

/* text inside those blocks — scoped, never global */
.hero h1, .hero h2, .final-cta h2, .cta-box h3 { color: #FFFFFF !important; }
.hero p, .final-cta p, .cta-box p { color: #BDB4DC !important; }
.hero .eyebrow, .final-cta .eyebrow { color: #CDBEFF !important; }
.hero .stat-num, .hero .stat-num span { color: #FFFFFF !important; }
.hero .stat-label { color: #9E95BE !important; }
.hero .btn-ghost, .final-cta .btn-ghost {
  color: #F2EFFF !important;
  border: 1px solid rgba(205,190,255,.32);
}
.hero .btn-ghost:hover, .final-cta .btn-ghost:hover {
  color: #fff !important; border-color: var(--v-400); background: rgba(139,109,245,.16);
}

/* `.hero-stats div { flex-direction: column }` also matched .stat-num, so the
   unit span dropped onto its own line ("48" over "h") */
.hero-stats .stat-num { display: block !important; }
.hero-stats .stat-num span:not([data-en]):not([data-me]),
[data-lang="en"] .hero-stats .stat-num span[data-en],
[data-lang="me"] .hero-stats .stat-num span[data-me] { display: inline !important; }

.voice-widget {
  background: linear-gradient(160deg, #1C1640, #120E2C) !important;
  border: 1px solid rgba(174,150,251,.22);
  border-radius: 18px;
}
.voice-widget .call-sub, .voice-widget .call-play-hint { color: #A79EC6 !important; }

/* ---------- 2. ghost button OUTSIDE a dark block ----------
   base rule is `color: var(--white)`, i.e. white on a white section —
   this was already invisible on the live site */
.btn-ghost { border-radius: 12px; }
.demo-section .btn-ghost,
section:not(.hero):not(.final-cta) > .btn-ghost,
.inner > .btn-ghost,
.faq .btn-ghost { color: var(--v-700) !important; border-color: var(--v-300) !important; }

/* ---------- 3. section surfaces that were hardcoded light ---------- */
[data-theme="dark"] .demo-section { background: #120E2C !important; }
[data-theme="dark"] .chat-messages { background: #120E2C !important; }

/* ---------- 4. eyebrow / links / accents ---------- */
.eyebrow { letter-spacing: 1.8px; }
:not(.hero):not(.final-cta) > .eyebrow,
.inner > .eyebrow { color: var(--v-600); }
[data-theme="dark"] :not(.hero):not(.final-cta) > .eyebrow,
[data-theme="dark"] .inner > .eyebrow { color: #C3B2FF; }
.back-link:hover, .topbar a.back:hover { color: var(--v-400); }
.pull { border-left: 3px solid var(--v-500); }
.cta-btn { background: var(--grad-1) !important; color: #fff !important; border-radius: 12px; }

/* ---------- 5. components that follow the theme ---------- */
.demo-tab { background: var(--white); border-color: var(--border); color: var(--mid); border-radius: 999px; }
.demo-tab:hover { border-color: var(--v-400); color: var(--v-600); }
.demo-tab.active { background: var(--grad-1); border-color: transparent; color: #fff !important; }
.email-mock {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 56px -28px rgba(36,24,84,.45);
}
.faq-item { border-bottom: 1px solid var(--border); }
.chat-name { color: #fff !important; }

/* footer is dark in both themes */
footer { background: #0A0719 !important; }
.footer-copy, .footer-legal a { color: #A79EC6 !important; }
.footer-legal a:hover { color: #F2EFFF !important; }

/* ---------- 6. dark-mode reading surface ---------- */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .article p,
[data-theme="dark"] .article li,
[data-theme="dark"] .article ol { color: #BDB4DC; }
[data-theme="dark"] .article li strong,
[data-theme="dark"] .article h2,
[data-theme="dark"] .article h1,
[data-theme="dark"] .pull { color: #F2EFFF; }
[data-theme="dark"] .topbar { border-bottom-color: var(--border); }
[data-theme="dark"] .demo-tab { background: #1C1640; border-color: #2E2752; color: #A79EC6; }
[data-theme="dark"] .email-mock { background: #171233; border-color: #2E2752; }
[data-theme="dark"] .email-toolbar, [data-theme="dark"] .email-head { border-color: #2E2752; }
[data-theme="dark"] .demo-panel-features li { color: #BDB4DC; }

/* low-contrast greys that were chosen for a light page */

/* the PNG wordmark is #333 — swap to the light variant on dark backgrounds */
.nav-logo img, img[src="aaa-logo.png"] { content: url("aaa-logo-light.png"); }
[data-theme="light"] .nav-logo img,
[data-theme="light"] img[src="aaa-logo.png"] { content: url("aaa-logo.png"); }

/* ---------- 7. audit fixes (Sept) ---------- */
/* voice page button: base rule is color: var(--white), which is dark in dark mode */
.btn-voice { color: #FFFFFF !important; background: linear-gradient(120deg, #7454E8, #5B3FC4) !important; }
.btn-voice:hover { filter: brightness(1.1); }
/* link inside the white WhatsApp mock bubble: WA green #25D366 is 2:1 on white */
.wa-msg a { color: #128C7E !important; }
/* stacked hero/CTA buttons on phones: centre the label */
@media (max-width: 768px) {
  .hero-actions a, .final-cta-actions a { text-align: center; justify-content: center; }
}

/* ---------- 8. article header / read-next / footer ---------- */
.aaa-art-nav { gap: 20px; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg, #0E0A22) 82%, transparent); }
.aaa-art-logo img { height: 46px; width: auto; display: block; }
.aaa-art-links { display: flex; gap: 22px; margin-left: auto; }
.aaa-art-links a { color: var(--mid); text-decoration: none; font-size: 14px; }
.aaa-art-links a:hover { color: var(--v-400); }
.aaa-art-actions { display: flex; align-items: center; gap: 12px; }
.aaa-art-cta { background: var(--grad-1); color: #fff !important; text-decoration: none; font-size: 13px; padding: 9px 16px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 720px) { .aaa-art-links { display: none; } .aaa-art-actions { margin-left: auto; } }
@media (max-width: 420px) { .aaa-art-cta { display: none !important; } }

.aaa-related { padding: 24px 6% 72px; }
.aaa-related-inner { max-width: 1040px; margin: 0 auto; }
.aaa-related-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mid); }
.aaa-related-pk { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--v-600); text-decoration: none; }
[data-theme="dark"] .aaa-related-pk { color: #C3B2FF; }
.aaa-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .aaa-related-grid { grid-template-columns: 1fr; } }
.aaa-related-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); text-decoration: none; transition: border-color .2s, transform .2s; }
.aaa-related-card:hover { border-color: var(--v-400); transform: translateY(-2px); }
[data-theme="dark"] .aaa-related-card { background: #171233; border-color: #2E2752; }
.aaa-related-tag { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--v-600); }
[data-theme="dark"] .aaa-related-tag { color: #C3B2FF; }
.aaa-related-title { font-size: 16px; line-height: 1.4; color: var(--black); }
[data-theme="dark"] .aaa-related-title { color: #F2EFFF; }

.aaa-art-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 24px 6%; font-size: 13px; color: #A79EC6; background: #0A0719; }
.aaa-art-foot a { color: #A79EC6; text-decoration: none; }
.aaa-art-foot a:hover { color: #F2EFFF; }

/* ---------- 21. "Poslušajte članak" (blog audio) ---------- */
.aaa-listen { display:flex; align-items:center; gap:14px; margin:-24px 0 40px; padding:12px 14px; border-radius:14px;
  background:rgba(116,84,232,.08); border:1px solid rgba(116,84,232,.22); }
.aaa-listen[hidden] { display:none !important; }
[data-theme="dark"] .aaa-listen { background:#1B1537; border-color:#2E2752; }
.aaa-listen-play { flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#7454E8,#378ADD); display:grid; place-items:center; box-shadow:0 4px 14px rgba(116,84,232,.35); }
.aaa-listen-play:focus-visible, .aaa-listen-speed:focus-visible, .aaa-listen-bar:focus-visible { outline:2px solid #A996FF; outline-offset:2px; }
.aaa-listen .i-pause, .aaa-listen.playing .i-play { display:none; }
.aaa-listen.playing .i-pause { display:block; }
.aaa-listen-body { flex:1; min-width:0; }
.aaa-listen-title { font-size:14px; font-weight:600; color:var(--black,#333); }
[data-theme="dark"] .aaa-listen-title { color:#F2EFFF; }
.aaa-listen-bar { height:6px; border-radius:6px; background:rgba(116,84,232,.18); margin:8px 0 6px; cursor:pointer; position:relative; }
.aaa-listen-fill { height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#7454E8,#378ADD); }
.aaa-listen-sub { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--mid,#888); }
[data-theme="dark"] .aaa-listen-sub { color:#9E95BE; }
.aaa-listen-time { font-variant-numeric:tabular-nums; flex:none; }
.aaa-listen-speed { flex:none; border:1px solid rgba(116,84,232,.35); background:transparent; color:inherit; border-radius:8px;
  font-size:12px; font-weight:600; padding:6px 8px; cursor:pointer; min-width:44px; }
[data-theme="dark"] .aaa-listen-speed { color:#CDBEFF; }
@media (max-width:480px) { .aaa-listen { gap:10px; padding:10px; } .aaa-listen-sub span:first-child { display:none; } }