/* Homepage-only presentation and interaction styles. */
html { scroll-behavior: smooth; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif; overflow-x: clip; }
        
        /* GRANDMASTER WPO: Content Visibility for Rendering Performance */
        .optimize-render {
            content-visibility: visible;
            contain: none;
        }

        /* Enable content-visibility only on larger viewports where WebKit mobile
           rendering bugs cannot turn deferred sections into blank panels. */
        @media (min-width: 1024px) {
            @supports (content-visibility: auto) {
                .optimize-render {
                    content-visibility: auto;
                    contain-intrinsic-size: auto 900px;
                }
            }
        }

        /* Intelligent Dynamic Header Transitions */
        #navbar {
            transition: background-color 0.4s ease, backdrop-filter 0.4s ease, height 0.4s ease, box-shadow 0.4s ease;
        }
        .header-shrunk {
            height: clamp(3.5rem, 6vw, 4.5rem) !important;
            background-color: rgba(15, 23, 42, 0.98) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
        }
        .header-shrunk .logo-text, .header-shrunk .logo-svg {
            transform: scale(0.9);
        }
        .logo-text, .logo-svg {
            transition: transform 0.4s ease;
            transform-origin: left center;
        }
        html[dir="rtl"] .logo-text, html[dir="rtl"] .logo-svg {
            transform-origin: right center;
        }

        .glass-nav {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .text-gradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, #f59e0b, #fbbf24);
        }

        /* Custom Scrollbar for global body & disabling it for tracks */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 5px; }
        ::-webkit-scrollbar-thumb:hover { background: #d97706; }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* 3D Stacked Slider (About Section) with GPU Acceleration */
        .about-slider-container { perspective: 1200px; transform-style: preserve-3d; touch-action: pan-y; }
        .about-slide { 
            position: absolute; inset: 0; width: 100%; height: 100%; 
            object-fit: cover; border-radius: 1.5rem;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
            pointer-events: none;
            will-change: transform, opacity;
            transform: translateZ(0);
        }
        .about-slide.active { 
            transform: translateX(0) translateZ(0) rotateY(0) scale(1); 
            z-index: 30; opacity: 1; pointer-events: auto;
        }
        /* LTR Transforms */
        .about-slide.prev { 
            transform: translateX(-20%) translateZ(-100px) rotateY(12deg) scale(0.85); 
            z-index: 20; opacity: 0.6; 
        }
        .about-slide.next { 
            transform: translateX(20%) translateZ(-100px) rotateY(-12deg) scale(0.85); 
            z-index: 20; opacity: 0.6; 
        }
        /* RTL Overrides for Slider */
        html[dir="rtl"] .about-slide.prev { 
            transform: translateX(20%) translateZ(-100px) rotateY(-12deg) scale(0.85); 
        }
        html[dir="rtl"] .about-slide.next { 
            transform: translateX(-20%) translateZ(-100px) rotateY(12deg) scale(0.85); 
        }
        .about-slide.hidden-slide { 
            transform: translateX(0) translateZ(-300px) scale(0.6); 
            z-index: 10; opacity: 0; 
        }

        /* Testimonials Masking */
        .testimonial-mask {
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }
        
        /* Portfolio Filters */
        .portfolio-item { transition: all 0.4s ease; will-change: transform, opacity; transform: translateZ(0); }
        .portfolio-item.hidden { display: none; opacity: 0; transform: scale(0.9) translateZ(0); }
        
        /* Accordion Custom */
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        
        /* Language handling specific fixes */
        html[dir="ltr"] .ml-auto { margin-left: auto; margin-right: 0; }
        html[dir="ltr"] .mr-auto { margin-right: auto; margin-left: 0; }
        html[dir="ltr"] .pl-10 { padding-left: 2.5rem; padding-right: 0; }
        html[dir="ltr"] .pr-10 { padding-right: 2.5rem; padding-left: 0; }
        html[dir="ltr"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
            --tw-space-x-reverse: 0;
        }

        /* ========================================= */
        /* FLOATING BUTTONS PREMIUM REDESIGN         */
        /* ========================================= */
        
        @keyframes pulse-radar {
            0% { transform: scale(1); opacity: 0.6; }
            80% { transform: scale(1.6); opacity: 0; }
            100% { transform: scale(1.6); opacity: 0; }
        }
        
        .pulse-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            z-index: -1;
            animation: pulse-radar 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            pointer-events: none;
        }

        /* Base Tooltip class (Hidden on Mobile) */
        .tooltip-bubble {
            display: none; 
        }

        /* Desktop Hover Effects & Tooltips (Strict Fallback) */
        @media (hover: hover) and (pointer: fine) {
            .desktop-hover-scale {
                transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
            }
            .desktop-hover-scale:hover {
                transform: translateY(var(--tw-translate-y, 0)) scale(1.1);
            }
            
            .bounce-icon {
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .desktop-hover-scale:hover .bounce-icon {
                transform: translateY(-3px);
            }

            .tooltip-bubble {
                display: block;
                position: absolute;
                top: 50%;
                left: calc(100% + 16px);
                transform: translateY(-50%) translateX(-10px);
                opacity: 0;
                visibility: hidden;
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                color: white;
                padding: 6px 14px;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 600;
                white-space: nowrap;
                pointer-events: none;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .tooltip-bubble::before {
                content: '';
                position: absolute;
                top: 50%;
                right: 100%;
                transform: translateY(-50%);
                border-width: 5px;
                border-style: solid;
                border-color: transparent rgba(15, 23, 42, 0.95) transparent transparent;
            }
            
            .group:hover .tooltip-bubble {
                opacity: 1;
                visibility: visible;
                transform: translateY(-50%) translateX(0);
            }
        }

        /* ========================================= */
        /* WORK PROCESS — DESKTOP STEPPER & MOBILE   */
        /* ========================================= */
        #process {
            isolation: isolate;
        }

        .process-orb {
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
            filter: blur(2px);
            opacity: 0.75;
        }

        .process-orb-one {
            top: 5rem;
            right: -6rem;
            width: 18rem;
            height: 18rem;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0) 70%);
        }

        .process-orb-two {
            bottom: 2rem;
            left: -7rem;
            width: 22rem;
            height: 22rem;
            background: radial-gradient(circle, rgba(15, 23, 42, 0.07) 0%, rgba(15, 23, 42, 0) 72%);
        }

        .process-heading-mark {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3.25rem;
            height: 3.25rem;
            margin-bottom: 1rem;
            border: 1px solid rgba(245, 158, 11, 0.24);
            border-radius: 1rem;
            color: #f59e0b;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.9));
            box-shadow: 0 14px 35px -18px rgba(245, 158, 11, 0.6);
        }

        .process-heading-mark::after {
            content: '';
            position: absolute;
            inset: -0.45rem;
            z-index: -1;
            border-radius: 1.25rem;
            background: rgba(245, 158, 11, 0.07);
        }

        /* Desktop Animated Stepper Styles (Hardware Accelerated + Snappy) */
        .process-desktop-step {
            opacity: 0;
            transform: translateY(2rem) translateZ(0);
            transition: opacity 400ms ease, transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
            transition-delay: var(--process-delay, 0ms);
            will-change: transform, opacity;
        }

        .process-desktop-step.is-visible {
            opacity: 1;
            transform: translateY(0) translateZ(0);
        }

        /* Mobile Instant Native Feel (No intersection scroll delay for pure speed) */
        .process-mobile-item {
            will-change: transform;
            transform: translateZ(0);
            transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .process-mobile-item:active {
            transform: scale(0.96) translateZ(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .process-desktop-step,
            .process-mobile-item {
                transition: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }


/* V14 mobile rendering and Lighthouse accessibility refinements. */
.home-page #about .text-brand-gold,
.home-page #services .text-brand-gold,
.home-page #portfolio .text-brand-gold,
.home-page #testimonials .text-brand-gold,
.home-page #faq .text-brand-gold {
    color: #b45309;
}

.home-page :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

.home-page input:focus-visible,
.home-page select:focus-visible,
.home-page textarea:focus-visible {
    outline-color: #b45309;
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
    .about-slider-container > .absolute.inset-0.z-40 {
        opacity: 1;
    }

    .optimize-render {
        content-visibility: visible !important;
        contain: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-slide,
    .portfolio-item,
    .process-desktop-step,
    .process-mobile-item {
        transition: none !important;
        animation: none !important;
    }
}


/* -------------------------------------------------------------------------- */
/* V15 HEBREW HOMEPAGE WIDTH + MOBILE PERFORMANCE STABILITY                    */
/* -------------------------------------------------------------------------- */

.home-page,
.home-page main,
.home-page main > section,
.home-page main > section > div {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* 3D transformed slides and decorative process geometry may have a wider
   internal scrollWidth, but they must never enlarge the page viewport. */
.home-page #about,
.home-page #process,
.home-page #testimonials {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .home-page #about,
    .home-page #process,
    .home-page #testimonials {
        overflow-x: hidden;
    }
}

.home-page #about .about-slider-container,
.home-page #process article,
.home-page #process article > *,
.home-page #testimonials .testimonial-mask,
.home-page #testimonial-track,
.home-page #testimonial-track > * {
    min-inline-size: 0;
}

.home-page #testimonials .testimonial-mask {
    max-inline-size: 100%;
    overflow: clip;
}

