@charset "UTF-8";
/* ============================================================================
   באונסר — דף נחיתה · מערכת עיצוב v2
   ----------------------------------------------------------------------------
   הגרסה הראשונה הייתה נכונה ומשעממת: רשתות של שלושה כרטיסים לבנים על אפור,
   כותרת-גג זהה מעל כל מקטע, וכל בלוק באותו משקל ויזואלי. זה נראה כמו תבנית.

   כאן ההיגיון הפוך: הדף בנוי כרצף של רגעים בעלי עוצמה שונה. מקטעי "דיו"
   (.ink) הם כמעט-שחורים ונושאים את הרגעים הגדולים — ההירו, המנגנון, התמחור;
   ביניהם מקטעים בהירים שנותנים לעין לנשוח. הפריסה א-סימטרית בכוונה, והמספרים
   והכותרות גדולים בהרבה ממה שנוח.

   התנועה: Lenis + GSAP ScrollTrigger, בדיוק כמו באתר משרוקית — פס התקדמות
   עליון, מסילה זוהרת בשלבים, מונים בגלילה, ומקטע מנגנון מוצמד (pin) שנפרש
   לפי גלגלת העכבר.

   תואם CSP: אין @import חיצוני ואין JS. כל המיקומים בתכונות לוגיות — קובץ
   אחד משרת RTL ו-LTR.
   ========================================================================= */

/* ── 1. גופני נפילה תואמי-מטריקות (מונע CLS ב-swap) ─────────────────────── */
@font-face {
  font-family: 'Heebo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI');
  size-adjust: 99.49%; ascent-override: 100.51%; descent-override: 28.14%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI');
  size-adjust: 111.74%; ascent-override: 86.68%; descent-override: 21.61%; line-gap-override: 0%;
}

/* ── 2. טוקנים ───────────────────────────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5FA;
  --surface-3: #ECECF3;

  --ink: #0B0B16;
  --ink-2: #40405A;
  --ink-3: #6C6C88;
  --ink-4: #9C9CB4;

  --line: #E7E7EF;
  --line-2: #D3D3DF;

  /* מותג — האינדיגו-סגול של באונסר, עם רמפה עמוקה יותר לרגעים הגדולים */
  --brand: #4F46E5;
  --brand-2: #7C3AED;
  --brand-3: #C026D3;
  --brand-ink: #312E81;
  --brand-soft: #EEF0FF;
  --brand-on: #FFFFFF;

  --teal: #0E9F8E;
  --amber: #B45309;
  --rose: #DB2777;
  --ok: #047857;
  --ok-soft: #D1FAE5;
  --bad: #DC2626;
  --bad-soft: #FEE2E2;

  --sans: 'Heebo', 'Heebo Fallback', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgb(11 11 22 / .05), 0 1px 1px rgb(11 11 22 / .03);
  --sh-md: 0 6px 22px -6px rgb(11 11 22 / .10), 0 2px 8px -3px rgb(11 11 22 / .06);
  --sh-lg: 0 28px 64px -16px rgb(11 11 22 / .20), 0 8px 20px -8px rgb(11 11 22 / .08);
  --sh-brand: 0 14px 40px -12px rgb(79 70 229 / .5);

  --section-y: clamp(84px, 10vw, 168px);
  --gutter: clamp(20px, 5vw, 52px);
  --maxw: 1320px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

}

:root[data-theme="dark"] {
  --bg: #0B0B14;
  --surface: #14141F;
  --surface-2: #1A1A26;
  --surface-3: #23232F;
  --ink: #F6F6FB;
  --ink-2: #C3C3D4;
  --ink-3: #8C8CA4;
  --ink-4: #5A5A70;
  --line: #23232F;
  --line-2: #32323E;
  --brand: #7B74F0;
  --brand-2: #A177F5;
  --brand-3: #D96BE8;
  --brand-ink: #C7C2FB;
  --brand-soft: #1D1A3C;
  --teal: #2BC3B0;
  --amber: #F0B03C;
  --rose: #F472B6;
  --ok: #34D399;
  --ok-soft: #0F2D1F;
  --bad: #F87171;
  --bad-soft: #3A1717;
  --sh-sm: 0 1px 2px rgb(0 0 0 / .45);
  --sh-md: 0 6px 22px -6px rgb(0 0 0 / .55);
  --sh-lg: 0 28px 64px -16px rgb(0 0 0 / .65);
  --sh-brand: 0 14px 40px -12px rgb(123 116 240 / .4);
}

/* ── 2b. מקטעי דיו ────────────────────────────────────────────────────────
   הרגעים הגדולים כהים תמיד, בשתי ערכות הנושא. זה מה שנותן לדף את הקצב:
   בהיר → כהה → בהיר, במקום מישור אחיד. כל רכיב שנכנס לכאן מקבל את הצבעים
   הנכונים אוטומטית, כי כל הטוקנים נדרסים יחד. */
