:root {
    --color-bg-main: #1a1a1a; 
    --color-text-primary: #ffffff; 
    --color-text-secondary: #a0a0a0; 
    --color-accent-silver: #cccccc; 
    --color-border-silver: #555555; 
    --font-primary: 'Inter', sans-serif;
    --container-width: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-primary); background-color: var(--color-bg-main); color: var(--color-text-primary); line-height: 1.5; overflow-x: hidden; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 30px; }

/* === Header === */
.site-header { padding: 25px 0; position: absolute; width: 100%; top: 0; z-index: 10; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; }
.main-nav ul { list-style: none; display: flex; gap: 40px; }
.main-nav a { text-decoration: none; color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; transition: color 0.3s ease; }
.main-nav a:hover { color: var(--color-text-primary); }

/* === Hero Section (השינוי הגדול) === */
.hero-section {
    /* הגדרת התמונה כרקע שמתפרס על הכל */
    /* שים לב לנתיב: יוצאים מתיקיית css ונכנסים ל-images */
    background-image: 
        linear-gradient(to right, rgba(26,26,26,0.9) 40%, rgba(26,26,26,0.4) 100%),
        url('../images/robot-hero.png');
    
    background-size: cover;       /* מכסה את כל השטח */
    background-position: center center; /* ממקם את התמונה במרכז */
    background-repeat: no-repeat;
    
    min-height: 100vh; /* גובה מסך מלא */
    display: flex;
    align-items: center;
    padding-top: 80px;
}

.hero-grid {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* עיצוב אזור הטקסט */
.hero-text {
    flex: 1;
    max-width: 60%; /* נותן לטקסט יותר מקום לרוחב */
    z-index: 2;
}

/* Typography & Buttons */
h1 { font-size: 4.5rem; font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 25px; letter-spacing: -1px; }
.hero-subtitle { color: var(--color-text-secondary); font-size: 1.25rem; font-weight: 400; max-width: 500px; margin-bottom: 50px; }
.hero-buttons { display: flex; gap: 20px; }

.btn { display: inline-block; padding: 14px 32px; text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; border-radius: 4px; transition: all 0.3s ease; letter-spacing: 0.5px; }
.btn-primary { background-color: var(--color-accent-silver); color: #000000; border: 2px solid var(--color-accent-silver); }
.btn-primary:hover { background-color: #ffffff; border-color: #ffffff; transform: translateY(-2px); }
.btn-outline { background-color: transparent; color: var(--color-text-primary); border: 2px solid var(--color-border-silver); }
.btn-outline:hover { border-color: var(--color-text-primary); background-color: rgba(255,255,255,0.05); transform: translateY(-2px); }

/* Responsive */
@media (max-width: 992px) { h1 { font-size: 3.5rem; } }
@media (max-width: 768px) {
    .site-header { padding: 15px 0; }
    .header-content { flex-direction: column; gap: 15px; }
    .main-nav ul { gap: 20px; }
    
    /* במובייל, נמרכז את הטקסט והרקע ייראה אחרת */
    .hero-section { padding-top: 120px; align-items: flex-start; text-align: center; background-position: center right; }
    .hero-text { max-width: 100%; padding: 0 20px; }
    .hero-subtitle { margin: 0 auto 30px auto; }
    .hero-buttons { justify-content: center; }
    h1 { font-size: 2.8rem; }
}
.logo-link {
    text-decoration: none;
    color: var(--color-text-primary);
}

/* הגדרה לעמוד פנימי - רקע כהה אחיד */
body.inner-page {
    background-color: var(--color-bg-main);
    /* ביטול תמונת הרקע הגדולה אם בטעות זלגה */
    background-image: none; 
}

/* כותרת ראשית בעמוד פנימי */
.page-header {
    padding-top: 120px; /* מרווח מלמעלה בגלל הניווט הקבוע */
    padding-bottom: 40px;
    background-color: #141414; /* צבע קצת יותר כהה מהרקע הרגיל להפרדה */
    border-bottom: 1px solid #333; /* קו הפרדה עדין */
}

.page-header h1 {
    font-size: 3rem; /* קטן יותר מהכותרת בעמוד הראשי */
    margin-bottom: 0;
    color: var(--color-text-primary);
}

/* אזור התוכן בעמוד פנימי */
.page-content {
    padding: 60px 0;
}

.lead-text {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin-bottom: 50px;
}

/* דוגמה לגריד של תוכן */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* עמודות גמישות */
    gap: 40px;
}

.content-block h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--color-text-primary);
}

.content-block p {
    color: var(--color-text-secondary);
}

/* לינק פעיל בניווט - כדי שנדע באיזה עמוד אנחנו */
.main-nav a.active {
    color: var(--color-text-primary); /* צבע לבן */
    font-weight: 700;
    border-bottom: 2px solid var(--color-accent-silver); /* קו תחתון כסוף */
    padding-bottom: 5px;
}

/* התאמה למובייל בעמודים פנימיים */
@media (max-width: 768px) {
    .page-header {
        padding-top: 100px;
        text-align: center;
    }
    .page-header h1 {
        font-size: 2.5rem;
    }
    .content-grid {
        grid-template-columns: 1fr; /* עמודה אחת במובייל */
    }
}