/* ====================================================
   Sofi's Point — עיצוב משותף לכל העמודים
   הכל בקובץ אחד. רוצה לשנות צבע? רק כאן בראש.
==================================================== */

/* ========== צבעים — כל הצבעים של האתר במקום אחד ========== */
:root {
  --כחול-מותג: #7B8DA6;       /* הכחול המעושן של הלוגו */
  --כחול-בהיר: #B5C7D8;       /* הכחול הבהיר של העיגול בלוגו */
  --טורקיז: #5DBFB8;          /* הטורקיז של הכותרות */
  --רקע: #FAF7F2;             /* קרם — הרקע הראשי */
  --רקע-כהה: #6F8198;         /* כחול כהה לאזורים מודגשים */
  --לבן: #FFFFFF;
  --טקסט: #2D3E50;            /* טקסט כהה לרקע בהיר */
  --טקסט-משני: #6B7C8E;       /* טקסט מעט דהוי */
  --זהב: #D4AF37;             /* זהב — מסגרות והדגשות */
}

/* ========== איפוסים בסיסיים ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* רווח מעל כל אזור — שהתפריט הסטיקי לא יסתיר את הכותרת בקפיצה */
section[id] {
  scroll-margin-top: 90px;
}

body {
  font-family: 'Assistant', 'Segoe UI', system-ui, sans-serif;
  background: var(--רקע);
  color: var(--טקסט);
  line-height: 1.7;
  font-size: 17px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ========== תפריט עליון (נשאר תמיד למעלה) ========== */
.תפריט {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--לבן);
  border-bottom: 1px solid rgba(123, 141, 166, 0.15);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* הלוגו צמוד לקצה ימין, התפריט עצמו במרכז */
.תפריט-לוגו {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.תפריט-לוגו img {
  height: 50px;
  width: auto;
}

.תפריט-קישורים {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.תפריט-קישורים a {
  color: var(--טקסט);
  font-weight: 500;
  font-size: 1.05rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.תפריט-קישורים a:hover {
  color: var(--טורקיז);
}

.תפריט-קישורים a[aria-current="page"] {
  color: var(--כחול-מותג);
  border-bottom-color: var(--טורקיז);
}

/* ========== כפתור תפריט לנייד ========== */
.תפריט-כפתור {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--כחול-מותג);
}

/* ========== אזור תוכן ראשי ========== */
main {
  flex: 1;
}

/* ========== כותרות כלליות ========== */
h1, h2, h3 {
  color: var(--כחול-מותג);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }

/* כותרת מובלטת בטורקיז */
.כותרת-קטנה {
  color: var(--טורקיז);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ========== כותרת תחתונה משותפת ========== */
footer {
  background: var(--רקע-כהה);
  color: var(--לבן);
  text-align: center;
  padding: 2rem;
  margin-top: auto;
  font-size: 0.95rem;
}

footer a {
  color: var(--לבן);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========== עזרה לרספונסיביות (נייד) ========== */
@media (max-width: 768px) {
  .תפריט {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .תפריט-לוגו img {
    height: 40px;
  }

  .תפריט-כפתור {
    display: block;
  }

  .תפריט-קישורים {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
  }

  .תפריט-קישורים.פתוח {
    display: flex;
  }

  .תפריט-קישורים a {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(123, 141, 166, 0.1);
  }
}

/* ====================================================
   עמוד בית (index.html) — Hero גדול
==================================================== */
.בית-hero {
  position: relative;
  overflow: hidden;
  background: var(--טורקיז);     /* צבע גיבוי עד שהתמונה תועלה */
  border-bottom: 14px solid var(--זהב);
  line-height: 0;                /* בלי רווח לבן מתחת לתמונה */
}

/* תמונת הפתיח — על כל רוחב העמוד, התמונה כולה נראית */
.בית-תמונה-ראשית {
  display: block;
  width: 100%;
  height: auto;
}

/* הלוגו ממוקם בתוך מסך המחשב (iMac) שבתמונה.
   הערכים באחוזים — כדי שהלוגו יישאר על המסך בכל גודל מסך.
   לכוונון: top = למעלה/למטה, left = שמאלה/ימינה, width = גודל הלוגו */
.בית-לוגו-על-תמונה {
  position: absolute;
  top: 39%;
  left: 25%;
  width: 9.6%;
  height: auto;
  mix-blend-mode: multiply;   /* מבטל את הרקע הלבן של הלוגו — נראה ישירות על המסך */
}

/* מספר טלפון על גבי התמונה — מתחת לענן, בצד ימין. גדול ובאות דקה.
   לכוונון: bottom = למעלה/למטה, right = ימינה/שמאלה, font-size = גודל */
.בית-טלפון-על-תמונה {
  position: absolute;
  bottom: 14%;
  right: 11%;
  z-index: 2;
  display: inline-block;
  direction: ltr;
  line-height: 1.2;
  color: #2D3E50;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  font-weight: 300;            /* אות דקה */
  letter-spacing: 2px;
  text-decoration: none;
}
.בית-טלפון-על-תמונה:hover { color: var(--טורקיז); }

.בית-טקסט {
  position: relative;
  z-index: 1;
  color: var(--לבן);
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.בית-טקסט h1 {
  margin: 0;
  line-height: 0.82;        /* שורות צמודות — כמעט בלי רווח ביניהן */
  font-weight: 900;
}

/* אותיות חלולות (שקופות) עם קונטור לבן עבה שמתחלף בעדינות לזהב */
.בית-שורה-גדולה,
.בית-שורה {
  display: block;
  color: transparent;
  -webkit-text-stroke: 4px #ffffff;
  text-stroke: 4px #ffffff;
  letter-spacing: 1px;
  font-weight: 900;
  animation: קונטור-לבן-זהב 5s ease-in-out infinite alternate;
}

.בית-שורה-גדולה {
  font-size: clamp(3rem, 14vw, 9.5rem);
  -webkit-text-stroke-width: 5px;   /* השורה הגדולה — קונטור עבה במיוחד */
}

.בית-שורה {
  font-size: clamp(2.7rem, 12.5vw, 8.5rem);
}

/* מעבר רך ועדין: לבן → זהב → לבן */
@keyframes קונטור-לבן-זהב {
  0%   { -webkit-text-stroke-color: #ffffff; }
  100% { -webkit-text-stroke-color: #E6CF8A; }
}

/* רצועת טלפון — בצבע כהה כמו "אודות", כך שקו הזהב נצמד ישר למקטע ואין פס בהיר */
.בית-תחתית {
  background: var(--רקע-כהה);
  text-align: center;
  padding: 1.4rem 2rem;
}

.בית-לוגו {
  display: block;
  height: 110px;
  width: auto;
  margin: 0 auto 0.6rem;
}

.בית-תחתית-טלפון {
  color: var(--לבן);
  font-weight: 300;            /* אות דקה */
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);   /* גדול */
  letter-spacing: 2px;
  text-decoration: none;
  display: inline-block;
  direction: ltr;
  transition: color 0.2s;
}

.בית-תחתית-טלפון:hover {
  color: var(--זהב);
}

/* ====================================================
   עמוד אודות (about.html)
==================================================== */
.אודות-אזור {
  background: var(--רקע-כהה);   /* כחול-אפרפר כמו פס "צור קשר" — קריא יותר מהטורקיז */
  color: var(--לבן);
  padding: 5rem 2rem;
}

.אודות-מסגרת {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.אודות-טקסט h1 {
  color: var(--לבן);
  font-size: 3.2rem;
  margin-bottom: 2rem;
  font-weight: 300;
}

.אודות-מותג {
  color: var(--כחול-בהיר);   /* תכלת העיגול שבלוגו */
  letter-spacing: 3px;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: block;
}

.אודות-טקסט p {
  margin-bottom: 0;
  font-size: 1.25rem;
  line-height: 1.65;
  opacity: 0.95;
}

.אודות-טקסט strong {
  color: var(--לבן);
  font-weight: 700;
}

.אודות-תוכנות {
  display: flex;
  gap: 0.85rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.תוכנה {
  width: 51px;
  height: 51px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -1px;
  color: var(--לבן);
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  transition: transform 0.2s;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.תוכנה:hover {
  transform: translateY(-3px) scale(1.05);
}

.תוכנה svg {
  width: 60%;
  height: 60%;
}

.תוכנה-ps   { background: #001E36; color: #31A8FF; }
.תוכנה-ai   { background: #330000; color: #FF9A00; }
.תוכנה-id   { background: #49021F; color: #FE3F84; }
.תוכנה-fig  { background: #1E1E1E; padding: 10px; }
.תוכנה-word { background: #185ABD; color: #FFFFFF; }
.תוכנה-genai{
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  padding: 11px;
}

.אודות-תמונה {
  display: flex;
  justify-content: center;
}

.אודות-תמונה img {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--לבן);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.אודות-תמונה-זמני {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 4px solid var(--לבן);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .אודות-מסגרת {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .אודות-תמונה img,
  .אודות-תמונה-זמני {
    width: 250px;
    height: 250px;
  }
  .אודות-תוכנות {
    justify-content: center;
  }
}

/* ====================================================
   עמוד שירותים (services.html)
==================================================== */
.שירותים-אזור {
  padding: 5rem 2rem;
}

.שירותים-תוכן {
  max-width: 1200px;
  margin: 0 auto;
}

.שירותים-כותרת {
  text-align: center;
  margin-bottom: 4rem;
}

.שירותים-כותרת p {
  color: var(--טקסט-משני);
  margin-top: 0.75rem;
  font-size: 1.1rem;
}

.שירותים-רשת {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.שירות {
  background: var(--לבן);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  border: 3px solid var(--זהב);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  text-align: center;
}

.שירות:hover {
  transform: translateY(-6px);
  border-color: var(--לבן);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.35);
}

/* אייקון שירות — עיגול זהב עם אייקון בקו לבן */
.שירות-אייקון {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #E8C758 0%, var(--זהב) 60%, #B8932F 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4);
  transition: transform 0.35s ease;
}

.שירות:hover .שירות-אייקון {
  transform: rotate(-8deg) scale(1.06);
}

.שירות-אייקון svg {
  width: 38px;
  height: 38px;
  stroke: var(--לבן);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.שירות h3 {
  margin-bottom: 1rem;
  color: var(--כחול-מותג);
}

.שירות p {
  color: var(--טקסט-משני);
  font-size: 0.98rem;
  line-height: 1.85;
}

/* ====================================================
   אזור תהליך העבודה — 5 שלבים בשורה עם מספר זהוב גדול
==================================================== */
.תהליך-אזור {
  padding: 5rem 2rem;
  background: var(--רקע);
}

.תהליך-תוכן {
  max-width: 1300px;
  margin: 0 auto;
}

.תהליך-כותרת {
  text-align: center;
  margin-bottom: 4rem;
}

.תהליך-כותרת h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-top: 0.5rem;
}

/* רשת — מתאימה את עצמה למספר השלבים (5 בשורה במסך רחב) */
.תהליך-רשת {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.תהליך-שלב {
  text-align: center;
  background: var(--לבן);
  padding: 2rem 1.25rem;
  border-radius: 16px;
  border: 2px solid rgba(212, 175, 55, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.תהליך-שלב:hover {
  transform: translateY(-5px);
  border-color: var(--זהב);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25);
}

/* המספר — בזהב, גדול, בתוך עיגול טורקיז שמסתובב */
.תהליך-מספר {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.1rem, 3.5vw, 2.7rem);
  font-weight: 800;
  color: var(--זהב);
  line-height: 1;
  font-family: 'Assistant', sans-serif;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
  isolation: isolate;
}

/* העיגול הטורקיז המסתובב סביב המספר — טבעת עבה */
.תהליך-מספר::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  --מעלות: 0deg;
  background: conic-gradient(
    from var(--מעלות),
    var(--טורקיז) 0deg,
    var(--לבן) 90deg,
    var(--טורקיז) 180deg,
    var(--כחול-מותג) 270deg,
    var(--טורקיז) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 66%, black 70%);
          mask: radial-gradient(circle, transparent 66%, black 70%);
  animation: סיבוב-עיגול-מספר 10s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(93, 191, 184, 0.4));
}

@keyframes סיבוב-עיגול-מספר {
  to { --מעלות: 360deg; }
}

.תהליך-שלב h3 {
  color: var(--כחול-מותג);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

/* משפט המפתח של השלב — בטורקיז, מודגש */
.תהליך-משפט {
  color: var(--טורקיז) !important;
  font-weight: 600;
  font-size: 1rem !important;
  margin-bottom: 0.85rem;
  line-height: 1.4 !important;
}

.תהליך-שלב p {
  color: var(--טקסט-משני);
  font-size: 0.97rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .תהליך-אזור {
    padding: 3rem 1rem;
  }
  .תהליך-רשת {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
  }
}

/* ====================================================
   עמוד תיק עבודות (portfolio.html)
==================================================== */
.תיק-אזור {
  padding: 5rem 2rem;
}

/* טווח בטחון — הריבועי גלריה לא יעברו 1080px */
.תיק-תוכן {
  max-width: 1080px;
  margin: 0 auto;
}

/* === קישוטים בתיק עבודות — שקיפות נמוכה יותר לעדינות === */
.תיק-אזור .רינג-א {
  top: 4%;
  right: -100px;
  width: 280px;
  height: 280px;
  opacity: 0.3;
}

.תיק-אזור .רינג-ב {
  top: 22%;
  right: 30%;
  width: 220px;
  height: 220px;
  opacity: 0.25;
}

.תיק-אזור .רינג-ג {
  top: 48%;
  left: -80px;
  width: 260px;
  height: 260px;
  opacity: 0.28;
}

.תיק-אזור .רינג-ד {
  top: 68%;
  right: 8%;
  width: 200px;
  height: 200px;
  opacity: 0.25;
}

.תיק-אזור .רינג-ה {
  bottom: 6%;
  left: 22%;
  width: 240px;
  height: 240px;
  opacity: 0.3;
}

.תיק-אזור .ניצוץ-א { top: 12%; right: 15%; }
.תיק-אזור .ניצוץ-ב { top: 40%; left: 25%; }
.תיק-אזור .ניצוץ-ג { bottom: 20%; right: 30%; }

.תיק-אזור .נקודה-א { top: 30%; right: 8%; }
.תיק-אזור .נקודה-ב { top: 60%; left: 12%; }
.תיק-אזור .נקודה-ג { bottom: 12%; right: 18%; }

.תיק-כותרת {
  text-align: center;
  margin-bottom: 4rem;
}

.תיק-כותרת p {
  color: var(--טקסט-משני);
  margin-top: 0.75rem;
  font-size: 1.1rem;
}

.קטגוריה {
  margin-bottom: 5rem;
}

.קטגוריה-כותרת {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--כחול-בהיר);
}

.קטגוריה-כותרת h2 {
  color: var(--טורקיז);
}

.קטגוריה-כותרת .מספר {
  color: var(--טורקיז);
  font-size: 1rem;
  font-weight: 600;
}

/* תת-קטגוריה — שכבה שנייה בתוך קטגוריה (למשל לוגואים בתוך עבודות דפוס) */
.תת-קטגוריה {
  margin-bottom: 3rem;
}

.תת-קטגוריה:last-child {
  margin-bottom: 0;
}

.תת-קטגוריה-כותרת {
  color: var(--לבן);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding: 0.65rem 1.6rem;
  background: var(--טורקיז);
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(93, 191, 184, 0.3);
}

.גלריה {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.עבודה {
  background: var(--לבן);
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--זהב);
  box-shadow: 0 4px 20px rgba(123, 141, 166, 0.12);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}

.עבודה:hover {
  transform: translateY(-6px);
  border-color: var(--לבן);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
}

.עבודה img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background: var(--לבן);
  padding: 0.5rem;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.עבודה img:hover {
  opacity: 0.9;
}

/* כרטיס שהתמונה ממלאת בו את כל המלבן (בלי שוליים) */
.עבודה.עבודה-מילוי img {
  height: 300px;
  object-fit: cover;
  object-position: center;
  padding: 0;
}

/* כרטיס רחב — תופס רוחב של 2 מלבנים, בגובה של מלבן אחד */
.עבודה-רחב2 {
  grid-column: span 2;
}

.עבודה-רחב2 img {
  height: auto;
  object-fit: contain;
}

/* כרטיס ברוחב מלא — תופס את כל רוחב השורה */
.עבודה-רוחב-מלא {
  grid-column: 1 / -1;
}

.עבודה-רוחב-מלא img {
  height: auto;
  object-fit: contain;
}

/* שורת תת-קטגוריה — כותרת טורקיז + תיאור משמאל לה */
.תת-קטגוריה-שורה {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.תת-קטגוריה-שורה .תת-קטגוריה-כותרת {
  margin-bottom: 0;
  flex-shrink: 0;
}

.תת-קטגוריה-תיאור {
  color: var(--טקסט-משני);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* ====================================================
   ארגז תצוגה לתמונה גדולה (Lightbox)
   נפתח כשלוחצים על תמונה בתיק עבודות
==================================================== */
.ארגז-תמונה {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
  animation: ארגז-הופעה 0.25s ease-out;
}

.ארגז-תמונה.פתוח {
  display: flex;
}

@keyframes ארגז-הופעה {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ארגז-תוכן {
  max-width: 95%;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: default;
}

.ארגז-תוכן img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.ארגז-כיתוב {
  color: var(--לבן);
  text-align: center;
  font-size: 1.05rem;
  max-width: 700px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

.ארגז-כיתוב strong {
  color: var(--טורקיז);
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.ארגז-סגירה {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--לבן);
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}

.ארגז-סגירה:hover {
  background: rgba(255, 255, 255, 0.3);
}

.עבודה-מלל {
  padding: 1.25rem 1.5rem;
  position: relative;
}

/* קו מפריד דק ממורכז — מעל הכותרת והתיאור */
.עבודה-מלל::before {
  content: '';
  display: block;
  width: 55%;
  height: 1px;
  background: var(--טקסט-משני);
  opacity: 0.35;
  margin: 0 auto 1rem;
}

.עבודה-מלל h3 {
  color: var(--כחול-מותג);
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

/* פלאיירים — תמונה ממלאת את כל הריבוע, צמודה למעלה, בלי טקסט */
.פלאיירים-מלא .עבודה {
  aspect-ratio: 3 / 4;
}

.פלאיירים-מלא .עבודה img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  padding: 0;
  background: var(--לבן);
}

.פלאיירים-מלא .עבודה-מלל {
  display: none;
}

.עבודה-מלל p {
  color: var(--טקסט-משני);
  font-size: 0.95rem;
}

/* ====================================================
   עבודות דיגיטל — תמונה גדולה בפרופורציה מלאה, מלל קטן למטה
==================================================== */
.דיגיטל-גדול {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* גלויה — תמונה לרוחב, מלבן נמוך (כחצי גובה) */
.דיגיטל-גדול .עבודה.עבודה-נמוך img {
  aspect-ratio: auto;
  height: 290px;
  object-fit: contain;
}

/* אוולין — תמונה בגובה טבעי מלא, מירב הגודל בפרופורציה (הכל נכנס פנימה) */
.דיגיטל-גדול .עבודה.עבודה-מלא img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* אוולין — התמונה ממלאת את כל גובה הריבוע (מוגדלת) */
.דיגיטל-גדול .עבודה.עבודה-קאבר img {
  object-fit: cover;
}

/* עמודה כפולה בדיגיטל — 2 כרטיסים מוערמים זה מעל זה,
   בגובה כולל זהה בדיוק לפוסט יחיד (שלומי) שלצידם */
.דיגיטל-עמודה {
  align-self: stretch;        /* נמתח לגובה השורה (= גובה שלומי) */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.דיגיטל-עמודה .עבודה {
  flex: 1 1 0;                /* כל כרטיס מקבל בדיוק חצי מהגובה */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.דיגיטל-גדול .דיגיטל-עמודה .עבודה img {
  aspect-ratio: auto;
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
}

/* מלבן גבוה ואחיד — כל הפוסט מוצג במלואו ללא חיתוך, כל הריבועים באותו גובה */
.דיגיטל-גדול .עבודה img {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: var(--לבן);
}

/* מלל קטן וצמוד למטה */
.דיגיטל-גדול .עבודה-מלל {
  padding: 0.7rem 1rem;
}

.דיגיטל-גדול .עבודה-מלל::before {
  margin-bottom: 0.6rem;
}

.דיגיטל-גדול .עבודה-מלל h3 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.דיגיטל-גדול .עבודה-מלל p {
  font-size: 0.82rem;
}

/* כרטיס קרוסלה — 4 תמונות ריבועיות במלבן אחד (2 על 2) */
/* רוחב כפול — תופס 2 עמודות כדי שהתמונות זו לצד זו יהיו גדולות יותר */
.דיגיטל-גדול .עבודה-קרוסלה {
  grid-column: 1 / -1;
}

.עבודה-קרוסלה .קרוסלה-רשת {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--לבן);
}

.דיגיטל-גדול .עבודה-קרוסלה .קרוסלה-רשת img {
  width: 100%;
  height: 290px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  margin: 0;
  display: block;
  background: var(--לבן);
}

/* ====================================================
   רולאפים — באנרים גבוהים, מלבן גבוה יותר להצגה מלאה
==================================================== */
.רולאפים .גלריה {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.רולאפים .עבודה img {
  height: 520px;
  object-fit: contain;
}

/* ====================================================
   ★ מצב תצוגה: הסתרת ההסברים מתחת לתמונות (זמני)
   ----------------------------------------------------
   כל הטקסטים עדיין שמורים ב-index.html — לא נמחק כלום.
   כדי להחזיר את ההסברים: למחוק את כל הבלוק הזה בלבד.
==================================================== */
.עבודה-מלל p {
  display: none;
}

.עבודה-מלל::before {
  display: none;
}
/* ====== סוף מצב הסתרת ההסברים ====== */

/* ====================================================
   קישוטי רקע — עיגולים בהשראת הסקיצה
   רינגים עם מעבר כחול-טורקיז + ניצוצות זהב
==================================================== */

/* האזור עצמו צריך position כדי שהקישוטים יישבו בתוכו */
.שירותים-אזור,
.המלצות-אזור,
.תיק-אזור {
  position: relative;
  overflow: hidden;
}

/* התוכן עצמו תמיד מעל הקישוטים — לא נחסם ולא מוסתר */
.שירותים-אזור > *:not(.קישוט-רקע),
.המלצות-אזור > *:not(.קישוט-רקע),
.תיק-אזור > *:not(.קישוט-רקע) {
  position: relative;
  z-index: 1;
}

.קישוט-רקע {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* @property — מאפשר אנימציה של זווית הצבע (יוצר אפקט גלגל זורם) */
@property --מעלות {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* רינג — עיגול חלול עבה עם צבע זורם (גלגל) + הילה זהובה תלת-ממדית */
.רינג {
  position: absolute;
  border-radius: 50%;
  --מעלות: 0deg;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 220, 130, 0.7) 0%, rgba(212, 175, 55, 0.25) 30%, transparent 55%),
    conic-gradient(
      from var(--מעלות),
      var(--טורקיז) 0deg,
      var(--כחול-בהיר) 80deg,
      var(--כחול-מותג) 180deg,
      var(--כחול-בהיר) 270deg,
      var(--טורקיז) 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 48%, black 50%);
          mask: radial-gradient(circle, transparent 48%, black 50%);
  animation:
    זרימת-צבע 12s linear infinite,
    מסע-מימין-לשמאל 28s linear infinite,
    פעימה-גודל 7s ease-in-out infinite;
  opacity: 0.5;
  filter: drop-shadow(0 6px 18px rgba(123, 141, 166, 0.25));
}

@keyframes זרימת-צבע {
  to { --מעלות: 360deg; }
}

/* מסע אופקי מימין לשמאל — עם תנודות אנכיות חזקות (אורגני) */
@keyframes מסע-מימין-לשמאל {
  0%   { translate: 75vw -80px; }
  12%  { translate: 58vw 90px; }
  25%  { translate: 38vw -70px; }
  38%  { translate: 18vw 100px; }
  52%  { translate: -2vw -110px; }
  65%  { translate: -22vw 80px; }
  78%  { translate: -50vw -60px; }
  90%  { translate: -85vw 50px; }
  100% { translate: -150vw -30px; }
}

/* פעימת גודל עם וריאציה רנדומלית — מספר שיאים ושפלים */
@keyframes פעימה-גודל {
  0%, 100% { scale: 0.6; }
  18%      { scale: 1.05; }
  32%      { scale: 1.4; }
  50%      { scale: 0.85; }
  68%      { scale: 1.3; }
  85%      { scale: 0.7; }
}

/* פעימת גודל אלטרנטיבית — תזמון שונה לרינגים מסוימים */
@keyframes פעימה-גודל-ב {
  0%, 100% { scale: 1; }
  25%      { scale: 0.65; }
  45%      { scale: 1.45; }
  70%      { scale: 0.9; }
  88%      { scale: 1.2; }
}

/* פעימת גודל שלישית — לחיוניות נוספת */
@keyframes פעימה-גודל-ג {
  0%, 100% { scale: 0.75; }
  20%      { scale: 1.35; }
  40%      { scale: 0.6; }
  60%      { scale: 1.15; }
  80%      { scale: 0.95; }
}

/* גיוון מהירויות + עיכובים שלילים + פעימות שונות לרנדומליות
   ערכים: [זרימת-צבע], [מסע-אופקי], [פעימת-גודל] */
.רינג-א {
  animation-duration: 14s, 30s, 11s;
}
.רינג-ב {
  animation-name: זרימת-צבע, מסע-מימין-לשמאל, פעימה-גודל-ב;
  animation-duration: 10s, 26s, 9s;
  animation-direction: reverse, normal, normal;
  animation-delay: 0s, -8s, -2s;
}
.רינג-ג {
  animation-name: זרימת-צבע, מסע-מימין-לשמאל, פעימה-גודל-ג;
  animation-duration: 16s, 40s, 13s;
  animation-delay: 0s, -16s, -4s;
}
.רינג-ד {
  animation-name: זרימת-צבע, מסע-מימין-לשמאל, פעימה-גודל-ב;
  animation-duration: 9s, 28s, 10s;
  animation-direction: reverse, normal, normal;
  animation-delay: 0s, -5s, -3s;
}
.רינג-ה {
  animation-name: זרימת-צבע, מסע-מימין-לשמאל, פעימה-גודל-ג;
  animation-duration: 13s, 36s, 12s;
  animation-delay: 0s, -22s, -1s;
}

/* נקודה קטנה (כמו 3 הנקודות בסקיצה) */
.נקודה {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--כחול-מותג);
  background: var(--רקע);
  opacity: 0.6;
}

/* ניצוץ זהב מנצנץ — נכנס ויוצא באנימציה */
.ניצוץ {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 1) 0%, rgba(212, 175, 55, 0.4) 45%, rgba(212, 175, 55, 0) 75%);
  filter: blur(1.5px);
  animation: ניצנוץ-זהב 4s ease-in-out infinite;
}

.ניצוץ-ב { animation-delay: 1.5s; width: 22px; height: 22px; }
.ניצוץ-ג { animation-delay: 2.8s; width: 18px; height: 18px; }

@keyframes ניצנוץ-זהב {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.3);
  }
}

/* === מיקומי הקישוטים באזור שירותים === */
.שירותים-אזור .רינג-א {
  top: -90px;
  right: -50px;
  width: 280px;
  height: 280px;
}

.שירותים-אזור .רינג-ב {
  top: 40px;
  right: 130px;
  width: 200px;
  height: 200px;
  opacity: 0.32;
}

.שירותים-אזור .ניצוץ-א { top: 70px; right: 70px; }
.שירותים-אזור .ניצוץ-ב { top: 180px; right: 220px; }

.שירותים-אזור .נקודה-א { bottom: 70px; right: 12%; }
.שירותים-אזור .נקודה-ב { bottom: 100px; left: 50%; }
.שירותים-אזור .נקודה-ג { bottom: 50px; left: 18%; }

/* === מיקומי הקישוטים באזור המלצות === */
.המלצות-אזור .רינג-א {
  top: -70px;
  left: -50px;
  width: 240px;
  height: 240px;
  opacity: 0.35;
}

.המלצות-אזור .רינג-ב {
  bottom: -40px;
  right: 8%;
  width: 180px;
  height: 180px;
  opacity: 0.3;
}

.המלצות-אזור .ניצוץ-א { top: 60px; left: 50px; }
.המלצות-אזור .ניצוץ-ב { bottom: 90px; right: 120px; }
.המלצות-אזור .ניצוץ-ג { top: 50%; right: 25%; }

.המלצות-אזור .נקודה-א { top: 30px; right: 20%; }
.המלצות-אזור .נקודה-ב { bottom: 30px; left: 30%; }

/* על מובייל הקישוטים קטנים יותר */
@media (max-width: 768px) {
  .רינג { transform: scale(0.65); }
  .המלצות-אזור .רינג-ב { display: none; }
  .שירותים-אזור .רינג-ב { display: none; }
}

/* ====================================================
   אזור המלצות — בועות שיחה בצבע מים תכלת
==================================================== */
.המלצות-אזור {
  padding: 5rem 2rem 6rem;
}

.המלצות-תוכן {
  max-width: 1200px;
  margin: 0 auto;
}

.המלצות-כותרת {
  text-align: center;
  margin-bottom: 4rem;
}

.המלצות-כותרת p {
  color: var(--טקסט-משני);
  margin-top: 0.75rem;
  font-size: 1.1rem;
}

.המלצות-רשת {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem 2rem;
}

/* בועת שיחה — רקע לבן עם מסגרת תכלת */
.בועה {
  background: var(--לבן);
  color: var(--טקסט);
  padding: 2rem 1.6rem 1.5rem;
  border-radius: 28px 28px 28px 6px;
  position: relative;
  border: 2px solid #B5DDE8;
  box-shadow: 0 8px 25px rgba(123, 141, 166, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

.בועה:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(93, 191, 184, 0.25);
}

/* הזנב של הבועה (פינה ימנית למטה) */
.בועה::after {
  content: '';
  position: absolute;
  bottom: -14px;
  right: 28px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid var(--לבן);
}

.בועה-מירכאות {
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 4.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--טורקיז);
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
}

.בועה-טקסט {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--טקסט);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.בועה-חתימה {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(45, 62, 80, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.בועה-שם {
  color: var(--כחול-מותג);
  font-weight: 700;
  font-size: 1.05rem;
}

.בועה-תפקיד {
  color: var(--טקסט-משני);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .המלצות-אזור {
    padding: 3rem 1rem 4rem;
  }
  .המלצות-רשת {
    gap: 2.5rem 1.5rem;
  }
}

/* ====================================================
   עמוד יצירת קשר (contact.html)
==================================================== */
.קשר-אזור {
  background: var(--רקע-כהה);
  color: var(--לבן);
  padding: 2.5rem 2rem;
  text-align: center;
}

.קשר-תוכן {
  max-width: 900px;
  margin: 0 auto;
}

.קשר-תוכן h1,
.קשר-תוכן h2 {
  color: var(--לבן);
  margin-bottom: 0.4rem;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.קשר-תוכן > p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

/* כל הכרטיסים בשורה אחת — תמיד שלוש עמודות */
.קשר-פרטים {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.קשר-פריט {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.25rem 0.75rem;
  border-radius: 12px;
  border: 2px solid var(--זהב);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.קשר-פריט:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--לבן);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
}

.קשר-פריט .אייקון {
  font-size: 1.7rem;
  margin-bottom: 0.3rem;
}

.קשר-פריט .תווית {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--טורקיז);
  margin-bottom: 0.35rem;
}

.קשר-פריט a,
.קשר-פריט span {
  color: var(--לבן);
  font-size: 1.35rem;
  font-weight: 500;
  word-break: break-word;
}

@media (max-width: 600px) {
  .קשר-פריט { padding: 0.9rem 0.5rem; }
  .קשר-פריט a, .קשר-פריט span { font-size: 1rem; }
  .קשר-פריט .תווית { font-size: 0.85rem; letter-spacing: 1px; }
  .קשר-תוכן > p { font-size: 1.1rem; }
}

/* ====================================================
   אזור ההמלצות הוסר זמנית (אין עדיין ממליצים אמיתיים).
   כל התוכן נשמר ב-index.html — לא נמחק כלום.
   כדי להחזיר את ההמלצות בעתיד:
     1. למחוק את השורה  .המלצות-אזור { display:none }  שלמטה
     2. לבטל את ההערה בתפריט ב-index.html (השורה של "המלצות")
==================================================== */
.המלצות-אזור { display: none !important; }

/* ====================================================
   מיקומי העיגולים המונפשים בעמוד הבית (הירו)
==================================================== */
.בית-hero .רינג-א { top: -80px; right: -40px; width: 300px; height: 300px; opacity: 0.4; }
.בית-hero .רינג-ב { bottom: -60px; left: 4%; width: 220px; height: 220px; opacity: 0.35; }
.בית-hero .רינג-ג { top: 28%; left: 34%; width: 160px; height: 160px; opacity: 0.3; }

.בית-hero .ניצוץ-א { top: 18%; right: 22%; }
.בית-hero .ניצוץ-ב { bottom: 24%; left: 26%; }
.בית-hero .ניצוץ-ג { top: 55%; right: 12%; }

.בית-hero .נקודה-א { top: 24%; left: 14%; }
.בית-hero .נקודה-ב { bottom: 20%; right: 30%; }

@media (max-width: 768px) {
  .בית-hero .רינג-ג { display: none; }
}

/* כותרת/טקסט חבוי — נראה לגוגל ולקוראי-מסך אך לא לעין (נגישות + קידום) */
.חבוי {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}