/* ============================================================
   ayfTech — Design System
   Concept: "תנועה מהימנה" / Editorial Trust in Motion
   Palette derived from the ayfTech logo.
   RTL-first, bilingual (HE/EN) via CSS logical properties.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --c-petrol:      #15506B;   /* primary — trust */
  --c-petrol-deep: #0E3B50;   /* dark sections */
  --c-petrol-900:  #092a3a;   /* deepest */
  --c-teal:        #57C1CC;   /* secondary — freshness / tech */
  --c-teal-ink:    #176e7a;   /* deep teal — AA-readable on light (≈5.6:1) */
  --c-amber:       #E5833A;   /* accent — energy / warmth */
  --c-amber-deep:  #c96e26;

  /* Neutrals */
  --c-cream:   #F4F8F9;       /* page background */
  --c-paper:   #ffffff;
  --c-ink:     #15272f;       /* body text */
  --c-ink-2:   #496069;       /* muted text */
  --c-ink-3:   #5b727b;       /* faint — AA-readable on white (≈5:1) */
  --c-line:    rgba(21, 80, 107, .12);
  --c-line-2:  rgba(21, 80, 107, .22);

  /* On-dark */
  --c-on-dark:      rgba(255, 255, 255, .94);
  --c-on-dark-soft: rgba(255, 255, 255, .70);
  --c-on-dark-line: rgba(255, 255, 255, .14);

  /* Type — one unified family (Rubik), hierarchy via weight/size */
  --font-display: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: .8125rem;
  --fs-small:   .9375rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.125rem, 1rem + .6vw, 1.375rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-display: clamp(2rem, 1.1rem + 4.6vw, 5.25rem);

  /* Spacing (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 9vw, 120px);
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1180px;

  /* Radius */
  --r-sm: 10px; --r: 16px; --r-lg: 26px; --r-pill: 999px;

  /* Shadows (tinted with petrol) */
  --sh-sm: 0 1px 2px rgba(21,80,107,.06), 0 2px 4px rgba(21,80,107,.05);
  --sh:    0 12px 28px -14px rgba(21,80,107,.22), 0 4px 10px rgba(21,80,107,.07);
  --sh-lg: 0 34px 64px -28px rgba(14,59,80,.40), 0 10px 24px -16px rgba(14,59,80,.25);
  --sh-amber: 0 10px 26px -10px rgba(229,131,58,.45);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .3s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; inset-block-start: -120px; inset-inline-start: 16px; z-index: 200;
  background: var(--c-petrol); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-weight: 700; box-shadow: var(--sh-lg); transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 14px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--c-petrol); }
.display { font-size: var(--fs-display); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--c-ink-2); line-height: 1.6; }
strong { font-weight: 700; color: inherit; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-teal-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  inline-size: 22px; block-size: 2px;
  background: var(--c-amber);
  border-radius: 2px;
}
:dir(rtl) .eyebrow { letter-spacing: .04em; }

