/* === NAV OVERRIDE === */
:root {
    --nav-height: 72px;
    --nav-bg: rgba(2, 6, 23, 0.65);
    --nav-backdrop-blur: 24px;
    --nav-border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 1023px) {
    :root {
        --nav-height: 76px;
        --nav-bg: rgba(2, 6, 23, 0.85);
    }
}

.unified-nav[style*="background"] {
    background: var(--nav-bg) !important;
}

.unified-nav.nav-scrolled[style*="background"] {
    background: var(--nav-bg-scrolled) !important;
}

.unified-nav[style*="box-shadow"] {
    box-shadow: none !important;
}

.unified-nav.nav-scrolled[style*="box-shadow"] {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35) !important;
}

/* === CLS FIX: Compositor-only transitions === */
.filter,
.tab,
.iconbtn,
.skip-link,
.qbtn {
    transition-property: transform, opacity !important;
    will-change: transform;
}

.btn.cta,
.btn.ghost,
a.btn {
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform, opacity;
}

/* === HERO SECTION: CLS FIX === */
#top,
.hero.section {
    min-height: clamp(620px, 88dvh, 760px) !important;
    padding-top: calc(var(--nav-height) + 2rem) !important;
    padding-bottom: 3rem !important;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 50% 50% at -10% -20%, rgba(79, 70, 229, 0.15), transparent 70%),
        radial-gradient(ellipse 60% 60% at 110% 110%, rgba(6, 182, 212, 0.1), transparent 70%),
        transparent !important;
}

.hero-grid {
    min-height: min(68vh, 620px);
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr) !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
}

.hero-content {
    min-width: 0;
    min-block-size: 540px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content .title,
#top h1 {
    max-width: 14ch;
    text-wrap: balance;
}

.hero-content .subtitle {
    max-width: 60ch;
}

.hero-content [aria-label="مسارات تحويل رئيسية"] .btn,
.hero-actions .btn {
    min-height: 56px;
}

.pulse-static-dot {
    animation: none !important;
    opacity: 1 !important;
}

#top>div[style*="position: absolute"],
.hero-ambient-bg {
    display: none !important;
}

.mobile-menu-drawer {
    contain: layout;
}

/* === FONT METRIC OVERRIDE === */
@font-face {
    font-family: 'Tajawal';
    src: local('Tajawal');
    font-display: optional;
    size-adjust: 100%;
    ascent-override: 93%;
    descent-override: 26%;
    line-gap-override: 0%;
}

/* === Enterprise Design System Tokens === */
:root {
    --bg-deep: #020408;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --primary: #4f46e5;
    --secondary: #06b6d4;
    --accent: #f59e0b;
    --font-heading: 'Scheherazade New', 'Tajawal', system-ui, sans-serif;
    --font-body: 'Scheherazade New', 'Tajawal', system-ui, -apple-system, sans-serif;
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body {
    font-family: var(--font-body) !important;
    background-color: var(--bg-deep) !important;
    background-image:
        radial-gradient(circle at 15% 0%, rgba(79, 70, 229, 0.15), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.1), transparent 40%) !important;
    color: #f8fafc !important;
}

h1,
h2,
h3,
h4,
.title,
.nav-link,
.btn {
    font-family: var(--font-heading) !important;
}

