/* ==========================================================
   אסתי שימון · אתר תדמית
   כחול עמוק כרקע, לבן לכותרות, כחול חשמלי לפרטים טכנולוגיים,
   פוקסיה רק לכפתורים, ללוגו ולאפקטים נבחרים
   ========================================================== */
:root{
  color-scheme:dark;
  --bg:#0F1E42;
  --bg-deep:#132550;
  --surface:#182B5A;
  --surface-2:#21376C;
  --text:#F7F9FF;
  --text-2:#D5DDF0;
  --muted:#A3B1CF;
  --line:#FFFFFF1C;
  --line-strong:#FFFFFF33;
  --accent:#FF1F8E;
  --accent-hover:#FF4BA4;
  --accent-soft:#FF1F8E1F;
  --on-accent:#0A1430;
  --electric:#2F7BFF;
  --electric-2:#7DB2FF;
  --electric-soft:#2F7BFF1F;
  --ok:#5FD3A0;

  --font-display:"Heebo","Assistant",Arial,sans-serif;
  --font-body:"Assistant","Heebo",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;

  --wrap:1180px;
  --gutter:max(20px,5vw);
  --r:16px;
  --r-sm:10px;
  --section:clamp(80px,11vw,140px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:18px;line-height:1.7;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0}
:focus-visible{outline:2px solid var(--electric-2);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--on-accent)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.accent{color:var(--electric-2)}
.grad{background:linear-gradient(to left,#8BB8FF 0%,var(--electric) 48%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
em{font-style:normal}

/* תוכן שאסתי צריכה למלא. מחפשים "todo" בקוד כדי למצוא את כל המקומות */
.todo{background:none;color:inherit;outline:1px dashed #FF1F8E99;outline-offset:2px;border-radius:4px;padding-inline:2px}
.ph-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#FF5AAE;border:1px dashed #FF1F8E88;border-radius:999px;padding:2px 10px;white-space:nowrap}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#0F1E42CC;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-bottom-color:var(--line);background:#0F1E42EE}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
/* הלוגו: BIZ ENGINE והסלוגן מתחת. בכותרת העליונה יש גם את סמל המנוע משמאל להם */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--font-display)}
.brand-mark{order:1;height:38px;width:auto;flex:none;filter:drop-shadow(0 6px 14px #FF1F8E44);transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:translateX(-3px) scale(1.05)}
.brand-text{display:grid;gap:4px;line-height:1}
.brand-text b{font-weight:900;font-size:19px;letter-spacing:.07em;direction:ltr;text-align:right;white-space:nowrap}
.brand-text small{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav a{text-decoration:none;font-size:16px;color:var(--text-2);padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.main-nav a:hover{color:var(--text);background:#FFFFFF0A}
.main-nav a[aria-current="page"]{color:var(--text);background:#FFFFFF10}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;cursor:pointer;place-items:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline:0;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1;padding:16px 26px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 34px -10px #FF1F8E88}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 40px -12px #FF1F8EAA}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text-2);background:#FFFFFF08}
.btn-sm{padding:11px 18px;font-size:15px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:16px;text-decoration:none;color:var(--text)}
.link-arrow::after{content:"←";transition:transform .25s var(--ease);color:var(--electric-2)}
.link-arrow:hover::after{transform:translateX(-4px)}

/* ---------- section heads ---------- */
.section{padding-block:var(--section)}
.section-alt{background:linear-gradient(180deg,var(--bg-deep),#11224A);border-block:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--electric);border-radius:2px}
.section-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.section-head.split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:40px}
.h2{font-size:clamp(34px,5vw,60px);font-weight:900;line-height:1.08;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--text-2);max-width:62ch}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(26px,3.6vw,50px) clamp(70px,9vw,120px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 65% 60% at 30% 45%,#1F4597 0%,transparent 64%),radial-gradient(ellipse 45% 40% at 90% 8%,#4A1D63 0%,transparent 70%),linear-gradient(180deg,#12244F,#0F1E42 70%,var(--bg-deep))}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
/* סוף ה-hero נמזג לצבע הפתיחה של הסקשן הבא, בלי קו הפרדה */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 58% at 50% 44%,#0F1E42E0 0%,#0F1E42A6 48%,#0F1E4233 82%,transparent 100%),linear-gradient(180deg,transparent calc(100% - 56px),var(--bg-deep))}
.hero + .section-alt{border-top:0}
/* פתיחה ממורכזת: לוגו, כותרת, קו עם גלגל, תת-כותרת, תחומים וכפתורים */
.hero-stack{display:grid;justify-items:center;text-align:center;max-width:980px;margin-inline:auto;zoom:.85}
/* חץ למטה שמהבהב בתחתית הפתיח ומזמין לגלול */
.hero-down{position:absolute;bottom:clamp(16px,2.4vw,30px);left:50%;width:36px;height:36px;margin-left:-18px;display:grid;place-items:center;color:var(--accent-hover);animation:down-blink 1.4s ease-in-out infinite}
.hero-down svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes down-blink{0%,100%{opacity:1;translate:0 0}50%{opacity:.15;translate:0 6px}}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2);border:1px solid var(--line-strong);border-radius:999px;padding:7px 16px 7px 14px;background:#182B5AB3}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #FF1F8E66;animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px #FF1F8E00}100%{box-shadow:0 0 0 0 #FF1F8E00}}
/* המותג בפתיחה: הלוגו הוא הדבר הגדול ביותר, כמו שם על שלט */
.hero-brand{display:grid;justify-items:center;gap:clamp(10px,1.4vw,18px);margin:0;max-width:100%}
.hero-logo{position:relative;display:block;max-width:100%;line-height:0}
.hero-wordmark{display:block;height:clamp(52px,7.4vw,104px);width:auto;max-width:100%;min-width:0;object-fit:contain}
/* ברק שעובר על האותיות, רק בתוך צורת הלוגו */
.hero-logo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffffb3 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;-webkit-mask:url(../img/logo-wordmark-clean.webp) center/contain no-repeat;mask:url(../img/logo-wordmark-clean.webp) center/contain no-repeat}
/* הסלוגן: קווים משני הצדדים, והמילים נכנסות אחת אחרי השנייה */
.hero-slogan{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px);width:100%;margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.3;color:var(--text);letter-spacing:.01em}
.hs-line{flex:1 1 0;max-width:clamp(28px,8vw,120px);height:2px;border-radius:2px;background:linear-gradient(to left,var(--accent),transparent)}
.hs-line:last-child{background:linear-gradient(to right,var(--accent),transparent)}
.hs-text{white-space:nowrap}
.hs-w{display:inline-block}
.hero-slogan em{font-style:normal;font-weight:800;background:linear-gradient(to left,#8BB8FF 0%,var(--electric) 25%,var(--accent) 50%,var(--electric) 75%,#8BB8FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* קו מפריד עם גלגל שיניים קטן שמסתובב באמצע */
.hero-rule{display:flex;align-items:center;gap:12px;margin-block:clamp(18px,2.4vw,26px)}
.hero-rule::before,.hero-rule::after{content:"";width:clamp(36px,5vw,64px);height:2px;border-radius:2px}
.hero-rule::before{background:linear-gradient(to left,var(--electric),transparent)}
.hero-rule::after{background:linear-gradient(to right,var(--accent),transparent)}
.hero-rule svg{width:24px;height:24px;fill:none;stroke:var(--electric-2);stroke-width:12;animation:gear-idle 12s linear infinite}
.hero-sub{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.2vw,28px);letter-spacing:.01em;color:var(--electric-2);text-wrap:balance}
.hero-chips{list-style:none;padding:0;margin:clamp(24px,3vw,34px) 0 clamp(26px,3.4vw,38px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.hero-chips a{display:block;padding:9px 20px;border-radius:999px;border:1px solid var(--line-strong);background:#0F1E42CC;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--text);text-decoration:none;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.hero-chips a:hover{border-color:var(--electric-2);background:#21376CE6;transform:translateY(-2px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* הכפתורים קטנים פחות משאר הפתיח */
.hero-chips,.hero .hero-actions{zoom:1.06}
.hero .hero-actions{justify-content:center}
/* מסגרת ורודה עבה יותר, והריפוד קטן בפיקסל כדי שהכפתור ישמור על הגודל */
.hero .btn-ghost{border:2px solid var(--accent);padding:15px 25px;background:#0F1E42D9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{border-color:var(--accent-hover);background:#21376CE6}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line)}
.proof div{padding:22px 0 0;display:grid;gap:4px}
.proof div+div{padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.proof b{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.02em}
.proof span{font-size:15px;color:var(--muted)}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service{position:relative;display:grid;gap:16px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,36px);text-decoration:none;transition:transform .35s var(--ease),border-color .35s}
.service:hover{transform:translateY(-6px);border-color:#2F7BFF88}
.service-icon{width:56px;height:56px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:12px}
.service-icon svg{width:30px;height:30px;fill:none;stroke:var(--text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service:hover .service-icon svg{stroke:var(--electric-2)}
.service h3{font-size:clamp(23px,2.2vw,28px);font-weight:800}
.service p{color:var(--text-2);font-size:16.5px}
.service ul{list-style:none;padding:0;display:grid;gap:8px;margin-top:4px}
.service li{font-size:15.5px;color:var(--muted);display:flex;gap:10px}
.service li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--electric);margin-top:11px}
.service .link-arrow{margin-top:8px}
/* כרטיסיות הכאב: פתקים שיד מניחה על השולחן אחד אחרי השני בגלילה.
   JS מעדכן לכל פתק: --tx/--ty כמה הוא עוד רחוק מהמקום שלו, --spin כמה הוא עוד מסובב,
   --lift כמה הוא מורם מעל השולחן (גדול יותר, עם צל רחוק ורך), --o אם הוא כבר בדרך, ו---cover כשפתק מכוסה */
.pains{--stack-top:96px;--stack-step:12px;--stack-gap:22vh;display:grid}
.pains .pain{position:sticky;top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));min-height:250px;opacity:var(--o,1);rotate:calc(var(--tilt,0deg) + var(--spin,0deg));translate:calc(var(--x,0px) * var(--xs,1) + var(--tx,0px)) calc(var(--dy,0px) + var(--ty,0px));scale:calc((1 - var(--cover,0) * .05) * (1 + var(--lift,0) * .22));filter:brightness(calc(1 - var(--cover,0) * .35));transform-origin:50% 50%;box-shadow:0 calc(26px + var(--lift,0) * 70px) calc(50px + var(--lift,0) * 70px) calc(-24px + var(--lift,0) * 10px) rgb(0 0 0 / calc(.7 - var(--lift,0) * .25))}
.pains .pain+.pain{margin-top:var(--stack-gap)}
/* המרווח אחרי הפתק האחרון נותן לו מקום להיעצר על הערימה לפני שהיא ממשיכה בגלילה */
.pains::after{content:"";height:18vh}
.pains .pain:focus-visible{z-index:5}
/* ערימה מסודרת: כל פתק כמעט ישר, מוזז מעט מזה שמתחתיו, כך שרק הקצה העליון של הקודם מציץ.
   בנייד ההזזה הצידה קטנה יותר (--xs). במחשב --sx ההזזה הצידה (באחוזים מרוחב הפתק) ו---rot הזווית. כל פתק יושב מדרגה קטנה מתחת לקודם.
   --side מאיזה צד של תחתית המסך היד מביאה את הפתק: שלילי משמאל, חיובי מימין, וכמה רחוק מהמרכז */
.pain:nth-child(1){--tilt:-2.5deg;--x:8px;--dy:0px;--side:-.5;--sx:1%;--rot:-2.5deg}
.pain:nth-child(2){--tilt:2deg;--x:-10px;--dy:4px;--side:-1;--sx:-2%;--rot:2deg}
.pain:nth-child(3){--tilt:-1deg;--x:4px;--dy:-2px;--side:.35;--sx:2%;--rot:-1deg}
.pain:nth-child(4){--tilt:3deg;--x:-6px;--dy:6px;--side:-.75;--sx:-1%;--rot:3deg}
@media (max-width:640px){.pains{--xs:.35}}
/* כל פתק בגוון אחר מתוך צבעי המותג */
.pains .pain:nth-child(1){background:linear-gradient(165deg,#22489A,#183570)}
.pains .pain:nth-child(2){background:linear-gradient(165deg,#5B2363,#3D1A50)}
.pains .pain:nth-child(3){background:linear-gradient(165deg,#3A2D86,#281F63)}
.pains .pain:nth-child(4){background:linear-gradient(165deg,#145C8C,#103F6B)}
.pains .pain .service-icon{background:#FFFFFF17}
#pains{overflow-x:clip}
.pain h3{font-size:clamp(22px,2vw,26px)}
/* איורים בכרטיסי הכאב: צבעוניים עם קו כהה, בלי הקופסה של האייקון. הצבעים יושבים על הצורות עצמן */
.pains .pain .pain-art{width:72px;height:72px;background:none;margin-bottom:4px}
.pains .pain .pain-art svg,.pains .pain:hover .pain-art svg{width:72px;height:72px;stroke:none;filter:drop-shadow(0 6px 10px #00000059)}
@media (max-width:640px){.pains .pain .pain-art,.pains .pain .pain-art svg,.pains .pain:hover .pain-art svg{width:56px;height:56px}}
@media (min-width:881px){
  .pains-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,90px);align-items:start}
  .pains-head{position:sticky;top:130px;margin-bottom:0}
  .pains-head .h2{font-size:clamp(34px,4vw,52px)}
  .pains{--stack-top:130px;--stack-step:16px;--stack-gap:28vh}
}
/* מחשב: כל האזור ננעל מתחת לכותרת האתר עד שהפתק האחרון נוחת על הערימה.
   JS מוסיף .is-pinned וקובע את גובה האזור (מסלול הגלילה). כל הפתקים באותה משבצת, זה על זה.
   JS גם קובע את גובה השולחן ואת --fit, כדי שכל הערימה תיכנס למסך גם כשהוא נמוך */
#pains.is-pinned{padding-block:0;overflow:clip}
#pains.is-pinned>.wrap{position:sticky;top:var(--pin-top,76px);height:calc(100vh - var(--pin-top,76px));display:flex;flex-direction:column;justify-content:center}
#pains.is-pinned .pains-layout{align-items:center}
#pains.is-pinned .pains-head{position:static}
#pains.is-pinned .pains{place-items:start center;scale:var(--fit,1)}
#pains.is-pinned .pains .pain{grid-area:1/1;position:relative;top:auto;margin-top:0;width:86%;min-height:0;rotate:calc(var(--rot,0deg) + var(--spin,0deg));translate:calc(var(--sx,0%) + var(--tx,0px)) calc(var(--i,0) * 16px + var(--ty,0px));scale:calc(1 + var(--lift,0) * .22);filter:brightness(calc(1 - var(--cover,0) * .15))}
#pains.is-pinned .pains::after{content:none}
@media (prefers-reduced-motion:reduce){
  .pains-layout{display:block}
  .pains-head{position:static;margin-bottom:clamp(40px,6vw,64px)}
  .pains{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .pains .pain{position:relative;top:auto;rotate:none;translate:none;scale:none;filter:none;min-height:0}
  .pains .pain+.pain{margin-top:0}
  .pains::after{content:none}
}
.pains-more{margin-top:18px;font-size:15.5px}
}
.pains-more{margin-top:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--text-2);font-size:17px}
/* הקישור לבדיקת המנוע פועם בורוד כדי למשוך את העין. גדל מהצד הימני, כדי לא לעלות על הטקסט שלפניו.
   נעצר במעבר עכבר ובפוקוס, ובהפחתת תנועה הכלל הכללי עוצר אותו */
.pains-more .link-arrow{color:var(--accent-hover);font-size:18px;transform-origin:right center;animation:link-pulse 2.6s ease-in-out infinite}
.pains-more .link-arrow::after{color:var(--accent-hover)}
.pains-more .link-arrow::before{background:var(--accent-hover)}
.pains-more .link-arrow:hover,.pains-more .link-arrow:focus-visible{animation-play-state:paused}
@keyframes link-pulse{0%,100%{transform:scale(1);text-shadow:none}50%{transform:scale(1.03);text-shadow:0 0 12px #FF1F8E4D}}
.demo-copy .link-arrow{justify-self:start}

/* ---------- demo ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:center}
.demo-copy{display:grid;gap:20px}
.demo{background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -40px #000}
.demo-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.demo-bar b{font-family:var(--font-display);color:var(--text);font-size:15px}
.demo-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.demo-form{padding:20px;border-inline-end:1px solid var(--line);display:grid;gap:10px;align-content:start}
.demo-form .label{font-size:13px;color:var(--muted);font-weight:700}
.fake-field{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:15px}
.fake-field small{display:block;font-size:12px;color:var(--muted)}
.demo-form .btn{margin-top:6px;width:100%}
.demo-log{padding:20px;display:grid;gap:10px;align-content:start;min-height:320px}
.log-item{display:grid;grid-template-columns:58px 26px minmax(0,1fr);gap:10px;align-items:center;font-size:15px;color:var(--muted);padding:10px 12px;border-radius:10px;border:1px solid transparent;opacity:.35;transition:opacity .5s,border-color .5s,background .5s,color .5s}
.log-item time{font-family:var(--font-mono);font-size:12.5px;direction:ltr;text-align:right}
.log-item i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-style:normal;font-size:12px;color:transparent;transition:all .4s}
.log-item.on{opacity:1;color:var(--text);background:#FFFFFF06;border-color:var(--line)}
.log-item.on i{background:var(--electric);border-color:var(--electric);color:#fff}
.log-summary{margin-top:6px;padding:14px;border-radius:12px;background:var(--electric-soft);border:1px solid #2F7BFF55;font-family:var(--font-display);font-weight:700;font-size:16px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.log-summary.on{opacity:1;transform:none}

/* ---------- work cards ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.work-card{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .35s var(--ease),border-color .35s}
.work-card:hover{transform:translateY(-6px);border-color:#2F7BFF88}
.work-cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.work-cover img{width:100%;height:100%;object-fit:cover;object-position:top}
.cover-art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 75% 30%,#2F7BFF44,transparent 55%),linear-gradient(135deg,#21376C,#152752)}
.cover-art svg{width:34%;height:auto;fill:none;stroke:#F5F7FF70;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.work-body{padding:22px 22px 24px;display:grid;gap:10px;align-content:start}
.work-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{font-size:13px;font-weight:600;color:var(--text-2);border:1px solid var(--line-strong);border-radius:999px;padding:3px 12px}
.work-card h3{font-size:21px;font-weight:800}
.work-result{display:flex;align-items:baseline;gap:10px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.work-result b{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1;color:var(--electric-2);letter-spacing:-.02em}
.work-result span{font-size:15px;color:var(--muted)}
.work-result .live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;color:var(--electric-2)}
.work-result .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px #5FD3A022}
.center-cta{display:flex;justify-content:center;margin-top:44px}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:step;list-style:none;padding:0}
.process li{counter-increment:step;border-top:1px solid var(--line-strong);padding-top:22px;display:grid;gap:10px;align-content:start}
.process li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:300;font-size:46px;line-height:1;color:var(--electric-2);direction:ltr;text-align:right}
.process h3{font-size:22px;font-weight:800}
.process p{font-size:16px;color:var(--text-2)}

/* ---------- testimonials (WhatsApp-style bubbles) ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.quotes-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
.quote{display:grid;gap:14px}
.bubble{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:18px 20px 12px;font-size:17px;line-height:1.65}
.bubble time{display:block;text-align:left;font-size:12px;color:var(--muted);margin-top:6px;font-family:var(--font-mono);direction:ltr}
.bubble time::after{content:" ✓✓";color:var(--electric-2)}
.quote-who{display:flex;align-items:center;gap:12px;padding-inline-start:4px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:16px}
.quote-who b{display:block;font-family:var(--font-display);font-size:16px}
.quote-who span{font-size:14px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,80px);align-items:start}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .3s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-family:var(--font-display);font-weight:700;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:20px;font-weight:400;color:var(--electric-2);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 22px;color:var(--text-2);font-size:16.5px;max-width:64ch}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(80px,11vw,140px);border-top:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 70% at 50% 110%,#2350A8 0%,transparent 70%),radial-gradient(ellipse 30% 40% at 50% 115%,#5A2275 0%,transparent 70%)}
.cta-inner{display:grid;gap:26px;justify-items:center;text-align:center}
.cta-inner .h2{font-size:clamp(38px,6vw,76px)}
.cta-inner .lede{text-align:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-note{font-size:15px;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:#0C1938;border-top:1px solid var(--line);padding-block:52px 26px;font-size:15.5px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-grid h4{font-size:15px;color:var(--muted);font-weight:700;margin-bottom:14px}
.footer-grid ul{list-style:none;padding:0;display:grid;gap:8px}
.footer-grid a{text-decoration:none;color:var(--text-2)}
.footer-grid a:hover{color:var(--text)}
.footer-about p{color:var(--muted);margin-top:14px;max-width:36ch;font-size:15px;line-height:1.6}
.footer-about p b{color:var(--text-2);font-weight:700}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(56px,8vw,100px) clamp(48px,6vw,80px);border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 85% at 15% 0%,#1F4597 0%,transparent 66%)}
.page-hero .h1{font-size:clamp(40px,6.4vw,82px);font-weight:900;line-height:1.04;letter-spacing:-.025em;margin-block:22px 22px;max-width:16ch}
.page-hero .h1 em{background:linear-gradient(to left,#8BB8FF 0%,var(--electric) 48%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lede{margin-bottom:30px}
.breadcrumbs{font-size:14px;color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}
.breadcrumbs span[aria-hidden]{margin-inline:8px}

/* ---------- included / audiences ---------- */
.included{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.included div{background:var(--bg);padding:30px;display:grid;gap:10px;align-content:start}
.included h3{font-size:20px;font-weight:800;display:flex;gap:12px;align-items:center}
.included h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--electric);flex:none}
.included p{font-size:16px;color:var(--text-2)}
.audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.audience{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:grid;gap:14px;align-content:start}
.audience .who{font-size:14px;font-weight:700;color:var(--muted)}
.audience h3{font-size:22px;font-weight:800}
.audience .before,.audience .after{font-size:16px;color:var(--text-2);display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px}
.audience .before b,.audience .after b{font-family:var(--font-display);font-size:13px;color:var(--muted);padding-top:3px}
.audience .after b{color:var(--electric-2)}
/* רשימת הכאבים בעמודי השירות: הכותרת בצד, והכאבים בשורות */
.pain-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,80px);align-items:start}
.pain-list{list-style:none;padding:0;display:grid;border-top:1px solid var(--line)}
.pain-list li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:22px 0;border-bottom:1px solid var(--line)}
.pain-list li::before{content:"";grid-row:span 2;width:28px;height:28px;margin-top:1px;border-radius:50%;border:1px solid #FF1F8E66;background:radial-gradient(circle,var(--accent) 0 3px,var(--accent-soft) 4px)}
.pain-list h3{font-size:20px;font-weight:800}
.pain-list p{font-size:16.5px;color:var(--text-2)}
@media (min-width:881px){.pain-split .section-head{position:sticky;top:130px}.pain-split .h2{font-size:clamp(34px,4vw,52px)}}

/* services hub */
.hub{display:grid;gap:18px}
.hub-item{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(28px,4vw,44px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .35s,transform .35s var(--ease)}
.hub-item:hover{border-color:#2F7BFF88;transform:translateY(-4px)}
.hub-item .service-icon{margin:0;width:80px;height:80px;border-radius:20px}
.hub-item .service-icon svg{width:40px;height:40px}
.hub-item h2{font-size:clamp(26px,3vw,38px);font-weight:900;margin-bottom:8px}
.hub-item p{color:var(--text-2);font-size:17px;max-width:60ch}
.connect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.connect div{padding:26px;display:grid;gap:6px;position:relative}
.connect div+div{border-inline-start:1px solid var(--line)}
.connect b{font-family:var(--font-display);font-size:19px}
.connect span{font-size:15.5px;color:var(--muted)}
.connect small{font-family:var(--font-display);font-weight:700;color:var(--electric-2);font-size:14px}

/* ---------- portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filters button{cursor:pointer;border:1px solid var(--line-strong);background:transparent;border-radius:999px;padding:9px 18px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-2);transition:all .2s}
.filters button:hover{color:var(--text);border-color:var(--text-2)}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.empty{color:var(--muted);padding:40px 0}

/* project page */
.project-hero-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.project-cover{border-radius:22px;overflow:hidden;border:1px solid var(--line);margin-top:clamp(36px,5vw,56px);aspect-ratio:16/8;position:relative;background:var(--surface)}
.project-cover img{width:100%;height:100%;object-fit:cover;object-position:top}
.project-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(36px,6vw,80px);align-items:start}
.project-story{display:grid;gap:44px}
.project-story h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;margin-bottom:12px}
.project-story p{color:var(--text-2);max-width:64ch}
.project-aside{position:sticky;top:100px;display:grid;gap:18px}
.result-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:6px}
.result-box b{font-family:var(--font-display);font-weight:900;font-size:56px;line-height:1;letter-spacing:-.03em;color:var(--electric-2)}
.result-box span{color:var(--text-2)}
.facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;display:grid;gap:14px;margin:0}
.facts div{display:grid;gap:2px}
.facts dt{font-size:13px;color:var(--muted);font-weight:700}
.facts dd{margin:0;font-size:16px}
.big-quote{border-inline-start:3px solid var(--electric);padding-inline-start:24px;font-family:var(--font-display);font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.5}
.big-quote cite{display:block;margin-top:12px;font-family:var(--font-body);font-style:normal;font-size:15px;color:var(--muted)}
.next-project{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,80px);align-items:start}
.portrait{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#1F4597,#152752);border:1px solid var(--line);display:grid;place-items:center;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .initials{font-family:var(--font-display);font-weight:900;font-size:clamp(80px,12vw,150px);color:#F5F7FF22;direction:ltr;letter-spacing:-.05em}
.portrait .ph-badge{position:absolute;bottom:16px;inset-inline-start:16px;background:var(--bg)}
.prose{display:grid;gap:20px}
.prose p{color:var(--text-2);font-size:clamp(17px,1.5vw,19px);max-width:64ch}
.prose .big{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.4;color:var(--text)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.value{border-top:2px solid var(--electric);padding-top:22px;display:grid;gap:10px}
.value h3{font-size:22px;font-weight:800}
.value p{color:var(--text-2);font-size:16px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,80px);align-items:start}
.contact-options{display:grid;gap:14px}
.contact-option{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .3s}
.contact-option:hover{border-color:#2F7BFF88}
.contact-option.primary{border-color:#FF1F8E55;background:linear-gradient(135deg,#46205E,var(--surface) 70%)}
.contact-option .ci{width:52px;height:52px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center}
.contact-option.primary .ci{background:var(--accent);color:var(--on-accent)}
.contact-option .ci svg{width:24px;height:24px}
.contact-option b{display:block;font-family:var(--font-display);font-size:18px;color:var(--text)}
.contact-option b+span{display:block;font-size:15px;color:var(--muted)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,40px);display:grid;gap:18px}
.form h2{font-size:clamp(24px,2.6vw,30px);font-weight:800}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-display);font-weight:600;font-size:15px}
.field label .opt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:#0C1938;border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;font-size:16.5px;transition:border-color .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--electric);box-shadow:0 0 0 3px var(--electric-soft)}
.field input[aria-invalid="true"]{border-color:#FF7A7A}
.field .err{font-size:14px;color:#FF9A9A;min-height:0}
.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form{position:relative}
.privacy-note{font-size:14px;color:var(--muted);line-height:1.6}
.privacy-note a{color:var(--text-2)}
.form-status{font-family:var(--font-display);font-weight:600;font-size:16px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid #FF1F8E44}
.form-status.ok{background:#5FD3A01A;border-color:#5FD3A055}

/* ---------- legal ---------- */
.legal{max-width:780px}
.legal h2{font-size:26px;font-weight:800;margin-block:44px 14px}
.legal p,.legal li{color:var(--text-2);font-size:17px}
.legal ul{padding-inline-start:22px;display:grid;gap:8px;margin-block:10px}
.legal p+p{margin-top:12px}
.legal .updated{color:var(--muted);font-size:15px}

/* ---------- 404 ---------- */
.notfound{min-height:62vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.notfound .code{font-family:var(--font-display);font-weight:900;font-size:clamp(100px,18vw,220px);line-height:1;letter-spacing:-.05em;color:var(--surface-2);direction:ltr}
.notfound .code em{color:var(--accent)}

/* ---------- reveal ---------- */
/* :where שומר על משקל נמוך, כדי שאפקטי hover של הכרטיסים ימשיכו לעבוד אחרי הכניסה */
:where(.js) .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .35s,background .35s}
:where(.js) .reveal:where(.visible){opacity:1;transform:none}

/* ---------- motion ---------- */
/* פס התקדמות גלילה מתחת לכותרת */
.scroll-progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(to left,var(--electric-2),var(--electric),var(--accent));transform-origin:right;transform:scaleX(var(--progress,0));pointer-events:none}

/* כניסה מדורגת של הפתיחה בטעינת העמוד */
@keyframes rise{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.js .hero-kicker,.js .hero-rule,.js .hero-sub,.js .hero-chips li,.js .hero-actions,.js .proof>div,
.js .page-hero .wrap>*{animation:rise .9s var(--ease) both}
.js .hero-rule{animation-delay:1.15s}
.js .hero-sub{animation-delay:1.25s}
.js .hero-chips li{animation-delay:calc(1.3s + var(--n,0) * .06s)}
.js .hero-chips li:nth-child(2){--n:1}
.js .hero-chips li:nth-child(3){--n:2}
.js .hero-chips li:nth-child(4){--n:3}
.js .hero-chips li:nth-child(5){--n:4}
.js .hero-chips li:nth-child(6){--n:5}
.js .hero-actions{animation-delay:1.7s}
/* כניסת המותג: הלוגו מתחדד פנימה */
@keyframes brand-in{from{opacity:0;filter:blur(8px);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
@keyframes gear-idle{to{transform:rotate(360deg)}}
/* התנעה: האותיות נחשפות משמאל לימין, מבזיקות פעם אחת, ואז ברק עובר עליהן מדי כמה שניות */
@keyframes wm-ignite{0%{clip-path:inset(-10% 100% -10% 0);filter:blur(6px)}55%{clip-path:inset(-10% 0 -10% 0);filter:none}72%{filter:drop-shadow(0 0 18px #FF1F8Ecc)}100%{clip-path:inset(-10% 0 -10% 0);filter:drop-shadow(0 0 0 #FF1F8E00)}}
@keyframes wm-shine{0%,70%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes hs-grow{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-word{from{opacity:0;transform:translateY(.6em) rotate(-4deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.js .hero-wordmark{animation:wm-ignite 1.2s var(--ease) .1s both}
.js .hero-logo::after{animation:wm-shine 6s ease-in-out 1.8s infinite}
.js .hs-line{animation:hs-grow .9s var(--ease) .7s both;transform-origin:left}
.js .hs-line:last-child{transform-origin:right}
.js .hs-w{animation:hs-word .7s var(--ease) both;animation-delay:calc(.75s + var(--w,0) * .12s)}
.js .hero-slogan em{animation:hs-word .7s var(--ease) 1.11s both,sheen 6s linear 1.9s infinite}
.js .proof>div:nth-child(1){animation-delay:.7s}
.js .proof>div:nth-child(2){animation-delay:.8s}
.js .proof>div:nth-child(3){animation-delay:.9s}
.js .page-hero .wrap>:nth-child(2){animation-delay:.08s}
.js .page-hero .wrap>:nth-child(3){animation-delay:.16s}
.js .page-hero .wrap>:nth-child(4){animation-delay:.3s}
.js .page-hero .wrap>:nth-child(n+5){animation-delay:.42s}

/* טקסט מודגש בגרדיאנט זורם */
@keyframes sheen{to{background-position:200% 0}}
.page-hero .h1 em,.grad{background-image:linear-gradient(to left,#8BB8FF 0%,var(--electric) 25%,var(--accent) 50%,var(--electric) 75%,#8BB8FF 100%);background-size:200% 100%;animation:sheen 6s linear infinite}

/* זוהר שעוקב אחרי העכבר בכרטיסים */
.service,.work-card,.hub-item,.audience,.contact-option{position:relative;isolation:isolate}
.service::after,.work-card::after,.hub-item::after,.audience::after,.contact-option::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#2F7BFF26,transparent 45%)}
.service:hover::after,.work-card:hover::after,.hub-item:hover::after,.audience:hover::after,.contact-option:hover::after{opacity:1}
.work-card::after{z-index:1}

/* אייקונים של שירותים קופצים במעבר עכבר */
.service-icon{transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.service-icon svg{transition:stroke .3s,transform .5s var(--ease)}
.service:hover .service-icon,.hub-item:hover .service-icon{transform:translateY(-4px) rotate(-6deg);background:var(--electric-soft);box-shadow:0 12px 28px -10px #2F7BFF99}
.service:hover .service-icon svg,.hub-item:hover .service-icon svg{transform:scale(1.08)}
.service li::before{transition:transform .3s var(--ease),background .3s}
.service:hover li::before{transform:scale(1.5);background:var(--accent)}
.service:hover li:nth-child(2)::before{transition-delay:.06s}
.service:hover li:nth-child(3)::before{transition-delay:.12s}

/* זום עדין על תמונת עבודה */
.work-cover img,.cover-art svg{transition:transform .7s var(--ease)}
.work-card:hover .work-cover img{transform:scale(1.06)}
.work-card:hover .cover-art svg{transform:scale(1.12) rotate(-4deg)}

/* ברק שעובר על כפתור ראשי */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#FFFFFF66 50%,transparent 65%);transform:translateX(120%);transition:transform .8s var(--ease)}
.btn-primary:hover::after{transform:translateX(-120%)}
.btn:active{transform:translateY(0) scale(.97)}
.link-arrow{position:relative}
.link-arrow::before{content:"";position:absolute;inset-inline:0;bottom:-3px;height:1px;background:var(--electric-2);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.link-arrow:hover::before,a:hover>.link-arrow::before{transform:scaleX(1)}
a:hover>.link-arrow::after{transform:translateX(-4px)}

/* קו מתחת לפריט בתפריט */
@media (min-width:881px){
  .main-nav a{position:relative}
  .main-nav a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
  .main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
}

/* הקו של הכותרת הקטנה נמתח כשהיא נכנסת למסך */
.js .reveal .eyebrow::before,.js .eyebrow.reveal::before{transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease) .25s}
.js .reveal.visible .eyebrow::before,.js .eyebrow.reveal.visible::before{transform:scaleX(1)}

/* צעדי התהליך: הקו העליון נמתח והמספר נדלק */
.process li{position:relative;border-top-color:var(--line)}
.process li::after{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;background:linear-gradient(to left,var(--electric),var(--accent));transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--ease) .2s}
.process li.visible::after,html:not(.js) .process li::after{transform:scaleX(1)}
.process li::before{transition:color .6s,text-shadow .6s}
.process li:hover::before{color:var(--text);text-shadow:0 0 24px #5C9DFFAA}

/* בועות המלצה קופצות כמו הודעה חדשה */
.js .quote.reveal{transform:none}
.js .quote.reveal .bubble{transform-origin:left bottom;transform:scale(.85) translateY(16px);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .5s}
.js .quote.reveal.visible .bubble{transform:none;opacity:1;transition-delay:var(--d,0s)}
.js .quote.reveal .quote-who{opacity:0;transform:translateY(8px);transition:opacity .5s .35s,transform .5s var(--ease) .35s}
.js .quote.reveal.visible .quote-who{opacity:1;transform:none;transition-delay:calc(var(--d,0s) + .35s)}

/* פתיחה רכה של שאלות נפוצות */
.faq details[open] p{animation:open .45s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--electric-2)}

/* לוג ההדגמה: כל שורה מחליקה פנימה וה-V קופץ */
.log-item{transform:translateX(-10px)}
.log-item.on{transform:none;transition:opacity .5s,border-color .5s,background .5s,color .5s,transform .5s var(--ease)}
.log-item.on i{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
.log-summary.on{animation:glow 1.6s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 #2F7BFF88}100%{box-shadow:0 0 0 14px #2F7BFF00}}

/* תגיות כלים מתנופפות במעבר עכבר */
.toolbelt span,.tag{transition:transform .3s var(--ease),border-color .3s,color .3s}
.toolbelt span:hover{transform:translateY(-3px);border-color:var(--electric);color:var(--electric-2)}
.value{transition:transform .4s var(--ease)}
.value:hover{transform:translateY(-4px)}
.included div{transition:background .4s}
.included div:hover{background:var(--surface)}

/* תאורת רקע נושמת בפס הקריאה לפעולה ובפתיחת עמודים פנימיים */
.cta-band::before,.page-hero::before{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}

/* 404 */
.notfound .code em{display:inline-block;animation:wobble 2.8s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .services,.work-grid,.quotes,.audiences,.included,.values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-layout{grid-template-columns:1fr}
  .project-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .main-nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px var(--gutter) 24px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .main-nav.open{opacity:1;visibility:visible;transform:none}
  .main-nav a{font-size:20px;padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line)}
  .main-nav a[aria-current="page"]{background:none;color:var(--electric-2)}
  .nav-toggle{display:grid}
  .header-cta .btn{display:none}
  .demo-grid,.faq-grid,.pain-split,.about-grid,.contact-grid{grid-template-columns:1fr}
  .section-head.split{grid-template-columns:1fr;gap:18px}
  .hub-item{grid-template-columns:1fr;gap:18px}
  .connect{grid-template-columns:1fr}
  .connect div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .portrait{max-width:420px}
}
@media (max-width:640px){
  body{font-size:17px}
  .services,.work-grid,.quotes,.audiences,.included,.values,.process,.pains{grid-template-columns:1fr}
  .pain{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:10px;padding:22px}
  .pain .service-icon{width:46px;height:46px;margin-bottom:0}
  .pain .service-icon svg{width:24px;height:24px}
  .pain h3{align-self:center}
  .pain p,.pain .service-get,.pain .link-arrow{grid-column:1/-1}
  .pain .link-arrow{margin-top:2px}
  .pains .pain{min-height:0}
  .proof{grid-template-columns:1fr;border-top:0}
  .proof div,.proof div+div{padding:16px 0;border-inline-start:0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:14px}
  .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
  .hero-chips a{padding:7px 16px;font-size:15px}
  .demo-body{grid-template-columns:1fr}
  .demo-form{border-inline-end:0;border-bottom:1px solid var(--line)}
  .demo-log{min-height:0}
  .log-item{grid-template-columns:50px 24px minmax(0,1fr);font-size:14.5px;padding:8px}
  .row-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .project-aside{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .quote.reveal .bubble,.js .quote.reveal .quote-who{opacity:1;transform:none}
  .process li::after,.js .reveal .eyebrow::before,.js .eyebrow.reveal::before{transform:scaleX(1)}
  .scroll-progress{display:none}
}

/* ==========================================================
   BIZ ENGINE: גלגלי שיניים ועבודות בתוך מחשב (עמוד הבית)
   גלגלים שכנים מסתובבים בכיוונים הפוכים, בהפרש של חצי שן (15°),
   והמרחק בין המרכזים הוא 0.91 מהקוטר, כך שהשיניים משתלבות.
   בלי תנועה (prefers-reduced-motion) הכלל הכללי למעלה עוצר הכל
   ========================================================== */
@keyframes gear-spin{from{transform:rotate(var(--r0,0deg))}to{transform:rotate(calc(var(--r0,0deg) + 360deg))}}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- hero photo ---------- */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;opacity:.62;pointer-events:none}
/* בטלפון הטקסט יושב על מסך המחשב, אז הכתם הכהה מאחוריו רחב יותר */
@media (max-width:640px){.hero::after{background:radial-gradient(ellipse 95% 62% at 50% 42%,#0F1E42E6 0%,#0F1E42B3 55%,#0F1E4240 90%),linear-gradient(180deg,transparent calc(100% - 48px),var(--bg-deep))}}

/* ---------- gear stats ---------- */
.engine-section{background:radial-gradient(ellipse 60% 50% at 50% 65%,#2F7BFF14,transparent 70%)}
.engine{--g:clamp(150px,19vw,236px);display:flex;justify-content:center;list-style:none;padding:0;margin:0}
.gear-stat{position:relative;width:var(--g);aspect-ratio:1;flex:none;--r0:0deg;--stroke:var(--accent)}
.gear-stat+.gear-stat{margin-inline-start:calc(var(--g) * -.09)}
.gear-stat:nth-child(even){--r0:15deg;--stroke:var(--electric)}
.gear-svg,.cg svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--surface);stroke:var(--stroke);stroke-width:2.5;transform:rotate(var(--r0));transition:fill .4s,filter .4s}
.spin .gear-svg{animation:gear-spin 24s linear infinite}
.spin .gear-stat:nth-child(even) .gear-svg{animation-direction:reverse}
.gear-stat:hover .gear-svg{fill:var(--surface-2);filter:drop-shadow(0 0 22px #FF1F8E44)}
.gear-face{position:absolute;inset:22%;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;gap:2px}
.gear-face b{font-family:var(--font-display);font-weight:900;font-size:calc(var(--g) * .118);line-height:1.1;letter-spacing:-.01em}
.gear-face span{font-size:max(13px,calc(var(--g) * .07));color:var(--text-2);font-weight:600;line-height:1.2}
.gear-icon{width:calc(var(--g) * .17);height:calc(var(--g) * .17);margin-bottom:calc(var(--g) * .03);fill:none;stroke:var(--stroke);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.gear-stat:hover .gear-icon{transform:translateY(-3px) scale(1.08)}

/* ---------- הזמנה לבדיקת המנוע (בית ועמודי השירותים) ---------- */
/* שלושה גלגלים משתלבים, באותה גיאומטריה כמו בעמוד הבדיקה. מסתובבים רק כשהרצועה על המסך */
/* המסגרת זוהרת: קשת ורודה־כחולה מסתובבת סביב הכרטיס כשהוא על המסך */
@property --cb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cb-border{to{--cb-a:360deg}}
.check-band{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(28px,5vw,56px);border-radius:28px;border:2px solid transparent;background:radial-gradient(ellipse 60% 120% at 0% 50%,#2F7BFF2E,transparent 70%) padding-box,radial-gradient(ellipse 40% 80% at 10% 100%,#FF1F8E24,transparent 70%) padding-box,linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--cb-a),#FF1F8E55,#FF1F8E 50deg,#9CC4FF 105deg,#2F7BFF55 165deg,#2F7BFF55 250deg,#FF1F8E55 360deg) border-box;box-shadow:0 40px 90px -50px #FF1F8E77}
.check-band.spin{animation:cb-border 7s linear infinite}
/* רשת נקודות עדינה מאחורי הגלגלים, וזוהר שעוקב אחרי העכבר */
.check-band::before,.check-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.check-band::before{background:radial-gradient(#7DB2FF47 1.2px,transparent 1.7px) 0 0/22px 22px;-webkit-mask:radial-gradient(ellipse 50% 95% at 14% 50%,#000,transparent 75%);mask:radial-gradient(ellipse 50% 95% at 14% 50%,#000,transparent 75%)}
.check-band::after{opacity:0;transition:opacity .4s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),#FF1F8E1C,transparent 50%)}
.check-band:hover::after{opacity:1}
.check-band .h2 em{background:linear-gradient(to left,#8BB8FF 0%,var(--electric) 25%,var(--accent) 50%,var(--electric) 75%,#8BB8FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
.hero-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:-12px;font-size:17px;color:var(--text-2)}
.check-band-copy{display:grid;gap:18px;justify-items:start;max-width:600px}
.check-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
/* "חי": נקודה ירוקה פועמת, כמו מכשיר שמוכן לבדיקה */
.check-band-meta{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);background:#0A143073;font-size:14.5px;color:var(--text-2)}
.check-band-meta::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);animation:cb-live 2s ease-out infinite}
@keyframes cb-live{0%{box-shadow:0 0 0 0 #5FD3A099}70%,100%{box-shadow:0 0 0 7px #5FD3A000}}
/* הגלגלים הם ציור רקע: גדולים ושקופים למחצה, בצד שמאל, ונחתכים בקצה הכרטיס */
.check-band-gears{--d:clamp(140px,15vw,200px);position:absolute;z-index:-1;left:calc(var(--d) * -.45);top:50%;translate:0 -50%;width:calc(var(--d) * 2.576);height:calc(var(--d) * 1.455);opacity:.6;pointer-events:none}
.cbg{position:absolute;width:var(--d);aspect-ratio:1;--r0:0deg;--stroke:var(--accent)}
.cbg1{left:calc(var(--d) * 1.576);top:0}
.cbg2{left:calc(var(--d) * .788);top:calc(var(--d) * .455);--r0:15deg;--stroke:var(--electric)}
.cbg3{left:0;top:0}
.cbg>svg{width:100%;height:100%;fill:#13255080;stroke:var(--stroke);stroke-width:2.4;transform:rotate(var(--r0))}
.spin .cbg>svg{animation:gear-spin 36s linear infinite}
.spin .cbg2>svg{animation-direction:reverse}
.cbg-face{position:absolute;inset:0;display:grid;place-content:center;font-size:0}
.cbg-face svg{width:calc(var(--d) * .22);height:calc(var(--d) * .22);fill:none;stroke:var(--stroke);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.check-band.slim .h2{font-size:clamp(28px,3.4vw,42px)}
.check-band.slim .check-band-gears{--d:clamp(120px,13vw,170px)}

/* ---------- process gears ---------- */
/* כמו פאזל, רק עם גלגלים: באמצע ארבעה גלגלים משתלבים, ומשני הצדדים ארבעה כרטיסים צמודים אחד לשני.
   כל כרטיס נכנס מתחת לגלגל שלו עד המרכז, כך שהגלגל מכסה חצי ממנו. המרחק בין מרכזי גלגלים שכנים הוא .91 מהקוטר,
   ולכן העמודה האמצעית וגובה כל שורה = .91 מהקוטר. במחשב JS קובע את הקוטר (--cg) לפי גובה הכרטיסים */
.gear-steps{--cg:clamp(190px,17vw,230px);position:relative}
.gear-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--cg) * .91) minmax(0,1fr);grid-auto-rows:1fr}
.gear-list li{position:relative;--stroke:var(--accent);--sx:-1;background:var(--surface);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);display:grid;gap:8px;align-content:center;min-height:170px;transition:border-color .35s}
.gear-list .gs2,.gear-list .gs3{--stroke:var(--electric)}
.gear-list .gs2,.gear-list .gs4{--sx:1}
.gear-list li:hover{border-color:var(--line-strong)}
.gear-list h3{font-size:21px;font-weight:800}
.gear-list p{font-size:16px;color:var(--text-2)}
.gs-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--stroke);color:var(--stroke);font-family:var(--font-display);font-weight:800;font-size:15px}
/* רק הפינות החיצוניות של הבלוק מעוגלות */
.gs1{grid-column:1;grid-row:1;border-radius:0 calc(var(--r) * 1.5) 0 0}
.gs2{grid-column:3;grid-row:1;border-radius:calc(var(--r) * 1.5) 0 0 0}
.gs3{grid-column:1;grid-row:2;border-radius:0 0 calc(var(--r) * 1.5) 0}
.gs4{grid-column:3;grid-row:2;border-radius:0 0 0 calc(var(--r) * 1.5)}
/* הטקסט מתחיל אחרי חצי הגלגל שמכסה את הכרטיס */
@media (min-width:881px){
  .gear-list .gs1,.gear-list .gs3{padding-inline-end:calc(var(--cg) * .55 + 20px)}
  .gear-list .gs2,.gear-list .gs4{padding-inline-start:calc(var(--cg) * .55 + 20px)}
}
.gear-cluster{position:absolute;z-index:1;top:50%;left:50%;width:calc(var(--cg) * 1.91);aspect-ratio:1;translate:-50% -50%}
.cg{position:absolute;width:var(--cg);aspect-ratio:1;--r0:0deg;--dir:1;--stroke:var(--accent)}
.cg1{top:0;right:0}.cg2{top:0;left:0;--r0:15deg;--dir:-1;--stroke:var(--electric)}
.cg3{bottom:0;right:0;--r0:15deg;--dir:-1;--stroke:var(--electric)}.cg4{bottom:0;left:0}
/* הסיבוב נקבע לפי הגלילה (--turn מגיע מה-JS), גלגלים שכנים בכיוונים הפוכים */
.cg svg{transform:rotate(calc(var(--r0) + var(--turn,0deg) * var(--dir)))}
.cg b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:calc(var(--cg) * .3);line-height:1;color:var(--stroke)}
.gear-steps:has(.gs1:hover) .cg1 svg,.gear-steps:has(.gs2:hover) .cg2 svg,
.gear-steps:has(.gs3:hover) .cg3 svg,.gear-steps:has(.gs4:hover) .cg4 svg{fill:var(--surface-2);filter:drop-shadow(0 0 22px #FF1F8E55)}
/* הכניסה שלב אחרי שלב (JS מוסיף is-seq ומעדכן את --in לפי הגלילה). הגלגלים עומדים במקום,
   והכרטיס יוצא מתחת לגלגל שלו: מתחיל קטן ומוסתר מאחוריו, וגדל החוצה עד שהוא נצמד.
   --sx הוא הצד של הגלגלים: -1 משמאל לכרטיס, 1 מימין */
.gear-steps.is-seq .gear-list li{opacity:calc(var(--in,1) * 2.5);transform-origin:calc(50% + var(--sx) * 50%) 50%;transform:translateX(calc((1 - var(--in,1)) * var(--sx) * 45%)) scale(calc(.5 + .5 * var(--in,1)))}

/* ---------- projects in a laptop ---------- */
.showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(24px,4vw,48px);align-items:center}
.showcase-info{grid-column:1;grid-row:1;background:#EEF2FB;color:#0F1E42;border-radius:22px;padding:clamp(22px,3vw,34px);display:grid;gap:14px;box-shadow:0 30px 70px -30px #000A}
.laptop{grid-column:2;grid-row:1;position:relative;padding-bottom:14px}
.showcase-nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:16px}
.showcase-info h3{font-size:clamp(24px,2.4vw,32px);font-weight:900;line-height:1.15}
.showcase-info p{color:#334366;font-size:17px}
.showcase-info .tag{color:#21376C;border-color:#21376C40}
.showcase-info .link-arrow{color:#0F1E42}
.showcase-info .link-arrow::after{color:#2F5BD8}
.showcase-info .link-arrow::before{background:#2F5BD8}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px}
.sc-result{display:flex;align-items:baseline;gap:10px}
.sc-result b{font-family:var(--font-display);font-size:32px;font-weight:900;color:#D4006E}
.sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.sc-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text);font-size:18px;cursor:pointer;transition:border-color .25s,background .25s}
.sc-arrow:hover{border-color:var(--electric-2);background:#FFFFFF08}
.sc-dots{display:flex;gap:4px}
.sc-dots button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.sc-dots button::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--line-strong);transition:width .35s var(--ease),background .35s}
.sc-dots button[aria-current="true"]::before{width:26px;background:var(--accent)}

.laptop-lid{position:relative;background:#0A1430;border:1px solid var(--line-strong);border-radius:20px 20px 8px 8px;padding:16px 14px 14px;box-shadow:0 40px 90px -30px #000C}
.laptop-lid::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2A3B66}
.laptop-base{position:absolute;bottom:0;inset-inline:-5%;height:14px;background:linear-gradient(#2A3A66,#16244A);border-radius:2px 2px 14px 14px}
.laptop-base::after{content:"";position:absolute;top:0;left:50%;width:18%;height:5px;translate:-50% 0;background:#0F1E42;border-radius:0 0 6px 6px}
.laptop-screen{border-radius:8px;overflow:hidden;background:#0B1226;aspect-ratio:16/10;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.screen-bar{direction:ltr;display:flex;align-items:center;gap:10px;padding:7px 12px;background:#111A35;border-bottom:1px solid var(--line)}
.screen-dots{display:flex;gap:6px}
.screen-dots i{width:9px;height:9px;border-radius:50%;background:#FF5F57}
.screen-dots i:nth-child(2){background:#FEBC2E}.screen-dots i:nth-child(3){background:#28C840}
.screen-url{margin-inline:auto;font-family:var(--font-mono);font-size:12px;color:var(--muted);background:#0B1226;border:1px solid var(--line);border-radius:999px;padding:2px 16px}
.screen-stage{position:relative;overflow:hidden;container-type:size}
.screen-progress{height:3px;background:#FFFFFF10}
.screen-progress i{display:block;height:100%;background:linear-gradient(to left,var(--electric),var(--accent));transform:scaleX(0);transform-origin:right}
.showcase.run .screen-progress i{animation:sc-progress var(--dur,7s) linear forwards}
@keyframes sc-progress{to{transform:scaleX(1)}}
.demo-screen{position:absolute;inset:0;padding:1.2em;display:flex;flex-direction:column;gap:.8em;font-size:clamp(9px,2.1cqw,14px);line-height:1.35;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.demo-screen.active{opacity:1;visibility:visible}
.demo-screen b{font-family:var(--font-display)}

/* store */
.demo-store{background:linear-gradient(160deg,#1B1030,#0B0F22)}
.st-top{display:flex;align-items:center;gap:1em}
.st-top b{font-size:1.35em;font-weight:900;color:#FFB547}
.st-nav{color:#FFFFFF99}
.st-cart{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.4em}
.st-cart svg{width:1.6em;height:1.6em;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-cart i{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--accent);color:var(--on-accent);font-style:normal;font-weight:800}
.st-cart i span{grid-area:1/1}
.st-cart i span+span{opacity:0}
.st-hero{display:grid;border-radius:.8em;padding:.8em 1.1em;background:linear-gradient(110deg,#FF8A3D,#FF1F8E 60%,#7A3CFF)}
.st-hero b{font-size:1.45em;font-weight:900}
.st-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em}
.st-card{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.4em;min-height:0}
.st-poster{position:relative;overflow:hidden;border-radius:.6em;display:flex;align-items:flex-end;padding:.6em;font-weight:800;background:linear-gradient(170deg,#2F7BFF,#0B1A4A)}
.c2 .st-poster{background:linear-gradient(170deg,#FF8A3D,#7A1F3D)}
.c3 .st-poster{background:linear-gradient(170deg,#5FD3A0,#0F3D3A)}
.c4 .st-poster{background:linear-gradient(170deg,#B37DFF,#2A1655)}
.st-poster em{position:absolute;inset:0;display:grid;place-items:center;background:#0A1430D9;font-style:normal;font-weight:800;opacity:0}
.st-row{display:flex;justify-content:space-between;align-items:center;font-size:.9em}
.st-buy{background:#FFFFFF14;border-radius:999px;padding:.1em .7em}
.spin .demo-store.active .pick .st-poster em{animation:st-added 6s infinite}
.spin .demo-store.active .pick .st-buy{animation:st-buy 6s infinite}
.spin .demo-store.active .st-cart i span:first-child{animation:st-count-a 6s infinite}
.spin .demo-store.active .st-cart i span+span{animation:st-count-b 6s infinite}
.spin .demo-store.active .st-cart i{animation:st-pop 6s infinite}
@keyframes st-added{0%,34%{opacity:0}40%,82%{opacity:1}90%,100%{opacity:0}}
@keyframes st-buy{0%,28%{background:#FFFFFF14;color:inherit}32%,42%{background:var(--accent);color:var(--on-accent)}50%,100%{background:#FFFFFF14;color:inherit}}
@keyframes st-count-a{0%,38%{opacity:1}42%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes st-count-b{0%,38%{opacity:0}42%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes st-pop{0%,38%{transform:scale(1)}42%{transform:scale(1.3)}48%,100%{transform:scale(1)}}

/* invoices */
.demo-invoices{background:#0E1A38}
.iv-head{display:flex;justify-content:space-between;align-items:center}
.iv-head b{font-size:1.25em;font-weight:900}
.iv-auto{display:inline-flex;align-items:center;gap:.45em;color:var(--ok);font-size:.9em}
.iv-auto i{width:.55em;height:.55em;border-radius:50%;background:var(--ok);box-shadow:0 0 0 .25em #5FD3A033}
.iv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.iv-stats div{display:grid;background:#FFFFFF0A;border:1px solid var(--line);border-radius:.6em;padding:.45em .7em}
.iv-stats small{color:var(--muted);font-size:.85em}
.iv-stats b{font-size:1.3em;font-weight:800}
.iv-list{flex:1;min-height:0;display:grid;gap:.35em;align-content:start;overflow:hidden}
.iv-row{display:grid;grid-template-columns:4.2em minmax(0,1fr) 4.8em 4.6em;gap:.5em;align-items:center;padding:.5em .7em;border-radius:.5em;background:#FFFFFF08;border:1px solid transparent}
.iv-row em{justify-self:end;font-style:normal;font-size:.85em;color:var(--ok)}
.iv-row.new{background:#5FD3A01A;border-color:#5FD3A055}
.iv-toast{position:absolute;left:1.2em;bottom:1.2em;background:var(--ok);color:#06251A;font-weight:800;padding:.5em .9em;border-radius:.6em;box-shadow:0 1em 2em -1em #000;opacity:0}
.spin .demo-invoices.active .iv-row.new{animation:iv-in 6s infinite}
.spin .demo-invoices.active .iv-toast{animation:iv-toast 6s infinite}
@keyframes iv-in{0%,8%{margin-top:-2.6em;opacity:0}20%,100%{margin-top:0;opacity:1}}
@keyframes iv-toast{0%,20%{opacity:0;transform:translateY(.8em)}28%,78%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(.8em)}}

/* grades */
.demo-grades{background:#101C3D}
.gr-head{display:flex;justify-content:space-between;align-items:center;gap:1em}
.gr-head b{font-size:1.25em;font-weight:900}
.gr-tabs{display:flex;gap:.35em}
.gr-tabs span{padding:.15em .8em;border-radius:999px;background:#FFFFFF0D;font-size:.9em}
.gr-tabs .on{background:var(--electric);color:#fff}
.gr-table{flex:1;min-height:0;display:grid;gap:.5em;align-content:center}
.gr-row{display:grid;grid-template-columns:7em minmax(0,1fr) 2em;gap:.8em;align-items:center}
.gr-bar{height:.7em;border-radius:999px;background:#FFFFFF10;overflow:hidden}
.gr-bar i{display:block;height:100%;width:var(--v);border-radius:inherit;background:linear-gradient(to left,var(--electric-2),var(--electric));transform:scaleX(0);transform-origin:right;transition:transform 1.2s var(--ease)}
.demo-grades.active .gr-bar i{transform:scaleX(1)}
.gr-row:nth-child(2) i{transition-delay:.12s}.gr-row:nth-child(3) i{transition-delay:.24s}
.gr-row:nth-child(4) i{transition-delay:.36s}.gr-row:nth-child(5) i{transition-delay:.48s}
.gr-avg{display:flex;justify-content:space-between;align-items:center;background:#2F7BFF1F;border:1px solid #2F7BFF55;border-radius:.6em;padding:.45em .8em}
.gr-avg b{font-size:1.4em;font-weight:900}

/* מסך מחשב צר: פחות פרטים */
@container (max-width:460px){
  .st-nav,.st-card.c4,.iv-stats div:nth-child(3){display:none}
  .st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .iv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iv-row{grid-template-columns:4em minmax(0,1fr) 4.4em}
  .iv-row em{display:none}
  .gr-row{grid-template-columns:6em minmax(0,1fr) 2em}
}

@media (max-width:880px){
  .check-band-gears,.check-band.slim .check-band-gears{--d:118px;top:-22px;left:-46px;translate:none;opacity:.6}
  .check-band::before{-webkit-mask:radial-gradient(ellipse 70% 40% at 15% 8%,#000,transparent 75%);mask:radial-gradient(ellipse 70% 40% at 15% 8%,#000,transparent 75%)}
  /* הגלגלים בטור משתלב צמוד לכרטיסים מימין ונשארים מול העיניים בזמן הגלילה. בטור גלגלים 3 ו-4 מתחלפים בצבע ובכיוון,
     והכרטיסים מקבלים את הצבע של הגלגל שלהם ויוצאים מתחתיו, מימין */
  .gear-steps{--cg:clamp(72px,22vw,110px);display:grid;grid-template-columns:var(--cg) minmax(0,1fr);gap:0;align-items:start}
  .gear-list{grid-template-columns:1fr;grid-auto-rows:auto;row-gap:12px}
  .gear-list li{grid-column:1;grid-row:auto;min-height:0;border-radius:var(--r);--sx:1}
  .gear-list .gs3{--stroke:var(--accent)}.gear-list .gs4{--stroke:var(--electric)}
  .gear-cluster{position:sticky;top:88px;left:auto;translate:none;width:var(--cg);height:calc(var(--cg) * 3.73);aspect-ratio:auto}
  .cg{left:auto;right:0;bottom:auto}
  .cg2{top:calc(var(--cg) * .91)}
  .cg3{top:calc(var(--cg) * 1.82);--r0:0deg;--dir:1;--stroke:var(--accent)}
  .cg4{top:calc(var(--cg) * 2.73);--r0:15deg;--dir:-1;--stroke:var(--electric)}
  .showcase{grid-template-columns:1fr}
  .laptop{grid-column:1;grid-row:1}
  .showcase-nav{grid-row:2}
  .showcase-info{grid-column:1;grid-row:3}
}
@media (max-width:640px){
  /* ארבעה גלגלים בריבוע: כיוונים והיסטים מחושבים מחדש כדי שימשיכו להשתלב */
  .engine{--g:min(44vw,200px);display:grid;grid-template-columns:repeat(2,var(--g));justify-content:center;margin-bottom:calc(var(--g) * -.09)}
  .gear-stat+.gear-stat{margin:0}
  .gear-stat:nth-child(2){translate:calc(var(--g) * .09) 0}
  .gear-stat:nth-child(3){translate:0 calc(var(--g) * -.09);--r0:15deg;--stroke:var(--electric)}
  .gear-stat:nth-child(4){translate:calc(var(--g) * .09) calc(var(--g) * -.09);--r0:0deg;--stroke:var(--accent)}
  .spin .gear-stat:nth-child(3) .gear-svg{animation-direction:reverse}
  .spin .gear-stat:nth-child(4) .gear-svg{animation-direction:normal}
}

/* ==========================================================
   BIZ ENGINE: אזור בהיר, כרטיסי שירות, הדמיות ועמוד פרויקט
   ========================================================== */

/* ---------- light section ---------- */
/* אזור בהיר שמאוורר את העמוד. מגדיר מחדש את המשתנים, כך שכל הרכיבים בתוכו מתאימים את עצמם */
.section-light{
  color-scheme:light;
  --text:#0F1E42;
  --text-2:#3A4766;
  --muted:#56637F;
  --surface:#FFFFFF;
  --surface-2:#EEF2FB;
  --line:#0F1E4214;
  --line-strong:#0F1E422B;
  --electric-2:#2F5BD8;
  --accent-ink:#D4006E;
  background:linear-gradient(180deg,#F5F7FD,#E9EEF8);color:var(--text)
}
.section-light .accent{color:var(--accent-ink)}
.section-light .eyebrow::before{background:var(--accent)}
.section-light .link-arrow::after{color:var(--accent-ink)}
.section-light .link-arrow::before{background:var(--accent-ink)}
.section-light .btn-ghost{color:var(--text)}

/* ---------- service cards ---------- */
.service::before{content:"";position:absolute;top:-1px;inset-inline:24px;height:2px;border-radius:2px;background:linear-gradient(to left,var(--accent),var(--electric));transform:scaleX(0);transition:transform .45s var(--ease)}
.service:hover::before{transform:scaleX(1)}
.service-get{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:-8px}
.section-light .service{box-shadow:0 1px 2px #0F1E420D,0 20px 44px -30px #0F1E4266}
.section-light .service:hover{border-color:#FF1F8E55;box-shadow:0 1px 2px #0F1E420D,0 30px 56px -28px #0F1E4277}
.section-light .service::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#FF1F8E0F,transparent 45%)}
.section-light .service-icon{background:#FF1F8E12}
.section-light .service-icon svg,.section-light .service:hover .service-icon svg{stroke:var(--accent-ink)}
.section-light .service:hover .service-icon{background:#FF1F8E1F;box-shadow:0 12px 28px -12px #FF1F8E77}
.section-light .service li::before{background:var(--accent-ink)}
.section-light .value{border-top-color:var(--accent)}

/* ---------- showcase: screenshots and simulations ---------- */
.demo-shot{padding:0;background:#0B1226}
.demo-shot img,.demo-shot video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.screen-tag{flex:none;font-family:var(--font-body);font-size:11px;font-weight:700;color:#FF7DBE;border:1px solid #FF1F8E55;border-radius:999px;padding:0 8px}
.sc-note{font-size:13.5px;color:#56637F;line-height:1.5}

/* ---------- project page ---------- */
.built-list{list-style:none;padding:0;display:grid;gap:10px}
.built-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--text-2)}
.built-list li::before{content:"";width:8px;height:8px;margin:11px 7px 0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- about: brand portrait ---------- */
.portrait-brand{align-content:center;justify-items:center;gap:22px;background:radial-gradient(circle at 50% 38%,#FF1F8E26,transparent 55%),linear-gradient(160deg,#1F4597,#152752)}
.portrait-gear{width:44%;aspect-ratio:1;display:grid;place-items:center}
.portrait-gear svg{width:100%;height:100%;fill:#FF1F8E1A;stroke:var(--accent);stroke-width:.6;filter:drop-shadow(0 0 22px #FF1F8E66)}
.spin .portrait-gear svg{animation:gear-idle 40s linear infinite}
.portrait-name{display:grid;gap:6px;text-align:center}
.portrait-name b{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3vw,36px);letter-spacing:.08em;direction:ltr;line-height:1}
.portrait-name span{color:var(--text-2);font-weight:600}

@media (max-width:640px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-about{grid-column:1/-1}
  .footer-bottom{flex-direction:column}
}
@media (max-width:380px){
  .brand-text small{display:none}
}
.project-demo .screen-stage{position:absolute;inset:0}
.project-demo{aspect-ratio:16/10;max-width:900px;margin-inline:auto}
.project-demo .demo-screen{font-size:clamp(9px,2.1cqw,17px)}
.cover-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px;color:var(--muted)}
.cover-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* סרטון גלילה: כפתור עצירה/הפעלה */
.sc-play{font-size:13px;letter-spacing:-.1em}
.project-video{aspect-ratio:16/10;max-width:1000px;margin-inline:auto}
.project-video video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.video-toggle{position:absolute;bottom:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:50%;border:1px solid #FFFFFF40;background:#0A1430CC;color:#fff;font-size:13px;letter-spacing:-.1em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s}
.video-toggle:hover{background:var(--accent);color:var(--on-accent)}

/* ---------- services: four cards (wide and short) ---------- */
/* במסך רחב: 2x2. בתוך כל כרטיס: אייקון ליד הכותרת, והרשימה בצד של הטקסט */
@media (max-width:1020px){.services.four{grid-template-columns:1fr}}
@media (min-width:1021px){
  /* הרשת יוצאת מעט מרוחב הטקסט הרגיל (1180px) כדי שהכרטיסים יהיו רחבים יותר */
  .services.four{--sw:min(1320px,calc(100vw - 2 * var(--gutter)));margin-inline:calc((100% - var(--sw)) / 2);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (min-width:700px){
  .services.four .service{
    padding:clamp(24px,2.4vw,32px);
    grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "icon title title"
      "desc desc get"
      "desc desc list"
      "link link list";
    column-gap:16px;row-gap:12px;align-items:start;align-content:start
  }
  .services.four .service-icon{grid-area:icon;margin:0}
  .services.four .service h3{grid-area:title;align-self:center;font-size:clamp(21px,1.9vw,25px)}
  .services.four .service p{grid-area:desc;padding-inline-end:12px}
  .services.four .service-get{grid-area:get;margin:0}
  .services.four .service ul{grid-area:list;margin:0}
  .services.four .service .link-arrow{grid-area:link;align-self:end;justify-self:start;margin:0}
}

/* ---------- AI chat demo ---------- */
.chat-body{padding:20px;display:flex;flex-direction:column;gap:10px;min-height:400px;background:linear-gradient(180deg,#0F1E4299,#132550)}
.chat-msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.5;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--ease)}
.chat-msg.user{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-start-start-radius:4px}
.chat-msg.bot{align-self:flex-end;background:var(--electric-soft);border:1px solid #2F7BFF55;border-start-end-radius:4px}
.chat-msg.on{opacity:1;transform:none}
.chat-typing{align-self:flex-end;display:none;gap:5px;padding:12px 16px;border-radius:16px;border-start-end-radius:4px;background:var(--electric-soft);border:1px solid #2F7BFF55}
.chat-typing.on{display:inline-flex}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--electric-2);animation:chat-dot 1s infinite ease-in-out}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.chat-actions.on{opacity:1;transform:none}
.chat-act{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:7px 12px;border-radius:999px;background:#5FD3A01A;border:1px solid #5FD3A055;color:var(--text)}
.chat-act i{font-style:normal;color:var(--ok);font-weight:700}
@media (max-width:640px){.chat-msg{max-width:90%;font-size:15px}.chat-body{min-height:440px}}
@media (prefers-reduced-motion:reduce){.chat-msg,.chat-actions{transition:none}.chat-typing span{animation:none}}

/* ---------- AI demo bot ---------- */
.chat-demo[data-bot] .chat-body{height:420px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.chat-msg{white-space:pre-line}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 0}
.chat-chip{font:inherit;font-size:14.5px;line-height:1.3;padding:8px 14px;border-radius:999px;border:1px solid #2F7BFF77;background:var(--electric-soft);color:var(--text);cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.chat-chip:hover{background:#2F7BFF33;border-color:var(--electric-2);transform:translateY(-1px)}
.chat-chip:focus-visible,.chat-form input:focus-visible{outline:2px solid var(--electric-2);outline-offset:2px}
.chat-cta{width:100%;justify-content:center}
.chat-form{display:flex;gap:8px;padding:12px 20px 6px}
.chat-form input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:11px 16px;color:var(--text);font:inherit;font-size:16px}
.chat-form input::placeholder{color:var(--muted)}
.chat-form input:disabled{opacity:.6}
.chat-form .btn{padding:11px 20px;flex:none}
.chat-note{padding:0 20px 16px;font-size:13px;color:var(--muted)}
@media (max-width:640px){.chat-demo[data-bot] .chat-body{height:380px}}
.chat-form .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- demo bot: apartment cards ---------- */
.apt-list{display:grid;gap:8px;align-self:stretch;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--ease)}
.apt-list.on{opacity:1;transform:none}
.apt-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-strong)}
.apt-card .apt-tag{grid-column:1/-1;justify-self:start;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:#FF8AC4;margin-bottom:4px}
.apt-card b{font-family:var(--font-display);font-size:15.5px;grid-column:1}
.apt-card .apt-info{font-size:13.5px;color:var(--muted);grid-column:1}
.apt-card .apt-price{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--electric-2);grid-column:1}
.apt-card .apt-btn{grid-column:2;grid-row:2/5;font:inherit;font-size:13.5px;font-weight:700;padding:8px 12px;border-radius:999px;border:1px solid #2F7BFF77;background:var(--electric-soft);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .25s}
.apt-card .apt-btn:hover{background:#2F7BFF44}
@media (max-width:420px){.apt-card{grid-template-columns:1fr}.apt-card .apt-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}}