/* =========================================================
   SHELLY — frame.css
   שפת הפריימים: קווים אנכיים לאורך העמוד, קו אופקי בין סקשנים
   עם + בנקודות החיתוך, ותאים מוסגרים בתוך כל סקשן.
   ========================================================= */
:root{
  --frame-line:rgba(62,39,35,.22);       /* קו מסגרת · שוקולד 22% */
  --frame-line-dark:rgba(250,247,244,.18);/* קו מסגרת על שוקולד */
  --cell-pad:var(--space-8);
  --no-col:160px;
}
@media (max-width:767px){:root{--cell-pad:var(--space-5);--no-col:auto}}

/* ---------- המסגרת הכללית ---------- */
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:0;margin:0 auto;max-width:var(--content-width);border-inline:1px solid var(--frame-line);pointer-events:none;z-index:3}
@media (max-width:1280px){.framed::before{margin:0 var(--gutter)}}
.rule{position:relative;height:1px;background:var(--frame-line);z-index:3}
.rule::before,.rule::after{content:"+";position:absolute;top:50%;font:300 18px/1 var(--font-body);color:var(--color-choc)}
.rule::before{right:max(var(--gutter),calc((100% - var(--content-width)) / 2));transform:translate(50%,-52%)}
.rule::after{left:max(var(--gutter),calc((100% - var(--content-width)) / 2));transform:translate(-50%,-52%)}

/* ---------- בלוק תוכן בתוך המסגרת ---------- */
.fsec{display:flex;flex-direction:column;align-items:center;padding:0 var(--gutter)}
.fbox{width:100%;max-width:var(--content-width);display:flex;flex-direction:column}

/* כותרת סקשן: תא מספר + תא כותרת */
.fhead{display:flex;flex-direction:row;border-bottom:1px solid var(--frame-line)}
.fhead .no{flex:0 0 var(--no-col);border-left:1px solid var(--frame-line);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);padding:var(--space-9) var(--cell-pad)}
.fhead .no .num{font-size:64px;color:var(--color-choc)}
.fhead .no small{font-size:var(--fs-xs);color:var(--color-muted)}
.fhead .t{flex:1;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-9) var(--cell-pad)}

/* שורות ותאים */
.cells{display:flex;flex-direction:row;flex-wrap:wrap}
.cell{flex:1 1 0;min-width:0;padding:var(--cell-pad);display:flex;flex-direction:column;gap:var(--space-4);border-bottom:1px solid var(--frame-line);transition:background .3s}
.cell + .cell{border-right:1px solid var(--frame-line)}
.cells.two .cell{flex:1 1 50%}
.cells.two .cell:nth-child(odd){border-right:0}
.cells.two .cell:nth-child(even){border-right:1px solid var(--frame-line)}
.cell.hov:hover{background:var(--color-lilac-3)}
.cell .k{font-size:var(--fs-xs);color:var(--color-muted);font-family:var(--font-number);direction:ltr;text-align:right}
.cell .q{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,3.2vw,46px);line-height:1;color:var(--color-choc)}
.cell p{font-size:var(--fs-small);color:var(--color-text)}