.ink {
  --bg: #07070F;
  --surface: #12121F;
  --surface-2: #171728;
  --surface-3: #1F1F33;
  --ink: #FFFFFF;
  --ink-2: #C9C9DC;
  --ink-3: #9494AE;
  --ink-4: #66667F;
  --line: #1E1E30;
  --line-2: #2C2C42;
  --brand: #8B7CFF;
  --brand-2: #B47CF8;
  --brand-3: #E879C9;
  --brand-ink: #D6D0FF;
  --brand-soft: #1A1738;
  --brand-on: #0A0A14;
  --ok: #34D399;
  --ok-soft: #0D2A1D;
  --bad: #FB7185;
  --bad-soft: #351320;
  --amber: #FBBF24;
  --sh-sm: 0 1px 2px rgb(0 0 0 / .5);
  --sh-md: 0 8px 26px -8px rgb(0 0 0 / .7);
  --sh-lg: 0 34px 80px -20px rgb(0 0 0 / .85);
  --sh-brand: 0 18px 50px -14px rgb(139 124 255 / .45);
  background: var(--bg);
  color: var(--ink-2);
  position: relative;
  isolation: isolate;
}

/* אנגלית — Inter, וסקאלה משלה (המילים ארוכות ורחבות מהעברית) */
html[lang="en"] { --sans: 'Inter', 'Inter Fallback', system-ui, sans-serif; }
html[lang="en"] body { letter-spacing: -0.011em; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -0.032em; }
html[lang="en"] .hero__title { font-size: clamp(34px, 3.85vw, 53px); letter-spacing: -0.04em; }
html[lang="en"] .sec-title { font-size: clamp(30px, 4.4vw, 54px); }

/* ── 3. בסיס ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
/* Lenis משתלט על הגלילה; הוא מוסיף את המחלקה בעצמו */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* ⚠️ בלי transition על background-color כאן. הערך מגיע מ-var(--bg),
     ובכרום מעבר שמופעל משינוי משתנה על אלמנט-אב נתקע: --bg כבר #0B0B14
     אבל ה-background המחושב נשאר לבן לצמיתות, והמעבר לערכה כהה משאיר
     רקע לבן מאחורי המקטעים הבהירים. החלפה מיידית נכונה יותר ממילא. */
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--brand); color: #fff; }

/* ── 4. עזרים ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--surface-2); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 300;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700; text-decoration: none;
}
.skip-link:focus { inset-inline-start: 16px; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* גַג-כותרת — עכשיו קטן, חד, ובלי הפס הגרפי שחזר על עצמו בכל מקטע */
.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand);
  margin-block-end: 20px;
}
.ink .eyebrow { color: var(--brand-2); }

/* כותרת מקטע — גדולה בהרבה מקודם, וזה כל העניין */
.sec-title { font-size: clamp(32px, 5.2vw, 62px); letter-spacing: -0.035em; }
.sec-lede {
  margin-block-start: 22px;
  font-size: clamp(17px, 1.85vw, 21px);
  line-height: 1.58; color: var(--ink-3); max-width: 54ch;
}

/* פס התקדמות גלילה — החתימה של אתר משרוקית */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 3px; z-index: 200; pointer-events: none;
}
.progress__bar {
  block-size: 100%; inline-size: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(to right, #4F46E5, #7C3AED 45%, #EC4899);
}
html[dir="rtl"] .progress__bar { transform-origin: 100% 50%; }

/* ── 5. כפתורים ──────────────────────────────────────────────────────────── */
.btn {
  --btn-py: 16px; --btn-px: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
              border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 55%, var(--brand-3));
  background-size: 200% 100%;
  color: var(--brand-on);
  box-shadow: var(--sh-brand);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
              background-position .5s var(--ease-out);
}
.btn--primary:hover {
  color: var(--brand-on);
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -14px rgb(124 58 237 / .6);
}

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--brand); transform: translateY(-2px); }

.btn--sm { --btn-py: 10px; --btn-px: 20px; font-size: 15px; }
.btn--lg { --btn-py: 19px; --btn-px: 40px; font-size: 19px; }

.btn .arrow { transition: transform .24s var(--ease-out); }
.btn:hover .arrow { transform: translateX(-5px); }
html[dir="ltr"] .btn:hover .arrow { transform: translateX(5px); }

