/* ============================================================
   דף הנחיתה — מה שמבקר לא מחובר רואה
   ============================================================ */
#landing{display:block;position:relative}
#landing[hidden]{display:none}

/* ---------- שכבת רקע ---------- */
.bg-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-art img{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;
  opacity:var(--o);
  /* מסכה רדיאלית — בלי זה נראים גבולות מלבניים של הקובץ */
  -webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 48%,transparent 100%);
}
/* ---- סצנה: מלכה + נתינים ----
   כל היחסים נגזרים מ---qw (רוחב המלכה) ומכוילים כך שקווי הקרקע מתלכדים:
   סוליית המגף של המלכה יושבת ב-78.6% מגובה הקובץ, קרקע הנתין ב-81.9%,
   ולכן ההיסטים השליליים למטה שונים בין השניים. */
.bg-art .scene{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--qw) * 2.3);height:calc(var(--qw) * 1.45);
  opacity:var(--o);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
}
/* top:auto חובה — הכלל הכללי .bg-art img מגדיר top:var(--y), וה---y יורש
   מהסצנה. בלי האיפוס כל שלוש הדמויות מקבלות אותו top וה-bottom מתעלם. */
.bg-art .scene img{position:absolute;top:auto;opacity:1;width:auto}
.bg-art .scene .q {width:var(--qw);            left:calc(var(--qw) * .50); bottom:calc(var(--qw) * -.298)}
.bg-art .scene .k1{width:calc(var(--qw) * .93); left:0;                     bottom:calc(var(--qw) * -.22)}
.bg-art .scene .k2{width:calc(var(--qw) * .76); left:calc(var(--qw) * 1.26);bottom:calc(var(--qw) * -.18);
  transform:scaleX(-1)}   /* הפוך, כדי שיפנה אל המלכה ולא ממנה */

/* פריז רוחבי — נמתח לכל הרוחב ודוהה בקצוות במקום להיחתך */
.bg-art .frieze{
  left:0;right:0;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* התוכן תמיד מעל הרקע */
#landing > section,#landing > .band,#landing > footer{position:relative;z-index:1}

/* ⚠️ 88px היו הופכים כל מקטע לעמוד שלם. דף הנחיתה הגיע ל-8,220px
   וה-CTA הראשון ישב ב-75% מגובה המסך — כלומר מבקר היה צריך לגלול
   כדי להגיע לכפתור. 52px מקצרים את הדף בכשליש בלי לדחוס. */
.sec{max-width:1160px;margin:0 auto;padding:52px 20px;position:relative}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:2.2px;
  color:var(--gold);border:1px solid rgba(232,199,102,.32);border-radius:999px;
  padding:7px 16px;margin-bottom:20px;background:rgba(232,199,102,.05)}