/* ---------- Layout ---------- */
.wrap { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
section[id], [id]#top { scroll-margin-block-start: 88px; }
.section-head { max-inline-size: 640px; margin-block-end: var(--s-8); }
.section-head .h2 { margin-block: var(--s-3) var(--s-4); }
.section-head p { color: var(--c-ink-2); font-size: var(--fs-lead); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 26px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 1rem; line-height: 1;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap; min-block-size: 52px;
}
.btn svg { inline-size: 1.15em; block-size: 1.15em; }
.btn-primary { background: var(--c-petrol); color: #fff; box-shadow: var(--sh); }
.btn-primary:hover { background: var(--c-petrol-deep); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-accent { background: var(--c-amber); color: #2a1605; box-shadow: var(--sh-amber); }
.btn-accent:hover { background: var(--c-amber-deep); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--c-petrol); border: 1.5px solid var(--c-line-2); }
.btn-ghost:hover { border-color: var(--c-petrol); background: rgba(21,80,107,.04); transform: translateY(-2px); }
.btn-on-dark { background: #fff; color: var(--c-petrol); }
.btn-on-dark:hover { background: var(--c-amber); color: #2a1605; transform: translateY(-2px); }
.btn-block { inline-size: 100%; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), backdrop-filter var(--t);
}
.header__inner { display: flex; align-items: center; gap: var(--s-5); block-size: 76px; }
.header.scrolled { background: rgba(244,248,249,.82); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--c-line); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.brand img { block-size: 54px; inline-size: auto; max-inline-size: 180px; object-fit: contain; }
.brand__fallback { display: inline-flex; align-items: center; gap: 9px; }
.brand__fallback[hidden] { display: none; }
.brand__mark { block-size: 40px; inline-size: 40px; flex: none; }
.brand__type { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--c-petrol); letter-spacing: -.01em; }
.brand__type b { color: var(--c-teal-ink); font-weight: 700; }

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav a { padding: 10px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: .975rem; color: var(--c-ink-2); transition: color var(--t-fast), background var(--t-fast); position: relative; }
.nav a:hover { color: var(--c-petrol); background: rgba(21,80,107,.05); }
.nav .nav__cta, .nav .nav__cta:hover { color: #fff; }
.header__actions { display: flex; align-items: center; gap: var(--s-3); }

.lang-toggle { display: inline-flex; border: 1.5px solid var(--c-line-2); border-radius: var(--r-pill); overflow: hidden; }
.lang-toggle button { padding: 7px 12px; font-size: .85rem; font-weight: 700; color: var(--c-ink-2); transition: background var(--t-fast), color var(--t-fast); }
.lang-toggle button[aria-pressed="true"] { background: var(--c-petrol); color: #fff; }

.menu-btn { display: none; inline-size: 46px; block-size: 46px; border-radius: 12px; align-items: center; justify-content: center; color: var(--c-petrol); border: 1.5px solid var(--c-line-2); }
.menu-btn svg { inline-size: 24px; block-size: 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(128px, 18vh, 210px) var(--s-9); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.hero__copy { position: relative; z-index: 1; max-inline-size: 640px; }
.hero h1 { margin-block: var(--s-4) var(--s-5); }
.hero h1 .spark { color: var(--c-amber-deep); position: relative; white-space: nowrap; }
.hero .lead { margin-block-end: var(--s-7); max-inline-size: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero__clients { margin-block-start: var(--s-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.hero__clients-label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); position: relative; padding-inline-end: 34px; }
.hero__clients-label::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% - 24px); inline-size: 24px; block-size: 1px; background: var(--c-line-2); }
.hero__logos { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; min-block-size: 54px; }
.hero-logo { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 8px 16px; block-size: 54px; min-inline-size: 84px; display: grid; place-items: center; box-shadow: var(--sh-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.hero-logo:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.hero-logo img { max-block-size: 32px; max-inline-size: 108px; inline-size: auto; object-fit: contain; }

/* ---------- Services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.card {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-6); position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.card::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--c-teal), var(--c-amber)); transform: scaleX(0); transform-origin: inline-start; transition: transform var(--t) var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card__icon { inline-size: 56px; block-size: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(87,193,204,.14); color: var(--c-petrol); margin-block-end: var(--s-4); }
.card__icon svg { inline-size: 28px; block-size: 28px; }
.card h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; color: var(--c-petrol); margin-block-end: var(--s-2); }
.card p { color: var(--c-ink-2); font-size: var(--fs-small); }

/* ---------- Approach (dark band) ---------- */
.band { background: var(--c-petrol-deep); color: var(--c-on-dark); position: relative; overflow: hidden; }
.band .h2, .band h3 { color: #fff; }
.band .eyebrow { color: var(--c-teal); }
.band .section-head p { color: var(--c-on-dark-soft); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.value { padding: var(--s-6); border: 1px solid var(--c-on-dark-line); border-radius: var(--r-lg); background: rgba(255,255,255,.03); transition: background var(--t), transform var(--t); }
.value:hover { background: rgba(255,255,255,.06); transform: translateY(-4px); }
.value__num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--c-amber); display: inline-flex; align-items: center; gap: 8px; margin-block-end: var(--s-3); }
.value h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; margin-block-end: var(--s-2); }
.value p { color: var(--c-on-dark-soft); font-size: var(--fs-small); }

/* ---------- Work / Projects ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
/* מספר אי-זוגי של פרויקטים משאיר חור בשורה האחרונה. במקום להשאיר כרטיס
   בודד נצמד לצד, הוא נפרס על שתי העמודות וממורכז ברוחב עמודה — אותו פתרון
   שהגריד של .cards מיישם בעמודה האמצעית שלו. */
@media (min-width: 781px) {
  .work-grid > .proj:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-inline-size: calc(50% - var(--s-5) / 2);
    margin-inline: auto;
  }
}
.proj {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.proj:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.proj__head { display: flex; align-items: center; gap: var(--s-3); }
.proj__ico { inline-size: 46px; block-size: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c-petrol), var(--c-teal-ink)); }
.proj__ico svg { inline-size: 24px; block-size: 24px; }
.proj h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; color: var(--c-petrol); }
.proj p { color: var(--c-ink-2); font-size: var(--fs-small); flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.proj--live { border-color: rgba(229, 131, 58, .32); }
.proj__live-badge { margin-inline-start: auto; align-self: center; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--c-amber-deep); background: rgba(229, 131, 58, .12); border: 1px solid rgba(229, 131, 58, .3); padding: 3px 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; }
.proj__live-badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c-amber); }
@media (prefers-reduced-motion: no-preference) { .proj__live-badge::before { animation: livePulse 2.2s var(--ease) infinite; } }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
.proj__live-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .92rem; color: var(--c-amber-deep); text-decoration: none; transition: color var(--t) var(--ease); }
.proj__live-link::after { content: "←"; transition: transform var(--t) var(--ease); }
:root[dir="ltr"] .proj__live-link::after { content: "→"; }
.proj__live-link:hover { color: var(--c-petrol); }
.proj__live-link:hover::after { transform: translateX(-3px); }
:root[dir="ltr"] .proj__live-link:hover::after { transform: translateX(3px); }
.tag { font-size: .76rem; font-weight: 700; color: var(--c-teal-ink); background: rgba(87,193,204,.12); padding: 4px 11px; border-radius: var(--r-pill); }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); counter-reset: step; }
.step { position: relative; padding-block-start: var(--s-6); }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--c-petrol);
  position: absolute; inset-block-start: 0; inset-inline-start: 0; box-shadow: var(--sh);
}
.step::after { content: ""; position: absolute; inset-block-start: 22px; inset-inline-start: 46px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--c-line-2); }
.step:last-child::after { display: none; }
.step h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; margin-block: var(--s-4) var(--s-2); color: var(--c-petrol); }
.step p { color: var(--c-ink-2); font-size: var(--fs-small); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-info .h2 { margin-block: var(--s-3) var(--s-4); }
.contact-info > p { color: var(--c-ink-2); font-size: var(--fs-lead); margin-block-end: var(--s-6); }
.cinfo { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-block-start: 1px solid var(--c-line); }
.cinfo:first-of-type { border-block-start: none; }
.cinfo__ico { inline-size: 50px; block-size: 50px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(87,193,204,.14); color: var(--c-petrol); }
.cinfo__ico svg { inline-size: 24px; block-size: 24px; }
.cinfo .lbl { font-size: .85rem; color: var(--c-ink-3); }
.cinfo .val { font-weight: 800; color: var(--c-petrol); font-size: 1.1rem; direction: ltr; unicode-bidi: plaintext; }
.cinfo__note { font-size: .8rem; color: var(--c-on-dark-soft); margin-block-start: 4px; }
.cinfo a.val:hover { color: var(--c-amber-deep); }

.form-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--sh); }
.field { margin-block-end: var(--s-4); }
.field label { display: block; font-weight: 700; font-size: .9rem; color: var(--c-petrol); margin-block-end: var(--s-2); }
.field label .req { color: var(--c-amber-deep); }
.field input, .field textarea {
  inline-size: 100%; padding: 13px 16px; font: inherit; font-size: 1rem;
  background: var(--c-cream); border: 1.5px solid var(--c-line); border-radius: var(--r-sm);
  color: var(--c-ink); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-teal-ink); background: #fff; box-shadow: 0 0 0 4px rgba(87,193,204,.18); }
