/* ============================================================
   AAA — VIOLET REDESIGN LAYER v2
   Additive only. Redefines design tokens + adds motion/imagery.
   Does not alter any copy, markup semantics or data-en/data-me.
   ============================================================ */

/* ---------- 1. TOKENS: light-violet system ---------- */
:root {
  /* violet ramp */
  --v-50:  #F7F5FF;
  --v-100: #F0EBFF;
  --v-200: #E3DAFF;
  --v-300: #CDBEFF;
  --v-400: #AE96FB;
  --v-500: #8B6DF5;
  --v-600: #7454E8;
  --v-700: #5B3FC4;
  --v-900: #33236F;

  /* secondary (kept from brand logo) */
  --b-500: #378ADD;
  --b-300: #7FB6EC;

  /* remapped core tokens — this re-skins the whole site */
  --blue:       var(--v-500);
  --blue-light: var(--v-100);
  --blue-dark:  var(--v-700);

  --black: #241F35;
  --gray:  #241F35;
  --mid:   #7A7391;
  --light: #F8F6FF;
  --border:#E7E1FA;
  --white: #FFFFFF;
  --bg:    #FFFFFF;
  --surface: #F8F6FF;
  --text:  #241F35;
  --text-sub: #5C5478;

  /* effects */
  --grad-1: linear-gradient(120deg, var(--v-500) 0%, var(--b-500) 100%);
  --grad-2: linear-gradient(120deg, var(--v-400) 0%, var(--v-600) 55%, var(--b-500) 100%);
  --glow-v: 0 0 0 1px rgba(139,109,245,.18), 0 18px 48px -16px rgba(116,84,232,.38);
  --ring:   0 0 0 4px rgba(139,109,245,.16);
  --card-r: 16px;
  --ease:   cubic-bezier(.22,.8,.2,1);
}

[data-theme="dark"] {
  --v-100: #241C4A;
  --v-200: #2E2459;

  --blue:       #AE96FB;
  --blue-light: #2A2154;
  --blue-dark:  #CDBEFF;

  --black: #F2EFFF;
  --gray:  #F2EFFF;
  --mid:   #9E95BE;
  --light: #171233;
  --border:#2E2752;
  --white: #0E0A22;
  --bg:    #0E0A22;
  --surface: #171233;
  --text:  #F2EFFF;
  --text-sub: #A79EC6;

  --glow-v: 0 0 0 1px rgba(174,150,251,.22), 0 20px 56px -18px rgba(0,0,0,.75);
  --ring:   0 0 0 4px rgba(174,150,251,.18);
}

