/* ---- @font-face של Heebo — מוזג לכאן מ-fonts.css, כדי לחסוך בקשה
        חוסמת אחת בכל דף. אין לערוך כאן — המקור הוא fonts.css. ---- */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-3.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* math */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-1.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-2.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   קשר — אתר התדמית
   אותה מערכת עיצוב כמו לוח הבקרה (dashboard.css): אסימונים זהים,
   אותן מחלקות, אותה טיפוגרפיה. כאן יש יותר אוויר וסולם גדול יותר.

   הגלובוס והטלפונים המרחפים נשמרו בדיוק כפי שהיו — סעיף 3.
   ============================================================ */

/* ---------- 1. אסימוני עיצוב (מקור האמת: dashboard.css) ---------- */
:root {
    --field:      #e8f2f8;
    --panel:      #ffffff;
    --panel-2:    #f4f7f8;
    --ink:        #0c1f21;
    --ink-2:      #35494b;
    --dim:        #63797a;
    --hair:       #d7dee2;
    --hair-2:     #e8edf0;

    --rail:        #cfe4f2;
    --rail-item:   #eaf4fb;
    --rail-hover:  #a8cfe8;
    --rail-active: #12578f;
    --rail-ink:    #123f5c;
    --rail-dim:    #517b96;
    --rail-hair:   #b7d5e9;

    --cord:       #0e7c86;
    --cord-deep:  #0a5b63;
    --cord-wash:  #e3f0f0;

    --lamp-live:  #1e8e3e;
    --lamp-ring:  #b8790d;
    --lamp-dead:  #b4402f;
    --lamp-off:   #9aa9a8;

    --r:     10px;
    --r-sm:   7px;
    --r-pill: 999px;
    --lift:  0 18px 48px -22px rgba(6,32,34,.5);
    --lift-sm: 0 2px 6px -2px rgba(6,32,34,.22);

    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Courier New", monospace;
    --sans: 'Heebo', system-ui, sans-serif;

    /* תאימות לאחור — שמות ישנים שעדיין מופיעים ב-HTML של הדפים */
    --primary-color: #0e7c86;
    --primary-hover: #0a5b63;
    --bg-gradient: #e8f2f8;
    --card-bg: #ffffff;
    --text-color: #0c1f21;

    --page: 1180px;
}

/* ---------- 2. איפוס ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    background: var(--field);
    color: var(--ink);
    /* clip ולא hidden: hidden הופך את body למכולת גלילה ושובר position:sticky
       בכל הדף (ניווט המדריכים). clip חוסם גלישה אופקית בלי לשבור sticky. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
img { max-width: 100%; }

a { color: var(--cord-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--cord); outline-offset: 3px; border-radius: 3px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* תווית־על: לעברית אין אותיות גדולות — המרשם נבנה ממרווח־אותיות ומשקל */
.eyebrow, .drawer-section {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--dim);
}

#trafficLayer {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

/* ---------- 3. אזור עמוד ---------- */
.page-wrap { width: min(100% - 48px, var(--page)); margin-inline: auto; }

/* ============================================================
   4. האדר
   ============================================================ */
/* ‎.sticky-wrapper‎ ולא ‎header‎ בלבד: כל האדרים של האתר נושאים את המחלקה הזו,
   ואילו ‎<header>‎ שמופיע *בתוך* תוכן — למשל כותרת מדריך (‎.kg-head‎) — קיבל בלי
   הסיוג הזה ‎position: fixed‎ ונדבק לראש החלון מעל התוכן. */
header.sticky-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100000;
    background: transparent;
}

.sticky-wrapper {
    background: transparent;
    padding: 22px 0;
    border-bottom: 1px solid transparent;
    transition: background .22s ease, padding .22s ease, border-color .22s ease;
}
.sticky-wrapper.scrolled {
    background: rgba(232,242,248,.9);
    backdrop-filter: blur(10px);
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
}

.header-bar {
    width: min(100% - 48px, var(--page));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-brand { display: flex; align-items: center; gap: 12px; }
.logo-header {
    height: 46px; width: auto;
    transition: height .22s ease;
}
.sticky-wrapper.scrolled .logo-header { height: 38px; }
.header-brand h1 { font-size: 1.05rem; font-weight: 500; color: var(--ink); }

.main-nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
    position: relative;
    display: inline-block;
    padding: 7px 12px;
    color: var(--ink-2);
    font-size: .92rem;
    font-weight: 400;
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: color .14s, background .14s;
}
.nav-link:hover { color: var(--rail-active); background: var(--rail-item); box-shadow: inset 0 0 0 1px var(--rail-hover); }
.nav-link.active { color: var(--cord-deep); font-weight: 500; }
.nav-link.active::after {
    content: ''; position: absolute;
    inset-inline: 12px; bottom: 2px; height: 2px;
    background: var(--cord); border-radius: 2px;
}

/* תפריט נפתח */
.dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 210px;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--lift);
    padding: 6px;
    z-index: 10;
}
/* גשר בלתי נראה על פני הרווח שבין הכפתור לתפריט. בלעדיו העכבר "יוצא"
   מה-dropdown באמצע הדרך למטה, ‎:hover‎ מתבטל והתפריט נסגר לפני שהגיעו אליו.
   הגשר יושב על ‎.dropdown‎ עצמו — ולכן הוא ברוחב הטאב בלבד ובגובה הרווח בלבד
   (8px), ולא ברוחב הפאנל הפתוח שהיה נמתח גם מתחת לטאבים השכנים.
   קיים רק כשהתפריט פתוח, כדי שלא ישב רצועה שקופה על התוכן שמתחת להאדר. */