.sec h2{font-size:clamp(26px,4vw,40px);margin:0 0 14px;line-height:1.2;letter-spacing:-.5px}
.sec-head p{color:var(--muted);font-size:16px;line-height:1.75;margin:0}
.gold{background:linear-gradient(100deg,var(--gold),#fff6d4 45%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- הופעה בגלילה ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------- HERO ---------- */
/* ה-hero לא תופס יותר עמוד שלם: min-height נמוך יותר מבטיח שגם ה-CTA
   וגם תחילת המקטע הבא נראים בלי גלילה במסך רגיל. */
.hero{position:relative;overflow:hidden;padding:clamp(36px,6vw,72px) 20px clamp(40px,5vw,64px);
  min-height:min(72vh,660px);display:grid;align-items:center}
.hero-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(34px,5.6vw,62px);line-height:1.05;margin:0 0 20px;letter-spacing:-1.4px;font-weight:800}
.hero .lead{font-size:clamp(15px,1.7vw,19px);color:#cbbfdb;line-height:1.75;margin:0 0 30px;max-width:530px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn-xl{padding:15px 30px;font-size:15.5px;font-weight:700;border-radius:13px;border:1px solid var(--line);
  background:#1c1430;color:var(--text);transition:.2s}
.btn-xl:hover{transform:translateY(-2px);border-color:var(--primary)}
.btn-xl.primary{background:linear-gradient(135deg,var(--primary),#7d1235);border-color:transparent;
  box-shadow:0 16px 40px -18px var(--primary)}
.btn-xl.primary:hover{box-shadow:0 22px 50px -18px var(--primary)}

.trustrow{display:flex;gap:9px;flex-wrap:wrap}
.trustrow span{font-size:11.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;background:rgba(23,16,36,.5)}

/* מניפת קלפים */
.fan{position:relative;height:430px;display:grid;place-items:center;perspective:1400px}
.fan .card{position:absolute;width:200px;transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s}
.fan .card:nth-child(1){transform:rotate(-15deg) translate(112px,16px) scale(.9);z-index:1;opacity:.82}
.fan .card:nth-child(2){transform:rotate(-6deg) translate(56px,-8px) scale(.96);z-index:2;opacity:.93}
.fan .card:nth-child(3){transform:rotate(2deg) translate(0,-22px);z-index:4}
.fan .card:nth-child(4){transform:rotate(11deg) translate(-58px,-4px) scale(.95);z-index:3;opacity:.9}
.fan .card:nth-child(5){transform:rotate(19deg) translate(-116px,20px) scale(.88);z-index:1;opacity:.78}
.fan:hover .card:nth-child(1){transform:rotate(-20deg) translate(140px,10px) scale(.92)}
.fan:hover .card:nth-child(5){transform:rotate(24deg) translate(-144px,14px) scale(.9)}
.fan .card:hover{transform:translateY(-26px) rotate(0) scale(1.06)!important;z-index:9!important;opacity:1!important}

/* אורות רקע */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-1}
.orb.a{width:520px;height:520px;background:rgba(184,30,78,.28);top:-160px;inset-inline-end:-120px}
.orb.b{width:440px;height:440px;background:rgba(74,63,107,.32);bottom:-180px;inset-inline-start:-140px}
.orb.c{width:300px;height:300px;background:rgba(232,199,102,.10);top:40%;inset-inline-start:38%}

/* ---------- אנימציית ההצלפה ----------
   רצה פעם אחת בכניסה לתצוגה, לא בלופ. */
.strike-band{max-width:1160px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.strike{width:100%;height:auto;display:block;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* מקור הטרנספורם ב-SVG נמדד במערכת הקואורדינטות המקומית של האלמנט,
   כלומר *אחרי* ה-translate של ההורה. הכתף היא (34,214) ולא (734,214).
   ל---sub ו---crack מקור 0 0, כדי שה-CSS יתנהג בדיוק כמו תכונת ה-transform
   שכתובה ב-SVG ולא יהיה קפיצה ברגע שהאנימציה מתחילה. */
#st-arm  {transform-origin:-34px 214px; transform:rotate(0deg)}
#st-sub  {transform-origin:0 0}
#st-crack{transform-origin:0 0; opacity:0}

.strike-band.in #st-arm  {animation:whipArm 1.5s cubic-bezier(.3,.1,.2,1) forwards}
.strike-band.in #st-crack{animation:whipCrack 1.5s linear forwards}
.strike-band.in #st-sub  {animation:whipRecoil 1.5s ease-out forwards}

/* הזרוע בצד שמאל, ולכן הסימנים הפוכים: שלילי = מרימה אחורה */
@keyframes whipArm{
  0%   {transform:rotate(0deg)}
  30%  {transform:rotate(-48deg)}   /* מרימה אחורה */
  38%  {transform:rotate(-52deg)}   /* עצירה קצרה לפני המכה */
  52%  {transform:rotate(38deg)}    /* הצלפה קדימה, אל הנתין */
  62%  {transform:rotate(28deg)}
  100% {transform:rotate(0deg)}
}
@keyframes whipCrack{
  0%,50%  {opacity:0;transform:translate(330px,420px) scale(.4)}
  54%     {opacity:1;transform:translate(330px,420px) scale(1.15)}
  62%     {opacity:.7;transform:translate(330px,420px) scale(1.35)}
  74%,100%{opacity:0;transform:translate(330px,420px) scale(1.5)}
}
@keyframes whipRecoil{
  0%,50%  {transform:translate(150px,176px) scale(1.05)}
  56%     {transform:translate(150px,182px) scale(1.05,1.02)}
  66%     {transform:translate(150px,178px) scale(1.05)}
  76%     {transform:translate(150px,180px) scale(1.05)}
  100%    {transform:translate(150px,176px) scale(1.05)}
}

/* כפתור ההצלפה */
.strike-cta{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:-6px 0 4px}
.strike-cta button{
  border:1px solid rgba(232,199,102,.42);background:rgba(232,199,102,.07);
  color:var(--gold);padding:10px 24px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.3px;transition:.18s}
.strike-cta button:hover{background:rgba(232,199,102,.15);
  border-color:var(--gold);transform:translateY(-2px)}
.strike-cta button:active{transform:translateY(0) scale(.97)}
.strike-cta button:disabled{opacity:.45;cursor:default;transform:none}
.strike-cta button.icon{padding:8px 12px;font-size:15px;line-height:1}
.strike-cta button.icon[aria-pressed="false"]{opacity:.45}
#st-count{font-size:12.5px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .strike-band.in #st-arm,.strike-band.in #st-crack,.strike-band.in #st-sub{animation:none}
  #st-crack{opacity:0}
}
@media(max-width:520px){ .strike{opacity:.34} }

/* ---------- רצועת מספרים ---------- */
/* בלי רצועה רציפה — רקע אטום לרוחב כל המסך חתך את איורי הרקע לשניים.
   ארבעה כרטיסים נפרדים משאירים את האיור רציף ביניהם. */
.band{border:none;background:none}
/* ⚠️ אסור לקרוא למיכל הזה .in — זה שם מחלקת ההופעה שה-JS מוסיף,
   והילדים היו מתאימים לסלקטור והופכים בעצמם לגריד. */
.band-inner{max-width:1160px;margin:0 auto;padding:30px 20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;text-align:center}
.band-inner > div{
  background:linear-gradient(165deg,rgba(29,20,48,.68),rgba(18,12,30,.68));
  border:1px solid var(--line);border-radius:16px;padding:22px 16px;
  backdrop-filter:blur(3px);transition:.25s}
.band-inner > div:hover{border-color:rgba(232,199,102,.42);transform:translateY(-3px)}
.band b{display:block;font-size:clamp(24px,3.2vw,36px);font-weight:800;letter-spacing:-1px}
.band span{font-size:12.5px;color:var(--muted);line-height:1.55;display:block;margin-top:5px}

/* ---------- כרטיסי תוכן ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.tile{background:linear-gradient(165deg,rgba(29,20,48,.92),rgba(18,12,30,.92));
  border:1px solid var(--line);border-radius:18px;padding:26px;transition:.25s;position:relative;overflow:hidden}
.tile:hover{border-color:rgba(184,30,78,.55);transform:translateY(-4px)}
.tile .ico{font-size:26px;margin-bottom:14px;display:block}
.tile h3{margin:0 0 9px;font-size:17.5px}
.tile p{margin:0;color:var(--muted);font-size:14px;line-height:1.72}

/* ---------- שלבים ---------- */
.switch{display:flex;gap:7px;justify-content:center;margin-bottom:34px}
.switch button{padding:11px 24px;border-radius:11px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:700;font-size:14px;transition:.2s}
.switch button.on{background:var(--primary);color:#fff;border-color:transparent}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;counter-reset:s}
.step{background:rgba(23,16,36,.7);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:20px;inset-inline-end:22px;
  font-size:44px;font-weight:800;color:rgba(232,199,102,.13);line-height:1}
.step h4{margin:0 0 9px;font-size:16.5px}
.step p{margin:0;color:var(--muted);font-size:13.8px;line-height:1.7}

/* ---------- בתים ודרגות ---------- */
.houses{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
.house-c{border:1px solid var(--line);border-radius:18px;padding:24px;position:relative;overflow:hidden;
  background:rgba(18,12,30,.8);transition:.25s}
.house-c:hover{transform:translateY(-4px)}
.house-c::before{content:'';position:absolute;inset:0;opacity:.13;
  background:radial-gradient(150px 110px at 80% 0%,var(--hc),transparent 70%)}
.house-c .sigil{font-size:30px;margin-bottom:12px;color:var(--hc)}
.house-c h4{margin:0 0 7px;font-size:17px;color:var(--hc)}
.house-c p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.rank-strip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.rank-pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;background:rgba(18,12,30,.8)}
.rank-pill i{width:12px;height:12px;border-radius:3px;transform:rotate(45deg);display:block}

/* ---------- הסבר BDSM ---------- */
.explain{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.letter{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:rgba(23,16,36,.62);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.letter b{font-size:30px;font-weight:800;color:var(--gold);line-height:1;min-width:34px}
.letter h4{margin:0 0 5px;font-size:15px}
.letter p{margin:0;color:var(--muted);font-size:13.4px;line-height:1.65}

.frameworks{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:22px}
.fw{border:1px solid var(--line);border-radius:16px;padding:22px;background:rgba(18,12,30,.75)}
.fw .abbr{font-size:21px;font-weight:800;color:var(--gold);letter-spacing:1px;margin-bottom:4px}
.fw .full{font-size:11.5px;color:var(--muted);margin-bottom:11px;letter-spacing:.3px}
.fw p{margin:0;font-size:13.4px;color:#c3b6d4;line-height:1.68}
.fw .yr{font-size:11px;color:var(--muted);margin-top:10px;display:block}

.callout{border:1px solid rgba(232,199,102,.3);background:rgba(232,199,102,.055);
  border-radius:16px;padding:22px 24px;margin-top:26px}
.callout b{color:var(--gold)}
.callout p{margin:8px 0 0;color:#cbbfdb;font-size:14.2px;line-height:1.75}

/* ---------- השוואה ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:660px;margin:0 auto}
.vs > div{border-radius:18px;padding:26px;text-align:center;border:1px solid var(--line)}
.vs .ours{border-color:rgba(232,199,102,.42);background:linear-gradient(165deg,rgba(232,199,102,.09),transparent)}
.vs .pct{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1}
.vs .ours .pct{color:var(--gold)}
.vs .lbl{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto;display:grid;gap:11px}
.qa{border:1px solid var(--line);border-radius:14px;background:rgba(18,12,30,.75);overflow:hidden}
.qa summary{padding:18px 22px;cursor:pointer;font-weight:700;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--gold);font-size:21px;font-weight:400;transition:.25s;flex:none}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.78}

/* ---------- CTA סוגר ---------- */
.final{text-align:center;border-block:1px solid var(--line);
  background:radial-gradient(700px 300px at 50% 0%,rgba(184,30,78,.16),transparent 70%)}
.final h2{font-size:clamp(27px,4.2vw,44px);margin:0 0 14px}
.final p{color:var(--muted);max-width:520px;margin:0 auto 30px;line-height:1.75}

/* ---------- פוטר ---------- */
/* גם כאן שקוף למחצה, אחרת הפוטר מסתיר את פריז הנתינים שמתחתיו */
footer.site{border-top:1px solid var(--line);background:rgba(8,5,16,.72);
  backdrop-filter:blur(2px);padding:44px 20px 32px}
.foot-inner{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer.site h5{margin:0 0 13px;font-size:12px;letter-spacing:1.3px;color:var(--gold);text-transform:uppercase}
footer.site a,footer.site p{display:block;color:var(--muted);font-size:13.2px;
  line-height:2;text-decoration:none;margin:0}
footer.site a:hover{color:var(--text)}
.legal{max-width:1160px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11.6px;line-height:1.8}

@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:34px}
  .fan{height:330px;order:-1}
  .fan .card{width:158px}
  .explain{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  /* במסך צר הצלליות מתחרות בטקסט — משאירים מעט וקטנות יותר */
  .bg-art [data-hide-sm]{display:none}
  .bg-art > img{width:calc(var(--w) * .55);opacity:calc(var(--o) * .8)}
  /* ה---qw מוגדר inline על הסצנה, ולכן צריך !important כדי לגבור עליו */
  .bg-art .scene{--qw:220px !important}
  .sec{padding:40px 16px}
  .hero{padding:40px 16px 56px;min-height:auto}
  .fan{height:280px}
  .fan .card{width:132px}
  .fan .card:nth-child(1),.fan .card:nth-child(5){display:none}
  .vs{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .btn-xl{width:100%;text-align:center}
}

/* ---- סרגל CTA דביק ---- */
/* מופיע רק אחרי שה-hero יצא מהמסך. דף ארוך בלי כפתור זמין הוא דף
   שאנשים קוראים עד הסוף ואז סוגרים. */
/* ⚠️ אין כאן transition ואין animation על המיקום, ובכוונה.
   גרסאות קודמות השתמשו ב-translateY/translate עם מעבר, והסרגל נשאר
   תקוע 64px מתחת לקצה המסך: המעבר מתחיל בערך ההתחלתי, וכשאין ציור
   פריימים הוא לא מתקדם לעולם. הופעה מיידית דרך תכונת hidden עובדת
   תמיד ולא תלויה בשום דבר חיצוני. רק האטימות מקבלת מעבר, והיא לא
   משפיעה על המיקום גם אם היא נתקעת. */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;
  padding:12px 18px;background:rgba(13,8,22,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(232,199,102,.22)}
.sticky-cta[hidden]{display:none}
.sticky-cta > span{font-size:13px;color:#cbbfdb}
.sticky-cta > div{display:flex;gap:8px}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
@media(max-width:560px){
  .sticky-cta{gap:9px;padding:10px 14px}
  .sticky-cta > span{display:none}
  .sticky-cta > div{width:100%}
  .sticky-cta .btn{flex:1}
}