/* Pine cone Marketing — WordPress export overrides */

html { scroll-behavior: smooth; }

.lang-en { display: none; }
html[lang="en"] .lang-he { display: none; }
html[lang="en"] .lang-en { display: revert; }

/* CTA arrows are drawn pointing right (→) and live AFTER the text in
   HTML source order. In LTR that's already correct ("Get Started →").
   In RTL, source-order-last items render on the LEFT, which puts the
   arrow on the wrong side of the text. `order: -1` pushes the arrow
   back to the flex main-start (visually the right edge in RTL), giving
   "התחל עכשיו →". Arrow direction stays pointing right in both langs
   — the modern uniform CTA style. */
html[dir="rtl"] .flip-rtl { order: -1; }

/* ──────────────────────────────────────────────────────────────────
   Scroll-triggered fade-in (Home animations).
   Default state: invisible + nudged down. Once the element enters
   the viewport, JS adds .is-visible which transitions to the
   resting state. Honors prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────── */
.pc-anim-fadein {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: var(--pc-delay, 0s);
  will-change: opacity, transform;
}
.pc-anim-fadein.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pc-anim-fadein { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Animated dashboard mockup bars.
   Each bar element gets style="--pc-bar-h: NN%" set inline; the
   keyframes interpolate from 0 to that height. Staggered via
   transition-delay (set inline per bar). 1s fill, single play.
   ────────────────────────────────────────────────────────────────── */
@keyframes pc-bar-grow { from { height: 0; } to { height: var(--pc-bar-h, 100%); } }
.pc-bar-fill { animation: pc-bar-grow 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--pc-bar-delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .pc-bar-fill { animation: none; height: var(--pc-bar-h, 100%); }
}

/* ──────────────────────────────────────────────────────────────────
   Platform-logos marquee. The strip is duplicated in markup so the
   loop is seamless — translating -50% moves the first copy fully off
   and the second copy into the same position. Pauses on hover.
   ────────────────────────────────────────────────────────────────── */
.pc-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.pc-marquee-track { display: flex; gap: 3rem; width: max-content; animation: pc-marquee 28s linear infinite; }
.pc-marquee:hover .pc-marquee-track { animation-play-state: paused; }
@keyframes pc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .pc-marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .pc-marquee-track { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Animated mesh-gradient background (Linear / Stripe style).
   Three large blurred color blobs drift slowly with offset timing.
   Container sits absolutely behind hero content (parent needs
   position: relative).
   ────────────────────────────────────────────────────────────────── */
.pc-mesh-bg { position: absolute; inset: -10%; z-index: -1; overflow: hidden; pointer-events: none; }
.pc-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.pc-mesh-blob-1 { width: 520px; height: 520px; top: -8%;  left: 8%;   background: #6366f1; animation: pc-mesh-1 22s ease-in-out infinite; }
.pc-mesh-blob-2 { width: 440px; height: 440px; top: 18%;  right: 4%;  background: #ec4899; animation: pc-mesh-2 28s ease-in-out infinite; }
.pc-mesh-blob-3 { width: 400px; height: 400px; bottom: -12%; left: 28%; background: #06b6d4; animation: pc-mesh-3 26s ease-in-out infinite; }
html.dark .pc-mesh-blob { opacity: 0.35; }
@keyframes pc-mesh-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,40px) scale(1.12); } }
@keyframes pc-mesh-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,60px) scale(1.05); } }
@keyframes pc-mesh-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-90px) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .pc-mesh-blob { animation: none; } }

/* ──────────────────────────────────────────────────────────────────
   Typewriter — JS types into .pc-type-text and adds a blinking
   cursor. The cursor element stays visually attached at the end of
   typed text by virtue of being inline-block in source order.
   ────────────────────────────────────────────────────────────────── */
.pc-type-cursor {
  display: inline-block;
  width: 3px;
  margin-inline-start: 4px;
  background: currentColor;
  align-self: stretch;
  animation: pc-cursor-blink 0.85s steps(2, end) infinite;
  vertical-align: text-bottom;
}
.pc-type-cursor.is-hidden { display: none; }
@keyframes pc-cursor-blink { 50% { opacity: 0; } }