.dropdown::after {
    content: '';
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 8px;
}
.dropdown:hover::after,
.dropdown:focus-within::after { display: block; }
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content { display: block; }
.dropdown-content a {
    display: block;
    padding: 9px 12px;
    color: var(--ink-2);
    font-size: .9rem;
    text-decoration: none;
    border-radius: var(--r-sm);
    white-space: nowrap;
}
.dropdown-content a:hover { background: var(--rail-item); color: var(--rail-active); box-shadow: inset 0 0 0 1px var(--rail-hover); }
/* השורה האחרונה — מוליכה לעמוד שמרכז את כולם */
.dropdown-all {
    margin-top: 4px;
    padding-top: 11px !important;
    border-top: 1px solid var(--hair-2);
    color: var(--cord-deep) !important;
    font-weight: 500;
}

.header-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- 5. כפתורים ---------- */
.btn-advanced,
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 22px;
    border: 1px solid var(--cord);
    border-radius: var(--r-sm);
    background: var(--cord);
    color: #fff;
    font-family: inherit; font-size: .92rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}
.btn-advanced:hover,
.btn:hover { background: var(--cord-deep); border-color: var(--cord-deep); color: #fff; }

.btn { width: 100%; padding: 13px 22px; font-size: 1rem; margin-top: 10px; }
.btn-primary { background: var(--cord); border-color: var(--cord); color: #fff; font-weight: 500; }
.btn-primary:hover { background: var(--cord-deep); border-color: var(--cord-deep); }

.btn-quiet {
    background: var(--panel); color: var(--cord-deep); border-color: var(--hair);
}
.btn-quiet:hover { background: var(--panel-2); border-color: var(--cord); color: var(--cord-deep); }

.btn-lg { padding: 14px 34px; font-size: 1.02rem; }

/* ---------- 6. מגירת מובייל ---------- */
.nav-hamburger {
    display: none;
    background: var(--panel);
    border: 1px solid var(--hair);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-family: inherit; font-size: .84rem; font-weight: 500;
    cursor: pointer;
}
.nav-hamburger:hover { border-color: var(--cord); color: var(--cord-deep); }

.drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,26,28,.45);
    z-index: 100001;
}
/* המגירה נפתחת מהצד שבו יושב כפתור "תפריט" — כלומר משמאל. כשהיא נפתחה מימין
   (הצד ה"טבעי" ל-RTL) המשתמש לחץ בשמאל וקיבל תנועה מהקצה הנגדי, וגם וידג'ט
   הנגישות שיושב בפינה הימנית־תחתונה נדחס אליה. */
.mobile-drawer {
    position: fixed; top: 0; left: 0;
    width: 280px; max-width: 86vw; height: 100vh;
    background: var(--rail);
    border-inline-start: 1px solid var(--rail-hair);
    z-index: 100002;
    transform: translateX(-100%);
    transition: transform .22s ease;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
body.home-drawer-open .mobile-drawer { transform: translateX(0); }
body.home-drawer-open .drawer-overlay { display: block; }
body.home-drawer-open { overflow: hidden; }

.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--rail-hair);
}
.drawer-logo { height: 34px; width: auto; }
.drawer-close {
    background: var(--rail-item);
    border: 1px solid #dcebf6;
    color: var(--rail-ink);
    padding: 5px 12px; border-radius: var(--r-sm);
    font-family: inherit; font-size: .78rem; font-weight: 500; cursor: pointer;
}
.drawer-close:hover { background: var(--rail-hover); border-color: #8ec0e0; }

.drawer-nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; }

/* כל פריט הוא צ'יפ בפני עצמו — כמו בלוח הבקרה */
.drawer-link {
    display: block;
    padding: 10px 13px;
    background: var(--rail-item);
    border: 1px solid #dcebf6;
    border-radius: var(--r-sm);
    color: var(--rail-ink);
    font-size: .92rem;
    text-decoration: none;
    transition: background .14s, border-color .14s, color .14s;
}
.drawer-link:hover { background: var(--rail-hover); border-color: #8ec0e0; color: #0b3854; }
.drawer-link.active { background: var(--rail-active); border-color: var(--rail-active); color: #fff; font-weight: 500; }
.drawer-sub { margin-inline-start: 14px; }

.drawer-section {
    margin: 14px 4px 2px;
    padding-top: 14px;
    border-top: 1px solid var(--rail-hair);
    color: var(--rail-dim);
}

.drawer-login { margin: 6px 12px 20px; width: calc(100% - 24px); }

/* ============================================================
   7. הגלובוס והטלפונים המרחפים — הועתק מילה במילה מהגיליון הקודם.
      אין לשנות: האנימציות תלויות ב-JS שב-index.html.
   ============================================================ */
.globe-wrapper {
    position: fixed;
    top: 70%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    z-index: 0; 
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px; 
}

#globeScrollWrapper {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none !important; 
}

/* Globe.svg from Wikimedia Commons, CC BY-SA 3.0: https://commons.wikimedia.org/wiki/File:Globe.svg */
.globe {
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c7f3f6 18%, #91dce5 58%, #58b8c4 100%);
    border: 3px solid rgba(0, 96, 100, 0.08);
    box-shadow: 0 0 90px rgba(0, 96, 100, 0.16), 0 0 45px rgba(0, 150, 136, 0.1);
    opacity: 0.62;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    transition: transform 0s !important;
    will-change: transform;
}

.globe::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: url('globe.svg') center / cover no-repeat;
    opacity: 0.42;
    filter: saturate(0.45) brightness(1.15) contrast(0.78);
    animation: rotateColorGlobe 80s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
}