.field textarea { resize: vertical; min-block-size: 120px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d8542f; box-shadow: 0 0 0 4px rgba(216,84,47,.15); }
.field .err { color: #c0431f; font-size: .82rem; margin-block-start: 6px; min-block-size: 1em; display: none; }
.field .err.show { display: block; }
.hp { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; }
.form-note { font-size: .85rem; color: var(--c-ink-3); margin-block-start: var(--s-3); text-align: center; }
.form-status { border-radius: var(--r-sm); padding: 14px 16px; font-weight: 700; margin-block-end: var(--s-4); display: none; }
.form-status.ok { display: block; background: rgba(87,193,204,.15); color: var(--c-petrol); border: 1px solid var(--c-teal); }
.form-status.bad { display: block; background: rgba(216,84,47,.1); color: #b23e1c; border: 1px solid rgba(216,84,47,.4); }

/* ---------- Floating call FAB (mobile) ---------- */
.fab { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90; display: none; align-items: center; gap: 10px; background: var(--c-amber); color: #2a1605; font-weight: 800; padding: 14px 20px; border-radius: var(--r-pill); box-shadow: var(--sh-amber); }
.fab svg { inline-size: 22px; block-size: 22px; }

/* ---------- Footer ---------- */
.footer { background: var(--c-petrol-900); color: var(--c-on-dark-soft); padding-block: var(--s-8) var(--s-6); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); align-items: center; }
.footer .brand__type { color: #fff; font-size: 1.6rem; }
.footer .brand__type b { color: var(--c-teal); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__links a:hover { color: #fff; }
.footer__bottom { margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: .85rem; }

/* ---------- Decorative arc (the memorable thread) ---------- */
.arc { position: absolute; pointer-events: none; z-index: 0; opacity: .5; }

/* ---------- Scroll reveal (only hidden when JS is active) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: var(--s-3); }
.faq__item { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--t) var(--ease), border-color var(--t); }
.faq__item[open] { box-shadow: var(--sh); border-color: transparent; }
.faq__item summary { cursor: pointer; padding: var(--s-5); font-weight: 800; color: var(--c-petrol); font-size: 1.08rem; line-height: 1.4; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 400; color: var(--c-teal-ink); font-size: 1.7rem; line-height: 1; transition: transform var(--t) var(--ease); flex: none; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--c-ink-2); line-height: 1.75; }

/* ---------- AI advantage band ---------- */
.band--ai { background: linear-gradient(135deg, #0E3B50 0%, #15506B 52%, #114a55 100%); }
.band--ai .eyebrow { color: var(--c-amber); }
.ai-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-block-start: var(--s-8); }
.ai-point { text-align: center; padding: var(--s-4) var(--s-3); }
.ai-point__ico { inline-size: 62px; block-size: 62px; margin-inline: auto; margin-block-end: var(--s-4); border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--c-on-dark-line); color: var(--c-teal); }
.ai-point__ico svg { inline-size: 30px; block-size: 30px; }
.ai-point h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.18rem; color: #fff; margin-block-end: var(--s-2); }
.ai-point p { color: var(--c-on-dark-soft); font-size: var(--fs-small); line-height: 1.65; }
@media (max-width: 720px) { .ai-points { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Product Showcase (dark chapter, sticky) ----------
   A distinct chapter, not "the dark band component again": a fine hairline
   grid instead of the soft glow used in .band, and a light "screen" floating
   in the dark — the contrast between the two IS the depth cue. */
#bchinon, #peima, #veritu, #tvuna { scroll-margin-block-start: 88px; }

/* no overflow:hidden here — it would clip the sticky stage's containing block
   and silently break position:sticky further down the tree. The ::before grid
   texture is already inset:0 to this box, so it never needs clipping. */
.showcase { position: relative; background: var(--c-petrol-900); color: var(--c-on-dark); padding-block: var(--section-y); }
.showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
}
.showcase > * { position: relative; z-index: 1; }
.showcase__head { max-inline-size: 640px; margin-block-end: var(--s-9); }
.showcase__head .eyebrow { color: var(--c-teal); }
.showcase__head .h2 { color: #fff; margin-block-start: var(--s-3); }

/* default align-items:stretch is intentional here — it's what gives
   .showcase__visual the full row height its inner sticky stage needs */
.showcase__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); }
.showcase__steps { display: flex; flex-direction: column; }
.showcase__step { position: relative; padding-block: clamp(48px, 7vw, 96px); border-block-start: 1px solid var(--c-on-dark-line); }
.showcase__step:first-child { border-block-start: none; padding-block-start: 0; }
.showcase__num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22);
  margin-block-end: var(--s-3);
}
.showcase__step.is-active .showcase__num { color: var(--c-teal); -webkit-text-stroke: 0; }
.showcase__step-body h3 { font-family: var(--font-body); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.8rem); color: #fff; }
.showcase__step-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.showcase__tag { color: var(--c-teal); font-weight: 700; font-size: .95rem; margin-block: 4px var(--s-4); }
.showcase__desc { color: var(--c-on-dark-soft); font-size: var(--fs-lead); line-height: 1.65; margin-block-end: var(--s-5); max-inline-size: 52ch; }
.showcase .pillars { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: var(--s-5); }
.showcase .pill { font-size: .82rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--c-on-dark-line); padding: 6px 13px; border-radius: var(--r-pill); }

.showcase__badge { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--c-amber); background: rgba(229,131,58,.12); border: 1px solid rgba(229,131,58,.35); padding: 4px 11px; border-radius: var(--r-pill); }
.showcase__badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c-amber); }
@media (prefers-reduced-motion: no-preference) { .showcase__badge::before { animation: livePulse 2.2s var(--ease) infinite; } }

