/* Shared "want a site like this?" band — Ron Tal Web's own look (ink + indigo, as on
   the landing page), deliberately not the demo business's style, so the visitor can
   tell the fictional business from the studio that built it. Same in light and dark
   themes (a fixed dark band), system font stack (no webfont, no layout shift). */
.demo-offer {
  --_ink: #121827;
  --_ink-2: #1b2236;
  --_fg: #f3f4fb;
  --_muted: #b9bfd6;
  --_accent: #7b83ff;
  --_accent-bg: #5b63f3;
  --_accent-bg-hover: #454edc;
  box-sizing: border-box;
  padding-block: clamp(2.25rem, 5.5vw, 3.5rem);
  padding-inline: 1.25rem;
  background: var(--_ink);
  background-image: radial-gradient(120% 140% at 100% 0%, var(--_ink-2) 0%, var(--_ink) 60%);
  color: var(--_fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  line-height: 1.55;
}
.demo-offer *, .demo-offer *::before, .demo-offer *::after { box-sizing: border-box; }
.demo-offer__inner { max-width: 1120px; margin-inline: auto; display: grid; gap: 1.4rem 3rem; align-items: center; }
.demo-offer__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--_accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.demo-offer__mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--_ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; }
.demo-offer__title { margin: 0.7rem 0 0; color: var(--_fg); font-family: inherit; font-size: clamp(1.45rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.demo-offer__text { margin: 0.65rem 0 0; max-width: 56ch; color: var(--_muted); font-size: 0.98rem; }
.demo-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.demo-offer__cta,
.demo-offer__more {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.7rem 1.35rem; border-radius: 999px;
  font-family: inherit; font-size: 0.98rem; font-weight: 700; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.demo-offer__cta { background: var(--_accent-bg); color: #fff; box-shadow: 0 12px 28px rgba(91, 99, 243, .35); }
.demo-offer__cta:hover { background: var(--_accent-bg-hover); transform: translateY(-1px); }
.demo-offer__cta svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.demo-offer__more { border: 1px solid rgba(243, 244, 251, .32); color: var(--_fg); }
.demo-offer__more:hover { border-color: var(--_fg); }
/* Items separated by space, not by dots: a wrapped line never ends in a dangling separator. */
.demo-offer__contact { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; margin: 0; color: var(--_muted); font-size: 0.9rem; }
.demo-offer__contact a { color: var(--_fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(243, 244, 251, .45); white-space: nowrap; }
.demo-offer a:focus-visible { outline: 3px solid var(--_accent); outline-offset: 3px; }
@media (min-width: 820px) { .demo-offer__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
@media (max-width: 559px) { .demo-offer__cta, .demo-offer__more { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .demo-offer__cta, .demo-offer__more { transition: none; } .demo-offer__cta:hover { transform: none; } }
/* Set by demo-offer.js while the contact section, this band or the footer is on screen. */
html.rtw-float-off .floating-whatsapp { opacity: 0; visibility: hidden; pointer-events: none; }
/* Phones: a size smaller, closer to the corner. `html` outranks each demo's own rule, which loads later. */
@media (max-width: 480px) { html .floating-whatsapp { width: 48px; height: 48px; inset-inline-end: 0.85rem; bottom: 0.85rem; } }