/* ChatGPT 6 Pro's selected bright palette; previous styles and originals retained. */
:root {
  --wa-primary: #25d366;
  --wa-hover: #20c05c;
  --wa-ink: #1f2937;
  --wa-mint: #f0fbf4;
  --wa-border: #d6eadd;
  --indigo-600: #166534;
  --indigo-500: #258542;
  --indigo-400: #25d366;
  --indigo-100: #dcfce7;
  --indigo-50: #f0fbf4;
  --violet-600: #166534;
  --violet-500: #258542;
  --violet-50: #f0fbf4;
  --green-500: #25d366;
  --green-600: #166534;
  --slate-900: #1f2937;
  --slate-800: #1f2937;
  --slate-700: #374151;
  --slate-600: #4b5563;
  --slate-500: #4b5563;
  --slate-200: #d6eadd;
  --slate-100: #f0fbf4;
  --slate-50: #f8fdfa;
  --shadow-indigo: 0 5px 18px rgba(37,211,102,.16);
}
body, .features, .roi, .faq { background: #fff; }
.btn-primary,
.hero-actions > .btn-primary,
.cta-section .btn-primary,
.navbar .nav-links .nav-cta {
  background: var(--wa-primary);
  color: var(--wa-ink);
  -webkit-text-fill-color: var(--wa-ink);
  box-shadow: 0 5px 18px rgba(37,211,102,.16);
}
.btn-primary:hover,
.hero-actions > .btn-primary:hover,
.cta-section .btn-primary:hover,
.navbar .nav-links .nav-cta:hover { background: var(--wa-hover); color: var(--wa-ink); }
.btn-secondary { border-color: #258542; color: #166534; }
.btn-secondary:hover { background: var(--wa-mint); color: #166534; }
:is(a, button, input, summary):focus-visible { outline: 3px solid var(--wa-ink); outline-offset: 4px; }

/* Only the image scales; this white readability layer remains stationary. */
.hero { background: #fff; }
.hero::before, [dir="rtl"] .hero::before { display: none; background-image: none; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  inset: 0; height: 100%;
  background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 36%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-content { padding: 24px; background: rgba(255,255,255,.95); border-radius: 20px; }
.hero-content h1, .hero-sub, .trust-item { color: var(--wa-ink); }
.hero-badge { background: #f0fbf4; color: #166534; border-color: var(--wa-border); }
.hero-actions > .hero-secondary-link,
.hero-wa-link, .hero-wa-link:hover,
.hero-actions > .hero-secondary-link:hover { color: #166534; }
.hero-wa-link { background: rgba(255,255,255,.9); border-color: var(--wa-border); }
.phone-mockup { box-shadow: 0 12px 36px rgba(31,41,55,.18); }
.chat-header, .chat-header-avatar { background: var(--wa-primary); color: var(--wa-ink); }
.chat-header-name, .chat-header-status { color: var(--wa-ink); }
.stats-bar { background: var(--wa-mint); border-block: 1px solid var(--wa-border); }
.stat-value { color: var(--wa-ink); }
.stat-label { color: var(--slate-600); }
.stat-item + .stat-item { border-color: var(--wa-border); }

.dejavu-moment, .how-it-works, .proof, .pricing, .security, .footer { background: var(--wa-mint); }
.dejavu-title, .story-copy .story-card.highlight { color: var(--wa-ink); }
.story-scene, .story-scene-solution { background: #fff; border-color: var(--wa-border); }
.story-copy .story-card, .story-copy .story-card.solution, .story-punchline p { color: var(--slate-700); }
.story-punchline .brand { color: #166534; }
.proof, .proof-card, .proof-note { border-color: var(--wa-border); }
.proof-card { border-top-color: var(--wa-primary); }
.proof-value { color: #166534; }
.feature-icon { color: #166534; background: var(--wa-mint); }
.feature-card:hover { border-color: #258542; }
.workflow-layout .step-number { background: var(--wa-primary); color: var(--wa-ink); }
.workflow-layout .step + .step-connector + .step { border-color: var(--wa-border); }
.roi-card { background: var(--wa-mint); border-color: var(--wa-border); }
.roi-result { border-color: var(--wa-border); }
.pricing-card.pricing-featured { border-color: #258542; background: #fff; }
.pricing-badge, .popular-badge { background: var(--wa-primary); color: var(--wa-ink); }
.faq-item[open] .faq-question { color: #166534; }

.security .section-title, .security-card h3 { color: var(--wa-ink); }
.security .section-sub, .security-card p, .security-note { color: var(--slate-600); }
.security-icon, .security-card-icon, .security-detail-toggle { color: #166534; }
.security-lead .section-visual { border-color: var(--wa-border); }
.security-grid { align-items: stretch; }
.security-card, .security-card:hover { background: #fff; border-color: var(--wa-border); }
.security-grid > .security-card { display: block; padding: 0; overflow: hidden; }
.security-copy { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px 16px; padding: 24px; }
.security-copy .security-card-icon { grid-row: 1 / 3; }
.security-copy h3, .security-copy p { grid-column: 2; margin: 0; }
.security-photo { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wa-mint); }
.security-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.security-detail summary { padding: 0 24px 24px; row-gap: 24px; }
.security-detail summary .security-photo { grid-column: 1 / -1; width: calc(100% + 48px); margin-inline: -24px; border-radius: 0; }
.security-detail summary:focus-visible { outline-color: var(--wa-ink); outline-offset: -4px; }
.security-detail > p { padding: 0 24px 24px; }

.cta-section { background: #fff; }
.cta-section::before {
  background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 37%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 72%);
}
.cta-section::after { display: none; }
.cta-inner h2 { color: var(--wa-ink); }
.cta-inner p { color: var(--slate-700); }
.cta-inner .share-link, .cta-inner .share-link:hover { color: #166534; border-color: #258542; }
.footer { border-top: 1px solid var(--wa-border); }
.whatsapp-float, .whatsapp-float:hover { background: var(--wa-primary); color: var(--wa-ink); }
.security-visual { display: block; }
@media (min-width: 769px) {
  [dir="rtl"] .hero::after { background: linear-gradient(270deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 36%,rgba(255,255,255,.75) 50%,transparent 70%); }
  [dir="rtl"] .cta-section::before { background: linear-gradient(270deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 37%,rgba(255,255,255,.72) 50%,transparent 72%); }
}
@media (max-width: 768px) {
  .hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero-inner { display: contents; }
  .hero-bg { position: static; order: 2; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .hero::after, .cta-section::before { display: none; }
  .hero-content { order: 1; width: 100%; padding: 0 24px 32px; text-align: center; background: #fff; }
  .hero-visual { order: 3; width: 100%; padding: 32px 24px 40px; }
  .cta-section { display: flex; flex-direction: column; padding: 0 0 48px; }
  .cta-bg { position: static; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
  .cta-inner { padding-top: 32px; }
  .security-copy { padding: 22px 20px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-bg, .security-photo > img { transition: transform 300ms ease-out; }
  .hero:hover > .hero-bg, .security-photo:hover > img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .security-photo > img { transition: none; transform: none; }
}