/* ============================================================================
   lab.css — שכבת-העיצוב המשותפת למעבדת דפי-הנחיתה (הפורטל).
   נטענת אחרי kit.css — מרחיבה את אותם טוקנים. compositor-only בלבד.
   ============================================================================ */
body.lab { overflow-y: auto; overflow-x: hidden; min-height: 100dvh; }
body.lab.snap { overflow-y: hidden; }
img { max-width: 100%; }

/* —— כפתורים —— */
.l-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-impact); font-size: var(--fs-lg); font-weight: 700; letter-spacing: .01em;
  color: #1a1205; background: linear-gradient(135deg, #FFE08A, #F5B83D 55%, #D99A1E);
  border: none; border-radius: var(--r-pill); padding: 16px 30px; cursor: pointer;
  box-shadow: 0 12px 34px rgba(245,184,61,.34), inset 0 1px 1px rgba(255,255,255,.6);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); text-decoration: none; }
.l-cta:active { transform: scale(.97); }
.l-cta.block { width: 100%; }
.l-ghost { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600;
  font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.22); padding-bottom: 2px; }
.l-ghost:hover { color: var(--blue-300); }

/* —— שורת-אמון מיקרו —— */
.l-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.l-trust b { color: var(--gold-bright); font-family: var(--font-impact); font-weight: 400; }
.l-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }

/* —— טיפוגרפיה —— */
.l-display { font-family: var(--font-impact); font-size: var(--fs-4xl); line-height: 1.02; text-wrap: balance; }
.l-eyebrow { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300); }
.l-eyebrow.gold { color: var(--gold-bright); }
.l-lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--fg); font-weight: 500; text-wrap: pretty; }
.l-body { font-size: var(--fs-base); line-height: 1.72; color: var(--muted); text-wrap: pretty; }
.l-gold { color: var(--gold-bright); }
.l-accent { color: var(--blue-300); }

/* —— reveal (compositor: transform+opacity בלבד) —— */
.rv { opacity: 0; transform: translateY(20px); }
.rv.in { animation: lRv .7s var(--ease) both; }
.rv.d1 { animation-delay: .08s; } .rv.d2 { animation-delay: .16s; } .rv.d3 { animation-delay: .24s; } .rv.d4 { animation-delay: .32s; }
@keyframes lRv { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv, .rv.in { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* —— כרטיסים —— */
.l-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--sh2); }
.l-card.glow { border-color: rgba(var(--glow-rgb),.4); box-shadow: 0 0 0 1px rgba(var(--glow-rgb),.2), var(--sh2); }

/* —— באדג' —— */
.l-badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 800;
  color: var(--gold-bright); background: rgba(245,184,61,.1); border: 1px solid rgba(245,184,61,.36);
  border-radius: var(--r-pill); padding: 6px 16px; }
.l-badge.blue { color: var(--blue-300); background: rgba(var(--glow-rgb),.12); border-color: rgba(var(--glow-rgb),.36); }

/* —— מחיר (LTR-isolate, מונע "490ש") —— */
.pnum { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: var(--font-impact); }

/* —— רשימת-כלול —— */
.l-inc { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.l-inc:last-child { border-bottom: none; }
.l-inc .ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245,184,61,.16); color: var(--gold-bright); font-weight: 900; font-size: 13px; margin-top: 1px; }
.l-inc .txt { font-size: var(--fs-base); line-height: 1.45; }
.l-inc .txt b { color: var(--fg); } .l-inc .txt span { color: var(--dim); font-size: var(--fs-sm); }

/* —— CTA דביק תחתון —— */
.l-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--bg) 62%, transparent); display: flex; justify-content: center;
  transform: translateY(120%); transition: transform .4s var(--ease); pointer-events: none; }
.l-sticky.show { transform: none; pointer-events: auto; }
.l-sticky .l-cta { max-width: 520px; width: 100%; }

/* —— לוגו-בר עליון —— */
.l-top { position: fixed; top: 0; inset-inline: 0; z-index: 30; height: calc(52px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: center; padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(6,8,15,.9), transparent); pointer-events: none; }
/* גדלי הלוגו — היו ב-<style> של index.html (לא ב-kit.css), אז חובה להגדיר כאן */
.l-top .brand-lock { position: static; transform: none; pointer-events: auto; display: flex; align-items: center; gap: 3px; text-decoration: none; }
.l-top .bl-galaxy { height: 34px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(80,120,255,.35)); }
.l-top .bl-text { height: 30px; width: auto; display: block; transform: translateY(2px); }

/* —— רקע-סקשן —— */
.l-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.l-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,15,.35), rgba(6,8,15,.72)); }
.l-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.l-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,8,15,.3) 0%, rgba(6,8,15,.55) 55%, rgba(6,8,15,.92) 100%); }

/* —— מיכל —— */
.l-wrap { width: 100%; max-width: 620px; margin-inline: auto; padding-inline: var(--s5); }
.l-center { text-align: center; }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s5); }