/* ===========================================================================
 * Jazeel — Home page styles (index.php)
 * نُقلت من كتلة <style> المضمّنة داخل index.php إلى ملف خارجي ليُخزَّن في كاش
 * المتصفح (.htaccess يمنح ملفات CSS شهرًا كاملًا). الرابط في index.php يحمل
 * ?v=filemtime فيتغيّر تلقائيًا مع كل تعديل هنا، فلا تظهر نسخة قديمة أبدًا.
 * ترتيب التحميل مقصود: بعد assets/css/style.css حتى تبقى أسبقية هذه القواعد.
 * =========================================================================== */

/* ====== TheSans Arabic Font Faces ====== */
    @font-face {
        font-family: "TheSans Arabic";
        src: url("/fonts/ArbFONTS-TheSansArabic-ExtraLight.woff2") format("woff2"),
             url("/fonts/ArbFONTS-TheSansArabic-ExtraLight.otf") format("opentype");
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: "TheSans Arabic";
        src: url("/fonts/ArbFONTS-TheSansArabic-Light.woff2") format("woff2"),
             url("/fonts/ArbFONTS-TheSansArabic-Light.otf") format("opentype");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: "TheSans Arabic";
        src: url("/fonts/The-Sans-Plain.woff2") format("woff2"),
             url("/fonts/The-Sans-Plain.otf") format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: "TheSans Arabic";
        src: url("/fonts/THESANSARABIC-BOLD.woff2") format("woff2"),
             url("/fonts/THESANSARABIC-BOLD.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    /* ======================================================================
       Unified design tokens (aligned with the site-wide system)
       ====================================================================== */
    :root {
        /* Brand palette */
        --jz-accent: #8B5E3C;
        --jz-accent-deep: #6D4A2E;
        --jz-dark: #4B3B2F;
        --jz-darker: #2B221A;
        --jz-gold: #D9C6A3;
        --jz-beige: #F7F2ED;
        --jz-beige-2: #EFE6DA;
        --jz-light: #FFFFFF;
        --jz-text: #3E2C1C;
        --jz-text-soft: #7A6552;

        /* Gradients */
        --jz-grad-primary: linear-gradient(135deg, #4B3B2F 0%, #2B221A 100%);
        --jz-grad-accent: linear-gradient(135deg, #8B5E3C 0%, #6D4A2E 100%);
        --jz-grad-shine: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);

        /* Spacing scale */
        --sp-xs: .5rem;
        --sp-sm: .75rem;
        --sp-md: 1rem;
        --sp-lg: 1.5rem;
        --sp-xl: 2rem;
        --sp-2xl: clamp(2.5rem, 5vw, 4rem);
        --sp-3xl: clamp(3.5rem, 7vw, 6rem);

        /* Radius */
        --r-sm: 12px;
        --r-md: 18px;
        --r-lg: 26px;
        --r-full: 999px;

        /* Shadows */
        --sh-sm: 0 4px 16px rgba(75, 59, 47, .08);
        --sh-md: 0 12px 32px rgba(75, 59, 47, .12);
        --sh-lg: 0 24px 55px rgba(75, 59, 47, .18);
        --sh-glow: 0 0 45px rgba(139, 94, 60, .28);

        /* Motion */
        --tr-base: .28s cubic-bezier(.4, 0, .2, 1);
        --tr-smooth: .6s cubic-bezier(.16, 1, .3, 1);

        --wrap: min(1240px, 100% - 3rem);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        font-family: "TheSans Arabic", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.7;
        color: var(--jz-text);
        background: var(--jz-light);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }

    html[dir="ltr"] body {
        font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* ======================================================================
       Dark mode
       The site-wide toggle (body.dark-mode, in assets/js/main.js) already
       switches the page background to dark — that part is inherited for
       free. But several elements below set their own fixed light-mode
       colors (including two gradient-text titles via background-clip:text,
       which ignore `color` entirely), so without these overrides they
       render dark-on-dark and disappear against the dark background.
       ====================================================================== */
    body.dark-mode .section-heading h2 {
        background: linear-gradient(135deg, #F7F2ED 0%, var(--jz-gold) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
    body.dark-mode .section-heading > span {
        color: var(--jz-gold);
    }
    body.dark-mode .b2b-text p,
    body.dark-mode .section-heading p,
    body.dark-mode .cards-grid .card-description {
        color: rgba(247, 242, 237, .68);
    }
    body.dark-mode .cards-grid .card {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .12);
    }
    body.dark-mode .cards-grid .card-title {
        color: var(--jz-beige);
    }
    body.dark-mode .cards-grid .card-label {
        background: rgba(217, 198, 163, .16);
        color: var(--jz-gold);
    }
    body.dark-mode .btn-secondary {
        color: var(--jz-beige);
        border-color: rgba(255, 255, 255, .3);
    }
    body.dark-mode .btn-secondary:hover {
        background: var(--jz-beige);
        color: var(--jz-darker);
        border-color: var(--jz-beige);
    }

    .page { padding: 0; }

    /* Shared eyebrow badge */
    .jz-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: rgba(139, 94, 60, .1);
        color: var(--jz-accent);
        padding: .5rem 1.25rem;
        border-radius: var(--r-full);
        font-size: .9rem;
        font-weight: 700;
        letter-spacing: .02em;
    }

    /* ======================================================================
       Hero
       ====================================================================== */
    .hero {
        position: relative;
        min-height: 88vh;
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        max-width: var(--wrap);
        margin: 0 auto;
        /* مساحة علوية صغيرة فقط: الشعار يبدأ قريبًا من الهيدر بلا فراغ
           كبير، والمساحة السفلية تبقى كما هي لفصل الهيرو عمّا بعده. */
        padding: clamp(1rem, 2.2vw, 1.75rem) 0 clamp(3rem, 8vw, 6rem);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center;
        overflow: hidden;
    }

    /* Soft decorative glow blobs behind the hero */
    .hero::before,
    .hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }
    .hero::before {
        top: -140px;
        inset-inline-start: -120px;
        width: 460px; height: 460px;
        background: radial-gradient(circle, rgba(139, 94, 60, .16) 0%, transparent 70%);
    }
    .hero::after {
        bottom: -160px;
        inset-inline-end: -100px;
        width: 420px; height: 420px;
        background: radial-gradient(circle, rgba(217, 198, 163, .30) 0%, transparent 70%);
    }

    .hero-content,
    .hero-image { position: relative; z-index: 1; }

    /* شعار جزيل في الهيرو.
       الاسم هنا صورة من الشعار نفسه (نفس الخط والرسم اليدوي)، لا نص
       بخط جاهز؛ ولهذا يحمل alt باسم العلامة ليبقى مقروءًا لمحركات البحث
       وقارئات الشاشة. الملف مقصوص بخلفية شفافة من assets/img/logo.png. */
    .jz-brand-wrap {
        margin: 0 0 1.5rem;
        display: flex;
        align-items: center;
        line-height: 0;
    }
    .jz-brand-mark {
        width: clamp(106px, 12.6vw, 161px);
        height: auto;
        display: block;
    }
    /* في الوضع الداكن يُقلب حبر الشعار إلى كريمي دافئ بدل البنّي الغامق */
    body.dark-mode .jz-brand-mark {
        filter: brightness(0) invert(1) sepia(.24) saturate(.85) hue-rotate(-8deg);
    }

    .b2b-text p {
        font-size: clamp(1rem, 1.4vw, 1.12rem);
        color: var(--jz-text-soft);
        margin-bottom: 1rem;
        line-height: 1.95;
    }

    .hero-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        padding: .95rem 2.2rem;
        border-radius: var(--r-full);
        text-decoration: none;
        font-weight: 700;
        font-size: 1.05rem;
        transition: transform var(--tr-base), box-shadow var(--tr-base), background var(--tr-base), color var(--tr-base);
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    /* Shine sweep */
    .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--jz-grad-shine);
        transform: translateX(-120%) skewX(-15deg);
        transition: transform var(--tr-smooth);
        z-index: -1;
    }
    .btn:hover::before { transform: translateX(120%) skewX(-15deg); }

    .btn-primary {
        background: var(--jz-grad-accent);
        color: #fff;
        box-shadow: 0 12px 28px rgba(139, 94, 60, .28);
    }
    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(109, 74, 46, .38);
    }
    .btn-secondary {
        background: transparent;
        color: var(--jz-dark);
        border: 2px solid rgba(75, 59, 47, .35);
    }
    .btn-secondary:hover {
        background: var(--jz-dark);
        color: #fff;
        border-color: var(--jz-dark);
        transform: translateY(-3px);
    }

    .hero-image {
        position: relative;
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: var(--sh-lg);
        aspect-ratio: 1 / 1;
        max-height: 620px;
        transition: transform var(--tr-smooth), box-shadow var(--tr-smooth);
    }
    .hero-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg, transparent 55%, rgba(43, 34, 26, .28) 100%);
        pointer-events: none;
    }
    .hero-image:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg), var(--sh-glow);
    }
    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--tr-smooth);
    }
    .hero-image:hover img { transform: scale(1.04); }

    /* ======================================================================
       Stats
       ====================================================================== */
    .stats {
        background: var(--jz-grad-primary);
        color: var(--jz-light);
        padding: var(--sp-2xl) 0;
        position: relative;
    }
    .stats-container {
        width: var(--wrap);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    .stat-item {
        text-align: center;
        padding: 1.75rem 1rem;
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .09);
        transition: transform var(--tr-base), background var(--tr-base);
    }
    .stat-item:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, .09);
    }
    .stat-item h3 {
        font-size: clamp(2.4rem, 4vw, 3.4rem);
        font-weight: 900;
        color: var(--jz-gold);
        margin-bottom: .35rem;
        line-height: 1;
    }
    .stat-item p {
        font-size: 1.02rem;
        color: rgba(255, 255, 255, .82);
    }

    /* ======================================================================
       Service cards
       ====================================================================== */
    .cards-section {
        width: var(--wrap);
        margin: var(--sp-3xl) auto;
    }
    .section-heading {
        text-align: center;
        margin-bottom: var(--sp-2xl);
    }
    .section-heading > span {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 1.25rem;
        background: rgba(139, 94, 60, .1);
        color: var(--jz-accent);
        border-radius: var(--r-full);
        font-size: .9rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    .section-heading h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        margin-bottom: .75rem;
        background: var(--jz-grad-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .section-heading p {
        font-size: 1.15rem;
        color: var(--jz-text-soft);
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    /* Scoped under .cards-grid: the site-wide stylesheet (assets/css/style.css)
       already defines a generic .card / .card h3 / .card p component (padding:5rem,
       display:grid, its own heading/paragraph margins) for a different part of the
       site. Same class names, so without this extra specificity those rules would
       silently win and crush this card into a tiny padded box. */
    .cards-grid .card {
        position: relative;
        background: var(--jz-light);
        border: 1px solid rgba(75, 59, 47, .08);
        border-radius: var(--r-lg);
        overflow: hidden;
        padding: 0;
        display: block;
        transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
        box-shadow: var(--sh-sm);
    }
    /* Top accent line that grows on hover */
    .cards-grid .card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: var(--jz-grad-accent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--tr-base);
        z-index: 2;
    }
    .cards-grid .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--sh-lg);
        border-color: rgba(139, 94, 60, .22);
    }
    .cards-grid .card:hover::before { transform: scaleX(1); }

    .cards-grid .card-image {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--jz-grad-accent);
    }
    .cards-grid .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform var(--tr-smooth);
    }
    .cards-grid .card:hover .card-image img { transform: scale(1.06); }

    /* Soft gradient so the product photo settles into the card instead of
       cutting off hard against the content below */
    .cards-grid .card-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(43, 34, 26, 0) 65%, rgba(43, 34, 26, .16) 100%);
        pointer-events: none;
    }

    .cards-grid .card-content { padding: 1.9rem; }
    .cards-grid .card-label {
        display: inline-block;
        background: rgba(139, 94, 60, .12);
        color: var(--jz-accent);
        padding: .35rem 1rem;
        border-radius: var(--r-full);
        font-size: .82rem;
        font-weight: 700;
        margin: 0 0 1rem;
    }
    .cards-grid .card-title {
        font-size: 1.55rem;
        font-weight: 800;
        margin: 0 0 .75rem;
        color: var(--jz-dark);
    }
    .cards-grid .card-description {
        color: var(--jz-text-soft);
        margin: 0 0 1.35rem;
        line-height: 1.8;
    }
    .cards-grid .card-link {
        color: var(--jz-accent);
        text-decoration: none;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        transition: gap var(--tr-base);
    }
    .cards-grid .card-link:hover { gap: .95rem; }
    html[dir="ltr"] .cards-grid .card-link i { transform: scaleX(-1); }

    /* ======================================================================
       Partners marquee
       ====================================================================== */
    .partners-section {
        background: linear-gradient(180deg, var(--jz-beige) 0%, var(--jz-beige-2) 100%);
        padding: var(--sp-3xl) 0;
    }
    .partners-container { width: var(--wrap); margin: 0 auto; }

    .partners-marquee {
        margin-top: var(--sp-xl);
        position: relative;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .partners-track {
        display: flex;
        gap: 1.5rem;
        width: max-content;
        animation: jz-marquee 55s linear infinite;
    }
    .partners-marquee:hover .partners-track { animation-play-state: paused; }

    @keyframes jz-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    /* RTL scrolls the mirror direction so it still flows naturally */
    html[dir="rtl"] .partners-track { animation-name: jz-marquee-rtl; }
    @keyframes jz-marquee-rtl {
        from { transform: translateX(0); }
        to   { transform: translateX(50%); }
    }

    .partner-item {
        flex: 0 0 auto;
        width: 170px;
        min-height: 110px;
        background: var(--jz-light);
        padding: 1.5rem;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--sh-sm);
    }
    .partner-item img {
        max-width: 130px;
        max-height: 70px;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: .62;
        transition: filter var(--tr-base), opacity var(--tr-base);
    }
    .partner-item:hover img { filter: grayscale(0%); opacity: 1; }

    /* ======================================================================
       CTA
       ====================================================================== */
    .cta-section {
        background: var(--jz-grad-accent);
        color: var(--jz-light);
        padding: var(--sp-3xl) 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .cta-section::before {
        content: "";
        position: absolute;
        top: -120px;
        inset-inline-end: -80px;
        width: 380px; height: 380px;
        background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }
    .cta-container {
        width: min(760px, 100% - 3rem);
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .cta-section h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        margin-bottom: 1.25rem;
    }
    .cta-section p {
        font-size: 1.2rem;
        margin-bottom: 2.25rem;
        opacity: .95;
    }
    .cta-button {
        background: var(--jz-light);
        color: var(--jz-accent);
        padding: 1.1rem 2.8rem;
        border-radius: var(--r-full);
        text-decoration: none;
        font-weight: 800;
        font-size: 1.15rem;
        display: inline-block;
        transition: transform var(--tr-base), box-shadow var(--tr-base);
    }
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .25);
    }

    /* ======================================================================
       Scroll reveal
       ====================================================================== */
    [data-reveal] {
        opacity: 0;
        transform: translateY(34px);
        transition: opacity var(--tr-smooth), transform var(--tr-smooth);
        will-change: opacity, transform;
    }
    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }

    /* ======================================================================
       Responsive
       ====================================================================== */
    @media (max-width: 1024px) {
        .hero {
            grid-template-columns: 1fr;
            min-height: auto;
            gap: 2.5rem;
        }
        .hero-image { order: -1; aspect-ratio: 16 / 11; max-height: 460px; }
        .cards-grid { grid-template-columns: repeat(2, 1fr); }
        .stats-container { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
        :root { --wrap: min(100%, 100% - 2rem); }
        .hero { padding: 1rem 0 2.5rem; }
        .hero-buttons { gap: .85rem; }
        .cards-grid { grid-template-columns: 1fr; gap: 1.5rem; }
        .cards-grid .card-image { aspect-ratio: 4 / 3; }
        .section-heading p { font-size: 1.05rem; }
        .partner-item { width: 150px; min-height: 100px; padding: 1.25rem; }
    }

    @media (max-width: 480px) {
        .hero-image { aspect-ratio: 4 / 3; max-height: 340px; }
        .hero-buttons { flex-direction: column; }
        .hero-buttons .btn { width: 100%; }
        .stats-container { grid-template-columns: 1fr 1fr; gap: 1rem; }
        .stat-item { padding: 1.35rem .5rem; }
        .btn { padding: .85rem 1.6rem; font-size: 1rem; }
    }

    /* Respect users who prefer less motion */
    @media (prefers-reduced-motion: reduce) {
        .partners-track { animation: none !important; }
        [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
        .btn::before { display: none; }
        * { scroll-behavior: auto !important; }
    }