/* ══════════════════════════════════════════════════════════════
   WhatsApp InstaReply — shared frontend polish layer
   Additive only. Loaded on every public page. Safe with existing
   inline styles; everything heavy is disabled for reduced-motion.
   ══════════════════════════════════════════════════════════════ */

:root{ --ir-wa:#25D366; --ir-wa2:#128C7E; }

/* Smoother base */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Accessible, on-brand focus ring for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ir-wa);
  outline-offset:2px;
  border-radius:6px;
}
::selection{ background:rgba(37,211,102,.85); color:#fff; }
button,a{ -webkit-tap-highlight-color:transparent; }

/* ── Scroll reveal — only armed once reveal.js flags the document ── */
html.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.16,.84,.44,1),
             transform .62s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
html.js-reveal [data-reveal].is-in{ opacity:1; transform:none; }

/* Sticky nav earns a soft shadow once the page scrolls */
.nav-wrap,header{ transition:box-shadow .25s ease, background-color .25s ease; }
.nav-wrap.ir-scrolled,header.ir-scrolled{ box-shadow:0 6px 26px rgba(13,20,16,.09); }

/* Gentle drifting glow behind heroes that use a ::before blob */
@keyframes ir-float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,16px)} }
.hero::before{ animation:ir-float 9s ease-in-out infinite; }

/* Respect users who prefer less motion — kill all of it */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js-reveal [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero::before{ animation:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   THEME — light/dark switch. Every page shares these variable
   names, so overriding them at [data-theme] flips the whole UI.
   ══════════════════════════════════════════════════════════════ */

/* Dark palette — applied when the user chooses dark on any page */
:root[data-theme="dark"]{
  --bg:#0d1410;  --bg2:#111a14;  --surface:#151f19;  --surface2:#1c2b21;
  --border:#243328; --border2:#2d4735;
  --text:#e4f0e8; --text2:#a8c4b0; --muted:#7ba588;
  --wa-light:rgba(37,211,102,.14);
  --dark:#060a07;
  color-scheme:dark;
}

/* Light palette — explicit, so the dark-by-default pages
   (dashboard, customer-journey) can flip to light too */
:root[data-theme="light"]{
  --bg:#f5fdf7;  --bg2:#eaf7ee;  --surface:#ffffff;  --surface2:#edf7f0;
  --border:#d4eddb; --border2:#b8dfc2;
  --text:#0d2b14; --text2:#2d5a38; --muted:#6b9a75;
  --wa-light:rgba(37,211,102,.10);
  --dark:#0d1410;
  color-scheme:light;
}

/* Targeted fixups: a few elements hardcode light colors instead of
   using the variables. Re-point them for dark mode so nothing stays
   stranded light. (Selectors that don't exist on a page are no-ops.) */
:root[data-theme="dark"] .nav-wrap{ background:rgba(13,20,16,.86) !important; }
:root[data-theme="dark"] .hero{
  background:linear-gradient(160deg,#0f1a13,#0d1410 42%,#101c15) !important;
}
:root[data-theme="dark"] .feats,
:root[data-theme="dark"] .testi-sec{ background:var(--surface) !important; }

/* Ease the switch so it doesn't snap harshly */
body{ transition:background-color .25s ease, color .25s ease; }

/* ── Floating sun/moon toggle (injected by theme.js) ── */
.ir-theme-toggle{
  position:fixed; right:18px; bottom:18px; z-index:9000;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface,#fff); color:var(--text,#0d2b14);
  border:1px solid var(--border,#d4eddb);
  box-shadow:0 6px 22px rgba(13,20,16,.20);
  cursor:pointer; font-size:19px; line-height:1; padding:0;
  transition:transform .18s ease, box-shadow .18s ease,
             background-color .25s ease, border-color .25s ease;
}
.ir-theme-toggle:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 28px rgba(13,20,16,.28); }
.ir-theme-toggle:active{ transform:scale(.95); }
.ir-theme-toggle span{ display:block; pointer-events:none; }
@media (max-width:560px){
  .ir-theme-toggle{ width:40px; height:40px; right:14px; bottom:14px; font-size:17px; }
}
@media (prefers-reduced-motion: reduce){
  body{ transition:none; }
  .ir-theme-toggle{ transition:none; }
}