.unified-nav {
    background: rgba(15, 23, 42, 0.70) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

.code-wall,
.matrix {
    display: none !important;
}

.btn.primary {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
}

.hero-card,
.tech-card,
.bento,
.post {
    background: var(--bg-glass) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 24px !important;
}

div.flow>div.steps>div.step> ::after {
    animation: none !important;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
}

/* === DOM SIZE OPTIMIZATION === */
#interactive,
#robotics,
#results,
#clients,
#library,
#health,
#hr,
#cases,
#blog-section,
#faq,
#contact-section,
footer.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

#bi,
#aiaas,
#workflows {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* === CLS FIX: bento === */
.bento,
.bento.show {
    opacity: 1 !important;
    transform: none !important;
}

.bento:hover {
    transform: translateY(-2px) scale(1.01) !important;
}

/* === CLS FIX: AOS === */
body[data-aos-easing],
body[data-aos-duration],
body[data-aos-delay],
body.interaction-active,
body.aos-init {
    contain: style !important;
}

/* === CLS FIX: btn.primary === */
.btn.primary,
a.btn.primary {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* === ACCESSIBILITY === */
.value .row {
    color: rgba(255, 255, 255, 0.95) !important;
}

.value {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.value p {
    color: rgba(255, 255, 255, 0.75) !important;
}

section#blog .btn.primary,
section#blog a.btn,
.kpi-card a.btn.cta {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: 1px solid #6366f1 !important;
}

/* === MOBILE OPTIMIZATION === */
@media (max-width: 768px) {

    .floating-orbs,
    .orb,
    .grid-pattern,
    .gradient-bg,
    .glow-effect,
    .glow-effect-2 {
        display: none !important;
    }

    .hero.section,
    #top {
        min-height: auto !important;
        padding-top: calc(var(--nav-height) + 1.5rem) !important;
        padding-bottom: 40px !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        min-height: auto !important;
    }

    .hero-content {
        min-block-size: auto !important;
    }

    .hero-visual {
        display: none !important;
    }

    .hero-content .title,
    #top h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    .hero-content .subtitle {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .hero-content .mt-12 {
        margin-top: 2rem !important;
    }

    .section {
        padding: 48px 0 !important;
    }

    .section.tight {
        padding: 32px 0 !important;
    }

    .container {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }

    .subtitle {
        font-size: 0.9375rem !important;
    }

    .grid-bento,
    .cards-4,
    .pricing,
    .robotics,
    .tri,
    .engines,
    .projects,
    .blog,
    .align,
    .kpi-grid,
    .values,
    .vm {
        grid-template-columns: 1fr !important;
    }

    .bento.big {
        grid-column: span 1 !important;
    }

    .steps {
        grid-template-columns: 1fr !important;
    }

    .step:not(:last-child)::after {
        display: none !important;
    }

    .bots {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dash-body {
        grid-template-columns: 1fr !important;
    }

    .screen3d {
        transform: none !important;
        min-height: 220px !important;
    }

    .foot {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .glass-card {
        padding: 1rem !important;
    }

    .nav-container {
        padding: 0 1rem !important;
    }

    .chat {
        width: calc(100% - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        bottom: 5rem !important;
        height: 70vh !important;
        max-height: 500px !important;
    }

    .sliders {
        grid-template-columns: 1fr !important;
    }

    .filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0.5rem !important;
    }

    .filters::-webkit-scrollbar {
        display: none !important;
    }

    .compare-wrap {
        overflow-x: auto !important;
    }

    .tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .tabs::-webkit-scrollbar {
        display: none !important;
    }

    .breadcrumb-nav {
        margin-top: 70px !important;
        padding: 8px 1rem !important;
    }

    .btn,
    .nav-link,
    .tab,
    .filter,
    .qbtn,
    .iconbtn,
    a.mobile-nav-link {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    .cookies {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.5rem !important;
    }
}

/* === TABLET === */
@media (min-width: 769px) and (max-width: 1024px) {

    .hero.section,
    #top {
        min-height: 80vh !important;
    }

    .hero-content .title,
    #top h1 {
        font-size: clamp(2rem, 4vw, 3rem) !important;
    }

    .grid-bento,
    .cards-4,
    .blog,
    .projects {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .bento.big {
        grid-column: span 2 !important;
    }
}

/* === LCP OPTIMIZATION === */
#top h1,
.hero-content .title {
    font-display: swap;
    contain: none;
}

/* === Hero Visual Glow === */
.hero-visual {
    position: relative;
    block-size: 500px !important;
    min-block-size: 500px !important;
    contain: layout paint style;
}

.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.22), transparent 72%);
    filter: blur(36px);
    z-index: 0;
    pointer-events: none;
}

.glass-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    contain: layout paint;
    will-change: transform, opacity;
}

/* Float animations */
@keyframes float-slow {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }

    50% {
        transform: translate3d(0, -6px, 0) rotate(-3deg);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -4px, 0);
    }
}

.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out 1s infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@media (max-width: 1023px),
(prefers-reduced-motion: reduce) {

    .animate-float-slow,
    .animate-float-delayed {
        animation: none !important;
        transform: none !important;
    }

    .hero-visual::before {
        display: none !important;
    }
}