/* dark-mode surfaces the base sheet pinned to slate — repoint to violet-ink */
[data-theme="dark"] .process,
[data-theme="dark"] footer,
[data-theme="dark"] .offer-builder,
[data-theme="dark"] .leadmagnet,
[data-theme="dark"] .post-action-popup,
[data-theme="dark"] .cookie-banner { background: #0A0719 !important; }

[data-theme="dark"] .price-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .diag-card,
[data-theme="dark"] .diag-sample,
[data-theme="dark"] .diag-teaser-item,
[data-theme="dark"] .about-box,
[data-theme="dark"] .scarcity-bar,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .review-modal,
[data-theme="dark"] .exit-popup,
[data-theme="dark"] .leadmagnet-form-box { background: #171233; border-color: #2E2752; }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #171233; border-color: #3A3168; color: #F2EFFF; }

[data-theme="dark"] .compare-table { background: #171233; border-color: #2E2752; }
[data-theme="dark"] .compare-table th { background: #0E0A22; }
[data-theme="dark"] .compare-table th,
[data-theme="dark"] .compare-table td { border-color: #2E2752; }
[data-theme="dark"] nav { background: rgba(14,10,34,.86); border-color: #241D45; }
[data-theme="dark"] .offer-item { background: #1C1640; border-color: #2E2752; }
[data-theme="dark"] .offer-item.checked { background: #2A2154; }
[data-theme="dark"] .billing-toggle.dark .billing-btn { background: #1C1640; border-color: #2E2752; }

/* ---------- 2. GLOBAL POLISH ---------- */
body { background: var(--bg); }

::selection { background: var(--v-200); color: var(--v-900); }
[data-theme="dark"] ::selection { background: var(--v-700); color: #fff; }

/* nav: translucent violet glass */
nav {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
nav.is-stuck { box-shadow: 0 10px 34px -22px rgba(52,35,111,.55); }

/* soft scroll-progress beam under nav */
.aaa-progress {
  position: fixed; top: 71px; left: 0; height: 2px; width: 0%;
  background: var(--grad-2); z-index: 101; border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(139,109,245,.7); pointer-events: none;
  transition: width .08s linear;
}

/* buttons: gradient + sheen */
.btn-primary, .nav-cta, .offer-send-btn,
.diag-btn-next, .diag-btn-primary {
  background: var(--grad-1) !important;
  color: #fff !important;
  border: none;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 26px -12px rgba(116,84,232,.75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn-primary::after, .nav-cta::after, .offer-send-btn::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
}
.btn-primary:hover, .nav-cta:hover, .offer-send-btn:hover,
.diag-btn-next:hover, .diag-btn-primary:hover {
  transform: translateY(-2px);
  filter: saturate(115%);
  box-shadow: 0 18px 38px -14px rgba(116,84,232,.85);
}
.btn-primary:hover::after, .nav-cta:hover::after, .offer-send-btn:hover::after {
  animation: aaaSheen .85s var(--ease) forwards;
}
@keyframes aaaSheen { to { left: 140%; } }

.btn-whatsapp { border-radius: 12px; box-shadow: 0 10px 26px -14px rgba(37,211,102,.8); }
.price-btn, .lang-btn, .billing-btn, .first-badge, .scarcity-badge { border-radius: 999px; }
.price-btn { border-color: var(--v-300); color: var(--v-700); font-weight: 600; }
.price-btn:hover, .price-card.featured .price-btn { background: var(--grad-1); border-color: transparent; color: #fff; }

/* focus ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }

/* ---------- 3. HERO: aurora + mesh + grain ---------- */
.hero { position: relative; isolation: isolate; }

.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 46% at 18% 24%, rgba(139,109,245,.30), transparent 62%),
    radial-gradient(38% 42% at 82% 18%, rgba(55,138,221,.24), transparent 64%),
    radial-gradient(46% 44% at 62% 82%, rgba(205,190,255,.34), transparent 66%);
  filter: blur(18px);
  animation: aaaAurora 22s ease-in-out infinite alternate;
}
@keyframes aaaAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%,1.5%,0) scale(1.07); }
  100% { transform: translate3d(2%,-2%,0) scale(1.03); }
}
[data-theme="dark"] .hero::before {
  background:
    radial-gradient(42% 46% at 18% 24%, rgba(139,109,245,.34), transparent 62%),
    radial-gradient(38% 42% at 82% 18%, rgba(55,138,221,.22), transparent 64%),
    radial-gradient(46% 44% at 62% 82%, rgba(91,63,196,.40), transparent 66%);
}

/* faint dot-grid so the hero reads "engineered" not "gradient soup" */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 34px 34px;
  color: rgba(116,84,232,.16);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}
[data-theme="dark"] .hero::after { color: rgba(174,150,251,.16); }

/* particle canvas injected by motion.js */
#aaaNeural {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: .55;
}

.hero-bg-text { -webkit-text-stroke: 2px var(--v-400); opacity: .10; }

/* hero imagery slot — now a real image with violet bloom */
.hero-ai-img {
  border-radius: 24px;
  box-shadow: 0 40px 90px -34px rgba(52,35,111,.55), 0 0 0 1px rgba(139,109,245,.14);
  animation: fadeInRight .9s ease .45s forwards, aaaFloat 9s ease-in-out 1.4s infinite;
}
.hero-ai-img::after {
  background: linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,0) 52%, transparent 70%);
}
[data-theme="dark"] .hero-ai-img::after {
  background: linear-gradient(to right, var(--bg) 0%, rgba(14,10,34,0) 52%, transparent 70%);
}
@keyframes aaaFloat {
  0%,100% { transform: translateY(-50%) translateZ(0); }
  50%     { transform: translateY(calc(-50% - 14px)) translateZ(0); }
}

/* headline accent: animated gradient text */
.hero h1 span, .section-title em, .stat-num span, .case-stat-num span {
  background: linear-gradient(100deg, var(--v-600) 0%, var(--b-500) 42%, var(--v-400) 72%, var(--v-600) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aaaShimmer 7s linear infinite;
}
@keyframes aaaShimmer { to { background-position: -260% 0; } }

.hero-eyebrow {
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(139,109,245,.10);
  border: 1px solid rgba(139,109,245,.24);
  color: var(--v-700); letter-spacing: 1.4px;
}
[data-theme="dark"] .hero-eyebrow { color: var(--v-300); background: rgba(139,109,245,.14); }
.hero-eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v-500); box-shadow: 0 0 0 0 rgba(139,109,245,.6);
  animation: aaaPing 2.4s ease-out infinite;
}
@keyframes aaaPing {
  0%   { box-shadow: 0 0 0 0 rgba(139,109,245,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(139,109,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,109,245,0); }
}

.hero-stats { border-top: 1px solid var(--border); }

/* ---------- 4. PROOF STRIP → infinite marquee ---------- */
.proof {
  background: linear-gradient(180deg, var(--v-50), var(--white));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .proof { background: linear-gradient(180deg, #120E2C, #0E0A22); }
.proof-inner { overflow: hidden; }
.proof-tools {
  flex-wrap: nowrap; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.proof-tools.aaa-marquee { animation: aaaMarquee 34s linear infinite; }
.proof-inner:hover .proof-tools.aaa-marquee { animation-play-state: paused; }
@keyframes aaaMarquee { to { transform: translateX(-50%); } }
.proof-tool {
  white-space: nowrap; color: var(--mid); font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.proof-tool:hover { color: var(--v-600); border-color: var(--v-300); transform: translateY(-2px); }
[data-theme="dark"] .proof-tool { background: #171233; }

/* ---------- 5. CARDS: spotlight + lift ---------- */
.price-card, .blog-card, .case-card, .faq-item, .diag-card,
.about-box, .offer-item, .roi-box, .compare-table-wrap, .leadmagnet-form-box {
  border-radius: var(--card-r);
}

.price-card, .blog-card, .case-card, .diag-card, .about-box {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.price-card::before, .blog-card::before, .case-card::before, .diag-card::before, .about-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(139,109,245,.16), transparent 68%);
  transition: opacity .35s var(--ease);
}
.price-card:hover, .blog-card:hover, .case-card:hover, .diag-card:hover, .about-box:hover {
  transform: translateY(-6px);
  border-color: var(--v-300);
  box-shadow: var(--glow-v);
}
.price-card:hover::before, .blog-card:hover::before, .case-card:hover::before,
.diag-card:hover::before, .about-box:hover::before { opacity: 1; }

/* featured pricing card gets a gradient rim */
.price-card.featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad-2) border-box;
  box-shadow: 0 26px 60px -30px rgba(116,84,232,.6);
}
[data-theme="dark"] .price-card.featured {
  background: linear-gradient(#171233, #171233) padding-box, var(--grad-2) border-box;
}
.price-badge { background: var(--grad-1); color: #fff; border-radius: 999px; padding: 5px 12px; }
.price-features li::before {
  background: var(--grad-1); width: 15px; height: 15px;
  box-shadow: 0 0 0 3px rgba(139,109,245,.12);
}

/* offer builder items */
.offer-item { transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.offer-item:hover { transform: translateY(-2px); border-color: var(--v-400); }
.offer-item.checked { border-color: var(--v-400); box-shadow: inset 0 0 0 1px rgba(139,109,245,.35); }
.offer-check { accent-color: var(--v-500); }

/* section headings */
.section-label {
  display: inline-block; color: var(--v-600); letter-spacing: 2.2px;
  padding-left: 26px; position: relative;
}
.section-label::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px;
  background: var(--grad-1); border-radius: 2px; transform: translateY(-50%);
}
[data-theme="dark"] .section-label { color: var(--v-300); }

/* dark sections (process / offer / footer) get a violet-ink gradient */
.process, .offer-builder {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(116,84,232,.30), transparent 60%),
    radial-gradient(50% 70% at 88% 100%, rgba(55,138,221,.22), transparent 62%),
    #191238;
  position: relative; overflow: hidden;
}
.process .section-title, .offer-builder .section-title,
.process .step-title { color: #fff; }
.process-step { border-right-color: rgba(255,255,255,.10); }
.step-line { background: var(--grad-1); width: 2px; }
.offer-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.offer-item-name { color: #EFEBFF; }
.offer-item-price { color: var(--v-300); }
.offer-item.checked { background: rgba(139,109,245,.18); }

footer {
  background:
    radial-gradient(52% 80% at 80% 0%, rgba(116,84,232,.26), transparent 62%),
    #120D2B !important;
}

/* light-tinted sections */
.compare, .roi, .about, .blog, .diag, .testimonials { background: var(--light); }
[data-theme="dark"] .compare, [data-theme="dark"] .roi, [data-theme="dark"] .about,
[data-theme="dark"] .blog, [data-theme="dark"] .diag, [data-theme="dark"] .testimonials { background: #120E2C; }

.compare-table .compare-aaa { background: var(--v-100); color: var(--v-900); }
.compare-table th.compare-aaa { background: var(--v-200); color: var(--v-700); }
[data-theme="dark"] .compare-table .compare-aaa { background: #2A2154; color: #E3DAFF; }
[data-theme="dark"] .compare-table th.compare-aaa { background: #2A2154; color: var(--v-300); }

.roi-result.featured { background: var(--v-100); box-shadow: inset 0 0 0 1px var(--v-200); }
.roi-field input[type="range"] { accent-color: var(--v-500); }

/* ---------- 6. IMAGERY: generated section art ---------- */
.aaa-art {
  position: absolute; pointer-events: none; user-select: none;
  z-index: 0; opacity: .85;
}
.aaa-art img { display: block; width: 100%; height: auto; }

.aaa-band {
  position: relative; overflow: hidden;
}
.aaa-band::before {
  content: ''; position: absolute; inset: auto -5% -40% -5%; height: 70%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(139,109,245,.16), transparent 70%);
  pointer-events: none;
}

/* grain overlay — premium texture, 1 element, no repaint cost */
.aaa-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: var(--aaa-noise);
  background-size: 180px 180px;
}
[data-theme="dark"] .aaa-grain { mix-blend-mode: screen; opacity: .05; }

/* ---------- 7. SCROLL REVEAL ---------- */
.aaa-rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.aaa-rv.in { opacity: 1; transform: none; }

/* ---------- 8. CHAT WIDGET ---------- */
.chat-bubble {
  background: var(--grad-1) !important;
  box-shadow: 0 16px 38px -14px rgba(116,84,232,.85);
  animation: aaaFloatSm 4.5s ease-in-out infinite;
}
@keyframes aaaFloatSm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.chat-header { background: var(--grad-1) !important; color: #fff; }

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  #aaaNeural { display: none; }
  .hero::before { filter: blur(26px); animation-duration: 30s; }
}
@media (max-width: 768px) {
  .hero::after { background-size: 26px 26px; }
  .aaa-grain { display: none; }
  .proof-tools.aaa-marquee { animation-duration: 24s; }
  .price-card:hover, .blog-card:hover, .case-card:hover,
  .diag-card:hover, .about-box:hover { transform: none; }
}

/* ---------- 10. ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aaa-rv { opacity: 1 !important; transform: none !important; }
  #aaaNeural { display: none; }
  .hero-ai-img { animation: none; opacity: 1; }
}

/* ---------- 11. CARD ARTWORK (generated, no stock photos) ---------- */
.blog-img, .case-img {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
.blog-img { height: 176px; }
.blog-img::after, .case-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,18,58,0) 40%, rgba(26,18,58,.34) 100%);
  pointer-events: none;
}
.blog-img svg {
  position: relative; z-index: 1;
  width: 42px; height: 42px; stroke: #fff; stroke-width: 1.6;
  filter: drop-shadow(0 4px 14px rgba(20,12,48,.55));
  transition: transform .45s var(--ease);
}
.blog-card:hover .blog-img svg { transform: scale(1.12) rotate(-3deg); }

.blog-grid .blog-card:nth-child(6n+1) .blog-img { background-image: url('assets/card-1.jpg'); }
.blog-grid .blog-card:nth-child(6n+2) .blog-img { background-image: url('assets/card-2.jpg'); }
.blog-grid .blog-card:nth-child(6n+3) .blog-img { background-image: url('assets/card-3.jpg'); }
.blog-grid .blog-card:nth-child(6n+4) .blog-img { background-image: url('assets/card-4.jpg'); }
.blog-grid .blog-card:nth-child(6n+5) .blog-img { background-image: url('assets/card-5.jpg'); }
.blog-grid .blog-card:nth-child(6n+6) .blog-img { background-image: url('assets/card-6.jpg'); }

/* case-study tiles that are NOT a client logo get artwork too */
.case-img:not(.case-img-logo) { background-image: url('assets/card-6.jpg'); }
.case-card:nth-child(2n) .case-img:not(.case-img-logo) { background-image: url('assets/card-4.jpg'); }
.case-card:nth-child(3n) .case-img:not(.case-img-logo) { background-image: url('assets/card-2.jpg'); }
.case-img:not(.case-img-logo) span { color: #fff; position: relative; z-index: 1; letter-spacing: 1.4px; }
.case-img-logo { background-image: none !important; }
.case-img-logo::after { display: none; }

/* ambient art bands */
.leadmagnet {
  background-image: url('assets/aaa-band-dark.jpg');
  background-size: cover; background-position: center;
}
.diag {
  background-image: url('assets/aaa-band-light.jpg');
  background-size: cover; background-position: center;
}
[data-theme="dark"] .diag { background-image: url('assets/aaa-band-dark.jpg'); }

/* hero svg sizing */
.aaa-hero-svg { display: block; width: 100%; height: 100%; }

/* ---------- 12. LAYOUT FIXES (pre-existing issues, CSS only) ---------- */
/* the em-dash was wrapping onto a line of its own at desktop widths */
.hero-content { max-width: 680px; }
.hero h1 { font-size: clamp(38px, 5.1vw, 62px); letter-spacing: -1.6px; line-height: 1.12; }
.hero p { max-width: 540px; }

/* giant outline "AAA" was sitting on top of the body copy on phones */
@media (max-width: 900px) {
  .hero-bg-text { display: none; }
}
@media (min-width: 901px) { .hero-bg-text { opacity: .07; } }

/* floating controls: violet, smaller and out of the CTA's way on phones */
#themeToggle { background: var(--v-600); color: #fff; }
#themeToggle:hover { background: var(--v-700); }
#backToTop:hover { background: var(--v-600); border-color: var(--v-600); color: #fff; }
.float-btn { box-shadow: 0 10px 26px -12px rgba(52,35,111,.5); }
@media (max-width: 767px) {
  .theme-toggle-wrap { bottom: 148px; left: 16px; }
  .theme-toggle-wrap .float-btn { transform: scale(.86); }
}

/* hero panel: keep the right edge inside the viewport */
@media (min-width: 1025px) {
  .hero-ai-img { right: 4%; width: clamp(300px, 40vw, 540px); height: clamp(300px, 40vw, 540px); }
}

/* the legacy left-to-right fade was washing out the new hero panel */
.hero-ai-img::after {
  background: linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,0) 24%, transparent 40%) !important;
}
[data-theme="dark"] .hero-ai-img::after {
  background: linear-gradient(to right, var(--bg) 0%, rgba(14,10,34,0) 24%, transparent 40%) !important;
}

/* ---------- 13. MARQUEE TRACK (fixes label overlap) ---------- */
.proof-inner { gap: 28px; }
.proof-label, .proof-divider { flex: 0 0 auto; }
.aaa-mq-mask {
  flex: 1 1 0%; min-width: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.aaa-mq-mask .proof-tools {
  width: max-content; flex-wrap: nowrap; gap: 14px;
  -webkit-mask-image: none; mask-image: none;
}
.aaa-mq-mask:hover .proof-tools.aaa-marquee { animation-play-state: paused; }
@media (max-width: 767px) { .theme-toggle-wrap { bottom: 96px; left: 12px; } }

/* ============================================================
   14. CHAT WIDGET — full retheme
   The widget was built with hardcoded slate hexes (#f8fafc,
   #0f172a, #e8edf2, #94a3b8) that ignore the theme. In dark
   mode that produced a white suggestion strip, dark pills and
   an invisible <strong> (near-black text on a dark bubble).
   Everything below is tokenised so it follows the page.
   ============================================================ */

.chat-panel {
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -28px rgba(36,24,84,.45), 0 0 0 1px rgba(139,109,245,.08);
}

/* header keeps the brand gradient in BOTH modes — it is the one accent moment */
.chat-header { background: var(--grad-1) !important; color: #fff; padding: 15px 16px; }
.chat-header-avatar {
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.35);
}
.chat-header-info strong { color: #fff; }
.chat-header-info span { color: #B9F5D0; }
.chat-header-info span::before { background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: aaaPing 2.4s ease-out infinite; }
.chat-close-btn { color: rgba(255,255,255,.65); }
.chat-close-btn:hover { color: #fff; }

/* conversation area */
.chat-messages { background: var(--v-50); }
.chat-msg.bot {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(36,24,84,.06);
}
.chat-msg.user { background: var(--grad-1); color: #fff; }
.chat-msg.bot strong { color: var(--v-700); font-weight: 600; }
.chat-msg.bot .chat-tag { color: var(--v-600); }
.chat-msg.bot li::before { color: var(--v-500); }
.chat-msg.bot .chat-divider { border-top: 1px solid var(--border); }
.chat-msg.chat-typing { color: var(--mid); }

/* quick replies */
.chat-suggestions { background: var(--v-50); border-top: 1px solid var(--border); padding: 8px 14px 12px; gap: 7px; }
.chat-suggestion {
  background: var(--white);
  border: 1px solid var(--v-200);
  color: var(--v-700);
  font-weight: 500;
  border-radius: 999px;
  padding: 7px 13px;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.chat-suggestion:hover {
  background: var(--v-600); border-color: var(--v-600); color: #fff; transform: translateY(-1px);
}

/* composer */
.chat-input-row { background: var(--white); border-top: 1px solid var(--border); padding: 6px 8px 6px 14px; }
.chat-input { color: var(--text); background: transparent; }
.chat-input::placeholder { color: var(--mid); }
.chat-send { background: var(--grad-1); color: #fff; border-radius: 10px; padding: 8px 14px; }
.chat-send:hover { filter: saturate(118%); }

.chat-notify { border-radius: 14px; border: 1px solid var(--border); background: var(--white); color: var(--text); }

/* ---- dark mode ---- */
[data-theme="dark"] .chat-panel { background: #171233; border-color: #2E2752; }
[data-theme="dark"] .chat-messages { background: #120E2C !important; }
[data-theme="dark"] .chat-msg.bot { background: #1C1640; border-color: #322A5E; color: #E8E3FF; box-shadow: none; }
[data-theme="dark"] .chat-msg.bot strong { color: #CDBEFF; }
[data-theme="dark"] .chat-msg.bot .chat-tag { color: #AE96FB; }
[data-theme="dark"] .chat-msg.bot .chat-divider { border-top-color: #322A5E; }
[data-theme="dark"] .chat-suggestions { background: #120E2C; border-top-color: #2E2752; }
[data-theme="dark"] .chat-suggestion { background: #1C1640; border-color: #3A3168; color: #CDBEFF; }
[data-theme="dark"] .chat-suggestion:hover { background: var(--v-600); border-color: var(--v-600); color: #fff; }
[data-theme="dark"] .chat-input-row { background: #171233; border-top-color: #2E2752; }
[data-theme="dark"] .chat-input { background: transparent; border: none; color: #F2EFFF; }
[data-theme="dark"] .chat-input::placeholder { color: #7E76A8; }
[data-theme="dark"] .chat-notify { background: #171233; border-color: #2E2752; color: #E8E3FF; }

/* the theme toggle sits at bottom-right and was landing on top of the
   open chat panel — fade it out while the chat is open */
body:has(.chat-panel.open) .theme-toggle-wrap,
body:has(.chat-panel.open) #backToTop { opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
@media (max-width: 767px) {
  body:has(.chat-panel.open) .chat-notify { display: none; }
}

/* PNG wordmark: light variant when the page is dark */
[data-theme="dark"] .nav-logo img,
[data-theme="dark"] img[src="aaa-logo.png"] { content: url("aaa-logo-light.png"); }
/* inline SVG wordmark */
[data-theme="dark"] .nav-logo svg .st0 { fill: #F2EFFF; }
.nav-logo svg .st1 { fill: #7454E8; }

/* ============================================================
   15. CONTRAST FIXES found by the automated audit
   ============================================================ */

/* footer is dark in BOTH themes, but its links were var(--gray)/#555 —
   2.5:1 on the dark footer. This was already broken on the live site. */
.footer-links a, .footer-copy, .footer-legal a { color: #A79EC6 !important; }
.footer-links a:hover, .footer-legal a:hover { color: #FFFFFF !important; }
.footer-social a { background: rgba(255,255,255,.07); color: #CDBEFF; }
.footer-social a:hover { background: var(--v-600); color: #fff; }

/* hardcoded deep purple, unreadable on a dark card */
.voice-addon-price { color: var(--v-700) !important; }
[data-theme="dark"] .voice-addon-price { color: #C3B2FF !important; }

/* billing toggle: .billing-btn.active used color:var(--white), which flips
   to near-black in dark mode — the label vanished into the pill */
.billing-btn.active { background: var(--grad-1) !important; border-color: transparent !important; color: #fff !important; }
.billing-btn.active .billing-badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }
[data-theme="dark"] .billing-btn { color: #A79EC6; }
[data-theme="dark"] .billing-toggle.dark .billing-btn { color: #A79EC6; }
.billing-badge { background: var(--v-600); color: #fff; }

/* white on light-violet is 2.45:1 — deepen the header instead */
.diag-result-header { background: var(--grad-1) !important; color: #fff !important; }
.diag-result-header-label { opacity: .92; }

/* review / modal CTAs that sat on the flipped --blue */
.review-submit, .review-open-btn, #openReviewBtn,
.case-package-btn, .booking-submit, .form-submit,
.leadmagnet-form button, .cookie-actions button.primary {
  background: var(--grad-1) !important; color: #fff !important; border-color: transparent !important;
}

/* ============================================================
   16. `background: var(--blue)` surfaces
   --blue is both an accent TEXT colour and a button BACKGROUND.
   In dark mode it becomes light violet, so white label text on it
   drops to ~2.4:1. Every background use gets the gradient instead.
   ============================================================ */
.btn-primary, .btn-primary:hover,
.nav-cta, .nav-cta:hover,
.offer-send-btn, .booking-submit, .form-submit, .form-submit:hover,
.case-package-btn, .cookie-actions button.primary,
.leadmagnet-form button, .demo-tab.active,
.diag-btn-primary, .diag-btn-next:hover, .diag-btn-primary:hover,
.diag-btn-pay, .diag-result-header,
.btn-exit-yes, .btn-post-review, .btn-review-open, .btn-review-submit,
.price-card.featured .price-btn, .price-card.featured .price-btn:hover,
.chat-send, .chat-header, .chat-bubble:hover, .chat-msg.user,
.chat-sugg-btn:hover, .footer-social a:hover,
.email-cta, .voice-orb, #backToTop:hover, #themeToggle:hover {
  background: var(--grad-1) !important;
  color: #fff !important;
}
.billing-badge, .billing-toggle.dark .billing-btn.active { background: var(--v-600) !important; color: #fff !important; }
.diag-progress-bar, .diag-stepper-line.done, .step-line, .c-dot,
.diag-stepper-num.active, .hero-eyebrow::before { background: var(--grad-1) !important; }
.hero-eyebrow::before { background: var(--v-500) !important; }

/* ============================================================
   17. PRODUCT MOCKUPS stay realistic in both themes
   The WhatsApp / Gmail panels are simulated screenshots. A real
   WhatsApp thread is beige with white bubbles — inverting it in
   dark mode makes it stop reading as a screenshot.
   ============================================================ */
.wa-mock, .email-mock { color-scheme: light; }
.wa-mock { background: #E5DDD5 !important; }
.wa-msg.in { background: #FFFFFF !important; }
.wa-msg.out { background: #DCF8C6 !important; }
.wa-msg, .wa-msg strong, .wa-msg.in, .wa-msg.out { color: #111B21 !important; }
.wa-time { color: #667781 !important; }
.wa-head { background: #075E54 !important; }
.wa-info .wa-name { color: #fff !important; }
.wa-info .wa-sub { color: rgba(255,255,255,.85) !important; }

.email-mock { background: #FFFFFF !important; border: 1px solid #E3E6EA !important; }
.email-toolbar { background: #F0F0F0 !important; }
.email-head { border-bottom: 1px solid #E3E6EA !important; }
.email-subject, .email-body strong, .email-list li { color: #1A1A2E !important; }
.email-body, .email-body p { color: #3D3D54 !important; }
.email-meta { color: #6B6B80 !important; }
.email-list { border-color: #E3E6EA !important; }
.email-list li { border-bottom-color: #E3E6EA !important; }
.email-body .fineprint, .email-mock p[style*="#bbb"] { color: #8A8A99 !important; }

/* WhatsApp button: #25D366 with white text is 1.98:1. #128C7E is also an
   official WhatsApp green and passes AA at 4.6:1. */
.btn-whatsapp { background: #128C7E !important; color: #fff !important; }
.btn-whatsapp:hover { background: #0F7A6E !important; }
/* green link text on white was 1.98:1 */
a[href*="g.page"], a[href*="google.com/maps"], .review-link, .wa-link { color: #0E7A55 !important; }
[data-theme="dark"] a[href*="g.page"], [data-theme="dark"] .review-link { color: #4ADE80 !important; }