.globe::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 66%, rgba(0, 77, 64, 0.06) 100%);
    pointer-events: none;
}

@keyframes rotateColorGlobe {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .globe::before {
        animation-duration: 160s;
    }
}

.globe-server {
    display: none;
}

.packet {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10000;
    opacity: 0.82;
    will-change: transform, opacity;
}
.packet-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
}
.packet-icon-svg {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.22));
}
.packet-anim { animation: flyToGlobe 14s cubic-bezier(0.22, 0.72, 0.2, 1) forwards; }
@keyframes flyToGlobe {
    0% { transform: translate(var(--sx), var(--sy)) scale(0.82); opacity: 0; }
    10% { opacity: 0.82; }
    78% { opacity: 0.82; }
    100% { transform: translate(var(--ex), var(--ey)) scale(0.58); opacity: 0; }
}

/* ============================================================
   8. אזור ההירו
   הטקסט יושב ישירות מול הגלובוס — בלי כרטיס זכוכית שמסתיר אותו.
   ============================================================ */
.hero-section {
    position: relative;
    /* בלי גובה מינימום: ההירו בגובה התוכן, והטקסט מתחיל מתחת לתפריט (99px).
       גובה לפי מסך (vh) ניפח אותו בצילום של גוגל — גוגל מצייר בחלון בגובה הדף
       כולו — ובמסכים גבוהים נשאר חלק ריק מעל הכותרת ומתחתיה. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 56px;
    z-index: 1;
}

@keyframes heroZoomIn {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 780px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: heroZoomIn .8s cubic-bezier(.2,.8,.2,1) both;
}
/* הילה רכה מאחורי הטקסט — שומרת קריאות מעל הגלובוס בלי לחסום אותו */
.hero-content::before {
    content: '';
    position: absolute;
    inset: -12% -14%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(232,242,248,.94) 0%, rgba(232,242,248,.74) 46%, rgba(232,242,248,0) 76%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(2.2rem, 5.2vw, 3.9rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--ink);
    margin: 0;
}
.hero-title strong, .hero-title b { font-weight: 500; }

.hero-subtitle {
    margin: 22px auto 0;
    max-width: 56ch;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
    color: var(--ink-2);
    font-weight: 400;
}

.hero-actions { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   9. מקטע היתרונות
   ============================================================ */
.features-section {
    position: relative;
    z-index: 1;
    padding: 90px 24px 100px;
}
.features-section::before { content: none; }

.section-title-center,
.features-section > h2 {
    text-align: center;
    color: var(--ink);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -.03em;
    margin: 0 0 12px;
}
.section-lead {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 54px;
    color: var(--dim);
    font-size: 1rem;
}

/* שש טענות ערך — שלוש בשורה, שתי שורות שוות. לא 4+2 עקום. */
.cards-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: var(--page);
    margin: 0 auto;
}
@media (max-width: 980px) { .cards-grid-modern { grid-template-columns: repeat(2, 1fr); } }

.reveal-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 26px 24px;
    text-align: start;
    overflow: hidden;
    height: auto;
    cursor: default;
    box-shadow: none;
    transition: border-color .18s ease;
}
.reveal-card:hover {
    border-color: var(--rail-hover);
    background: var(--rail-item);
    box-shadow: 0 10px 26px -18px rgba(6,32,34,.45);
}

/* המנגנון נשמר: הפנים מתחלף בגילוי בריחוף */
.features-section .cards-grid-modern { position: relative; z-index: 1; gap: 16px; }

.features-section .reveal-card {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 24px 24px 26px;
    min-height: 108px;
    box-shadow: none;
    cursor: pointer;
    backdrop-filter: none;
    isolation: auto;
    /* עמודה, לא שורה: יש דפים שבהם הכרטיס מכיל card-title+card-content
       ישירות (בלי card-front), ובשורה הכותרת הייתה נדחסת למילה בשורה */
    display: flex;
    flex-direction: column;
}
.features-section .reveal-card::before,
.features-section .reveal-card::after { content: none; }

.features-section .card-front,
.features-section .card-reveal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 10px;
    color: var(--ink);
}

.features-section .card-front {
    justify-content: flex-start;
    min-height: 0;
    width: 100%;
    transition: opacity .3s ease, transform .3s ease;
}

.features-section .card-reveal {
    position: absolute;
    inset: 0;
    padding: 24px 24px 26px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
    line-height: 1.75;
    justify-content: center;
    text-align: start;
    color: var(--ink-2);
    font-size: .95rem;
}

.features-section .reveal-card:hover .card-front { opacity: 0; transform: translateY(-12px); }
.features-section .reveal-card:hover .card-reveal { opacity: 1; transform: translateY(0); }

/* ללא אייקונים — אם נשאר אלמנט ריק הוא לא תופס מקום */
.card-icon { display: none; }

.card-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.015em;
}
.features-section .card-title { font-size: 1.2rem; }

.card-content {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .35s ease-out, opacity .35s ease-out, margin-top .35s;
    font-size: .95rem; color: var(--ink-2); line-height: 1.7;
}
.reveal-card:hover .card-content { max-height: 180px; opacity: 1; margin-top: 12px; }

/* קו קצר שמסמן את הכרטיס — רמז לחוט של לוח הבקרה.
   שני הווריאנטים: כרטיס עם card-front, וכרטיס עם card-title ישיר. */
