:root { --main-font: 'Assistant', sans-serif; }
        [lang="en"] { --main-font: 'Inter', sans-serif; }
        
        body { 
            font-family: var(--main-font); 
            -webkit-tap-highlight-color: transparent;
            overflow-x: hidden;
        }
        
        .blob {
            position: absolute;
            width: 40vw;
            height: 40vw;
            background: rgba(34, 211, 238, 0.1);
            filter: blur(80px);
            border-radius: 50%;
            z-index: -1;
        }
        @media (prefers-reduced-motion: no-preference) {
            .blob { animation: move 25s infinite alternate ease-in-out; }
        }

        @keyframes move {
            from { transform: translate(-5%, -5%) rotate(0deg); }
            to { transform: translate(15%, 15%) rotate(10deg); }
        }

        .scroll-mt { scroll-margin-top: 100px; }
        
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        
        [lang="en"] .lang-he, html:not([lang="en"]) .lang-en { display: none; }
        [lang="en"] .text-adaptive { text-align: left; }
        html:not([lang="en"]) .text-adaptive { text-align: right; }
        [lang="en"] .lg-flex-mirror { flex-direction: row; }
        html:not([lang="en"]) .lg-flex-mirror { flex-direction: row; }

        #mobileMenu {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(-100%);
        }
        #mobileMenu.active { transform: translateY(0); }

        .logo-symbol {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 36px;
            height: 36px;
        }
        .logo-symbol::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #06b6d4;
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        }
        @media (prefers-reduced-motion: no-preference) {
            .logo-symbol::before { animation: morph 8s ease-in-out infinite; }
        }
        @keyframes morph {
            0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
            50% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; }
        }

        /* Improved Timeline CSS */
        .timeline-item { position: relative; padding-bottom: 2.5rem; }
        .timeline-item:last-child { padding-bottom: 0; }
        @media (max-width: 1023px) {
            .timeline-item { padding-bottom: 3.5rem; }
            .timeline-item:last-child { padding-bottom: 0; }
        }
        
        /* The vertical line */
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #f1f5f9;
        }
        
        /* Direction-based line placement */
        html:not([lang="en"]) .timeline-item::before { right: 0.5rem; }
        [lang="en"] .timeline-item::before { left: 0.5rem; }

        /* The Dot */
        .timeline-dot {
            position: absolute;
            top: 0.35rem;
            width: 1.15rem;
            height: 1.15rem;
            background: white;
            border: 2px solid #06b6d4;
            border-radius: 50%;
            z-index: 10;
        }
        
        /* Direction-based dot placement */
        html:not([lang="en"]) .timeline-dot { right: -0.05rem; }
        [lang="en"] .timeline-dot { left: -0.05rem; }

        /* Global image styling */
        img {
            border-radius: 1.25rem;
            transition: transform 0.35s ease;
        }

        /* Image card: stronger effect and container control */
        .image-card {
            overflow: hidden;
            border-radius: 1.5rem;
            transition: transform 0.5s ease;
        }
        .image-card img {
            border-radius: inherit;
            transition: transform 0.5s ease;
        }
        .image-card:hover img {
            transform: scale(1.05);
        }

        /* Resume (Hebrew) enhanced styling */
        html[lang="he"] #resume .resume-column {
            background: #f8fafc;
            border-radius: 1.5rem;
            padding: 1.75rem 1.5rem;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
            border: 1px solid #e2e8f0;
        }

        @media (min-width: 1024px) {
            html[lang="he"] #resume .resume-column {
                padding: 2rem 2.25rem;
            }
        }