/* ---------- 01 הירו ---------- */
.hx{position:relative;overflow:hidden;background:var(--color-lilac);display:flex;flex-direction:column;align-items:center;gap:var(--space-9);padding:var(--space-9) 0;isolation:isolate}
.hx .blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.hx .b1{width:60vw;height:60vw;background:#E9DDF7;top:-30%;right:-15%;animation:drift1 18s ease-in-out infinite alternate}
.hx .b2{width:45vw;height:45vw;background:#B79FDB;bottom:-35%;left:-10%;animation:drift2 22s ease-in-out infinite alternate}
.hx .b3{width:30vw;height:30vw;background:#F6EEF9;top:20%;left:30%;animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(22vw,-18vh) scale(1.2)}}
@keyframes drift3{to{transform:translate(-12vw,-10vh) scale(.85)}}
.hx::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hx-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5);padding:0 var(--gutter);max-width:760px}
.hx-logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-choc)}
.hx-logo .logo-line{font-size:34px;transform:scaleX(.6);transform-origin:center}
.hx-logo small{font-size:11px;letter-spacing:.28em;direction:ltr}
.hx h1{font-family:var(--font-display);font-weight:700;color:var(--color-choc);font-size:clamp(56px,7.2vw,104px);line-height:.9;margin-top:var(--space-3)}
.hx .desc{font-size:var(--fs-small);color:var(--color-choc);max-width:44ch;line-height:1.6}
.hx .btn{margin-top:var(--space-2)}
.avatar{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ring{--s:clamp(150px,15vw,200px);position:relative;width:var(--s);height:var(--s);border-radius:50%;padding:6px;flex:none}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-choc),#9C7FC9,var(--color-paper),#9C7FC9,var(--color-choc));animation:spin 6s linear infinite}
.ring img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1);border:5px solid var(--color-lilac)}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar .name{font-size:var(--fs-xs);color:var(--color-choc)}
.avatar .name b{font-weight:700}
.strip-head{width:100%;max-width:var(--content-width);padding:0 var(--gutter);display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--space-4)}
.strip-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,3.4vw,48px);line-height:1;color:var(--color-choc)}
.strip-head .state{display:flex;flex-direction:row;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-choc)}
.strip-head .dot{width:8px;height:8px;border-radius:50%;background:var(--color-choc);animation:pulse 1.4s ease-in-out infinite}
.strip-head.stopped .dot{animation:none;background:#C0392B}
@keyframes pulse{50%{opacity:.25}}
.feed{width:100%;display:flex;flex-direction:column}
.feed-track{display:flex;flex-direction:row;gap:var(--space-3);width:max-content;padding-inline-end:var(--space-3);animation:feed 70s linear infinite}
.feed:hover .feed-track,.feed.paused .feed-track{animation-play-state:paused}
@keyframes feed{to{transform:translateX(50%)}}
.post{flex:0 0 auto;width:clamp(150px,14vw,200px);aspect-ratio:9/16;position:relative;overflow:hidden;cursor:pointer;background:var(--color-choc);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.post img,.post video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post video{opacity:0;transition:opacity .25s}
.post.playing video{opacity:1}
.feed:hover .post{transform:scale(.96)}
.feed .post:hover{transform:scale(1.04);z-index:2}

/* ---------- 03 תוצאות (רקע שוקולד) ---------- */
.dark{background:var(--color-choc);color:var(--color-paper)}
.dark .fhead,.dark .cell,.dark .cell + .cell,.dark .fhead .no{border-color:var(--frame-line-dark)}
.dark .h2,.dark .h3,.dark b{color:var(--color-paper)}
.dark .lead,.dark .small,.dark .cell p{color:var(--color-paper-72)}
.dark .fhead .no .num{color:var(--color-lilac)}
.dark .fhead .no small,.dark .cell .k{color:var(--color-paper-60)}
.dark .hand{color:var(--color-lilac)}
.dark .num.l{font-size:var(--fs-number-l);color:var(--color-lilac)}
.shots{display:flex;flex-direction:row;gap:var(--space-4)}
.extra-cells .cell{gap:var(--space-1)}
.extra-cells .num{font-size:clamp(32px,3.4vw,44px);color:var(--color-paper);text-align:right}

/* ---------- 04 עבודות ---------- */
.work-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--cell-pad);border-bottom:1px solid var(--frame-line)}
.work-body{padding:var(--cell-pad) 0 var(--cell-pad) 0;border-bottom:1px solid var(--frame-line);display:flex;flex-direction:column;gap:var(--space-3)}
.work-body .reels{padding:0 var(--cell-pad) var(--space-4)}
.work-body .creative{padding:0 var(--cell-pad)}
.work-body .hand{padding:0 var(--cell-pad)}