.features-section .card-front::before {
    content: '';
    width: 26px; height: 2px;
    background: var(--cord);
    border-radius: 2px;
    margin-bottom: 4px;
}
.features-section .reveal-card > .card-title::before {
    content: '';
    display: block;
    width: 26px; height: 2px;
    background: var(--cord);
    border-radius: 2px;
    margin-bottom: 12px;
}

/* ============================================================
   10. לקוחות
   ============================================================ */
.clients-section {
    padding: 80px 0 90px;
    background: var(--panel);
    overflow: hidden;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--hair);
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* התיאור הארוך ביותר מגיע לכ-150px גובה — 210px מבטיחים שהבועה לא תיחתך */
    padding: 210px 0 30px;
    margin-top: -170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    background: var(--panel);
    border: 1px solid var(--hair);
    color: var(--cord-deep);
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--lift-sm);
    cursor: pointer;
    z-index: 10;
    font-family: inherit; font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .14s, color .14s, background .14s;
    user-select: none;
}
.carousel-arrow:hover {
    background: var(--cord);
    border-color: var(--cord);
    color: #fff;
    transform: translateY(-50%);
}
.arrow-prev { right: 16px; }
.arrow-next { left: 16px; }
/* דהייה בקצוות כדי שהלוגואים לא ייחתכו באמצע */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 96px;
    z-index: 5; pointer-events: none;
}
.carousel-container::before { right: 0; background: linear-gradient(to left, var(--panel), rgba(255,255,255,0)); }
.carousel-container::after  { left: 0;  background: linear-gradient(to right, var(--panel), rgba(255,255,255,0)); }

/* 150px + 60px — הערכים מקודדים ב-JS של הקרוסלה (index.html). אין לשנות. */
.carousel-track { display: flex; width: max-content; gap: 60px; will-change: transform; padding: 0; }

.client-item {
    position: relative;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 150px; height: 88px;
    padding: 10px;
    border: 1px solid var(--hair-2);
    border-radius: var(--r);
    background: var(--panel);
    transition: border-color .18s ease;
}
.client-item:hover {
    border-color: var(--rail-hover);
    background: var(--rail-item);
    box-shadow: 0 8px 22px -16px rgba(6,32,34,.5);
}

.client-logo {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .18s ease, opacity .18s ease;
}
.client-item:hover .client-logo { filter: none; opacity: 1; }

.client-info-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 260px;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--lift);
    padding: 12px 14px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 20;
    direction: rtl;
}
.client-info-popup::after { content: none; }
.client-item:hover .client-info-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.client-name { font-size: .95rem; font-weight: 500; color: var(--ink); }
.client-desc { font-size: .82rem; color: var(--dim); margin-top: 3px; line-height: 1.5; }

/* ============================================================
   11. תוכן כללי לדפים פנימיים
   ============================================================ */
.page-section { padding: 140px 24px 80px; }
.page-section .page-wrap > h1,
.page-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -.03em;
    color: var(--ink);
    margin: 0 0 14px;
}
.page-lead { color: var(--dim); font-size: 1.05rem; max-width: 62ch; margin: 0 0 44px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 26px 28px;
}
.panel + .panel { margin-top: 16px; }
.panel:hover { border-color: var(--rail-hover); }
.panel h2, .panel h3 { font-size: 1.15rem; font-weight: 500; color: var(--ink); margin: 0 0 10px; }
.panel p { color: var(--ink-2); }

.stack { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* ============================================================
   12. חלון התחברות + שדות
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(8,26,28,.42);
    z-index: 200000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-content {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--lift);
    width: 100%;
    max-width: 380px;
    padding: 32px 30px 30px;
    transform: translateY(8px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.modal-overlay.open .modal-content { transform: translateY(0); opacity: 1; }

.close-modal {
    position: absolute; top: 14px; inset-inline-end: 16px;
    background: var(--panel); border: 1px solid var(--hair);
    color: var(--dim);
    padding: 4px 11px; border-radius: var(--r-sm);
    font-family: inherit; font-size: .74rem; font-weight: 500; line-height: 1.6;
    cursor: pointer;
}
.close-modal:hover { border-color: var(--ink-2); color: var(--ink); }

.logo-login { max-width: 120px; height: auto; display: block; margin: 4px auto 18px; }
.modal-content h2 { font-size: 1.2rem; font-weight: 400; color: var(--ink) !important; margin-bottom: 20px; }

.input-group { position: relative; margin-bottom: 16px; }
.input-group input {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    background: var(--panel);
    font-family: inherit; font-size: .95rem; color: var(--ink);
    transition: border-color .14s, box-shadow .14s;
}
.input-group input:focus {
    outline: none;
    border-color: var(--cord);
    box-shadow: 0 0 0 3px rgba(14,124,134,.13);
}
.input-group label {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dim);
    font-size: .92rem;
    pointer-events: none;
    transition: top .14s, transform .14s, font-size .14s, color .14s;
    background: var(--panel);
    padding: 0 5px;
}
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%) scale(.86);
    color: var(--cord-deep);
}

/* "זכור אותי" — שורה שקטה בין השדות לכפתור, לא הגדרה שצועקת */
.login-remember {
    display: flex; align-items: center; gap: 9px;
    margin: -4px 0 16px;
    font-size: .88rem; color: var(--dim);
    cursor: pointer; user-select: none;
}
.login-remember input {
    flex: 0 0 auto; width: 16px; height: 16px; margin: 0;
    accent-color: var(--cord);
    cursor: pointer;
}
.login-remember:hover span { color: var(--ink); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
    font-family: inherit;
}

/* ============================================================
   13. רספונסיביות
   ============================================================ */
