/* Brandful, readable, colorful — V3 */
:root{
  --bg:#FBF4E6;
  --surface:#FFFFFF;
  --ink:#1f1f1f;
  --muted:#5f5a54;
  --line:#e7ddd4;
  --brand:#6E8CA4;
  --accent:#E3C889;
  --radius:14px;
  --shadow:0 8px 22px rgba(29,28,27,.10);
  --maxw:920px;
  --narrow:780px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#fff 0%, var(--bg) 100%);color:var(--ink);font-family:'Heebo','Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;line-height:1.75}
[dir="rtl"]{direction:rtl}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.wrap.narrow{max-width:var(--narrow)}

/* Header aligned to narrow width */
.site-head{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:10px;max-width:var(--narrow)}
.brand{font-weight:800;color:var(--ink);font-size:19px;text-decoration:none;letter-spacing:.2px}
.brand b{color:var(--brand)}
.nav a{color:var(--ink);text-decoration:none;margin-inline:6px;padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(227,200,137,.22)}
.nav .cta{border:1px solid var(--line);background:#fff}

/* Hamburger (mobile) */
.menu-toggle{display:none; appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:8px 12px; font:inherit}

.section{padding-block:40px;border-bottom:1px solid var(--line)}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.95))}

.hero{padding-block:46px;border-bottom:1px solid var(--line);background:
  radial-gradient(900px 420px at 85% -10%, rgba(227,200,137,.35), transparent 60%),
  radial-gradient(760px 420px at 10% 110%, rgba(110,140,164,.28), transparent 60%),
  linear-gradient(180deg,#fff, var(--bg));
}
.hero h1{font-size:clamp(26px,4.2vw,40px);line-height:1.2;margin:0 0 10px}
.lede{color:var(--muted);margin:0 0 14px}
.badge{display:inline-block;background:#FFF6DB;border:1px solid #E9D7A6;color:#6A5A3A;padding:4px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.05);box-shadow:var(--shadow);text-decoration:none}
.btn:hover{opacity:.94}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--accent)}
.btn.alt{background:var(--accent);color:#3b2e1d}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px}

h2{font-size:clamp(22px,3.4vw,30px);margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 16px;font-size:15px}

.cards{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .media img{width:100%;height:220px;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
.card .content{padding:16px}
.card .pill{display:inline-block;background:rgba(110,140,164,.10);color:var(--brand);border:1px solid rgba(110,140,164,.25);padding:4px 10px;border-radius:999px;font-size:12px}
.card .title{margin:6px 0 6px;font-size:18px}
.card .note{color:var(--muted);font-size:14px}
.card .actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

.grid{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.grid.two{grid-template-columns:1fr 1fr}
@media (max-width: 760px){ .grid.two{grid-template-columns:1fr} }

.about{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.about img{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width: 820px){ .about{grid-template-columns:1fr} }

.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.form label{display:block;font-size:14px;margin:6px 0 4px;color:#3b2e1d}
.form input,.form textarea{width:100%;padding:12px;border:1px solid #ddcdbd;border-radius:12px;font:inherit;background:#fff}
.form textarea{min-height:120px;resize:vertical}
.form .btns{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

#alerts{margin-top:10px}
.alert{padding:10px;border-radius:10px;font-size:14px;border:1px solid}
.alert.ok{background:#e9f7ef;color:#165d34;border-color:#cdebd9}
.alert.err{background:#fdecea;color:#8a1e1c;border-color:#f5c6c3}

.site-foot{padding-block:24px;background:#fff}
.site-foot small{color:#7b7b7b}

/* Links — brand color */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.link{color:var(--brand)}

/* Mobile overflow guards */
html, body{width:100%;max-width:100%;overflow-x:hidden}
main, header, footer, .wrap, .section, .hero, .cards, .grid{position:relative;left:0;right:0;max-width:100%;overflow-x:clip}
.card .media, .media{overflow:hidden}
img, video, svg{max-width:100%;height:auto;display:block}

/* Hamburger menu for mobile */
@media (max-width: 860px){
  .menu-toggle{display:inline-block}
  #nav{position:fixed; inset:56px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); display:none; box-shadow:0 12px 20px rgba(0,0,0,.06); z-index:9}
  #nav.open{display:block}
  #nav a{display:block; padding:14px 20px; margin:0; border-bottom:1px solid var(--line)}
  #nav a:last-child{border-bottom:none}
  .nav a:hover{background:#f6f6f6}
}

/* Tighten small screens */
@media (max-width: 420px){
  .wrap{padding-inline:14px}
  .hero{padding-block:36px}
  .section{padding-block:30px}
  .card .content{padding:14px}
  .card .media img{height:200px}
}

/* Back-to-top floating button */
.backtop{
  position:fixed;
  inset-inline-end:16px;
  bottom:16px;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--accent);
  color:var(--ink);
  box-shadow:var(--shadow);
  display:none;
  align-items:center;justify-content:center;
  cursor:pointer;
  z-index:20;
  font-size: 20px;
  line-height: 1;
}
.backtop.show{display:flex}
.backtop:hover{background:var(--accent); color:#3b2e1d}



 
 
.social-links {
  padding: 2rem 0;
  background: #f8f9fa;
  margin-top: 2rem;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* שיניתי מ-120px ל-100px */
  gap: 0.50rem; /* הקטנתי את הרווח מ-1rem ל-0.75rem */
  justify-content: center;
  max-width: var(--narrow); /* הוספתי רוחב מקסימלי */
  margin: 0 auto; /* מרכוז אופקי */
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: center;
  font-size: 14px;
}

.social-btn i {
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.social-btn:hover i {
  transform: scale(1.1);
}

.btn i {
  margin-inline-end: 8px;
  font-size: 0.9em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* ===== FAQ styles ===== */
.faq details {
  border: 1px solid #e5e7eb;         /* אפור עדין */
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  background: #fff;
  transition: background .2s ease, border-color .2s ease;
}

.faq details[open] {
  background: #fafafa;
  border-color: #d1d5db;             /* מעט מודגש כשפתוח */
}

.faq summary {
  list-style: none;                   /* מסתיר את המשולש המובנה */
  cursor: pointer;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq summary::-webkit-details-marker { display: none; } /* כרום/ספארי */

.faq summary:focus-visible {
  outline: 2px solid #c5a29a;        /* קו נגישות – אפשר להתאים לצבע מותג */
  outline-offset: 3px;
  border-radius: 8px;
}

.faq .answer {
  margin-top: 8px;
  color: #374151;                     /* אפור כהה לקריאות טובה */
  font-size: 16px;
}

/* תגית "בקרוב" קטנה לשימוש בסיכומי שאלות */
.faq .badge-soon {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
}

/* ריווח פנימי בקישורים בתוך תשובה */
.faq .answer .btn,
.faq .answer .btn.ghost {
  margin-top: 6px;
}

/* אופציונלי: ריווח אחיד לכותרות הסקשן */
#faq .sub { margin-bottom: 10px; }


/* === WIDER LAYOUT + ROOM FOR NAV === */
:root{
  /* היה: 920/780. עכשיו דינמי לפי הרוחב, עד 1240/1080 */
  --maxw: clamp(1000px, 92vw, 1240px);
  --narrow: clamp(860px, 88vw, 1080px);
}

/* הכותרת העליונה תיושר לרוחב הרחב (לא ל-narrow) */
.site-head .wrap{ max-width: var(--maxw) !important; }

/* תפריט: שורה אחת ככל האפשר, בלי שבירה מוקדמת */
.nav{
  display: flex;
  flex-wrap: nowrap;      /* אל תגלוש לשורה 2 בדסקטופ רחב */
  gap: 6px;
}
.nav a{
  white-space: nowrap;    /* קישורים לא יישברו לשתי שורות */
  padding: 8px 10px;
  font-size: 15px;
}

/* כווץ עדין של התפריט כשנכנסים לאזורי ביניים */
@media (max-width: 1200px){
  .nav a{ padding: 8px 8px; font-size: 14px; }
}

/* במסכים צרים התפריט כבר נפתח כהמבורגר – להשאיר כמו שהגדרת */