/* ── 6. ניווט ────────────────────────────────────────────────────────────── */
/* שקוף מעל ההירו הכהה, ומתמצק רק אחרי שהתוכן מתחיל לעבור מתחתיו */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 150;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out),
              backdrop-filter .35s var(--ease-out);
  border-block-end: 1px solid transparent;
  --nav-ink: #FFFFFF;
  --nav-ink-2: rgb(255 255 255 / .72);
  --nav-line: rgb(255 255 255 / .18);
  --nav-chip: rgb(255 255 255 / .07);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block-end-color: var(--line);
  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: var(--line-2);
  --nav-chip: var(--surface-2);
}
.nav__inner { display: flex; align-items: center; gap: 14px; min-block-size: 76px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--nav-ink); flex: none; }
.brand__mark {
  inline-size: 40px; block-size: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4F46E5, #A855F7);
  color: #fff; box-shadow: 0 8px 24px -8px rgb(124 58 237 / .7); flex: none;
}
.brand__mark svg { inline-size: 22px; block-size: 22px; }
.brand__name { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.brand__sub { display: block; font-size: 12px; color: var(--nav-ink-2); line-height: 1.25; font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav__links a {
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: 15.5px; font-weight: 600; color: var(--nav-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color .16s, background-color .16s;
}
.nav__links a:hover { color: var(--nav-ink); background: var(--nav-chip); }
.nav__links .nav__login {
  margin-inline-start: 8px; padding-inline-start: 16px;
  border-inline-start: 1px solid var(--nav-line); border-radius: 0;
  font-weight: 600;
}
.nav__links .nav__login:hover { background: none; color: var(--nav-ink); text-decoration: underline; }

.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.iconbtn {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  border: 1px solid var(--nav-line); border-radius: var(--r-sm);
  background: var(--nav-chip); color: var(--nav-ink-2); cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.iconbtn:hover { border-color: var(--brand); color: var(--nav-ink); }
.langswitch { display: inline-flex; border: 1px solid var(--nav-line); border-radius: var(--r-sm); overflow: hidden; background: var(--nav-chip); }
.langswitch a { padding: 9px 11px; font-size: 13px; font-weight: 700; color: var(--nav-ink-2); text-decoration: none; transition: background-color .16s, color .16s; }
.langswitch a:hover { color: var(--nav-ink); }
.langswitch a[aria-current="true"] { background: var(--brand); color: #fff; }

.nav__toggle, .nav__menu-cta { display: none; }
@media (max-width: 1080px) {
  .nav__links {
    position: absolute; inset-inline: var(--gutter); top: calc(100% + 6px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    margin-inline-start: 0; display: none;
    --nav-ink: var(--ink); --nav-ink-2: var(--ink-2); --nav-chip: var(--surface-2); --nav-line: var(--line);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 14px; font-size: 16.5px; }
  .nav__links .nav__login {
    margin-inline-start: 0; padding-inline-start: 14px; border-inline-start: 0;
    border-block-start: 1px solid var(--line); margin-block-start: 6px; padding-block-start: 16px;
  }
  .nav__links .nav__menu-cta, .nav__links .nav__menu-cta:hover {
    justify-content: center; margin-block-start: 8px; font-size: 16.5px;
    color: #fff; background: linear-gradient(120deg, #4F46E5, #7C3AED 55%, #C026D3);
  }
  .nav__toggle { display: grid; }
  .nav__menu-cta { display: inline-flex; }
  .nav .btn--nav-cta { display: none; }
  .brand__sub { display: none; }
}
.nav__lang-mobile { display: none; }
/* Under 430px the header langswitch is hidden for space — the language
   link moves into the hamburger menu so mobile visitors can still switch. */
@media (max-width: 430px) { .langswitch { display: none; } .nav__lang-mobile { display: block; } }

/* ── 7. הירו ─────────────────────────────────────────────────────────────── */
.hero {
  min-block-size: min(100svh, 940px);
  display: flex; align-items: center;
  padding-block: 116px clamp(56px, 7vw, 100px);
  overflow: clip;
}
/* זוהר-על: שתי הילות רכות שנעות לאט. background ולא <img> — מועמד ה-LCP
   נשאר טקסט הכותרת, שנצבע מיד. */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(10px);
}
.hero::before {
  inline-size: 900px; block-size: 900px;
  inset-block-start: -340px; inset-inline-end: -240px;
  background: radial-gradient(circle, rgb(124 58 237 / .40), rgb(79 70 229 / .16) 42%, transparent 66%);
  animation: aurora-a 22s var(--ease-io) infinite alternate;
}
.hero::after {
  inline-size: 760px; block-size: 760px;
  inset-block-end: -320px; inset-inline-start: -220px;
  background: radial-gradient(circle, rgb(192 38 211 / .26), transparent 62%);
  animation: aurora-b 27s var(--ease-io) infinite alternate;
}
@keyframes aurora-a { to { transform: translate3d(-70px, 60px, 0) scale(1.12); } }
@keyframes aurora-b { to { transform: translate3d(60px, -50px, 0) scale(1.16); } }

/* גרעין עדין — מוציא מהדף את המראה ה"שטוח" של גרדיאנט CSS נקי */
.hero .grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(40px, 5vw, 76px); align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 52px; } }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px 8px 13px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .14);
  color: var(--brand-ink);
  font-size: 13.5px; font-weight: 700;
  backdrop-filter: blur(8px);
}
.pill__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px rgb(52 211 153 / .22);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgb(52 211 153 / 0); } }