/* ---------- 05 חודש עבודה ---------- */
.steps5 .cell{flex:1 1 0}
.steps5 .when{font-size:var(--fs-xs);color:var(--color-muted)}
.steps5 .n{font-family:var(--font-number);font-size:48px;line-height:1;color:var(--color-lilac);direction:ltr;text-align:right;-webkit-text-stroke:1px var(--color-choc)}
.note-cell{background:var(--color-lilac-3)}
.note-cell .lead{max-width:none}

/* ---------- 06 לקוחות ---------- */
.chat-cell{align-items:center}
.chat-cell .chat{max-width:480px;width:100%}

/* ---------- 07 עליי ---------- */
.about-cell img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.about-cell.pic{flex:0 0 38%}

/* ---------- 08 שאלות ---------- */
.faq-cell details:first-child{border-top:0}
.faq-cell details{padding:var(--space-5) 0}

/* ---------- 09 יצירת קשר ---------- */
.cta-sec{background:var(--color-lilac)}
.cta-sec .cell p.lead{color:var(--color-choc)}
.cta-sec .contact{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-small);justify-content:flex-end}

/* ---------- רספונסיב ---------- */
@media (max-width:1024px){
  .steps5{flex-wrap:wrap}
  .steps5 .cell{flex:1 1 33%}
  .about-cell.pic{flex:1 1 100%}
}
@media (max-width:767px){
  .fhead{flex-direction:column}
  .fhead .no{border-left:0;border-bottom:1px solid var(--frame-line);flex-direction:row;align-items:baseline;padding:var(--space-6) var(--cell-pad)}
  .dark .fhead .no{border-color:var(--frame-line-dark)}
  .fhead .no .num{font-size:48px}
  .fhead .t{padding:var(--space-6) var(--cell-pad)}
  .cells{flex-direction:column}
  .cell,.cells.two .cell{flex:1 1 auto;border-right:0!important}
  .strip-head{flex-direction:column;align-items:flex-start}
  .work-bar{flex-direction:column;align-items:flex-start}
  .shots{gap:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){.hx .blob,.feed-track,.ring::before{animation:none}}

/* ---------- 05 הייליטס (כמו באינסטגרם) ---------- */
.hl-row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}
.hl{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100px}
.hl-ring{width:96px;height:96px;border-radius:50%;padding:4px;background:var(--color-line);position:relative;transition:transform .25s}
.hl.on .hl-ring,.hl:hover .hl-ring{background:conic-gradient(var(--color-choc),#9C7FC9,var(--color-paper),#9C7FC9,var(--color-choc))}
.hl:hover .hl-ring{transform:scale(1.05)}
.hl-in{width:100%;height:100%;border-radius:50%;background:var(--color-lilac-3);border:4px solid var(--color-paper);display:flex;align-items:center;justify-content:center}
.hl.on .hl-in{background:var(--color-lilac)}
.hl-in .num{font-size:40px;color:var(--color-choc)}
.hl-name{font-size:var(--fs-xs);color:var(--color-choc);text-align:center;line-height:1.3}
.hl.on .hl-name{font-weight:700}
.hl-detail{justify-content:center;background:var(--color-lilac-3)}
.hl-detail .when{font-size:var(--fs-xs);color:var(--color-muted)}
.hl-detail p{font-size:var(--fs-lead);color:var(--color-text)}

/* ---------- 07 תמונה עגולה עם טקסט מסתובב ---------- */
.about-cell.pic{align-items:center;justify-content:center}
.orbit{position:relative;width:min(340px,100%);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.orbit-text{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite}
.orbit-text text{font-family:'Instrument Serif',serif;font-size:19px;letter-spacing:3.2px;fill:var(--color-choc)}
.orbit img{width:72%;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:grayscale(1);border:6px solid var(--color-lilac)}
@media (max-width:767px){.hl{width:88px}.hl-ring{width:76px;height:76px}.hl-in .num{font-size:30px}.hl-row{gap:var(--space-3)}}
@media (prefers-reduced-motion:reduce){.orbit-text{animation:none}}