@media (max-width: 900px) {
    .main-nav, .header-actions { display: none; }
    .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .header-bar { width: min(100% - 32px, var(--page)); }
    .hero-section { padding: 124px 20px 40px; }
    .features-section { padding: 64px 20px 72px; }
    .page-section { padding: 110px 20px 64px; }
    .page-wrap { width: min(100% - 32px, var(--page)); }
}

@media (max-width: 560px) {
    .hero-title { font-size: 2rem; letter-spacing: -.025em; }
    .hero-subtitle { font-size: .98rem; }
    .cards-grid-modern { grid-template-columns: 1fr; }
    .features-section .reveal-card { min-height: 0; }
    .features-section .card-front { min-height: 0; }
    /* בנייד אין ריחוף — ההסבר מוצג תמיד */
    .features-section .card-reveal { position: static; opacity: 1; transform: none; padding: 10px 0 0; }
    .features-section .reveal-card { flex-direction: column; }
    .clients-section { padding: 56px 0 64px; }
    .carousel-arrow { display: none; }
    .modal-content { padding: 26px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    /* הגלובוס ממשיך להסתובב לאט — הוא תוכן, לא קישוט */
    .globe::before { animation-duration: 160s !important; animation-iteration-count: infinite !important; }
}

/* בהדפסה — כלי המסך לא שייכים לנייר */
@media print {
    .ka-widget, .ka-lens, .ka-ruler { display: none !important; }
}

/* ============================================================
   14. דפי שירות (sv-*)
   שמונה דפי הקהלים: מרכזיה וירטואלית, עסקים, עסקים קטנים/גדולים,
   ישיבות, עמותות, גלובלי, שלוחה בנייד. אלמנט החתימה: "מסלול השיחה" —
   שיחה אחת שעוברת על חוט, עם נוריות המצב של לוח הבקרה (--lamp-*).
   ============================================================ */
.sv-hero { padding: 150px 24px 10px; position: relative; z-index: 1; }
.sv-hero .eyebrow { display: block; margin-bottom: 16px; }

.sv-title {
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.035em;
    color: var(--ink);
    max-width: 21ch;
}
.sv-title strong, .sv-title b { font-weight: 600; color: var(--cord-deep); }

.sv-lead {
    margin-top: 18px;
    max-width: 58ch;
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--ink-2);
}
.sv-cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- מסלול השיחה ---------- */
.sv-route-panel {
    margin-top: 52px;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 24px 30px 30px;
}
.sv-route-caption {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    margin-bottom: 30px; flex-wrap: wrap;
}
.sv-route-caption .eyebrow { margin: 0; }
.sv-route-note { font-size: .82rem; color: var(--dim); }

.sv-route {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: space-between; gap: 10px;
    position: relative;
}
/* החוט — עובר מתחת לנוריות לכל רוחב הפנל, כמו קו שהשיחה נוסעת עליו */
.sv-route::before {
    content: '';
    position: absolute; top: 5px; right: 4px; left: 4px; height: 2px;
    background: var(--cord); opacity: .35; border-radius: 2px;
}
.sv-stop {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    text-align: center; padding: 0 6px;
    position: relative;
    animation: svStopIn .5s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i, 0) * .14s);
}
@keyframes svStopIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sv-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--lamp-off);
    box-shadow: 0 0 0 5px var(--panel);   /* מסתיר את החוט סביב הנורית */
    flex: 0 0 auto;
}
.sv-dot.is-call { background: var(--rail-active); }
.sv-dot.is-menu { background: var(--cord); }
.sv-dot.is-ring { background: var(--lamp-ring); }
.sv-dot.is-live { background: var(--lamp-live); }
.sv-dot.is-off  { background: var(--lamp-off); }
.sv-dot.is-end  { background: var(--cord-deep); }

.sv-stop-name { font-size: .95rem; font-weight: 500; color: var(--ink); line-height: 1.35; }
.sv-stop-sub  { font-size: .8rem; color: var(--dim); line-height: 1.5; max-width: 22ch; }
.sv-stop-keys { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.sv-key {
    font-family: var(--mono); font-size: .76rem; line-height: 1;
    padding: 4px 7px;
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    background: var(--panel-2); color: var(--ink-2);
}

/* ---------- מקטעי תוכן ---------- */
.sv-section { padding: 58px 24px 6px; position: relative; z-index: 1; }
.sv-kicker { display: block; margin-bottom: 10px; }
.sv-h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 300; letter-spacing: -.03em; color: var(--ink);
    max-width: 30ch;
}
.sv-section-lead { margin-top: 12px; max-width: 62ch; color: var(--ink-2); }