.hero__title {
  margin-block-start: 26px;
  font-size: clamp(37px, 5vw, 68px);
  line-height: 0.99;
  letter-spacing: -0.042em;
  font-weight: 800;
}
.hero__title .grad {
  background: linear-gradient(100deg, #A78BFA 0%, #C084FC 40%, #F472B6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; padding-block-end: .08em; margin-block-end: -.08em;
}

.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; text-align: start; }
.rotator__item { grid-area: 1 / 1; opacity: 0; transform: translateY(.55em); transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.rotator__item.is-active { opacity: 1; transform: none; }
.rotator__item.is-leaving { opacity: 0; transform: translateY(-.55em); }

.hero__lede {
  margin-block-start: 28px;
  font-size: clamp(17.5px, 1.9vw, 21px);
  line-height: 1.6; color: var(--ink-2); max-width: 52ch;
}
.hero__lede strong { color: var(--ink); font-weight: 700; }

.hero__cta { margin-block-start: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero .btn--ghost { border-color: rgb(255 255 255 / .22); color: #fff; }
.hero .btn--ghost:hover { border-color: var(--brand-2); color: #fff; }

.hero__trust {
  margin-block-start: 30px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  list-style: none; padding: 0; font-size: 15px; color: var(--ink-3);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { inline-size: 17px; block-size: 17px; color: var(--ok); flex: none; }

@media (max-width: 560px) {
  .hero__cta { gap: 12px; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ── 7b. זרם התגובות בהירו ───────────────────────────────────────────────
   עמודה של תגובות שעולה בלולאה, וקו סריקה זוהר חוצה אותה. כל תגובה מקבלת
   השהיה שלילית משלה על אותה לולאה, ולכן ה"סימון" שלה קורה בדיוק ברגע שבו
   היא חוצה את הקו. אין כאן JS — רק תזמון. */
.feed {
  position: relative;
  block-size: clamp(420px, 52vh, 560px);
  border-radius: var(--r-xl);
  border: 1px solid rgb(255 255 255 / .10);
  background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  box-shadow: var(--sh-lg);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.feed__track {
  display: grid; gap: 12px; padding: 18px;
  animation: feed-scroll 26s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes feed-scroll { to { transform: translateY(calc(-1 * var(--feed-shift, 50%))); } }

.feed:hover .feed__track { animation-play-state: paused; }

.feed__beam {
  position: absolute; inset-inline: 0; inset-block-start: 50%; z-index: 4;
  block-size: 2px; pointer-events: none;
  background: linear-gradient(to right, transparent, #A78BFA 18%, #F472B6 82%, transparent);
  box-shadow: 0 0 22px 5px rgb(167 139 250 / .6);
}
/* הילה רכה סביב הקרן — מדגישה את "הרגע" שבו התגובה נבדקת */
.feed__beam::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -26px;
  block-size: 54px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(167 139 250 / .13) 45%, transparent);
}
.feed__beam::after {
  content: attr(data-label);
  position: absolute; inset-inline-end: 12px; inset-block-start: -25px;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: rgb(124 58 237 / .28); border: 1px solid rgb(196 181 253 / .35);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: #DDD6FE; text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* תוויות שמסבירות במפורש מה למעלה ומה למטה */
.feed__zone {
  position: absolute; z-index: 4; inset-inline-start: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  pointer-events: none; backdrop-filter: blur(4px);
}
.feed__zone--after {
  inset-block-start: 12px;
  background: linear-gradient(#0C1A16, #0C1A16) padding-box, rgb(52 211 153 / .18);
  border: 1px solid rgb(52 211 153 / .38); color: #6EE7B7;
}
.feed__zone--before {
  inset-block-end: 12px;
  background: linear-gradient(#14141F, #14141F) padding-box, rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .16); color: rgb(255 255 255 / .6);
}
@media (max-width: 480px) { .feed__zone { display: none; } }

/* מצב "לפני הסריקה": מעומעם, חסר צבע, בלי פסק דין. ההבדל מהמצב שאחרי חייב
   להיות בולט — זו כל הנקודה של ההדגמה. */
.cmt {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
  padding: 13px 14px 13px 16px; border-radius: var(--r-md);
  background: rgb(255 255 255 / .03);
  border: 1px solid rgb(255 255 255 / .07);
  opacity: .46;
  filter: grayscale(1);
  transition: opacity .4s var(--ease-out), filter .4s var(--ease-out),
              background-color .4s var(--ease-out), border-color .4s var(--ease-out),
              transform .4s var(--ease-out);
}
/* פס הצבע בקצה — הסימן הכי מהיר לקריאה: אדום = הוחרג, ירוק = נשאר */
.cmt::before {
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0;
  inline-size: 3px; border-radius: 3px;
  background: var(--bad); opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.cmt--ok::before { background: var(--ok); }

/* מצב "אחרי הסריקה" */
.cmt.is-scanned { opacity: 1; filter: none; }
.cmt.is-scanned::before { opacity: 1; }
.cmt.is-scanned.cmt--flag, .cmt.is-scanned.cmt--spam {
  background: rgb(251 113 133 / .10);
  border-color: rgb(251 113 133 / .34);
}
.cmt.is-scanned.cmt--ok {
  background: rgb(52 211 153 / .07);
  border-color: rgb(52 211 153 / .28);
}
/* הבזק קצר בדיוק ברגע חציית הקרן */
.cmt.is-scanning {
  transform: scale(1.025);
  border-color: rgb(196 181 253 / .75);
  box-shadow: 0 0 0 1px rgb(196 181 253 / .35), 0 0 26px 2px rgb(139 124 255 / .30);
}
.cmt__av {
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13.5px; color: #fff;
  background: linear-gradient(135deg, #64748B, #475569);
}
.cmt--flag .cmt__av { background: linear-gradient(135deg, #FB7185, #E11D48); }
.cmt--spam .cmt__av { background: linear-gradient(135deg, #FBBF24, #D97706); }
.cmt__name { font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .92); }
.cmt__text { font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / .62); margin-block-start: 2px; }
.cmt__tag {
  margin-block-start: 9px; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700;
  background: rgb(251 113 133 / .18); color: #FDA4AF;
  /* מופיע רק אחרי שהתגובה עברה בפועל את קו הסריקה — המחלקה מוחלת ב-JS
     לפי המיקום האמיתי של הכרטיס, ולא לפי השהיה מחושבת מראש. */
  opacity: 0; transform: translateY(4px) scale(.9);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.cmt.is-scanned .cmt__tag { opacity: 1; transform: none; }
.cmt__tag svg { inline-size: 12px; block-size: 12px; }
.cmt--ok .cmt__tag { background: rgb(52 211 153 / .16); color: #6EE7B7; }

/* שבב "הקהל המוחרג" צף מתחת לזרם */
.feed-out {
  margin-block-start: 18px;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgb(139 124 255 / .16), rgb(232 121 201 / .10));
  border: 1px solid rgb(255 255 255 / .12);
  backdrop-filter: blur(8px);
}
.feed-out .ico {
  inline-size: 40px; block-size: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #A855F7);
}
.feed-out b { display: block; color: #fff; font-size: 14.5px; }
.feed-out small { color: rgb(255 255 255 / .6); font-size: 13px; }

/* ── 8. רצועת מרקיזה ─────────────────────────────────────────────────────── */
.strip { padding-block: 26px; overflow: hidden; border-block: 1px solid var(--line); }
.strip__row { display: flex; gap: 16px; inline-size: max-content; animation: marquee 46s linear infinite; }
.strip:hover .strip__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .strip__row { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

.strip__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--ink-3);
  font-size: 14.5px; white-space: nowrap;
}
.strip__item::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--bad); flex: none;
}
.strip__item--ok::before { background: var(--ok); }

/* ── 9. מספרים ענקיים ────────────────────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .figures { grid-template-columns: 1fr; } }

.figure {
  padding: clamp(28px, 4vw, 52px) clamp(14px, 2.4vw, 34px);
  border-inline-start: 1px solid var(--line);
}
.figure:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 800px) {
  .figure { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-inline: 0; }
  .figure:first-child { border-block-start: 0; }
}
.figure__num {
  font-size: clamp(52px, 8.5vw, 108px);
  font-weight: 800; line-height: .92; letter-spacing: -0.055em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
  direction: ltr;
}
html[dir="rtl"] .figure__num { justify-content: flex-end; }
.figure__num .unit {
  background: linear-gradient(120deg, var(--brand), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.figure__label { margin-block-start: 14px; font-size: 16px; color: var(--ink-3); }
/* Reputation-strip variant (numbers removed 24/08/2026 — see landing sources):
   a headline line in place of the big counter. .figure__num styles stay for
   when real figures return. */
.figure__title {
  font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--ink);
}

/* ── 10. מקטע הבעיה — כותרת דביקה, נקודות זולגות ─────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 44px; } }

.split__aside { position: sticky; top: 140px; align-self: start; }
@media (max-width: 960px) { .split__aside { position: static; } }

.points { display: grid; gap: clamp(28px, 3.4vw, 48px); }
.point { padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.point:first-child { border-block-start: 0; padding-block-start: 0; }
.point__n {
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  color: var(--brand); font-weight: 500; display: block; margin-block-end: 12px;
}
.point h3 { font-size: clamp(22px, 2.6vw, 30px); margin-block-end: 12px; letter-spacing: -0.03em; }
.point p { font-size: 17px; color: var(--ink-3); max-width: 52ch; }

/* ── 11. המנגנון — מקטע מוצמד ────────────────────────────────────────────── */
.mech { overflow: clip; }
/* המקטע ננעל למסך, ולכן הוא חייב להיכנס אליו במלואו. קודם הוא היה 1124px
   בתצוגה של 880px — 244 פיקסלים נשארו חתוכים מתחת לקיפול לאורך כל 2,288
   הפיקסלים של הגלילה, וזה מה שגרם לתחושה שהגלילה "נתקעת". עכשיו הגובה נגזר
   מהתצוגה והתוכן ממורכז בתוכה. */
.mech__inner {
  min-block-size: 100svh;
  display: grid; align-content: center;
  padding-block: clamp(44px, 5.6vh, 92px);
}
.mech__head { max-width: 640px; margin-block-end: clamp(28px, 4vh, 56px); }
.mech__head .sec-lede { margin-block-start: 16px; font-size: clamp(16px, 1.7vw, 19px); }
/* בתצוגות נמוכות מכווצים את הכותרת כדי שהמקטע יישאר נכנס למסך — רק כך
   ההצמדה מופעלת. אם בכל זאת לא נכנס, ה-JS נופל אוטומטית לרצף בלי נעילה. */
@media (max-height: 920px) {
  .mech__head { margin-block-end: clamp(18px, 2.6vh, 32px); }
  .mech__head .sec-title { font-size: clamp(27px, 3.4vw, 42px); }
  .mech__head .sec-lede { font-size: 16.5px; margin-block-start: 12px; }
  /* המסילה היא הגבוהה מבין שתי העמודות באנגלית (הפסקאות ארוכות יותר),
     והיא זו שהוציאה את המקטע מגבולות המסך והשביתה את ההצמדה. */
  .rail__step { padding-block-end: clamp(15px, 2.3vh, 34px); }
  .rail__step h3 { font-size: clamp(19px, 2vw, 24px); margin-block-end: 7px; }
  .rail__step p { font-size: 15.8px; line-height: 1.5; }
}
.mech__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5.5vw, 88px); align-items: center;
}
@media (max-width: 1000px) { .mech__grid { grid-template-columns: 1fr; gap: 48px; } }

/* מסילת השלבים — הדפוס של אתר משרוקית: פס מתמלא ונקודה זוהרת בקצה */
.rail { position: relative; padding-inline-start: 54px; margin: 0; list-style: none; }
html[dir="rtl"] .rail { padding-inline-start: 54px; }
.rail__line {
  position: absolute; inset-inline-start: 19px; inset-block: 10px 10px;
  inline-size: 3px; border-radius: 2px; background: var(--line-2);
}
.rail__fill {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 0%; border-radius: 2px;
  background: linear-gradient(to bottom, var(--brand-3), var(--brand));
}
.rail__fill::after {
  content: ""; position: absolute; inset-block-end: -7px; inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 14px; block-size: 14px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 20px 6px rgb(139 124 255 / .6);
}
.rail__step { position: relative; padding-block-end: clamp(22px, 3.4vh, 44px); }
.rail__step:last-child { padding-block-end: 0; }
.rail__dot {
  position: absolute; inset-inline-start: -54px; inset-block-start: 2px;
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: color .4s var(--ease-out), background-color .4s var(--ease-out),
              box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.rail__step.is-on .rail__dot {
  color: #fff; border-color: transparent; transform: scale(1.08);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 26px 5px rgb(139 124 255 / .45);
}
.rail__step h3 {
  font-size: clamp(21px, 2.3vw, 27px); margin-block-end: 10px; letter-spacing: -0.03em;
  transition: color .4s var(--ease-out);
}
.rail__step p { font-size: 16.5px; color: var(--ink-3); }
.rail__step:not(.is-on) h3 { color: var(--ink-3); }

/* הקונסולה — מה שקורה בפועל, נשלט בגלילה */
.console {
  border-radius: var(--r-xl);
  border: 1px solid rgb(255 255 255 / .10);
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.console__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px; border-block-end: 1px solid rgb(255 255 255 / .08);
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
}
.console__bar .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.console__bar .dot:first-child { background: #FF5F57; }
.console__bar .dot:nth-child(2) { background: #FEBC2E; }
.console__bar .dot:nth-child(3) { background: #28C840; }
.console__bar .state { margin-inline-start: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; color: var(--brand-2); }

.console__rows { display: grid; gap: clamp(7px, 1vh, 10px); padding: clamp(12px, 1.6vh, 16px) 18px; }
.crow {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: clamp(8px, 1.2vh, 11px) 12px; border-radius: var(--r-md);
  background: rgb(255 255 255 / .035);
  border: 1px solid rgb(255 255 255 / .06);
  transition: background-color .35s, border-color .35s, opacity .35s;
}
.crow__av {
  inline-size: 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #64748B, #475569);
}
.crow__text { font-size: 13.5px; color: rgb(255 255 255 / .58); line-height: 1.4; }
.crow__verdict {
  font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap; opacity: 0; transform: scale(.9);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.crow.is-done .crow__verdict { opacity: 1; transform: none; }
.crow[data-verdict="bad"] .crow__verdict { background: rgb(251 113 133 / .16); color: #FDA4AF; }
.crow[data-verdict="ok"]  .crow__verdict { background: rgb(52 211 153 / .14); color: #6EE7B7; }
.crow.is-done[data-verdict="bad"] { border-color: rgb(251 113 133 / .28); background: rgb(251 113 133 / .06); }
.crow.is-done[data-verdict="bad"] .crow__av { background: linear-gradient(135deg, #FB7185, #E11D48); }

.console__out {
  display: flex; align-items: center; gap: 13px;
  margin: 4px 18px 18px; padding: 15px 17px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgb(139 124 255 / .15), rgb(232 121 201 / .09));
  border: 1px solid rgb(255 255 255 / .12);
}
.console__out .ico {
  inline-size: 40px; block-size: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #A855F7);
}
.console__out b { display: block; color: #fff; font-size: 14.5px; }
.console__out small { color: rgb(255 255 255 / .58); font-size: 13px; }
.console__count {
  margin-inline-start: auto; font-size: 26px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: -.03em;
}

/* ── 12. טבלת השוואה ─────────────────────────────────────────────────────── */
.compare {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 40%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(11 11 22 / .13), transparent) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(11 11 22 / .13), transparent) right center / 13px 100% no-repeat scroll,
    var(--surface);
}
:root[data-theme="dark"] .compare {
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 40%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .5), transparent) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .5), transparent) right center / 13px 100% no-repeat scroll,
    var(--surface);
}
.compare table { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
.compare th, .compare td {
  padding: 17px 19px; text-align: start;
  border-block-end: 1px solid var(--line); font-size: 15.5px; vertical-align: top;
}
.compare thead th {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  background: var(--surface-2); border-block-end: 1px solid var(--line-2);
}
.compare thead th:last-child { color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 80%, var(--surface-2)); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-block-end: none; }
.compare tbody th { font-weight: 700; color: var(--ink); inline-size: 34%; }
.compare td { color: var(--ink-3); }
.compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.compare .yes { color: var(--ok); }
.compare .no { color: var(--ink-3); }
.compare .yes svg, .compare .no svg { inline-size: 16px; block-size: 16px; flex: none; }
.compare col.is-ours { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }

@media (max-width: 680px) {
  .compare { overflow: visible; background: none; border: 0; box-shadow: none; }
  .compare table { min-inline-size: 0; display: block; }
  .compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare tbody { display: grid; gap: 14px; }
  .compare tbody tr {
    display: block; padding: 18px 20px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  }
  .compare tbody th { display: block; inline-size: auto; padding: 0 0 14px; border-block-end: 1px solid var(--line); font-size: 16.5px; line-height: 1.4; }
  .compare tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-block-end: 1px solid var(--line); }
  .compare tbody tr td:last-child { border-block-end: 0; padding-block-end: 0; }
  .compare tbody td::before { content: attr(data-col); color: var(--ink-3); font-size: 14.5px; line-height: 1.35; }
  .compare tbody td:last-child::before { color: var(--brand); font-weight: 700; }
}

/* ── 13. בנטו של היכולות ─────────────────────────────────────────────────── */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
.bento__cell {
  grid-column: span 2;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
/* התאים הרחבים מקבלים פריסה אופקית — אייקון וכותרת על אותה שורה — אחרת
   806 פיקסלים עם שורת טקסט אחת נראים ריקים, וזו בדיוק ההרגשה שרצינו למנוע. */
.bento__cell:nth-child(1), .bento__cell:nth-child(4) {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 20px; align-content: start; align-items: center;
}
.bento__cell:nth-child(1) .bento__ico, .bento__cell:nth-child(4) .bento__ico {
  grid-row: 1; grid-column: 1; margin-block-end: 0;
}
.bento__cell:nth-child(1) h3, .bento__cell:nth-child(4) h3 {
  grid-row: 1; grid-column: 2; margin-block-end: 0; font-size: 23px;
}
.bento__cell:nth-child(1) p, .bento__cell:nth-child(4) p {
  grid-row: 2; grid-column: 1 / -1; margin-block-start: 18px; max-width: 60ch;
}
@media (max-width: 900px) {
  .bento__cell:nth-child(1), .bento__cell:nth-child(4) { display: flex; }
  .bento__cell:nth-child(1) .bento__ico, .bento__cell:nth-child(4) .bento__ico { margin-block-end: 20px; }
  .bento__cell:nth-child(1) h3, .bento__cell:nth-child(4) h3 { margin-block-end: 9px; font-size: 20px; }
  .bento__cell:nth-child(1) p, .bento__cell:nth-child(4) p { margin-block-start: 0; }
}

/* קצב משתנה במקום שש משבצות זהות */
.bento__cell:nth-child(1) { grid-column: span 4; }
.bento__cell:nth-child(2) { grid-column: span 2; }
.bento__cell:nth-child(3) { grid-column: span 2; }
.bento__cell:nth-child(4) { grid-column: span 4; }
.bento__cell:nth-child(5) { grid-column: span 3; }
.bento__cell:nth-child(6) { grid-column: span 3; }
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell, .bento__cell:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento__ico {
  inline-size: 44px; block-size: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  margin-block-end: 20px;
}
.bento__ico svg { inline-size: 22px; block-size: 22px; }
.bento__cell h3 { font-size: 20px; margin-block-end: 9px; letter-spacing: -0.025em; }
.bento__cell p { font-size: 16px; color: var(--ink-3); line-height: 1.55; }

/* ── 14. תמחור ───────────────────────────────────────────────────────────── */
.price {
  max-width: 580px; margin-inline: auto; position: relative;
  padding: clamp(34px, 4.4vw, 52px);
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  text-align: center;
  backdrop-filter: blur(10px);
}
/* טבעת זוהרת סביב הכרטיס */
.price::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgb(139 124 255 / .8), transparent 42%, rgb(232 121 201 / .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.price__ribbon {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 20px; border-radius: var(--r-pill);
  background: linear-gradient(120deg, #4F46E5, #A855F7);
  color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgb(124 58 237 / .8);
}
html[dir="rtl"] .price__ribbon { transform: translate(50%, -50%); }

.price__amount { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-block: 14px 8px; direction: ltr; }
.price__amount b { font-size: clamp(58px, 8vw, 82px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.price__amount span { font-size: 18px; color: var(--ink-3); font-weight: 600; }
.price__note { font-size: 16px; color: var(--ink-3); }

.price__list { list-style: none; padding: 0; margin-block: 30px; display: grid; gap: 13px; text-align: start; }
.price__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; font-size: 16px; color: var(--ink-2); }
.price__list svg { inline-size: 21px; block-size: 21px; color: var(--ok); margin-block-start: 2px; }
.price__fine { text-align: start; margin-block-start: 20px; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.price__fine a { color: var(--brand-2); }

/* ── 15. שאלות נפוצות ────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); box-shadow: var(--sh-md); }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; font-size: 17.5px; font-weight: 700;
  color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-inline-start: auto;
  inline-size: 11px; block-size: 11px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform .25s var(--ease-out), border-color .2s; flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--brand); }
.faq summary:hover { color: var(--brand); }
.faq__body { padding: 0 24px 22px; font-size: 16.5px; line-height: 1.66; color: var(--ink-3); }

/* ── 16. CTA מסכם ────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: clip; text-align: center; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 120% at 50% -10%, rgb(168 85 247 / .5), transparent 62%),
    radial-gradient(60% 100% at 15% 110%, rgb(236 72 153 / .35), transparent 60%),
    #0A0A16;
}
.cta h2 { color: #fff; font-size: clamp(30px, 5vw, 58px); letter-spacing: -0.04em; }
.cta p { margin: 22px auto 36px; max-width: 54ch; font-size: clamp(16.5px, 1.9vw, 20px); color: rgb(255 255 255 / .78); }
.cta .btn--primary { background: #fff; color: #14061F; box-shadow: 0 20px 50px -14px rgb(0 0 0 / .6); }
.cta .btn--primary:hover { color: #14061F; background: #fff; }
.cta .cta__fine { margin-block-start: 22px; font-size: 14.5px; color: rgb(255 255 255 / .58); }

/* ── 17. פוטר ────────────────────────────────────────────────────────────── */
.foot { border-block-start: 1px solid var(--line); background: var(--surface-2); padding-block: clamp(48px, 6vw, 76px) 34px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
@media (max-width: 780px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .foot__top { grid-template-columns: 1fr; } }
.foot .brand { color: var(--ink); }
.foot .brand__sub { color: var(--ink-3); }
.foot__blurb { margin-block-start: 16px; font-size: 15.5px; color: var(--ink-3); max-width: 42ch; }
.foot h4 { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-block-end: 16px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.foot ul a { font-size: 15.5px; color: var(--ink-3); text-decoration: none; }
.foot ul a:hover { color: var(--brand); text-decoration: underline; }
.foot__bar {
  margin-block-start: clamp(32px, 4vw, 52px); padding-block-start: 24px;
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: 14px; color: var(--ink-3);
}
.foot__bar .sep { margin-inline-start: auto; }

/* ── 18. חשיפה בגלילה ────────────────────────────────────────────────────── */
/* המחלקה .js נוספת ב-JS — בלי JS שום דבר לא מוסתר */
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal[data-d="1"].is-in { transition-delay: .09s; }
.js .reveal[data-d="2"].is-in { transition-delay: .18s; }
.js .reveal[data-d="3"].is-in { transition-delay: .27s; }

/* ── 19. תנועה מופחתת ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .feed__track, .strip__row { animation: none; }
  .cmt { opacity: 1; filter: none; }
  .cmt::before, .cmt__tag { opacity: 1; transform: none; }
  .feed { -webkit-mask-image: none; mask-image: none; }
}

/* ── 20. הדפסה ───────────────────────────────────────────────────────────── */
@media print {
  .nav, .cta, .hero__cta, .progress, .strip { display: none; }
  body, .ink { background: #fff !important; color: #000 !important; }
  .faq details { break-inside: avoid; }
  .faq__body { display: block !important; }
}