/* ──────────────────────────────────────────────────────────────────
   3D tilt — actual transform values are set inline by JS based on
   cursor position; this rule just makes the return-to-rest smooth.
   ────────────────────────────────────────────────────────────────── */
.pc-tilt-3d {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .pc-tilt-3d { transition: none; transform: none !important; } }

/* ──────────────────────────────────────────────────────────────────
   Live-activity toasts — fixed bottom corner, slide in/out.
   ────────────────────────────────────────────────────────────────── */
.pc-toast-container {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 90;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 40px);
}
.pc-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgb(226 232 240);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 18px 45px -10px rgba(15, 23, 42, 0.18);
  max-width: 340px;
  min-width: 240px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
}
.pc-toast.is-visible { opacity: 1; transform: translateY(0); }
.pc-toast.is-hiding  { opacity: 0; transform: translateY(20px) scale(0.97); }
.pc-toast-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.pc-toast-text { font-size: 13px; color: rgb(51 65 85); margin: 0 0 2px; line-height: 1.4; }
.pc-toast-meta { font-size: 11px; color: rgb(148 163 184); margin: 0; display: flex; align-items: center; gap: 6px; }
.pc-toast-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
html.dark .pc-toast { background: rgb(15 23 42); border-color: rgb(51 65 85); }
html.dark .pc-toast-text { color: rgb(203 213 225); }
html.dark .pc-toast-meta { color: rgb(100 116 139); }
@media (prefers-reduced-motion: reduce) { .pc-toast { transition: opacity 0.2s; transform: none; } }
@media (max-width: 640px) { .pc-toast-container { display: none; } }

/* ──────────────────────────────────────────────────────────────────
   CINEMATIC EFFECTS — site-wide premium layer.
   ────────────────────────────────────────────────────────────────── */

/* Cinematic reveal: fade + scale-up + de-blur. Triggered by JS on
   IntersectionObserver. Applied automatically to every <main> > section
   and to .pc-reveal items. Replaces the older flat fade-in. */
.pc-reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  filter: blur(8px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s ease-out;
  transition-delay: var(--pc-delay, 0s);
  will-change: opacity, transform, filter;
}
.pc-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .pc-reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Magnetic buttons: JS applies translate based on cursor. The
   transition makes return-to-rest smooth. */
.pc-magnetic {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.2s ease;
  will-change: transform;
}
.pc-magnetic:hover {
  box-shadow: 0 12px 30px -8px rgba(99, 102, 241, 0.55);
}
@media (prefers-reduced-motion: reduce) { .pc-magnetic { transition: background-color 0.2s; transform: none !important; } }

/* Scroll progress bar — JS updates --pc-progress on every scroll. */
.pc-scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: var(--pc-progress, 0%);
  background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4);
  z-index: 100;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Animated gradient text. Use for hero accents instead of static
   text-indigo-600. Flowing rainbow that loops slowly. */
.pc-gradient-text {
  background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4, #6366f1);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: pc-gradient-shift 7s linear infinite;
  display: inline-block;
}
@keyframes pc-gradient-shift { to { background-position: 300% center; } }
@media (prefers-reduced-motion: reduce) { .pc-gradient-text { animation: none; background-position: 0 0; } }

/* Word-by-word reveal — for hero titles on non-Home pages where
   typewriter doesn't apply. JS splits text into spans and adds delays. */
.pc-word { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--pc-word-delay, 0s); }
.pc-word.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .pc-word { opacity: 1; transform: none; transition: none; } }

/* Sections containing mesh bg need to be positioned relative so the
   absolutely-positioned .pc-mesh-bg lays in correctly. The existing
   Home hero already has `relative`; the helper class below covers
   any new hero that doesn't.   */
.pc-has-mesh { position: relative; overflow: hidden; }

/* ──────────────────────────────────────────────────────────────────
   Page-transition overlay.
   On every Pine cone page load the overlay starts covering the screen,
   then JS removes .is-loading on the next frame so it slides off
   (gradient swipes up). When user clicks an internal link, JS adds
   .is-leaving and the overlay swipes down to cover before navigation.
   Loader logo (Pine cone "P" pin) is always centered while overlay
   is visible.
   ────────────────────────────────────────────────────────────────── */
