:root {--bg-color: #1A1A1A;--surface-color: #F4F1EA;--text-primary: #2C2A29;--text-secondary: #706C66;--border-color: #D8D3CD;--accent-color: #C85A32;--accent-hover: #A04726;--font-heading: 'Cairo', sans-serif;--font-body: 'Tajawal', sans-serif;--max-width: 1200px;--transition-fast: 200ms ease-in-out;}*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}html {scroll-behavior: smooth;}body {background-color: var(--bg-color);color: var(--surface-color);font-family: var(--font-body);line-height: 1.7;direction: rtl;text-align: right;overflow-x: hidden;}a {color: inherit;text-decoration: none;transition: color var(--transition-fast);}ul {list-style: none;}.container {width: 100%;max-width: var(--max-width);margin: 0 auto;padding: 0 2rem;}.site-header {position: fixed;top: 0;left: 0;right: 0;background-color: rgba(26, 26, 26, 0.95);backdrop-filter: blur(8px);border-bottom: 1px solid rgba(216, 211, 205, 0.15);z-index: 1000;}.nav-container {max-width: var(--max-width);margin: 0 auto;padding: 1.25rem 2rem;display: flex;align-items: center;justify-content: space-between;}.logo {font-family: var(--font-heading);font-size: 1.5rem;font-weight: 700;color: var(--surface-color);letter-spacing: -0.5px;}.mobile-menu-toggle {display: none;background: none;border: none;cursor: pointer;width: 48px;height: 48px;padding: 12px;flex-direction: column;justify-content: space-between;align-items: center;}.mobile-menu-toggle .bar {display: block;width: 24px;height: 2px;background-color: var(--surface-color);transition: transform var(--transition-fast), opacity var(--transition-fast);}.nav-menu ul {display: flex;gap: 2.5rem;align-items: center;}.nav-link {font-size: 0.95rem;color: var(--text-secondary);font-weight: 500;transition: color var(--transition-fast);}.nav-link:hover, .nav-link.active {color: var(--surface-color);}main {background-color: var(--surface-color);color: var(--text-primary);margin-top: 5rem;border-top-left-radius: 16px;border-top-right-radius: 16px;overflow: hidden;}.hero-section {padding: 8rem 0 6rem;background-color: var(--bg-color);color: var(--surface-color);border-bottom: 1px solid rgba(216, 211, 205, 0.15);}.hero-content {max-width: 900px;}.hero-badge {display: inline-block;font-size: 0.875rem;font-weight: 600;color: var(--accent-color);background-color: rgba(200, 90, 50, 0.12);padding: 0.35rem 1rem;border-radius: 4px;margin-bottom: 1.5rem;}.hero-title {font-family: var(--font-heading);font-size: clamp(2.25rem, 5vw, 3.75rem);font-weight: 700;line-height: 1.2;margin-bottom: 1.5rem;letter-spacing: -0.5px;}.hero-subtitle {font-size: clamp(1.05rem, 2vw, 1.25rem);color: var(--text-secondary);max-width: 750px;margin-bottom: 2.5rem;}.hero-actions {display: flex;gap: 1rem;flex-wrap: wrap;}.btn {display: inline-flex;align-items: center;justify-content: center;font-family: var(--font-body);font-size: 1rem;font-weight: 600;padding: 0.85rem 2rem;border-radius: 4px;cursor: pointer;transition: all var(--transition-fast);min-height: 48px;border: 1px solid transparent;}.btn-primary {background-color: var(--accent-color);color: #fff;}.btn-primary:hover {background-color: var(--accent-hover);}.btn-secondary {background-color: transparent;color: var(--surface-color);border-color: rgba(244, 241, 234, 0.3);}.btn-secondary:hover {border-color: var(--surface-color);background-color: rgba(244, 241, 234, 0.05);}.about-section, .projects-section, .skills-section, .contact-section {padding: 6rem 0;border-bottom: 1px solid var(--border-color);}.section-header {margin-bottom: 3.5rem;}.section-tag {display: block;font-size: 0.85rem;font-weight: 600;color: var(--accent-color);letter-spacing: 1px;margin-bottom: 0.5rem;text-transform: uppercase;}.section-header h2 {font-family: var(--font-heading);font-size: clamp(1.8rem, 3vw, 2.5rem);font-weight: 700;color: var(--text-primary);}.about-grid {display: grid;grid-template-columns: 2fr 1fr;gap: 4rem;align-items: start;}.about-text .lead-text {font-size: 1.2rem;font-weight: 600;line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-primary);}.about-text p {color: var(--text-secondary);margin-bottom: 1.25rem;font-size: 1.05rem;}.about-highlights {display: flex;flex-direction: column;gap: 1.5rem;}.highlight-card {background-color: rgba(216, 211, 205, 0.25);border: 1px solid var(--border-color);padding: 2rem;border-radius: 4px;}.highlight-card h3 {font-family: var(--font-heading);font-size: 1.1rem;margin-bottom: 0.5rem;color: var(--text-primary);}.highlight-card p {font-size: 0.95rem;color: var(--text-secondary);margin-bottom: 0;}.projects-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));gap: 2rem;}.project-card {background-color: #fff;border: 1px solid var(--border-color);border-radius: 4px;padding: 2.5rem;display: flex;flex-direction: column;justify-content: space-between;transition: transform var(--transition-fast), border-color var(--transition-fast);}.project-card:hover {transform: translateY(-4px);border-color: var(--accent-color);}.project-tags {display: flex;gap: 0.5rem;flex-wrap: wrap;margin-bottom: 1.25rem;}.tag {font-size: 0.75rem;font-weight: 600;background-color: var(--surface-color);color: var(--text-secondary);padding: 0.25rem 0.75rem;border-radius: 2px;border: 1px solid var(--border-color);}.project-card h3 {font-family: var(--font-heading);font-size: 1.35rem;margin-bottom: 1rem;color: var(--text-primary);}.project-card p {color: var(--text-secondary);font-size: 0.95rem;margin-bottom: 2rem;line-height: 1.6;}.project-footer {border-top: 1px solid var(--border-color);padding-top: 1rem;}.project-meta {font-size: 0.85rem;font-weight: 600;color: var(--accent-color);}.skills-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));gap: 2rem;}.skill-panel {background-color: #fff;border: 1px solid var(--border-color);padding: 2.5rem;border-radius: 4px;}.skill-panel h3 {font-family: var(--font-heading);font-size: 1.25rem;margin-bottom: 0.75rem;color: var(--text-primary);}.skill-panel > p {color: var(--text-secondary);font-size: 0.95rem;margin-bottom: 1.5rem;}.skill-list {display: flex;flex-direction: column;gap: 0.75rem;border-top: 1px solid var(--border-color);padding-top: 1.25rem;}.skill-list li {font-size: 0.9rem;color: var(--text-primary);font-weight: 500;position: relative;padding-right: 1.2rem;}.skill-list li::before {content: '';position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 5px;height: 5px;background-color: var(--accent-color);border-radius: 50%;}.contact-wrapper {display: grid;grid-template-columns: 1fr 1.5fr;gap: 4rem;align-items: start;}.contact-info p {color: var(--text-secondary);font-size: 1.05rem;margin-bottom: 2rem;}.contact-details {margin-bottom: 2rem;display: flex;flex-direction: column;gap: 1rem;}.contact-item {display: flex;flex-direction: column;gap: 0.25rem;}.contact-label {font-size: 0.85rem;color: var(--text-secondary);}.contact-value {font-weight: 600;color: var(--text-primary);font-size: 1.05rem;}.contact-value:hover {color: var(--accent-color);}.social-links {display: flex;gap: 1rem;}.social-link {font-size: 0.9rem;font-weight: 600;color: var(--text-primary);padding: 0.5rem 1rem;border: 1px solid var(--border-color);border-radius: 4px;background-color: #fff;transition: all var(--transition-fast);}.social-link:hover {border-color: var(--accent-color);color: var(--accent-color);}.contact-form {background-color: #fff;border: 1px solid var(--border-color);padding: 2.5rem;border-radius: 4px;display: flex;flex-direction: column;gap: 1.5rem;}.form-group {display: flex;flex-direction: column;gap: 0.5rem;}.form-group label {font-size: 0.9rem;font-weight: 600;color: var(--text-primary);}.form-group input, .form-group textarea {width: 100%;font-family: var(--font-body);font-size: 1rem;padding: 0.85rem 1rem;border: 1px solid var(--border-color);border-radius: 4px;background-color: var(--surface-color);color: var(--text-primary);transition: border-color var(--transition-fast);min-height: 48px;}.form-group textarea {min-height: 120px;resize: vertical;}.form-group input:focus, .form-group textarea:focus {outline: none;border-color: var(--accent-color);}.error-message {font-size: 0.8rem;color: #b33939;min-height: 1rem;}.form-status {font-size: 0.9rem;font-weight: 600;min-height: 1.5rem;}.form-status.success {color: #218c74;}.form-status.error {color: #b33939;}.btn-submit {width: 100%;}.site-header {background-color: rgba(26, 26, 26, 0.95);}.site-footer {background-color: var(--bg-color);color: var(--surface-color);padding: 3rem 0;border-top: 1px solid rgba(216, 211, 205, 0.15);}.footer-container {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1.5rem;font-size: 0.9rem;color: var(--text-secondary);}.back-to-top {color: var(--surface-color);font-weight: 600;}.back-to-top:hover {color: var(--accent-color);}@media (max-width: 900px) {.about-grid, .contact-wrapper {grid-template-columns: 1fr;gap: 2.5rem;}}@media (max-width: 768px) {.mobile-menu-toggle {display: flex;}.nav-menu {position: fixed;top: 100%;right: 0;left: 0;background-color: var(--bg-color);border-bottom: 1px solid rgba(216, 211, 205, 0.15);padding: 2rem;transform: translateY(-100%);opacity: 0;pointer-events: none;transition: transform var(--transition-fast), opacity var(--transition-fast);z-index: 999;}.nav-menu.is-open {transform: translateY(0);opacity: 1;pointer-events: auto;}.nav-menu ul {flex-direction: column;gap: 1.5rem;align-items: flex-start;}.hero-section {padding: 6rem 0 4rem;}.about-section, .projects-section, .skills-section, .contact-section {padding: 4rem 0;}.container {padding: 0 1.25rem;}}@media (prefers-reduced-motion: reduce) {*, *::before, *::after {transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}:focus-visible {outline: 2px solid var(--accent-color);outline-offset: 2px;}