/* =========================================================
   CK Digital 360, עמוד וורדפרס ואלמנטור (elementor.html).
   נטען אחרי theme.css ו-home2.css. משתמש ברכיבי hx- של דף הבית ומוסיף רק מה שחסר, עם קידומת el-.
   כלל: אין צבע קשיח. כל ערך דרך משתנה עם ערך גיבוי. אריח שמחזיק צילום מסך הוא אי כהה (on-dark / --media).
   מובייל קודם: הבסיס נכתב לרוחב 390, ומעליו שתי מדרגות (761, 1061).
   ========================================================= */

/* ---------- משותף ---------- */
.el-k{font-size:13px;font-weight:600;color:var(--pink-ink,#F0508F);font-feature-settings:"tnum" 1;letter-spacing:.02em}
.el-cap{font-size:14.5px;line-height:1.5;color:var(--grey,#86868b);max-width:60ch;text-wrap:pretty}
/* התג הוא אי כהה (on-dark ב-HTML): סימן וורדפרס הופך ללבן, סימן Elementor נשאר בצבע המקורי שלו */
.el-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--bg-2,#0b0b0c);color:var(--text,#f5f5f7);box-shadow:inset 0 0 0 1px var(--hair-2,rgba(245,245,247,.2));font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.3;white-space:nowrap}
.el-badge__marks{display:inline-flex;align-items:center;gap:6px}
.el-badge img{display:block;height:22px;width:22px}
.el-badge .el-mark--wp{filter:brightness(0) invert(1)}
.el-badge .el-mark--el{border-radius:5px}
.el-tag{position:absolute;z-index:3;inset-block-start:-13px;inset-inline-start:14px;padding:5px 12px;border-radius:999px;background:var(--text,#f5f5f7);color:var(--bg,#000);font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.el-win{display:block}
.el-win .hx-win__view{background:var(--tile-2,#161617)}

/* מסגרת טלפון: מסך 600x1298, מסגרת דקה, אי כהה */
.el-phone{display:block;padding:5px;border-radius:26px;background:var(--tile,#1d1d1f);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),0 30px 60px -24px rgba(0,0,0,.85)}
.el-phone__scr{position:relative;display:block;aspect-ratio:600/1298;border-radius:21px;overflow:hidden;background:var(--media,#0b0b0c)}
.el-phone__scr::before{content:"";position:absolute;z-index:1;inset-block-start:7px;inset-inline-start:50%;translate:-50% 0;width:34%;height:9px;border-radius:999px;background:var(--tile,#1d1d1f)}
.el-phone__scr video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.el-phone__scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.el-phone--s{padding:4px;border-radius:18px}
.el-phone--s .el-phone__scr{border-radius:14px}
.el-phone--s .el-phone__scr::before{height:6px;inset-block-start:5px}

/* מסגרת מחשב נייד: מסך 16/10 ובסיס דק */
.el-lap{display:block}
.el-lap__scr{display:block;padding:8px 8px 0;border-radius:14px 14px 4px 4px;background:var(--tile,#1d1d1f);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),0 30px 60px -24px rgba(0,0,0,.85)}
.el-lap__scr video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:7px 7px 0 0;background:var(--media,#0b0b0c)}
.el-lap__scr img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:7px 7px 0 0;background:var(--media,#0b0b0c)}
.el-lap__base{display:block;height:12px;margin-inline:-3%;border-radius:0 0 12px 12px;background:var(--tile-3,#2a2a2c);box-shadow:0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.el-lap__base::before{content:"";display:block;width:16%;height:4px;margin-inline:auto;border-radius:0 0 6px 6px;background:var(--tile-2,#161617)}
/* מסך שמתחלף בין כמה צילומים, ב-CSS בלבד */
.el-rot{position:relative;display:block;aspect-ratio:16/10;border-radius:7px 7px 0 0;overflow:hidden;background:var(--media,#0b0b0c)}
.el-rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;animation:el-rot 12s ease-in-out infinite}
.el-rot img:first-child{opacity:1;animation:none}
.el-rot img:nth-child(2){animation-delay:4s}
.el-rot img:nth-child(3){animation-delay:8s}
@keyframes el-rot{0%{opacity:0}4%,37%{opacity:1}41%,100%{opacity:0}}
.still .el-rot img{animation-play-state:paused}

/* ---------- 1. ראש העמוד ---------- */
.el-hero{position:relative;overflow:clip;background:var(--bg,#000);padding-block:calc(74px + 16px) 0}
.el-hero__grid{display:grid;gap:18px}
.el-hero__copy{display:contents}
.el-hero .crumbs{order:0;justify-self:start;margin-block-end:0}
.el-hero .el-badge{order:1;justify-self:start}
.el-hero .hx-h1{order:2;font-size:clamp(30px,8.6vw,48px)}
.el-hero .hx-h1__f{color:var(--text,#f5f5f7)}
.el-hero .hx-h1__o{-webkit-text-stroke-width:1.5px}
.el-stage{order:3;position:relative;width:100%;aspect-ratio:1/1;margin-block:10px 24px}
.el-hero .hx-lead{order:4;font-size:17px}
.el-hero .hx-hero__ctas{order:5;margin-block-start:0;width:100%}
.el-hero .hx-hero__ctas .btn{flex:1 1 100%}
.el-hero .hx-hero__proof{order:6;margin-block-start:0;gap:8px 18px;font-size:14px}
.el-hero .hx-hero__proof li+li::before{display:none}
.el-dev{position:absolute;display:block;transition:transform .6s var(--ease,ease)}
.el-dev:hover{transform:translateY(-5px)}
.el-dev--lap{inset-block-start:10%;inset-inline-end:-2%;width:90%;z-index:1}
.el-dev--ph{inset-block-end:-4%;inset-inline-start:-2%;width:35%;z-index:2}
.el-dev--ph .el-tag{inset-inline-start:auto;inset-inline-end:10px}
/* רצועת הלוגואים של האתרים שבעמוד, מתחת לראש העמוד */
.el-hero__logos{margin-block-start:clamp(34px,6vh,64px);padding-block:20px 6px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.el-hero__logos p{font-size:14px;font-weight:600;color:var(--grey,#86868b);margin-block-end:2px}
.el-hero__logos .hx-marq--logos img{opacity:.9}
.el-hero__logos .el-logo--pad{height:76px;max-width:none}
.el-hero__logos .el-logo--h{height:36px}

/* ---------- 2. למה וורדפרס ואלמנטור ---------- */
.el-why__grid{display:grid;gap:34px}
.el-why__stage{order:-1}
.el-why__stage .el-cap{margin-block-start:14px}
.el-why__win img{animation:hx-pan 34s ease-in-out infinite alternate!important;transition:none!important}
.el-why__win:hover img{animation-play-state:paused}
.el-why__list{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.el-why__list li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:6px;padding-block:20px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}
.el-why__list .el-k{padding-block-start:8px}
.el-why__list h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.el-why__list p{grid-column:2;font-size:16px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:46ch;text-wrap:pretty}
.el-why .hx-more{margin-block-start:26px}

/* ---------- 3. אתרים שבניתי ---------- */
.el-sites__grid{list-style:none;margin:0;padding:0;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1*var(--gutter,18px));padding-inline:var(--gutter,18px);scroll-padding-inline:var(--gutter,18px);padding-block:2px 30px}
.el-sites__grid::-webkit-scrollbar{display:none}
.el-site{flex:none;width:82vw;max-width:560px;scroll-snap-align:start}
.el-site>a{position:relative;display:block}
.el-site .hx-win{position:relative;transition:transform .6s var(--ease,ease),box-shadow .6s var(--ease,ease)}
.el-site>a:hover .hx-win{transform:translateY(-6px);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),var(--shadow,0 40px 90px -40px rgba(0,0,0,.9))}
.el-site__ph{position:absolute;z-index:2;inset-block-end:-9%;inset-inline-end:16px;width:27%;max-width:150px;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));transition:transform .8s var(--ease,ease)}
.el-site>a:hover .el-site__ph{transform:translateY(-10px)}
/* מסגרת עם המסך הראשון בלבד, לאתר שצילום העמוד הארוך שלו לא נקי */
.el-win--static .hx-win__view img{height:100%;object-fit:cover;object-position:50% 0}
.el-site .hx-site__cap{padding-block-start:16px;padding-inline-end:52px}
.el-site .hx-site__cap em{line-height:1.4}
.el-site .hx-site__cap i{inset-block-start:16px}
.el-site>a:hover .hx-site__cap i{background:var(--text,#f5f5f7);color:var(--bg,#000)}
/* האריח האחרון: פנייה, באותו גובה של המסגרות */
.el-site--cta{display:grid}
.el-site__cta{display:grid;align-content:center;justify-items:start;gap:14px;min-height:var(--vh,300px);padding:26px 24px;border-radius:16px;background:var(--tile,#1d1d1f);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.el-site__cta b{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.el-site__cta p{font-size:16px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:34ch;text-wrap:pretty}
.el-site__cta .btn{margin-block-start:6px}
.el-sites .hx-more{margin-block-start:10px}

/* ---------- 4. מה נבנה בפועל ---------- */
.el-build__grid{display:grid;gap:28px}
.el-build__stage{order:-1}
.el-build__comp{position:relative;width:100%;aspect-ratio:1/.86}
.el-build__comp .el-dev--lap{inset-block-start:4%;inset-inline-end:0;width:92%}
.el-build__comp .el-dev--ph{inset-block-end:0;inset-inline-start:-2%;width:33%}
.el-build__stage .el-cap{margin-block-start:14px}
.el-build__list{margin:0;display:grid;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.el-build__list>div{display:grid;gap:8px;padding-block:20px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}
.el-build__list dt{display:flex;align-items:baseline;gap:12px;font-size:clamp(21px,2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.el-build__list dd{margin:0;font-size:16px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:48ch;text-wrap:pretty;padding-inline-start:calc(12px + 2.2ch)}
.el-build .hx-more{margin-block-start:26px}

/* ---------- 5. הוכחה ---------- */
.el-proof__grid{display:grid;gap:16px}
.el-proof__sum{display:grid;justify-items:start;align-content:start;gap:6px;padding:24px 26px;border-radius:var(--r-l,28px);background:var(--tile,#1d1d1f)}
.el-proof__sum .hx-g{width:26px;height:26px}
.el-proof__sum p{display:flex;align-items:center;gap:12px}
.el-proof__sum b{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
.el-proof__sum>span{font-size:14.5px;color:var(--grey,#86868b)}
.el-proof__sum a{margin-block-start:8px}
.el-rev{width:auto;padding:24px;background:var(--tile,#1d1d1f)}
.el-rev blockquote{font-size:17px;line-height:1.65;color:var(--text-2,#a1a1a6)}
.el-rev mark{background:rgba(var(--fg-rgb,245,245,247),.1);color:var(--text,#f5f5f7);border-radius:6px;padding:1px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.el-rev__src{font-size:13.5px;color:var(--grey,#86868b)}

/* ---------- 6. איך עובדים ---------- */
.el-how .hx-me__say>.hx-eyebrow{margin-block-end:-6px}
.el-how .hx-h2{max-width:14ch}

/* ---------- 7. אחרי ההשקה ---------- */
.el-care__tile{display:grid;gap:26px;padding:24px 20px;border-radius:var(--r-xl,36px);background:var(--tile-2,#161617);overflow:hidden}
.el-care__copy{display:grid;gap:16px;justify-items:start}
.el-care__copy .hx-h2{font-size:clamp(30px,3.6vw,54px)}
.el-care__copy p:not(.hx-eyebrow){font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:var(--text-2,#a1a1a6);max-width:52ch;text-wrap:pretty}
.el-care__fig{position:relative;margin:0;padding-block-start:14px}
.el-care__fig figcaption{margin-block-start:14px;font-size:14px;color:var(--text-2,#a1a1a6);line-height:1.5}

/* ---------- 8. שאלות ---------- */
.el-faq .faq__side h2{font-size:clamp(32px,3.2vw,48px);font-weight:700;letter-spacing:-.028em;line-height:1.06}
.el-faq .faq__me a{color:var(--pink-ink,#F0508F)}

/* ---------- 9. מדברים ---------- */
.el-talk__head{margin-block-end:8px}
.el-talk .hx-h2{font-size:clamp(32px,4.2vw,60px)}
.el-talk .f{margin-block-start:10px}

/* ---------- טאבלט ומעלה ---------- */
@media (min-width:761px){
  .el-hero{padding-block-start:calc(74px + clamp(24px,5vh,56px))}
  .el-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(30px,5vw,80px);align-items:center;min-height:calc(min(100svh,820px) - 74px - clamp(24px,5vh,56px))}
  .el-hero__copy{display:grid;gap:20px;justify-items:start}
  .el-hero .hx-h1{font-size:clamp(34px,4.3vw,66px)}
  .el-hero .hx-h1__o{-webkit-text-stroke-width:2px}
  .el-stage{aspect-ratio:1/.92;margin-block:0;overflow:visible}
  .el-hero .hx-lead{font-size:clamp(18px,1.45vw,22px)}
  .el-hero .hx-hero__ctas{width:auto;margin-block-start:6px}
  .el-hero .hx-hero__ctas .btn{flex:none}
  .el-hero .hx-hero__proof{gap:10px 26px;font-size:15px;margin-block-start:6px}
  .el-hero .hx-hero__proof li+li::before{display:block}
  .el-dev--lap{inset-block-start:12%;inset-inline-end:0;width:88%}
  .el-dev--ph{inset-block-end:-3%;inset-inline-start:-3%;width:34%}
  .el-why__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:start}
  .el-why__stage{order:0;position:sticky;inset-block-start:96px}
  .el-why__list li{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-block:24px}
  .el-sites__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.4vw,52px) clamp(16px,2vw,28px);overflow:visible;margin-inline:0;padding:0}
  .el-site{width:auto;max-width:none}
  .el-site__ph{width:26%;max-width:160px;inset-inline-end:22px}
  .el-build__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
  .el-build__stage{order:0;position:sticky;inset-block-start:96px}
  .el-build__list>div{padding-block:22px}
  .el-proof__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,2.4vw,36px);align-items:start}
  .el-rev{padding:30px}
  .el-care__tile{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(30px,4vw,70px);align-items:center;padding:clamp(28px,4vw,64px)}
  .el-care__fig{padding-block-start:0}
}
@media (min-width:1061px){
  .el-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .el-dev--lap{width:86%;inset-inline-end:-6%;inset-block-start:14%}
  .el-dev--ph{width:31%;inset-inline-start:-5%;inset-block-end:-2%}
  .el-why__list li{padding-block:clamp(22px,2.6vh,30px)}
  .el-sites__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .el-site__ph{width:30%;max-width:140px;inset-inline-end:16px}
}
@media (max-width:760px){
  .el-site .hx-win{--vh:clamp(280px,56vh,380px)}
  .el-site__cta{min-height:clamp(280px,56vh,380px)}
  .el-how .hx-me__steps span{text-align:end}
}
@media (hover:none){
  .el-dev:hover,.el-site>a:hover .hx-win,.el-site>a:hover .el-site__ph{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .el-dev,.el-site .hx-win,.el-site__ph{transition:none}
  .el-rot img{animation:none}
  .el-why__win img{animation:none!important}
}