.pc-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-page-transition__panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4f46e5 0%, #ec4899 45%, #06b6d4 100%);
  background-size: 200% 200%;
  /* Hidden by default — only shows during page-to-page navigation.
     Both states (is-leaving + is-entering) override to translateY(0).  */
  transform: translateY(-101%);
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}
.pc-page-transition__logo {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.pc-page-transition__logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  animation: pc-page-logo-pulse 1.4s ease-in-out infinite;
}
@keyframes pc-page-logo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Outbound — clicked an internal link. Slide the panel DOWN to cover. */
.pc-page-transition.is-leaving .pc-page-transition__panel { transform: translateY(0); transition: transform 0.55s cubic-bezier(0.4, 0, 0.7, 0.2); animation: pc-page-bg 4s ease-in-out infinite; }
.pc-page-transition.is-leaving .pc-page-transition__logo  { opacity: 1; transform: scale(1); transition-delay: 0.1s; }

/* Inbound — we just arrived from an internal nav. JS adds is-entering
   first (panel snaps to visible without transition), then is-entered
   on the next frame triggers the transition off-screen. */
.pc-page-transition.is-entering .pc-page-transition__panel {
  transform: translateY(0);
  transition: none;
  animation: pc-page-bg 4s ease-in-out infinite;
}
.pc-page-transition.is-entering .pc-page-transition__logo { opacity: 1; transform: scale(1); transition: none; }
.pc-page-transition.is-entering.is-entered .pc-page-transition__panel { transform: translateY(-101%); transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1); }
.pc-page-transition.is-entering.is-entered .pc-page-transition__logo  { opacity: 0; transform: scale(0.85); transition: opacity 0.3s ease, transform 0.45s ease; }

