/* ═══════════════════════════════════════════════════════════
   מקטע CTA משותף — מקור אמת יחיד לכל האתר.
   הבסיס הוא העיצוב של video-editing.php, שנבחר כסטנדרט (2026-09-01).

   שימוש: כל עמוד שמכיל <section class="cta-section"> חייב לטעון
   את הקובץ הזה, ואסור שיחזיק כללי .cta משלו ב-<style> הפנימי —
   הפנימי נטען אחרי וגובר.

   כללי הכפתורים מוגבלים בכוונה ל-.cta-section ולא גלובליים:
   בדף הבית .btn גלובלי היה משנה גם את כפתורי ההירו.
   ═══════════════════════════════════════════════════════════ */

.cta-section{
  display:block;position:relative;overflow:hidden;
  background:var(--mid,#111);
  padding:120px 48px;
  text-align:center;direction:rtl;
}
.cta-section::before{
  content:'';position:absolute;top:-100px;left:50%;
  transform:translateX(-50%);width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,255,136,.04) 0%,transparent 70%);
  pointer-events:none;
}
.cta-label{
  font-size:11px;letter-spacing:5px;text-transform:uppercase;
  color:var(--green,#00ff88);margin-bottom:16px;
}
.cta-title{
  font-family:var(--display,AplikaziaMFW-Medium,sans-serif);
  font-size:clamp(44px,7vw,96px);font-weight:300;
  letter-spacing:4px;line-height:1;margin-bottom:16px;
  color:var(--text,#e8e8e8);
}
.cta-title em{color:var(--pink,#d2689d);font-style:normal}
.cta-sub{
  font-size:16px;color:var(--muted,#888);margin-bottom:48px;
  letter-spacing:1px;line-height:1.7;
}
.cta-sub strong{color:var(--text,#e8e8e8);font-weight:400}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.cta-section .btn{
  display:inline-block;padding:14px 32px;
  font-family:AplikaziaMFW-Medium,var(--font,sans-serif);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  text-decoration:none;border-radius:2px;border:1px solid transparent;
  transition:all .25s;
}
.cta-section .btn-primary{background:var(--pink,#d2689d);color:#fff;border-color:var(--pink,#d2689d)}
.cta-section .btn-primary:hover{background:#c45a8a;border-color:#c45a8a}
.cta-section .btn-outline{background:none;border-color:rgba(255,255,255,.2);color:var(--text,#e8e8e8)}
.cta-section .btn-outline:hover{border-color:var(--green,#00ff88);color:var(--green,#00ff88)}

@media (max-width:900px){ .cta-section{padding:70px 24px} }
@media (max-width:600px){
  .cta-btns{flex-direction:column;align-items:center}
  .cta-section .btn{width:100%;max-width:320px;text-align:center}
}

/* ── ניסוי (hafkaa): וואטסאפ + מייל/טלפון כאייקונים ─────────
   min-height אחיד כדי ששלושתם יעמדו על אותו קו, וגם כדי
   לעמוד במינימום 44px ליעד מגע. כפתור אייקון חייב aria-label —
   אין בו טקסט נראה. */
.cta-section .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px}

.cta-section .btn-icon{
  width:48px;padding:0;flex:0 0 auto;
  background:none;border:1px solid rgba(255,255,255,.2);
  color:var(--text,#e8e8e8);
}
.cta-section .btn-icon:hover,
.cta-section .btn-icon:focus-visible{
  border-color:var(--green,#00ff88);color:var(--green,#00ff88);
}

@media (max-width:600px){
  /* האייקונים לא נמתחים לרוחב מלא כמו כפתור הטקסט */
  .cta-section .btn-icon{width:48px;max-width:48px}
  .cta-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
}

/* וואטסאפ — קו ירוק. אותה מסגרת כמו שני האייקונים שלידו, רק בירוק,
   וגם האייקון עצמו ירוק. בלי מילוי — הריבוע המלא היה האלמנט המלא
   היחיד בשלישייה ולכן נקרא מודבק.
   האייקון עצמו 24px ולא 19px כמו השכנים: הבועה ממלאת רק 70%
   מה-viewBox שלה (מול 83% בשפופרת), וצורה עגולה נקראת קטנה
   מצורה מרובעת. 24px מביא את הדיו ל-16.8px מול 15.8. */
.cta-section .btn-wa{
  background:none;
  border-color:var(--green,#00ff88);
  color:var(--green,#00ff88);
}
.cta-section .btn-wa:hover,
.cta-section .btn-wa:focus-visible{
  border-color:var(--green,#00ff88);
  color:var(--green,#00ff88);
  box-shadow:0 0 22px rgba(0,255,136,.2);
}