@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap');

:root { color-scheme: light; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { font-family: 'Cairo', sans-serif; text-rendering: optimizeLegibility; }
::selection { background: #C1603D; color: #fff; }
:focus-visible { outline: 3px solid rgba(193, 96, 61, .55); outline-offset: 4px; border-radius: .5rem; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #F1E9DD; }
::-webkit-scrollbar-thumb { background: #D9926F; border: 2px solid #F1E9DD; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #C1603D; }

.bg-pattern { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23211D18' fill-opacity='.35'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .7rem 1.15rem; border: 1px solid #E7DFD1; border-radius: .85rem; color: #7A7161; background: rgba(255, 255, 255, .55); font-size: .875rem; font-weight: 800; transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.filter-btn:hover { transform: translateY(-2px); color: #C1603D; border-color: rgba(193, 96, 61, .45); box-shadow: 0 12px 20px -16px rgba(33, 29, 24, .45); }
.filter-btn.active { background-color: #C1603D !important; color: #fff !important; border-color: #C1603D !important; box-shadow: 0 8px 20px -10px rgba(193, 96, 61, .75); }
.project-item, #services .grid > div, #packages .grid > div { transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .4s ease; }
.project-item:hover, #services .grid > div:hover, #packages .grid > div:hover { transform: translateY(-6px); border-color: rgba(193, 96, 61, .48); box-shadow: 0 24px 42px -26px rgba(33, 29, 24, .32); }
.project-item[hidden] { display: none !important; }
.counter {
    font-size: 64px;
    line-height: 1;
}
.portfolio-image-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 16px 32px -22px rgba(33, 29, 24, .45);
}
.portfolio-image-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
}
.portfolio-image-card:hover img { transform: scale(1.045); filter: saturate(1.04) contrast(1.02); }
.video-play-button {
    position: absolute;
    inset: auto;
    bottom: 2rem;
    right: 2rem;
    width: 5.25rem;
    height: 5.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 28px 60px -38px rgba(193,96,61,0.35);
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
    cursor: pointer;
    z-index: 10;
}
.video-play-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 22px rgba(193,96,61,0.15), 0 32px 80px -46px rgba(193,96,61,0.4);
    background: rgba(255, 255, 255, 0.12);
}
.video-play-icon {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.video-play-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.video-play-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(193,96,61,0.18);
    filter: blur(10px);
    opacity: 0.85;
}
.video-play-button:hover .video-play-icon::before {
    opacity: 1;
    transform: scale(1.08);
}
.portfolio-video-card {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(241, 233, 221, 0.85), rgba(241, 233, 221, 1));
}
.portfolio-video-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#portfolio .project-item.logos:not(.portfolio-image-card) { display: none; }
.portfolio-video-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(33, 29, 24, .04), rgba(33, 29, 24, 0));
}
.portfolio-video-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-page-button { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E7DFD1; border-radius: 999px; color: #211D18; background: #fff; transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease; }
.portfolio-page-button:hover:not(:disabled) { transform: translateY(-2px); color: #fff; background: #C1603D; border-color: #C1603D; }
.portfolio-page-button:disabled { opacity: .38; cursor: not-allowed; }
.aos-init { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.16, 1, .3, 1); }
.aos-animate { opacity: 1; transform: translateY(0); }
.stats-glow {
    position: absolute;
    inset: 0;
    background-color: #E6E4DF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23E6E4DF'/%3E%3Ccircle cx='0' cy='0' r='32' fill='%23FBF7F1'/%3E%3Ccircle cx='64' cy='0' r='32' fill='%23FBF7F1'/%3E%3Ccircle cx='0' cy='64' r='32' fill='%23FBF7F1'/%3E%3Ccircle cx='64' cy='64' r='32' fill='%23FBF7F1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-repeat: repeat;
    opacity: .72;
    pointer-events: none;
}
#stats { width: 100vw; max-width: none; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); border-radius: 0; box-shadow: none !important; border: none !important; margin-bottom: 0 !important; }
#stats .text-white { color: #211D18; }
#stats .text-\[\#B8AC98\] { color: #7A7161; }
@keyframes statsGlowMove { from { transform: translate(-4%, -4%) scale(1); } 50% { transform: translate(4%, 5%) scale(1.18); } to { transform: translate(-3%, 3%) scale(1.05); } }
.portfolio-frame-texture { background-color: #C1603D; background-image: linear-gradient(135deg, rgba(33,29,24,.18), transparent 60%), url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1' fill='%23fff' fill-opacity='.12'/%3E%3C/svg%3E"); }
#marketing { background-color: #F1F1F1; }

/* Contact section: coral paper grain, recreated as a seamless SVG texture. */
#contact {
    background-color: #F4594B !important;
    background-image:
        linear-gradient(135deg, rgba(255, 197, 177, .12), rgba(112, 29, 25, .2)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: auto, 120px 120px;
    background-blend-mode: soft-light, multiply;
}
#contact > div > div:first-child > span,
#contact > div > div:first-child > h2,
#contact > div > div:first-child > p { color: #FFFFFF; }
.contact-corner-logo { filter: brightness(0) invert(1); opacity: .95; }

/* Arabic display faces need extra vertical room when headings wrap. */
#hero-title { line-height: 1.38 !important; }
#marketing h2 { line-height: 1.48 !important; padding-block: .08em; }
section > div > div > h2 { text-wrap: balance; }

@media (max-width: 640px) { #hero { min-height: auto !important; } #hero-title { line-height: 1.48 !important; } #marketing h2 { line-height: 1.55 !important; } #marketing .h-\[480px\] { height: 340px !important; } .filter-btn { padding: .55rem .8rem; font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .aos-init { opacity: 1; transform: none; } }

/* ==================================================================
   طبقة تحسينات بصرية دقيقة (Premium Polish)
   لا تغيّر أي لون أو مسافة أو تخطيط ثابت — فقط جودة التفاعل:
   انتقالات أنعم، ظل أعمق عند التمرير، استجابة ضغط، وحلقة تركيز واضحة.
   كل التأثيرات مبنية على كلاسات Tailwind الموجودة فعلاً في HTML، بدون لمسه.
   ================================================================== */

/* منحنى انتقال أكثر نعومة لكل عنصر يستخدم transition-all/colors الأصلية من Tailwind */
.transition-all, .transition-colors, .transition-opacity, .transition-transform {
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* أزرار العمل الأساسية: ظل أعمق قليلاً عند التمرير + استجابة ضغط خفيفة عند النقر */
.bg-brand-orange,
.bg-brand-charcoal,
a[class*="border-brand-border"][class*="hover:border-brand-orange"] {
    transition: box-shadow .35s cubic-bezier(.22, 1, .36, 1),
                transform .15s cubic-bezier(.22, 1, .36, 1),
                background-color .3s ease, border-color .3s ease;
}
.bg-brand-orange:hover { box-shadow: 0 10px 24px -8px rgba(193, 96, 61, .45); }
.bg-brand-orange:active,
.bg-brand-charcoal:active,
button:active, a[class*="rounded-xl"]:active, a[class*="rounded-full"]:active {
    transform: scale(.97);
}

/* حلقة تركيز واضحة وأنيقة لدعم إمكانية الوصول بلوحة المفاتيح (تحل محل outline المتصفح الافتراضي فقط) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #C1603D;
    outline-offset: 2px;
    border-radius: 4px;
}

/* بطاقات المعرض والباقات: رفعة خفيفة عند التمرير فوق الظل الموجود أصلاً، بدون تغيير الحجم أو المسافة الثابتة */
.portfolio-image-card,
#packages .rounded-3xl {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}
.portfolio-image-card:hover { transform: translateY(-3px); }
#packages .rounded-3xl:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(33, 29, 24, .25); }

/* أزرار الفلترة: استجابة ضغط ومؤشر يد واضح */
.filter-btn { cursor: pointer; transition: all .3s cubic-bezier(.22, 1, .36, 1); }
.filter-btn:active { transform: scale(.96); }

/* إدخالات النماذج (نموذج التواصل السريع إن وُجد): انتقال حدود أنعم عند التركيز */
input, textarea, select {
    transition: border-color .25s ease, box-shadow .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bg-brand-orange:hover, .portfolio-image-card:hover, #packages .rounded-3xl:hover { transform: none; }
}