@keyframes pc-page-bg { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .pc-page-transition__panel,
  .pc-page-transition__logo { animation: none; transition: opacity 0.2s; }
  .pc-page-transition.is-entering .pc-page-transition__panel,
  .pc-page-transition.is-leaving .pc-page-transition__panel { transform: translateY(0); animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Legal pages typography. Embedded styles from the source HTML get
   stripped server-side; this brings the legal content (h3, p, ul)
   into the Pine cone visual language.
   ────────────────────────────────────────────────────────────────── */
.pc-legal-prose { color: rgb(51 65 85); line-height: 1.75; font-size: 15px; max-width: 100%; }
html.dark .pc-legal-prose { color: rgb(203 213 225); }
.pc-legal-prose h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; color: rgb(15 23 42); }
.pc-legal-prose h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: rgb(30 41 59); padding-top: 1.25rem; border-top: 1px solid rgb(226 232 240); }
.pc-legal-prose h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
html.dark .pc-legal-prose h2,
html.dark .pc-legal-prose h3 { color: rgb(241 245 249); }
html.dark .pc-legal-prose h3 { border-top-color: rgb(51 65 85); }
.pc-legal-prose p { margin: 0 0 0.85rem; }
.pc-legal-prose ul { margin: 0.5rem 0 1rem; padding-inline-start: 1.5rem; list-style: disc; }
.pc-legal-prose li { margin-bottom: 0.4rem; }
.pc-legal-prose strong { color: rgb(15 23 42); font-weight: 600; }
html.dark .pc-legal-prose strong { color: rgb(241 245 249); }
.pc-legal-prose a { color: #4f46e5; text-decoration: underline; text-underline-offset: 2px; }
html.dark .pc-legal-prose a { color: #818cf8; }
.pc-legal-prose .last-updated { color: rgb(100 116 139); font-weight: 600; font-size: 13px; margin-bottom: 1.5rem; }
.pc-legal-prose .contact-box { display: inline-block; margin-top: 0.5rem; padding: 0.75rem 1rem; background: rgb(238 242 255); border: 1px solid rgb(199 210 254); border-radius: 12px; color: rgb(67 56 202); font-weight: 600; }
html.dark .pc-legal-prose .contact-box { background: rgb(49 46 129 / 0.3); border-color: rgb(67 56 202); color: rgb(165 180 252); }
.pc-legal-prose .uppercase { text-transform: uppercase; font-weight: 700; font-size: 13px; }

@keyframes pc-spin {
  to { transform: rotate(360deg); }
}
.pc-spinner {
  animation: pc-spin 0.8s linear infinite;
  width: 1rem;
  height: 1rem;
}

.pc-mobile-menu { display: none; }
.pc-mobile-menu.is-open { display: flex; }

.pc-faq-answer { display: none; }
.pc-faq-item.is-open .pc-faq-answer { display: block; }
.pc-faq-item.is-open .pc-faq-chevron { transform: rotate(180deg); }

.pc-blog-post { display: flex; }
.pc-blog-post.is-hidden { display: none !important; }

.pc-form-success { display: none; }
.pc-form-success.is-visible { display: block; }
.pc-contact-form.is-hidden { display: none; }

.pc-field-error { border-color: #ef4444 !important; }
.pc-error-msg { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; }

/* Dashboard mockup bar chart */
.pc-bar { border-radius: 2px; background: rgb(224 231 255); }
html.dark .pc-bar { background: rgb(49 46 129 / 0.4); }
.pc-bar-fill { background: rgb(99 102 241); border-radius: 2px; height: 100%; width: 100%; }

/* Card gradient backgrounds for blog */
.pc-grad-0 { background: linear-gradient(to bottom right, #eef2ff, #f5f3ff); }
.pc-grad-1 { background: linear-gradient(to bottom right, #f0f9ff, #ecfdf5); }
.pc-grad-2 { background: linear-gradient(to bottom right, #fffbeb, #fff7ed); }
.pc-grad-3 { background: linear-gradient(to bottom right, #f5f3ff, #fdf2f8); }
.pc-grad-4 { background: linear-gradient(to bottom right, #ecfdf5, #f0fdfa); }
.pc-grad-5 { background: linear-gradient(to bottom right, #fff1f2, #eef2ff); }
html.dark .pc-grad-0 { background: linear-gradient(to bottom right, rgb(49 46 129 / 0.5), rgb(76 29 149 / 0.5)); }
html.dark .pc-grad-1 { background: linear-gradient(to bottom right, rgb(12 74 110 / 0.5), rgb(6 78 59 / 0.5)); }
html.dark .pc-grad-2 { background: linear-gradient(to bottom right, rgb(120 53 15 / 0.5), rgb(124 45 18 / 0.5)); }
html.dark .pc-grad-3 { background: linear-gradient(to bottom right, rgb(76 29 149 / 0.5), rgb(131 24 67 / 0.5)); }
html.dark .pc-grad-4 { background: linear-gradient(to bottom right, rgb(6 78 59 / 0.5), rgb(19 78 74 / 0.5)); }
html.dark .pc-grad-5 { background: linear-gradient(to bottom right, rgb(136 19 55 / 0.5), rgb(49 46 129 / 0.5)); }

/* Feature section color variants */
.pc-icon-indigo { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.pc-icon-sky { background: #f0f9ff; color: #0284c7; border-color: #bae6fd; }
.pc-icon-emerald { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.pc-icon-violet { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.pc-icon-amber { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.pc-icon-slate { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
html.dark .pc-icon-indigo { background: rgb(49 46 129); color: #818cf8; border-color: rgb(49 46 129); }
html.dark .pc-icon-sky { background: rgb(12 74 110); color: #38bdf8; border-color: rgb(12 74 110); }
html.dark .pc-icon-emerald { background: rgb(6 78 59); color: #34d399; border-color: rgb(6 78 59); }
html.dark .pc-icon-violet { background: rgb(76 29 149); color: #a78bfa; border-color: rgb(76 29 149); }
html.dark .pc-icon-amber { background: rgb(120 53 15); color: #fbbf24; border-color: rgb(120 53 15); }
html.dark .pc-icon-slate { background: #1e293b; color: #94a3b8; border-color: #334155; }