.showcase__more { border-block-start: 1px solid var(--c-on-dark-line); padding-block-start: var(--s-4); margin-block-end: var(--s-4); }
.showcase__more summary { cursor: pointer; font-weight: 800; color: var(--c-teal); list-style: none; display: flex; align-items: center; gap: 8px; }
.showcase__more summary::-webkit-details-marker { display: none; }
.showcase__more summary::after { content: "+"; margin-inline-start: auto; font-size: 1.5rem; line-height: 1; color: var(--c-teal); transition: transform var(--t) var(--ease); }
.showcase__more[open] summary::after { transform: rotate(45deg); }
.showcase__hl { margin-block-start: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.showcase__hl .hl { display: flex; gap: var(--s-3); align-items: baseline; }
.showcase__hl .hl b { flex: none; inline-size: 130px; color: #fff; font-weight: 800; font-size: .88rem; }
.showcase__hl .hl span { color: var(--c-on-dark-soft); font-size: .9rem; line-height: 1.6; }
@media (max-width: 560px) { .showcase__hl .hl { flex-direction: column; gap: 2px; } .showcase__hl .hl b { inline-size: auto; } }

.showcase__offer { display: flex; align-items: center; gap: 9px; inline-size: fit-content; max-inline-size: 100%; margin-block-end: var(--s-4); padding: 10px 15px; border-radius: var(--r-sm); background: rgba(229,131,58,.12); border: 1px solid rgba(229,131,58,.3); color: var(--c-amber); font-weight: 700; font-size: .92rem; line-height: 1.45; }
.showcase__offer svg { inline-size: 19px; block-size: 19px; flex: none; }

.showcase__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .92rem; color: var(--c-teal); text-decoration: none; transition: color var(--t) var(--ease); }
.showcase__link::after { content: "←"; transition: transform var(--t) var(--ease); }
:root[dir="ltr"] .showcase__link::after { content: "→"; }
.showcase__link:hover { color: #fff; }
.showcase__link:hover::after { transform: translateX(-3px); }
:root[dir="ltr"] .showcase__link:hover::after { transform: translateX(3px); }

/* sticky stage: one aspect-ratio box, four screens cross-fading inside it.
   .showcase__visual is a plain grid item that stretches to the steps column's
   full height (default align-items:stretch) — that tall box is what gives the
   inner sticky stage room to stay pinned while its siblings scroll past. */
.showcase__stage { position: sticky; inset-block-start: 108px; aspect-ratio: 1600 / 724; }
/* .showcase__frame also carries the shared .screen class (position:relative) —
   compound selector here so this absolute positioning reliably wins on
   specificity instead of depending on which rule happens to sit later in the
   file. Without it every frame renders in normal flow (all 4 stacked, each
   ~270px) instead of overlapping, and only the ones near the very top of
   that stack stay inside a normal viewport. */
.showcase__frame.screen { position: absolute; inset: 0; opacity: 0; transform: scale(.98); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.showcase__frame.is-active { opacity: 1; transform: scale(1); }
.showcase__frame img { aspect-ratio: auto; inline-size: 100%; block-size: 100%; }

@media (max-width: 980px) {
  .showcase__grid { grid-template-columns: 1fr; }
  /* DOM order keeps text right / visual left on desktop (2 columns); in a
     single mobile column that would bury every screenshot after all 4 text
     blocks, so here the visual moves back above the steps it illustrates. */
  .showcase__visual { order: -1; margin-block-end: var(--s-7); }
  .showcase__stage { position: static; }
}

/* ---------- Client / partner logos ---------- */
.logos-wrap { display: flex; flex-direction: column; gap: var(--s-7); }
.logos-group { text-align: center; }
.logos-label { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--c-ink-3); text-transform: uppercase; margin-block-end: var(--s-4); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-4); }
.logo-tile { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 14px 24px; block-size: 88px; min-inline-size: 120px; display: grid; place-items: center; box-shadow: var(--sh-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.logo-tile:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.logo-tile img { max-block-size: 54px; max-inline-size: 148px; inline-size: auto; object-fit: contain; }

/* ---------- Premium polish (depth, texture, light) ---------- */

/* film grain — subtle tactile, "expensive" surface */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* hero — precise engineering-grade texture: a faint blueprint dot-grid biased
   behind the copy column, fading out before it reaches the product visual so
   the two never compete. No illustration, no glow — the product is the art. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(21,80,107,.10) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 26% 42%, #000 8%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 70% at 26% 42%, #000 8%, transparent 78%);
}
:root[dir="ltr"] .hero::after {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 8%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 8%, transparent 78%);
}

/* ---------- Screen (shared "real product" frame — hero + showcase) ----------
   A neutral, realistic browser/app chrome: light toolbar regardless of the
   section behind it, crisp hairline border, flat shadow. No gloss, no glow. */
.screen {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: #eef3f4; border: 1px solid rgba(21,39,47,.10);
  box-shadow: 0 28px 56px -26px rgba(9,42,58,.38), 0 6px 16px -10px rgba(9,42,58,.16);
}
.screen__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: #eef3f4; border-block-end: 1px solid rgba(21,39,47,.08);
}
.screen__bar i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(21,39,47,.16); display: block; }
.screen__bar span { margin-inline-start: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--c-ink-3); }
.screen img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1600 / 724; object-fit: cover; object-position: top center; }