/* פנקס תרחישים: כותרת בעמודה צרה, הסבר בעמודה רחבה, קו שיער בין שורות */
.sv-cases { margin-top: 34px; }
.sv-case {
    display: grid; grid-template-columns: 250px 1fr; gap: 12px 34px;
    padding: 24px 0; border-top: 1px solid var(--hair);
}
.sv-case:last-child { border-bottom: 1px solid var(--hair); }
.sv-case h3 { font-size: 1.06rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.sv-case p { color: var(--ink-2); max-width: 66ch; line-height: 1.75; }
.sv-case p + p { margin-top: 10px; }

/* לוח היכולות — שורות בסגנון לוח הבקרה, עם נורית ליד כל יכולת */
.sv-board {
    margin-top: 34px;
    background: var(--panel);
    border: 1px solid var(--hair); border-radius: var(--r);
    overflow: hidden;
}
.sv-board-row {
    display: flex; align-items: baseline; gap: 13px;
    padding: 15px 24px;
    border-top: 1px solid var(--hair-2);
}
.sv-board-row:first-child { border-top: 0; }
.sv-board-row .sv-dot { width: 9px; height: 9px; box-shadow: none; align-self: center; }
.sv-board-row strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.sv-board-row span { color: var(--ink-2); font-size: .93rem; }
.sv-board-foot {
    padding: 13px 24px; border-top: 1px solid var(--hair);
    background: var(--panel-2); font-size: .88rem; color: var(--dim);
}

/* שאלות ותשובות */
.sv-faq { margin-top: 30px; display: grid; gap: 10px; }
.sv-faq details {
    background: var(--panel);
    border: 1px solid var(--hair); border-radius: var(--r-sm);
}
.sv-faq details[open] { border-color: var(--rail-hover); }
.sv-faq summary {
    padding: 15px 20px; cursor: pointer;
    font-weight: 500; color: var(--ink); font-size: .98rem;
    list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
    content: '+'; font-family: var(--mono); color: var(--dim); font-size: 1.05rem; flex: 0 0 auto;
}
.sv-faq details[open] summary::after { content: '–'; color: var(--cord-deep); }
.sv-faq details > p { padding: 0 20px 17px; color: var(--ink-2); max-width: 72ch; line-height: 1.75; }

/* קישורי המשך — צ'יפים לדפי אחים (משמש גם בדף הבית) */
.sv-related { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.sv-related a {
    flex: 1 1 230px; display: block;
    padding: 15px 18px 16px;
    background: var(--panel);
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    text-decoration: none;
    transition: border-color .14s, background .14s;
}
.sv-related a:hover { border-color: var(--rail-hover); background: var(--rail-item); }
.sv-related strong { display: block; font-weight: 500; color: var(--ink); font-size: .97rem; }
.sv-related small { display: block; margin-top: 4px; color: var(--dim); font-size: .84rem; line-height: 1.5; }

/* פס סיום */
.sv-cta {
    margin-top: 76px;
    background: var(--panel);
    border-top: 1px solid var(--hair);
    padding: 62px 24px 74px;
    text-align: center;
    position: relative; z-index: 1;
}
.sv-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -.03em; }
.sv-cta p { margin: 14px auto 0; max-width: 52ch; color: var(--ink-2); }
.sv-cta .sv-cta-row { justify-content: center; }
.sv-cta-phone {
    display: block; margin-top: 22px;
    font-size: 1.35rem; font-weight: 300; letter-spacing: .02em;
    color: var(--cord-deep); text-decoration: none;
}
.sv-cta-phone:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .sv-hero { padding: 124px 20px 6px; }
    .sv-section { padding: 46px 20px 4px; }
}
@media (max-width: 760px) {
    .sv-route { flex-direction: column; gap: 22px; align-items: stretch; }
    .sv-route::before { top: 8px; bottom: 8px; right: 5px; left: auto; width: 2px; height: auto; }
    .sv-stop {
        display: grid; grid-template-columns: 12px 1fr; column-gap: 15px; row-gap: 3px;
        text-align: start; align-items: start; padding: 0;
    }
    .sv-stop .sv-dot { grid-row: 1 / span 3; margin-top: 4px; }
    .sv-stop-sub { max-width: none; }
    .sv-stop-keys { justify-content: flex-start; }
    .sv-case { grid-template-columns: 1fr; gap: 8px; }
    .sv-board-row { flex-direction: column; gap: 4px; padding: 14px 18px; }
    .sv-board-row .sv-dot { display: none; }
}

/* ============================================================
   15. נגישות (ת"י 5568)
   העיצוב והתפריט עברו ל-/js/access.js — קובץ עצמאי אחד שמשמש גם את
   אתר התדמית וגם את לוח הבקרה, ומזריק את ה-CSS שלו בעצמו. שם גם
   המצבים (ka-font / ka-invert / ka-contrast וכו'), ולכן אין להם כאן
   כלל — שני עותקים של אותן מחלקות היו נכנסים לקונפליקט.
   ============================================================ */

/* ============================================================
   16. מדיה ותצלומים — דפי השירות ודף הבית
   תצלום = לוח ציוד: מסגרת נייר דקה, פינות המערכת, וכיתוב־תג עם
   נורית (אותה שפה של sv-dot). קרדיט צלם קטן בקצה כשנדרש ברישיון.
   ============================================================ */
.sv-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    gap: 48px;
    align-items: center;
    margin-top: 30px;
}
.sv-media.flip { grid-template-columns: minmax(280px, 430px) minmax(0, 1fr); }
.sv-media > * { min-width: 0; }
.sv-media .sv-cases { margin-top: 10px; }
.sv-media .sv-board { margin-top: 10px; }
.sv-media .sv-section-lead { margin-top: 0; }

.sv-photo {
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 10px 10px 4px;
    box-shadow: var(--lift-sm);
}
.sv-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--r) - 4px);
    background: #fff;
}
.sv-photo figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px 7px;
    font-size: .8rem;
    color: var(--dim);
    line-height: 1.45;
}
.sv-photo figcaption::before {
    content: '';
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cord);
}
.sv-credit {
    margin-inline-start: auto;
    padding-inline-start: 12px;
    font-size: .67rem;
    color: var(--dim);
    opacity: .7;
    white-space: nowrap;
}