.home-page #testimonial-track {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: clamp(1rem, 7vw, 2.5rem);
}

/* Hebrew copy stays within its grid/flex cell instead of widening the viewport. */
html[dir="rtl"] .home-page :where(h1, h2, h3, h4, h5, p, li, a, span) {
    overflow-wrap: break-word;
}

.home-page .process-mobile-item > :last-child,
.home-page #contact .grid > *,
.home-page #services .grid > *,
.home-page #portfolio .grid > * {
    min-inline-size: 0;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
    /* Mobile uses one stable CSS geometry. JS no longer recalculates the hero
       after Hebrew text/font metrics settle, removing the visible size jump. */
    .home-page #home[data-responsive-home-hero] {
        inline-size: 100%;
        min-block-size: 100svh !important;
        block-size: auto;
        padding-block-start: clamp(7.25rem, 20vw, 8.75rem) !important;
        padding-block-end: clamp(3.5rem, 12vw, 5rem) !important;
    }

    .home-page #home [data-responsive-home-hero-content] {
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
    }

    .home-page #home h1,
    .home-page #home p {
        inline-size: 100%;
        max-inline-size: 100% !important;
    }

    .home-page .about-slide {
        will-change: auto;
    }

    .home-page .process-mobile-item {
        will-change: auto;
    }
}