/* ---------- Hero visual — two real screens, stacked with quiet depth ----------
   Flat, no rotation: these screenshots carry real (small) UI text, and a
   rotated raster image gets resampled/anti-aliased soft — it read as a
   blurry photo instead of a crisp product screen. Depth comes from the
   offset + shadow + z-index stacking alone. */
.hero__visual { position: relative; inline-size: 100%; min-block-size: clamp(300px, 34vw, 460px); }
/* compound selector for the same reason as .showcase__frame.screen below —
   this happens to already win by source order today, but that's fragile;
   this makes it win on specificity instead, regardless of file order. */
.hero__shot.screen { position: absolute; inline-size: min(86%, 560px); transition: transform .5s var(--ease-out); }
.hero__shot--a { inset-inline-end: 0; inset-block-start: 6%; z-index: 2; }
.hero__shot--b {
  inset-inline-start: -4%; inset-block-end: 0; z-index: 1;
  inline-size: min(62%, 380px); filter: saturate(.96);
}
@media (min-width: 1400px) { .hero__shot--a { inset-inline-end: -4%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__shot--a { animation: heroShotInA .8s var(--ease-out) .15s backwards; }
  .hero__shot--b { animation: heroShotInB .8s var(--ease-out) .32s backwards; }
}
@keyframes heroShotInA { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroShotInB { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* button depth — gradient fill + inset highlight */
.btn-primary { background: linear-gradient(180deg, #1c6486, var(--c-petrol)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), var(--sh); }
.btn-primary:hover { background: linear-gradient(180deg, #1d5b79, var(--c-petrol-deep)); }
.btn-accent { background: linear-gradient(180deg, #ef9352, var(--c-amber)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--sh-amber); }
.btn-accent:hover { background: linear-gradient(180deg, #d6772d, var(--c-amber-deep)); }

/* dark bands — radial depth glow behind content */
.band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 65% at 85% -12%, rgba(87,193,204,.16), transparent 60%),
    radial-gradient(46% 55% at 10% 112%, rgba(229,131,58,.10), transparent 60%);
}
.band > .wrap { position: relative; z-index: 1; }

/* deeper, more luxurious card lift */
.card:hover, .proj:hover { box-shadow: 0 40px 72px -30px rgba(14,59,80,.45), 0 14px 30px -18px rgba(14,59,80,.28); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-inline-size: none; }
  .hero__clients { align-items: center; }
  .hero__clients-label { padding-inline-end: 0; }
  .hero__clients-label::after { display: none; }
  .hero__logos { justify-content: center; }
  .hero__visual { margin-block-start: var(--s-8); min-block-size: clamp(260px, 62vw, 380px); }
}
@media (max-width: 560px) {
  .hero__shot--a { inline-size: 82%; }
  .hero__shot--b { inline-size: 52%; }
}
@media (min-width: 901px) { .cards .card:last-child:nth-child(3n - 2) { grid-column: 2; } }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .work-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
}
@media (max-width: 720px) {
  .nav { display: none; }            /* lang toggle stays visible on mobile */
  .menu-btn { display: inline-flex; }
  .fab { display: inline-flex; }
  .field--row { grid-template-columns: 1fr; }
  .hero__trust { gap: var(--s-4) var(--s-5); }

  /* mobile nav drawer */
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; inset-block-start: 76px; inset-inline: 0;
    background: rgba(244,248,249,.98); backdrop-filter: blur(14px);
    padding: var(--s-4) var(--gutter) var(--s-6); gap: var(--s-2);
    box-shadow: var(--sh-lg); border-block-start: 1px solid var(--c-line);
  }
  .nav.open a { padding: 14px; font-size: 1.05rem; }
  .nav.open .nav__cta { display: inline-flex; margin-block-start: var(--s-3); }
}
@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- עוגן ההמשך בתחתית ההירו ----------
   לא חץ מקפץ (הקלישאה הרגילה): קו דק שנמשך כלפי מטה + שם הסעיף הבא, כך שהמבקר
   יודע לא רק ש"יש עוד" אלא מה בדיוק מחכה לו. בטיפוגרפיית ה-eyebrow של האתר —
   אלמנט שנראה חלק מהשפה הקיימת ולא ווידג'ט שהודבק. */
.hero__next {
  margin-block: var(--s-5) 0;
  /* fit-content + auto margins centers this regardless of the parent's
     text-align — it used to ride on .hero's old text-align:center, which
     the asymmetric layout removed, leaving it stranded at the section's
     edge instead of under the content. */
  inline-size: fit-content; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); text-decoration: none;
  /* לא .reveal בכוונה: אלמנט שנועד להגיד "יש המשך" לא יכול לחכות לגלילה כדי
     להופיע. במקום המשקיף הוא מקבל כניסה משלו, אחרונה בתור של ההירו. */
  animation: heroNextIn .6s var(--ease-out) .46s backwards;
}
@keyframes heroNextIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__next-rule {
  inline-size: 1px; block-size: 32px; border-radius: 1px; position: relative; overflow: hidden;
  background: linear-gradient(to bottom, transparent, var(--c-line-2) 34%, var(--c-teal-ink));
  transition: block-size .25s ease;
}
/* טיפת-אור שיורדת לאורך הקו — רומזת על כיוון בלי להקפיץ שום דבר */
.hero__next-rule::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 13px;
  background: linear-gradient(to bottom, transparent, var(--c-amber));
  animation: heroNextDraw 3s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes heroNextDraw {
  0%, 10%   { inset-block-start: -15px; opacity: 0; }
  28%       { opacity: 1; }
  72%, 100% { inset-block-start: 32px; opacity: 0; }
}
.hero__next-label {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3);
  transition: color .2s ease;
}
:dir(rtl) .hero__next-label { letter-spacing: .04em; }
.hero__next:hover .hero__next-label { color: var(--c-petrol); }
.hero__next:hover .hero__next-rule { block-size: 40px; }
.hero__next:focus-visible { outline: 2px solid var(--c-teal-ink); outline-offset: 8px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .hero__next { animation: none; }
  .hero__next-rule::after { animation: none; opacity: 0; }
  .hero__next-rule, .hero__next-label { transition: none; }
}

/* הצצה: במסך צר מקצרים את ריפוד ההירו כדי שתפר הסעיף הבא ייכנס לתוך המסך
   הראשון. אלה שני המספרים היחידים שקובעים כמה "מציץ" — מכאן מכווננים. */
@media (max-width: 720px) {
  .hero { padding-block: clamp(80px, 11vh, 120px) var(--s-4); }
  .hero__next { margin-block-start: var(--s-5); }
  .hero__next-rule { block-size: 30px; }
  /* הסעיף שצמוד להירו לא צריך את מלוא האוויר העליון — ההירו כבר נתן אותו,
     והקיצור הזה הוא מה שמכניס את הכותרת «מה כבר בנינו» לתוך המסך הראשון. */
  .hero + .section { padding-block-start: var(--s-6); }
  @keyframes heroNextDraw {
    0%, 10%   { inset-block-start: -15px; opacity: 0; }
    28%       { opacity: 1; }
    72%, 100% { inset-block-start: 30px; opacity: 0; }
  }
}

/* ---------- Portfolio imagery ----------------------------------------------
   צילום מסך גולמי בתוך כרטיס נראה כמו קובץ שהודבק. כאן הוא מקבל מסגרת של
   *מסך*: חיתוך מיושר-לראש (השורה העליונה של כל מערכת היא מה שמזהה אותה),
   קו-שיער, נגיעת אור בקצה העליון וצל פנימי בתחתית. שני הכרטיסים שאין להם
   צילום לא מקבלים קופסה אפורה אלא את שרטוט ההירו של האתר עצמו — כך שהיעדר
   התצוגה נקרא כהחלטה על פרטיות ולא כחור. */
.proj { padding: 0; overflow: hidden; }
.proj__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }

.proj__shot {
  /* היחס נגזר מהצילומים הרחבים ביותר (1600×724). ב-16/10 הקודם object-fit:cover
     חתך ~14% מכל צד — ושם בדיוק יושב תפריט הצד, שהוא מה שמזהה את המערכת.
     עכשיו הרוחב אף פעם לא נחתך; צילומים גבוהים יותר נחתכים מלמטה, והם
     ממילא מיושרים-לראש. */
  position: relative; aspect-ratio: 1600 / 724; overflow: hidden;
  background: var(--c-cream); border-block-end: 1px solid var(--c-line);
}
.proj__shot img {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: top center; display: block;
  transition: transform .55s var(--ease), opacity .35s var(--ease);
}
/* תמונה שנייה מונחת מעל ומתחלפת בריחוף — שני מסכים לפרויקט בלי קרוסלה,
   בלי נקודות ובלי JS. במגע פשוט לא קורה כלום והראשונה נשארת. */
.proj__shot img + img { opacity: 0; }
.proj:hover .proj__shot img { transform: scale(1.045); }
.proj:hover .proj__shot img + img { opacity: 1; }
/* נגיעת אור עליונה + כהות עדינה בתחתית — מה שגורם לזה להיקרא כמסך */
.proj__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 14%),
    linear-gradient(0deg, rgba(21,39,47,.10), transparent 22%);
}

/* כרטיס ללא צילום — שרטוט ההירו, לא מציין מקום */
.proj__shot--private { background: linear-gradient(150deg, #eef5f7, #e3eef1 62%, #dfeaee); }
.proj__shot--private::before {
  content: ""; position: absolute; inset: 0;
  background: url(../img/hero-bg.webp?v=2) center / cover no-repeat;
  opacity: .72; mix-blend-mode: multiply;
}
/* ויניה עדינה — בלעדיה הרצועה נקראת כשטח ריק ולא כמרקם מכוון */
.proj__shot--private::after {
  background:
    radial-gradient(ellipse 76% 70% at 50% 46%, transparent 40%, rgba(21,80,107,.09)),
    linear-gradient(180deg, rgba(255,255,255,.4), transparent 18%);
}
.proj__private {
  position: absolute; inset-block-end: 14px; inset-inline-start: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--c-petrol); background: rgba(255,255,255,.86);
  border: 1px solid var(--c-line-2); border-radius: var(--r-pill); padding: 5px 12px;
  backdrop-filter: blur(3px);
}
.proj__private svg { inline-size: 13px; block-size: 13px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .proj__shot img { transition: none; }
  .proj:hover .proj__shot img { transform: none; }
}

/* ---------- "נחזור אליכם" — כפתור צף -----------------------------------
   מוצג בדסקטופ בלבד. בנייד כבר יש .fab לחיוג ישיר, ושם חיוג עדיף על טופס —
   הקהל מתקשר. שני כפתורים צפים באותו מסך זה עומס, לא הזדמנות.
   הפאנל נפתח מתוך הכפתור עצמו (transform-origin בפינה) ולא כמודאל שמחשיך
   את הדף: זו בקשה קטנה, ואסור שתיראה כמו חסימה. */
.cb { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 92; display: none; }
@media (min-width: 721px) { .cb { display: block; } }

.cb__toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--c-petrol); color: #fff; border: 0; border-radius: var(--r-pill);
  padding: 13px 20px; font: inherit; font-weight: 700; font-size: .93rem;
  box-shadow: 0 14px 34px -12px rgba(21, 80, 107, .55);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.cb__toggle svg { inline-size: 19px; block-size: 19px; }
.cb__toggle:hover { background: var(--c-petrol-deep); transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(21,80,107,.6); }
.cb__toggle:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 3px; }
.cb.is-open .cb__toggle { opacity: 0; pointer-events: none; }