/* גלריית ציוד קטנה בתוך דף שירות — שניים-שלושה פריטים בשורה */
.sv-gear {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.sv-gear figure {
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 14px 14px 10px;
    text-align: center;
    transition: border-color .18s ease;
}
.sv-gear figure:hover { border-color: var(--rail-hover); }
.sv-gear img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: contain;
    background: #fff;
    border-radius: calc(var(--r) - 4px);
}
.sv-gear figcaption { margin-top: 9px; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.sv-gear figcaption strong { display: block; font-weight: 500; color: var(--ink); font-size: .86rem; }

@media (max-width: 860px) {
    .sv-media, .sv-media.flip { grid-template-columns: 1fr; gap: 24px; }
    .sv-media .sv-photo { order: 2; }
}

/* ============================================================
   17. דף הבית — המקטעים החדשים (hp-*)
   ============================================================ */
.hp-section { position: relative; z-index: 1; padding: 78px 24px 84px; }
.hp-section .page-wrap > .eyebrow { display: block; text-align: center; margin-bottom: 10px; }

/* --- מה המרכזייה יודעת לעשות: כרטיסי יכולות, שתי עמודות --- */
.hp-caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--page);
    margin: 0 auto;
}
.hp-cap {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 22px 24px;
}
.hp-cap h3 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; color: var(--ink);
}
.hp-cap h3 .sv-dot { width: 10px; height: 10px; box-shadow: none; }
.hp-cap p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.75; }
.hp-cap p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .hp-caps { grid-template-columns: minmax(0, 1fr); }
    .hp-cap { padding: 18px; }
}

/* --- כרטיסי הפתרונות: תצלום למעלה, שם ותקציר למטה ---
   שלוש עמודות: תשעה שירותים מתחלקים לשלוש שורות שלמות, בלי כרטיס בודד
   ומתוח בשורה האחרונה (מה שקרה ב-4 עמודות). */
.hp-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: var(--page);
    margin: 0 auto;
}
.hp-svc {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hp-svc:hover {
    border-color: var(--rail-hover);
    box-shadow: 0 14px 30px -20px rgba(6,32,34,.5);
    transform: translateY(-2px);
}
.hp-svc-img {
    height: 172px;
    background: #fff;
    border-bottom: 1px solid var(--hair-2);
    overflow: hidden;
}
.hp-svc-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; }
.hp-svc.is-cover .hp-svc-img img { object-fit: cover; padding: 0; }
.hp-svc-body { padding: 15px 17px 17px; }
.hp-svc-body strong { display: block; font-weight: 500; color: var(--ink); font-size: .98rem; }
.hp-svc-body small { display: block; margin-top: 5px; color: var(--dim); font-size: .84rem; line-height: 1.55; }
.hp-svc:hover .hp-svc-body strong { color: var(--cord-deep); }

/* --- פס הציוד: גלילה אופקית של מוצרים אמיתיים --- */
.hp-strip-wrap { max-width: var(--page); margin: 0 auto; }
.hp-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 218px;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 4px 18px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--rail-hover) transparent;
}
.hp-strip figure {
    margin: 0;
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 12px 12px 10px;
    text-align: center;
    transition: border-color .18s ease;
}
.hp-strip figure:hover { border-color: var(--rail-hover); }
.hp-strip img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #fff;
    border-radius: calc(var(--r) - 4px);
    display: block;
}
.hp-strip figcaption { margin-top: 9px; font-size: .78rem; color: var(--dim); line-height: 1.4; }
.hp-strip figcaption strong { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 2px; }

/* --- לוח הבקרה: צילום מסך אמיתי בתוך מסגרת דפדפן שקטה --- */
.hp-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 560px);
    gap: 48px;
    align-items: center;
    max-width: var(--page);
    margin: 0 auto;
}
.hp-showcase > * { min-width: 0; }
.hp-browser {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--lift);
    overflow: hidden;
}
.hp-browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--hair);
}
.hp-browser-bar i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--hair);
    font-style: normal;
}
.hp-browser-bar i:first-child { background: var(--lamp-live); }
.hp-browser-url {
    margin-inline-start: 8px;
    font-size: .74rem;
    color: var(--dim);
    background: var(--panel);
    border: 1px solid var(--hair-2);
    border-radius: var(--r-pill);
    padding: 3px 13px;
    direction: ltr;
}
.hp-browser img { display: block; width: 100%; height: auto; }
.hp-showcase h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -.03em; color: var(--ink); }
.hp-showcase .hp-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.hp-points li { display: flex; gap: 11px; align-items: baseline; color: var(--ink-2); line-height: 1.65; }
.hp-points .sv-dot { flex: 0 0 auto; width: 9px; height: 9px; box-shadow: none; transform: translateY(-1px); }
.hp-points strong { color: var(--ink); font-weight: 500; }

/* --- רצועת תצלום מלאה עם כיתוב (כדור הארץ בלילה) --- */
.hp-band {
    position: relative;
    overflow: hidden;
    padding: 96px 24px;
    text-align: center;
    background: #10163a;
}
.hp-band-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8;
}
.hp-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(9,13,38,.18) 0%, rgba(9,13,38,.62) 100%);
}
.hp-band > .page-wrap { position: relative; z-index: 2; }
.hp-band h2 {
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.03em;
    text-shadow: 0 2px 18px rgba(4,8,30,.55);
}
.hp-band p {
    margin: 14px auto 0;
    max-width: 58ch;
    color: #cdd6ee;
    line-height: 1.75;
    text-shadow: 0 1px 10px rgba(4,8,30,.6);
}
.hp-band .sv-cta-row { justify-content: center; margin-top: 26px; }
.hp-band .btn-quiet { background: rgba(255,255,255,.92); }
.hp-band-note { position: absolute; bottom: 10px; inset-inline-end: 14px; z-index: 2; font-size: .65rem; color: rgba(210,220,240,.55); }

