/* עיצוב האתר.
 *
 * הופרד מ-index.html כשנוסף דף שני: שתי עותקים של אותו
 * עיצוב נפרדים ביום שבו מתקנים באחד בלבד.
 */

/* ═══ הפלטה ═══════════════════════════════════════════════
   נגזרת מאייקון האפליקציה: נייבי, כתום ופלדה. הכתום הוא
   הצבע היחיד שהדף מרשה לעצמו — כל מקום שהוא מופיע בו הוא
   מקום שהעין אמורה לעצור בו. */
:root{
  --navy-hi:#16233D; --navy:#0E1A30; --navy-lo:#070E1C;
  --paper:#FFFFFF; --paper-2:#F4F7FB; --paper-3:#E9EFF7;
  --ink:#0C1724; --ink-2:#48596F; --ink-3:#7E90A8;
  --line:#DEE6F0;
  --orange:#F79009; --orange-2:#B45309; --orange-wash:#FEF3E2;
  --blue:#1668E3;
  --steel:#AFBECE;
  --on-dark:#EAF1FA; --on-dark-2:#93A9C4;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.7 "Rubik","Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; letter-spacing:-.025em; line-height:1.15}
p{margin:0}
a{color:inherit}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
section{padding:92px 0}
.eyebrow{
  display:inline-block; font-size:0.8125rem; font-weight:800; letter-spacing:.08em;
  color:var(--orange-2); margin-bottom:14px;
}
h2{font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800}
.lead{font-size:clamp(1.0625rem,1.6vw,1.1875rem); color:var(--ink-2); max-width:62ch; margin-top:16px}

/* ═══ כפתורים ═════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:11px; border:1px solid transparent;
  font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .14s ease, background .14s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-main{background:var(--orange); color:#1A1206; box-shadow:0 10px 26px -12px rgba(247,144,9,.75)}
.btn-main:hover{background:#FFA524}
.btn-line{background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.26)}
.btn-line:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:9px 16px; font-size:0.9062rem; border-radius:9px}

/* ═══ הכותרת ══════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,26,48,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* flex-wrap ולא עוד: ברוחב רגיל הסרגל לעולם אינו נשבר, אבל
   בטקסט מוגדל פי 1.75 על מסך טלפון הכפתורים רחבים מהמסך —
   ובלי שבירה הם היו דוחפים גלילה אופקית לכל הדף */
.nav-in{display:flex; align-items:center; gap:10px; min-height:66px; padding:8px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--on-dark)}
.mark{width:34px; height:34px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text b{font-size:1.125rem; font-weight:800; letter-spacing:-.02em}
/* השיוך לחברת האם — קטן ונסוג, ולא מתחרה בשם המוצר */
.byline{font-size:0.625rem; font-weight:500; letter-spacing:.02em; color:var(--on-dark-2); white-space:nowrap}
.byline-m{
  font-weight:800;
  background:linear-gradient(135deg,#38bdf8,#2dd4bf,#4ade80);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-cta{margin-inline-start:auto; display:flex; gap:8px; align-items:center}
.nav-link{color:var(--on-dark-2); text-decoration:none; font-size:0.9375rem; font-weight:600; padding:8px 12px}
.nav-link:hover{color:var(--on-dark)}

/* ═══ הירו ════════════════════════════════════════════════
   מפת רחובות צפופה ברקע, ועליה שלושה קווי חלוקה מודגשים.
   זה בדיוק מה שהמערכת עושה: לוקחת עיר שלמה ומוציאה ממנה
   את הקווים של מחר. */
.hero{position:relative; background:var(--navy); color:var(--on-dark); overflow:hidden}
.hero-map{position:absolute; inset:0; z-index:0}
.hero-map svg{width:100%; height:100%; display:block}
.hero-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 72% 18%, rgba(43,123,234,.20), transparent 70%),
    linear-gradient(to left, rgba(14,26,48,.30) 0%, rgba(14,26,48,.92) 60%, var(--navy) 100%);
}
/* padding-block ולא padding: האלמנט נושא גם את .wrap, וקיצור
   שמגדיר את ארבעת הצדדים מוחק ממנה את הריפוד האופקי — הכותרת
   נצמדת לקצה המסך בנייד */
.hero-in{position:relative; z-index:2; padding-block:88px 96px}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(2.125rem,5.2vw,3.75rem); font-weight:800}
.hero h1 .hl{
  background:linear-gradient(120deg,var(--orange),#FFC861);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{color:var(--on-dark-2); max-width:54ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-note{display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; font-size:0.9062rem; color:var(--on-dark-2)}
.hero-note span{display:flex; align-items:center; gap:7px}
.tick{width:17px; height:17px; color:var(--orange); flex:none}

/* ── רחובות וקווים ── */
.street{fill:none; stroke:#1B2941; stroke-width:4}
.block{fill:#14223A; opacity:.5}
.route-base{fill:none; stroke:#0B1526; stroke-width:26; stroke-linecap:round}
.route-top{fill:none; stroke:#3B4F6E; stroke-width:18; stroke-linecap:round}
.route-live{
  fill:none; stroke:var(--orange); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:22 16; animation:crawl 2.4s linear infinite;
}
@keyframes crawl{to{stroke-dashoffset:-38}}

.pin-body{fill:var(--orange)}
.pin-dot{fill:#fff}
.ping{fill:none; stroke:var(--orange); stroke-width:2.5; opacity:0; animation:ping 6s ease-out infinite}
@keyframes ping{0%{r:13;opacity:.75} 22%{r:40;opacity:0} 100%{r:40;opacity:0}}

.cyl-b{fill:var(--steel)} .cyl-t{fill:#E8EEF6}

/* משאיות — offset-path רץ על ה-compositor, בלי רינדור מחדש */
.truck{offset-rotate:auto; animation:drive linear infinite}
@keyframes drive{from{offset-distance:0%} to{offset-distance:100%}}

@media (prefers-reduced-motion:reduce){
  .route-live,.ping,.truck,.float{animation:none}
  .truck{offset-distance:45%}
}

/* ═══ הטלפון ══════════════════════════════════════════════ */
.phone{
  width:306px; margin-inline-start:auto; position:relative;
  border-radius:40px; padding:11px; background:#0A1324;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95);
}
.screen{border-radius:30px; overflow:hidden; background:#F2F5FA; height:574px; display:flex; flex-direction:column}
.sc-top{background:linear-gradient(165deg,var(--navy-hi),var(--navy)); color:#fff; padding:15px 16px 14px}
.sc-row{display:flex; justify-content:space-between; font-size:11.5px; color:#8FA8C4}
.sc-name{font-size:17px; font-weight:800; margin:5px 0 10px}
.sc-bar{height:6px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden}
.sc-bar i{display:block; height:100%; width:37%; border-radius:4px; background:var(--orange)}
.sc-body{flex:1; overflow:hidden; padding:11px; display:flex; flex-direction:column; gap:9px}
.stop{background:#fff; border-radius:12px; padding:11px 12px; box-shadow:0 1px 2px rgba(12,23,36,.07)}
.stop.done{opacity:.55}
.stop-h{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800}
.stop-addr{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.stop-note{font-size:11px; color:var(--orange-2); background:var(--orange-wash); border-radius:6px; padding:4px 7px; margin-top:6px}
.stop-f{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap}
.pill{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--paper-3); color:var(--ink-2)}
.pill.pay{background:#E2F5EC; color:#0B7A4B}
.vip{font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:5px; background:var(--orange); color:#1A1206}
.sc-nav{display:flex; background:#fff; border-top:1px solid var(--line); padding:9px 0 13px}
.sc-nav div{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:9.5px; font-weight:700; color:var(--ink-3);
}
.sc-nav svg{width:17px; height:17px}
.sc-nav .on{color:var(--blue)}

/* כרטיס צף — התכונה שאין לאף אחד אחר, ולכן היא יוצאת מהמסך
   במקום להתחבא בתוכו */
.float{
  position:absolute; inset-inline-start:-62px; bottom:72px; width:242px;
  background:#fff; color:var(--ink); border-radius:13px; padding:13px 14px;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.65);
  animation:rise 5.5s ease-in-out infinite;
}
@keyframes rise{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
.float-top{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:var(--orange-2)}
.float b{display:block; font-size:17px; margin-top:7px}
.float small{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.float-row{display:flex; gap:6px; margin-top:9px}

/* ═══ בלוקים ══════════════════════════════════════════════ */
.pain-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px}
.pain{background:var(--paper-2); border-radius:var(--r); padding:24px}
.pain q{display:block; font-size:1.1875rem; font-weight:800; margin-bottom:9px}
.pain q::before,.pain q::after{content:none}
.pain p{font-size:0.9688rem; color:var(--ink-2)}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px}
.step{position:relative; padding-top:36px}
.step::before{
  content:attr(data-n); position:absolute; top:0; inset-inline-start:0;
  width:27px; height:27px; border-radius:50%;
  background:var(--orange); color:#1A1206;
  font-size:0.8125rem; font-weight:800; display:grid; place-items:center;
}
.step::after{
  content:''; position:absolute; top:13px; inset-inline-start:35px; inset-inline-end:-20px;
  height:2px; background:linear-gradient(to left,var(--line),transparent);
}
.step:last-child::after{display:none}
.step h3{font-size:1.125rem; font-weight:800; margin-bottom:7px}
.step p{font-size:0.9375rem; color:var(--ink-2)}

.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
/* אייקון לכל יכולת במקום אותו וי שמונה פעמים. וי מסמן
   "קיים" — הוא אינו אומר דבר על מה שקיים, ושמונה כאלה זה
   לפני הכל שמונה צורות זהות שהעין מדלגת עליהן. */
.feat-ic{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(150deg, rgba(247,144,9,.17), rgba(247,144,9,.07));
  border:1px solid rgba(247,144,9,.22);
  color:var(--orange-2);
}
.feat-ic svg{width:23px; height:23px}
.feat h3{font-size:1.0312rem; font-weight:800; margin-bottom:8px}
.feat p{font-size:0.9062rem; color:var(--ink-2)}
.ic{width:17px; height:17px; color:var(--orange); flex:none}

/* בהיר, מאותה סיבה בדיוק: .apps שלפניו כהה. מדרג עדין בין
   שני גוונים כהים אינו מעבר — הוא שני קטעים שנראים כאחד. */
.edge{background:var(--paper-2)}
.edge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
.edge .card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px;
}
.edge .num{font-size:0.7812rem; font-weight:800; color:var(--orange-2); letter-spacing:.08em}
.edge h3{font-size:1.25rem; font-weight:800; margin:10px 0 9px}
.edge .card p{font-size:0.9375rem; color:var(--ink-2)}

.price-box{margin-top:36px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.price-row{
  display:grid; grid-template-columns:170px 1fr 120px; gap:18px; align-items:center;
  padding:19px 22px; border-bottom:1px solid var(--line);
}
.price-row:last-child{border-bottom:0}
.price-row b{font-size:1.0312rem}
.price-row > span:first-of-type{font-size:0.9375rem; color:var(--ink-2)}
.price-tag{
  justify-self:end; font-size:0.7812rem; font-weight:800;
  background:var(--orange-wash); color:var(--orange-2);
  padding:5px 11px; border-radius:20px; white-space:nowrap;
}

/* ═══ תמיכה ════════════════════════════════════ */
.sup-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:18px; margin-top:38px; align-items:start}
.sup-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px}
.sup-card h3{font-size:1.1875rem; font-weight:800; margin-bottom:16px}
.sup-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line)}
.sup-row:last-of-type{border-bottom:0}
.sup-row span{font-size:0.9375rem; color:var(--ink-2)}
.sup-row b{font-size:1rem; font-weight:800; white-space:nowrap}
.sup-row b.off{color:var(--ink-3); font-weight:700}
.sup-fine{margin-top:16px; font-size:0.875rem; color:var(--ink-3); line-height:1.6}
.sup-ch{display:flex; flex-direction:column; gap:14px}
.sup-item{display:flex; gap:13px; align-items:flex-start}
.sup-item svg{width:19px; height:19px; color:var(--orange); flex:none; margin-top:3px}
.sup-item b{display:block; font-size:0.9688rem; font-weight:800}
.sup-item small{display:block; font-size:0.8438rem; color:var(--ink-3); font-weight:400; margin-top:2px}

.tier-meta{border-top:1px solid var(--line); margin-top:4px; padding-top:13px; display:flex; flex-direction:column; gap:7px}
.tier-meta div{display:flex; justify-content:space-between; gap:10px; font-size:0.875rem; color:var(--ink-2)}
.tier-meta b{font-weight:800; color:var(--ink); white-space:nowrap; flex:none}
.tier-price b.ask{font-size:1.5rem; letter-spacing:-.01em}
.addon-price.ask{font-size:0.875rem; color:var(--orange-2)}
.addon-free{justify-self:end; font-size:0.7812rem; font-weight:800; background:var(--orange-wash); color:var(--orange-2); padding:5px 11px; border-radius:20px; white-space:nowrap}
/* מחיר מבצע מקישור הפניה — מופיע רק אחרי שהקוד אומת מול השרת */
.offer{
  margin:0 0 26px; padding:16px 20px;
  border:1px solid var(--orange); border-radius:var(--r);
  background:var(--orange-wash); font-size:0.9688rem; line-height:1.6;
}
.offer b{display:block; font-size:1.0625rem; margin-bottom:3px}
.tier-was{
  align-self:baseline; font-size:1.0625rem; font-weight:700;
  color:var(--ink-3); text-decoration:line-through; letter-spacing:0;
}

.sub-h{font-size:1.375rem; font-weight:800; margin-top:52px}
.sub-p{font-size:0.9688rem; color:var(--ink-2); margin-top:9px; max-width:62ch}

.final{background:linear-gradient(165deg,var(--navy-hi),var(--navy) 55%,var(--navy-lo)); color:var(--on-dark); text-align:center}
.final .lead{color:var(--on-dark-2); margin-inline:auto}
.final-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.consent{margin-top:18px; font-size:0.8438rem; color:var(--on-dark-2); line-height:1.7}
.consent a{color:var(--on-dark); text-decoration:underline; text-underline-offset:3px}
.contact{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:0.9062rem; color:var(--on-dark-2)}
.contact a{color:var(--on-dark)}

footer{background:var(--navy-lo); color:var(--on-dark-2); padding:32px 0; font-size:0.875rem}
.foot-in{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
.foot-links a{text-decoration:none; opacity:.8}
.foot-links a:hover{opacity:1}


/* ═══ המוקד הווירטואלי ═══════════════════════════════════
   ארבעה ערוצים שנכנסים לאותו מקום. הקווים מתכנסים למרכז,
   כי זו כל הטענה: לא ארבע תיבות נפרדות אלא פתח אחד. */
/* בהיר ולא כהה, אף שהעיצוב נולד כהה: הוא בא מיד אחרי
   ההירו, וההירו כהה. שני משטחים כהים ברצף נקראים כגוש אחד
   ארוך, והקטע הזה מאבד את ההתחלה שלו. */
.hub{background:var(--paper-2); position:relative; overflow:hidden}
.hub::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 50% 42%, rgba(247,144,9,.1), transparent 68%);
}
.hub > .wrap{position:relative}
.hub-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.chan{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:20px; position:relative;
}
.chan-ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(247,144,9,.14); color:var(--orange); margin-bottom:12px;
}
.chan-ic svg{width:20px; height:20px}
.chan h3{font-size:1.0312rem; font-weight:800; margin-bottom:6px}
.chan p{font-size:0.9062rem; color:var(--ink-2)}
/* תג למה שעוד בדרך. נאמר במפורש ולא נרמז — לקוח שנרשם בגלל
   יכולת שאינה קיימת מגלה את זה ביום הראשון. */
.soon{
  position:absolute; top:16px; inset-inline-end:16px;
  font-size:0.6562rem; font-weight:800; letter-spacing:.04em;
  background:var(--paper-3); color:var(--ink-3);
  padding:3px 9px; border-radius:20px;
}
.hub-out{
  margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--orange-wash); border:1px solid rgba(247,144,9,.35);
  border-radius:var(--r); padding:17px 20px; font-size:0.9688rem;
}
.hub-out b{color:var(--orange-2)}

/* ═══ טכנאים ═════════════════════════════════════════════ */
.tech-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; margin-top:38px}
.tech-list{display:flex; flex-direction:column; gap:16px}
.tech-item{display:flex; gap:13px; align-items:flex-start}
.tech-num{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:var(--orange-wash); color:var(--orange-2);
  font-size:0.8125rem; font-weight:800; display:grid; place-items:center;
}
.tech-item b{display:block; font-size:1.0312rem; margin-bottom:3px}
.tech-item p{font-size:0.9062rem; color:var(--ink-2)}
.call-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:0 20px 44px -28px rgba(12,23,36,.4);
}
.call-top{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.call-urg{font-size:0.6562rem; font-weight:800; background:#FBEAE8; color:#C0392B; padding:3px 9px; border-radius:20px}
.call-row{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:0.875rem}
.call-row span:first-child{color:var(--ink-3)}
.call-row b{font-weight:700}

/* ═══ התאמה אישית ════════════════════════════════════════ */
.fit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px}
.fit{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:#fff}
.fit h3{font-size:1.0625rem; font-weight:800; margin-bottom:8px}
.fit p{font-size:0.9062rem; color:var(--ink-2)}
.fit-note{
  margin-top:26px; border-inline-start:3px solid var(--orange);
  background:var(--orange-wash); border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px; font-size:0.9688rem;
}

/* ═══ האפליקציות ═════════════════════════════════════════ */
.apps{background:var(--navy); color:var(--on-dark)}
.apps .lead{color:var(--on-dark-2)}
.apps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
.app-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:26px}
.app-card h3{font-size:1.1875rem; font-weight:800; margin-bottom:9px}
.app-card p{font-size:0.9375rem; color:var(--on-dark-2)}
.app-feats{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.app-feats span{font-size:0.7812rem; font-weight:700; background:rgba(255,255,255,.08); padding:5px 11px; border-radius:20px}
.stores{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; align-items:center}
/* מעומעמים עד שהאפליקציות יעלו. תג חנות שמוביל לשום מקום
   גרוע מתג שאומר במפורש שעוד לא. */
.store{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:11px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  opacity:.5; cursor:default;
}
.store svg{width:22px; height:22px; flex:none}
.store span{display:flex; flex-direction:column; line-height:1.15; text-align:start}
.store small{font-size:0.6562rem; color:var(--on-dark-2)}
.store b{font-size:0.9062rem}
.stores em{font-style:normal; font-size:0.8438rem; color:var(--on-dark-2)}

/* ═══ מסלולי תמחור ═══════════════════════════════════════ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; align-items:start}
.tier{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:14px}
.tier.pick{border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,144,9,.14)}
.tier-top{display:flex; align-items:center; gap:9px}
.tier h3{font-size:1.25rem; font-weight:800}
.tier-badge{font-size:0.6875rem; font-weight:800; background:var(--orange); color:#1A1206; padding:3px 9px; border-radius:20px}
.tier-price{display:flex; align-items:baseline; gap:6px}
.tier-price b{font-size:2.125rem; font-weight:800; letter-spacing:-.03em}
/* מחיר שטרם נקבע — מסומן במפורש ולא כקו ריק שנראה שבור */
.tbd{font-size:1.3125rem !important; color:var(--ink-3); font-weight:700 !important}
.tier-price span{font-size:0.875rem; color:var(--ink-3)}
.tier-for{font-size:0.9062rem; color:var(--ink-2)}
.tier ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.tier li{display:flex; gap:9px; font-size:0.9062rem; color:var(--ink-2)}
.tier li svg{width:16px; height:16px; color:var(--orange); flex:none; margin-top:4px}
.addons{margin-top:34px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.addon{display:grid; grid-template-columns:1fr 150px; gap:14px; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line)}
.addon:last-child{border-bottom:0}
.addon b{font-size:0.9688rem}
.addon small{display:block; font-size:0.8438rem; color:var(--ink-3); font-weight:400}
.addon-price{justify-self:end; font-size:0.9375rem; font-weight:800}

@media (max-width:980px){
  .hub-grid{grid-template-columns:1fr 1fr}
  .tech-grid{grid-template-columns:1fr}
  .apps-grid{grid-template-columns:1fr}
  .fit-grid,.tiers,.sup-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hub-grid{grid-template-columns:1fr}
  .addon{grid-template-columns:1fr; gap:4px}
  .addon-price{justify-self:start}
}

@media (max-width:980px){
  section{padding:66px 0}
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .phone{margin-inline:auto}
  .float{inset-inline-start:-10px}
  .pain-grid,.steps,.feats,.edge-grid{grid-template-columns:1fr 1fr}
  .step::after{display:none}
  .price-row{grid-template-columns:1fr; gap:6px}
  .price-tag{justify-self:start}
}
@media (max-width:620px){
  .pain-grid,.steps,.feats,.edge-grid{grid-template-columns:1fr}
  .nav-link{display:none}
  .float{position:static; width:auto; margin-top:14px; animation:none}
}


/* ═══ חישוב המסלול ═══════════════════════════════════════
   החלק היחיד בדף שמראה את המוצר עובד ולא מספר עליו. המפה
   היא SVG ולא צילום מסך — צילום מסך מזדקן ביום שבו משנים
   צבע כפתור, והעיצוב כאן נגזר מאותם משתני צבע כמו השאר. */
.calc-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:40px; align-items:center; margin-top:38px}

.map-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:12px; box-shadow:0 26px 54px -30px rgba(12,23,36,.45);
  position:relative;
}
.map-card svg{width:100%; height:auto; display:block; border-radius:9px}
/* שכבת המפה: אותם גוונים של הירו, אבל על רקע בהיר */
.m-bg{fill:#EDF2F9}
.m-block{fill:#E1E9F4}
.m-road{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round}
.m-road-2{fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round}
.m-line{fill:none; stroke:var(--blue); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round}
.m-line-sh{fill:none; stroke:rgba(22,104,227,.18); stroke-width:11; stroke-linecap:round; stroke-linejoin:round}
.m-stop{fill:#fff; stroke:var(--blue); stroke-width:3}
.m-stop-n{font:800 11px "Rubik",sans-serif; fill:var(--blue); text-anchor:middle; dominant-baseline:central}
.m-depot{fill:var(--orange)}
.m-label{font:700 11px "Rubik",sans-serif; fill:var(--ink-3)}

/* הסיכום שמרחף על המפה — המספרים שבעל החברה מחפש */
.map-sum{
  position:absolute; inset-inline-start:26px; bottom:26px;
  background:#fff; border-radius:12px; padding:12px 15px;
  box-shadow:0 20px 40px -20px rgba(12,23,36,.6);
  display:flex; gap:20px;
}
.map-sum div{display:flex; flex-direction:column; line-height:1.25}
.map-sum b{font-size:17px; font-weight:800}
.map-sum small{font-size:11px; color:var(--ink-3)}
.map-live{
  position:absolute; inset-inline-end:26px; top:26px;
  display:flex; align-items:center; gap:7px;
  background:#fff; border-radius:20px; padding:6px 12px;
  font-size:12px; font-weight:700; color:var(--ink-2);
  box-shadow:0 14px 30px -16px rgba(12,23,36,.6);
}
.map-live i{
  width:8px; height:8px; border-radius:50%; background:#12A150; flex:none;
  animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{0%,100%{opacity:1} 50%{opacity:.25}}

/* ═══ סליידר מסכי האפליקציה ══════════════════════════════ */
.shots{margin-top:52px}
.shots-h{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.shots-h.wrap{max-width:1180px}
.shots-h h3{font-size:1.375rem; font-weight:800}
.shots-h p{font-size:0.9375rem; color:var(--ink-2); margin-top:6px}
.shots-btns{display:flex; gap:8px; flex:none}
.shots-btns button{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  display:grid; place-items:center;
}
.shots-btns button:hover{border-color:var(--ink-3); color:var(--ink)}
/* ההשהיה נשארת גלויה גם כשהיא פעילה: תנועה אוטומטית שאי אפשר
   לעצור היא בדיוק מה שמפריע למי שרגיש לתנועה */
#shots-play[aria-pressed='false']{background:var(--paper-3)}
.shots-btns svg{width:18px; height:18px}

/* הפס עצמו יושב מחוץ ל-wrap ולכן הוא ברוחב הקטע כולו.
   הריפוד הצדדי מחזיק את המסך הראשון בקו אחד עם הכותרת,
   ו-scroll-padding מיישר אליו גם את קפיצות ה-snap. */
.shots-track{
  display:flex; gap:22px; margin-top:24px;
  padding:0 max(24px, calc((100% - 1180px) / 2)) 10px;
  scroll-padding-inline:max(24px, calc((100% - 1180px) / 2));
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.shots-track::-webkit-scrollbar{display:none}
.shot{flex:none; width:306px; scroll-snap-align:start}
/* הטלפון בסליידר קטן מזה של הירו ובלי הצל הכבד */
.shot .phone{width:306px; margin:0; box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.shot .screen{height:530px}
.shot-cap{margin-top:16px}
.shot-cap b{display:block; font-size:1.0313rem; font-weight:800}
.shot-cap span{display:block; font-size:0.9063rem; color:var(--ink-2); margin-top:4px}

.shots-dots{display:flex; gap:7px; justify-content:center; margin-top:14px}
.shots-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s}
.shots-dots i.on{background:var(--orange)}

/* מסכים נוספים שאינם קיימים בירו */
.sc-head{
  background:linear-gradient(165deg,var(--navy-hi),var(--navy)); color:#fff;
  padding:15px 16px 14px; display:flex; align-items:center; gap:9px;
}
.sc-head b{font-size:16px; font-weight:800}
.sc-back{font-size:17px; color:#8FA8C4}
.sc-map{height:168px; position:relative; flex:none}
.sc-map svg{width:100%; height:100%; display:block}
.card-s{background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(12,23,36,.07)}
.card-s h4{margin:0 0 3px; font-size:15px; font-weight:800}
.card-s .sub{font-size:11.5px; color:var(--ink-3)}
.kv{display:flex; justify-content:space-between; font-size:12.5px; padding:7px 0; border-top:1px solid var(--line)}
.kv span{color:var(--ink-3)}
.kv b{font-weight:700}
.btn-s{
  display:block; text-align:center; border-radius:10px; padding:11px;
  font-size:13.5px; font-weight:800; background:var(--orange); color:#1A1206;
}
.btn-s.ghost{background:var(--paper-3); color:var(--ink-2)}

@media (max-width:980px){
  .calc-grid{grid-template-columns:1fr}
  .map-sum{inset-inline-start:16px; bottom:16px; gap:14px; padding:10px 12px}
  .map-live{inset-inline-end:16px; top:16px}
}
@media (max-width:620px){
  .map-sum{position:static; box-shadow:none; margin-top:10px; border:1px solid var(--line)}
  .shot,.shot .phone{width:276px}
}


/* ═══ דף היכולות ═════════════════════════════════════════ */
/* עוגן מתחת לסרגל הניווט הדביק, אחרת הכותרת נחתכת */
section[id]{scroll-margin-top:84px}

.page-head{
  background:linear-gradient(165deg,var(--navy-hi),var(--navy) 58%,var(--navy-lo));
  color:var(--on-dark); padding:78px 0 66px;
}
.page-head h1{font-size:clamp(1.9375rem,4.6vw,3.125rem); font-weight:800; margin-top:14px}
.page-head .lead{color:var(--on-dark-2); max-width:64ch}
.toc{display:flex; flex-wrap:wrap; gap:9px; margin-top:32px}
.toc a{
  font-size:0.8438rem; font-weight:700; text-decoration:none;
  padding:8px 14px; border-radius:20px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);
  color:var(--on-dark-2);
}
.toc a:hover{color:var(--on-dark); border-color:rgba(255,255,255,.42)}

.deep{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px}
.deep-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px}
.deep-item h3{display:flex; align-items:center; gap:9px; font-size:1.0938rem; font-weight:800; margin-bottom:9px}
.deep-item > p{font-size:0.9062rem; color:var(--ink-2)}
.deep-item ul{list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.deep-item li{display:flex; gap:9px; font-size:0.875rem; color:var(--ink-2); line-height:1.6}
.deep-item li svg{width:15px; height:15px; color:var(--orange); flex:none; margin-top:5px}
.deep-item li b{color:var(--ink); font-weight:700}

/* סעיף "עוד לא קיים". מופיע בדף במפורש ולא נדחק לשוליים —
   לקוח שנרשם בגלל יכולת שאינה קיימת מגלה את זה ביום הראשון. */
.soon-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
.soon-card{border:1px dashed var(--line); border-radius:var(--r); padding:22px; background:var(--paper-2)}
.soon-card h3{font-size:1.0312rem; font-weight:800; margin-bottom:7px}
.soon-card p{font-size:0.9062rem; color:var(--ink-2)}
.soon-card span{
  display:inline-block; margin-bottom:11px;
  font-size:0.6562rem; font-weight:800; letter-spacing:.04em;
  background:var(--paper-3); color:var(--ink-3);
  padding:3px 9px; border-radius:20px;
}

@media (max-width:980px){
  .deep{grid-template-columns:1fr}
  .soon-list{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .soon-list{grid-template-columns:1fr}
}


/* מרקם עדין על הקטעים המתחלפים. נקודות ברוחב פיקסל ב-4.5%
   שחור — מספיק כדי שהעין תרגיש הבדל משטח, ולא מספיק כדי
   להתחרות בטקסט. */
section.alt{
  background:var(--paper-2);
  background-image:radial-gradient(rgba(12,23,36,.05) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ═══ רקע נע ══════════════════════════════════════════════
 *
 * לכל קטע שכבת גליפים שקשורים דווקא אליו — ברזים ומכלים
 * במלאי, מפתח ומנעול בהרשאות — שנעים לאט מאחורי התוכן.
 *
 * ── שלושה דברים שחשוב שיישארו נכונים ────────────────
 *
 * 1. אטימות נמוכה. אלה אלמנטים בהירים ולא תמונת רקע: ברגע
 *    שהם מתחרים בטקסט על תשומת הלב, הם מזיקים.
 * 2. transform בלבד. אנימציה של left/top מכריחה את הדפדפן
 *    לחשב פריסה מחדש בכל פריים, ו-84 אלמנטים כאלה היו
 *    מרגישים בגלילה.
 * 3. pointer-events:none. שכבה מעל כל הקטע שבולעת לחיצות
 *    היא באג שמגלים רק כשמישהו מנסה ללחוץ על קישור.
 *
 * כמו שאר האנימציות בדף — a11y.css מכבה אותן ב"עצירת
 * תנועה" וב-prefers-reduced-motion, והגליפים נשארים
 * פרושים במקומם.
 */
section, .page-head{position:relative; overflow:hidden}
.wrap{position:relative; z-index:1}

.sec-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.drift{
  position:absolute;
  inset-inline-start:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  animation:drift-a var(--t,28s) ease-in-out infinite;
  animation-delay:var(--d,0s);
}
/* נעוץ לפס התחתון ולא לאחוז מגובה הקטע: הקטעים כאן נעים
   בין 700 ל-1000 פיקסל, ואחוז קבוע היה נוחת בתוך
   הכרטיסים דווקא בקטעים הקצרים */
.drift-low{top:auto; bottom:var(--b,28px)}
.drift-b{animation-name:drift-b}
.drift.amber{color:var(--orange); opacity:.18}
.drift.blue{color:var(--blue); opacity:.15}

/* על רקע כהה אותם גליפים צריכים להיות בהירים יותר, אחרת
   הם נבלעים בנייבי */
.page-head .drift.amber,
.apps .drift.amber,
.final .drift.amber{opacity:.26}
.page-head .drift.blue,
.apps .drift.blue,
.final .drift.blue{color:#6FA8FF; opacity:.2}

@keyframes drift-a{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(30px,-26px) rotate(7deg)}
  50%{transform:translate(-16px,-44px) rotate(-6deg)}
  75%{transform:translate(-34px,-14px) rotate(4deg)}
}
@keyframes drift-b{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(-28px,22px) rotate(-8deg)}
  50%{transform:translate(18px,40px) rotate(5deg)}
  75%{transform:translate(36px,10px) rotate(-3deg)}
}

/* במסך צר הגליפים קטנים, ושניים מהם יורדים — ששה אלמנטים
   על רוחב טלפון זה רעש ולא מרקם */
@media (max-width:620px){
  .drift{width:calc(var(--s) * .62); height:calc(var(--s) * .62)}
  .sec-bg .drift:nth-child(3),
  .sec-bg .drift:nth-child(5){display:none}
}


/* ═══ חשיפה בגלילה ═══════════════════════════════════════
   המחלקה .rv נוספת מ-reveal.js ולא כתובה ב-HTML: היא
   מסתירה את האלמנט, ודף שהסקריפט שלו לא נטען היה נשאר ריק. */
.rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.3,1);
}
.rv-in{opacity:1; transform:none}

/* כיבוי התנועה חייב גם להחזיר את מה שהוסתר, אחרת "עצירת
   תנועה" הייתה מקפיאה כרטיסים במצב השקוף */
html.a11y-still .rv,
.a11y-still .rv{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important}
}

/* ── הרמה קלה במעבר עכבר ───────────────────────────────
   רק על כרטיסים שאפשר ללחוץ עליהם או לקרוא בהם, ובמידה
   שמרגישים ולא רואים */
.feat, .chan, .pain, .fit, .tier, .app-card, .edge .card, .sup-card, .soon-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feat:hover, .pain:hover, .fit:hover, .sup-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -24px rgba(12,23,36,.5);
}
.app-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.26);
}
.chan:hover, .edge .card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -24px rgba(12,23,36,.5);
}
.tier:hover{transform:translateY(-3px); box-shadow:0 22px 44px -26px rgba(12,23,36,.45)}
.tier.pick:hover{box-shadow:0 0 0 3px rgba(247,144,9,.18), 0 22px 44px -26px rgba(12,23,36,.45)}

/* ═══ טופס הפנייה ════════════════════════════════════════ */
/* ברוחב הקטע ולא בתוך אחד הכרטיסים: שדה בעמודה של 460
   פיקסל הוא שדה שכותבים בו בקושי */
.sup-form{
  margin-top:18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px;
}
.sup-form h4{margin:0 0 14px; font-size:1.0312rem; font-weight:800}
.sup-form label{display:block; font-size:0.875rem; font-weight:700; margin-bottom:12px}
.sup-form label span{font-weight:500; color:var(--ink-3)}
.sup-form input, .sup-form textarea{
  display:block; width:100%; margin-top:6px;
  font:inherit; font-size:0.9375rem; font-weight:400;
  padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink);
}
.sup-form textarea{resize:vertical; min-height:96px}
.sup-form input:focus, .sup-form textarea:focus{border-color:var(--orange); outline:none}
.sup-row2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.sup-form button{margin-top:4px}
.sup-said{margin-top:14px; font-size:0.9062rem; font-weight:700; color:var(--ok, #0B7A4B)}
.sup-said.bad{color:#C0392B}

@media (max-width:620px){
  .sup-row2{grid-template-columns:1fr}
}