.cb__panel {
  position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 306px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 22px 22px 18px; box-shadow: 0 28px 60px -22px rgba(21, 80, 107, .45);
  transform-origin: 100% 100%;
  animation: cbIn .26s cubic-bezier(.2, .9, .3, 1);
}
:root[dir="ltr"] .cb__panel { transform-origin: 0 100%; }
@keyframes cbIn { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }

.cb__x {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  inline-size: 28px; block-size: 28px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--c-ink-3); font-size: .82rem; line-height: 1;
}
.cb__x:hover { background: var(--c-cream); color: var(--c-ink); }
.cb__title { font-weight: 800; font-size: 1.06rem; color: var(--c-petrol); margin: 0 0 3px; }
.cb__sub   { font-size: .84rem; color: var(--c-ink-2); margin: 0 0 15px; }
.cb__lbl   { display: block; font-size: .76rem; font-weight: 700; color: var(--c-ink-3); margin-block-end: 5px; }
.cb__in {
  inline-size: 100%; padding: 12px 14px; font: inherit; font-size: .97rem;
  border: 1px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-cream); color: var(--c-ink);
}
.cb__in:focus { outline: 2px solid var(--c-teal-ink); outline-offset: 1px; border-color: transparent; }
.cb__hp { position: absolute; inset-inline-start: -9999px; opacity: 0; }
.cb__send {
  inline-size: 100%; margin-block-start: 10px; padding: 12px; cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: var(--c-amber); color: #fff;
  font: inherit; font-weight: 800; transition: background var(--t) var(--ease);
}
.cb__send:hover { background: var(--c-amber-deep); }
.cb__send[disabled] { opacity: .6; cursor: default; }
.cb__msg { margin: 10px 0 0; font-size: .84rem; min-block-size: 1.2em; color: var(--c-teal-ink); }
.cb__msg.bad { color: #b23e1c; }
.cb.is-done .cb__panel { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cb__panel { animation: none; }
  .cb__toggle { transition: none; }
  .cb__toggle:hover { transform: none; }
}