/* --- המשרד הדיגיטלי: תצלום + רשימת יכולות --- */
.hp-office {
    display: grid;
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    max-width: var(--page);
    margin: 0 auto;
}
.hp-office > * { min-width: 0; }
@media (max-width: 980px) {
    .hp-services { grid-template-columns: repeat(2, 1fr); }
    .hp-showcase, .hp-office { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
    .hp-section { padding: 56px 20px 60px; }
    .hp-services { grid-template-columns: 1fr; }
    .hp-svc-img { height: 168px; }
}

/* --- כותרת תחתונה --- */
.site-footer {
    position: relative;
    z-index: 2;
    background: var(--ink);
    color: #b8c7c8;
    padding: 58px 24px 30px;
}
.site-footer a { color: #d5e2e3; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
    max-width: var(--page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
}
.footer-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { margin-top: 14px; font-size: .88rem; line-height: 1.7; color: #93a7a8; max-width: 32ch; }
.footer-col h3 {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    color: #7f9596; margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9rem; }
.footer-bottom {
    max-width: var(--page);
    margin: 44px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: .78rem;
    color: #7f9596;
}
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}


/* --- מפת השירותים (services.html) — עמודות קישורים גלויות לגוגל ולאדם --- */
.svc-index {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.svc-index-col {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    padding: 20px 22px 22px;
}
.svc-index-col h3 {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    color: var(--dim); margin: 0 0 14px;
}
.svc-index-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svc-index-col a {
    display: block;
    padding: 6px 9px;
    margin-inline: -9px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: .92rem;
    text-decoration: none;
}
.svc-index-col a:hover { background: var(--rail-item); color: var(--rail-active); }


/* --- תפריט נפתח רחב (מדריכים) — שתי עמודות כדי לא להגיע לרצועה של 12 שורות ---
   פריסה ב-columns ולא ב-grid, משתי סיבות: הפריטים מתמלאים עמודה־עמודה (סדר
   הקריאה נשמר, במקום זיגזג ימין־שמאל של grid), ואין כאן שום הצהרת ‎display‎ —
   הצהרה כזו על ‎.dropdown-wide‎ דרסה את ה-‎display: none‎ של ‎.dropdown-content‎
   (אותה סגוליות, כלל מאוחר יותר) והשאירה את התפריט פתוח לתמיד. */
.dropdown-wide {
    min-width: 400px;
    columns: 2;
    column-gap: 4px;
}
.dropdown-wide a { break-inside: avoid; }
.dropdown-wide .dropdown-all { column-span: all; text-align: center; }

/* ============================================================
   18. דף אודות (ab-*)
   ארבעה שלבי עבודה, כל אחד בשורה משלו: כיתוב וצילום מתחלפים
   בצדדים, והשלב האחרון מתכנס למרכז — כמו סוף פסקה.
   ============================================================ */
.ab-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
    gap: 48px;
    align-items: center;
    padding: 34px 0;
    border-top: 1px solid var(--hair);
}
.ab-step:first-of-type { margin-top: 30px; }
.ab-step.flip { grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); }
.ab-step.flip .ab-step-text { order: 2; }
.ab-step.flip .sv-photo { order: 1; }
.ab-step > * { min-width: 0; }

.ab-step-tag {
    display: block;
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    color: var(--cord);
    margin-bottom: 8px;
}
.ab-step-text h3 {
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.02em;
}
.ab-step-text p {
    margin-top: 12px;
    color: var(--ink-2);
    line-height: 1.75;
    max-width: 56ch;
}

/* השלב האחרון: כיתוב במרכז, ותצלום מתחתיו */
.ab-step.center {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 26px;
}
.ab-step.center .ab-step-text p { margin-inline: auto; }
.ab-step.center .sv-photo { width: min(100%, 620px); }
.ab-step.center .sv-photo figcaption { justify-content: center; }

/* תמונות מתחלפות: התמונה הראשונה היא הבסיס, והשתיים שמעליה
   נדלקות בתורן. שתיהן מסתיימות בשקיפות 0 — ולכן כשהמשתמש ביקש
   "פחות תנועה" (prefers-reduced-motion) נשארת התמונה הראשונה. */
.ab-slide { position: relative; }
.ab-slide img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) - 4px); background: #fff; }
.ab-slide img + img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    animation: abSlideFade 13.5s infinite;
}
.ab-slide img:nth-child(2) { animation-delay: 4.5s; }
.ab-slide img:nth-child(3) { animation-delay: 9s; }
@keyframes abSlideFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    28%  { opacity: 1; }
    33%  { opacity: 0; }
    100% { opacity: 0; }
}

/* קרוסלת הלקוחות בתוך עמוד תוכן — בלי הרקע הלבן של דף הבית */
.ab-carousel { padding: 190px 0 10px; margin-top: -160px; }
.ab-carousel::before { background: linear-gradient(to left, var(--field), rgba(232,242,248,0)); }
.ab-carousel::after  { background: linear-gradient(to right, var(--field), rgba(232,242,248,0)); }

@media (max-width: 900px) {
    .dropdown-wide { min-width: 0; }
}
@media (max-width: 860px) {
    .ab-step, .ab-step.flip { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
    .ab-step.flip .ab-step-text { order: 1; }
    .ab-step.flip .sv-photo { order: 2; }
    .ab-step .sv-photo { order: 2; }
}


/* שורת הקרדיט בתחתית — נשארת קריאה גם כשהיא לבד בשורה */
.footer-credit { color: #9db0b1; }