/* ════════════════════════════════════════════════════════
     * 1. Hero polish — تحسين الـ video overlay و typography
     * ════════════════════════════════════════════════════════ */
    body.home .hero, body.home .home-hero {
        position: relative;
        overflow: hidden;
        min-height: 88vh;
    }
    /* Other pages: لا نفرض min-height كبير */
    body:not(.home) .hero {
        position: relative;
        overflow: hidden;
    }
    body.home .hero-bg-overlay,
    body.home .hero::after {
        background: linear-gradient(135deg,
            rgba(10,14,26,.85) 0%,
            rgba(26,31,58,.75) 50%,
            rgba(10,14,26,.92) 100%) !important;
    }
    /* Pro page و الصفحات الأخرى: حييد الـ ::after */
    body:not(.home) .hero::after {
        background: none !important;
        display: none !important;
    }
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 25% 30%, rgba(212, 175, 55,.18), transparent 50%),
            radial-gradient(circle at 75% 70%, rgba(245,200,66,.12), transparent 50%);
        pointer-events: none;
        z-index: 2;
        animation: mtHeroGlow 12s ease-in-out infinite alternate;
    }
    @keyframes mtHeroGlow {
        0% { opacity: .85; transform: scale(1); }
        100% { opacity: 1; transform: scale(1.05); }
    }

    /* Hero h1 — premium typography */
    .hero h1, .home-hero h1 {
        font-size: clamp(36px, 5.5vw, 68px) !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        text-shadow:
            0 4px 30px rgba(0,0,0,.6),
            0 0 80px rgba(212, 175, 55,.3) !important;
    }
    .hero h1 .accent, .hero h1 strong,
    .hero h1 span:first-of-type {
        background: linear-gradient(135deg, #D4AF37 0%, #f5c842 50%, #D4AF37 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: mtShimmer 4s linear infinite;
        display: inline-block;
    }
    @keyframes mtShimmer {
        0% { background-position: 0% center; }
        100% { background-position: 200% center; }
    }

    .hero p, .home-hero p, .hero-description {
        font-size: clamp(15px, 1.4vw, 19px) !important;
        line-height: 1.85 !important;
        max-width: 580px;
        opacity: .95 !important;
    }

    /* Eyebrow / badge */
    .hero .eyebrow, .hero-eyebrow {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 6px 16px !important;
        background: linear-gradient(135deg, rgba(212, 175, 55,.18), rgba(245,200,66,.12)) !important;
        border: 1px solid rgba(212, 175, 55,.4) !important;
        border-radius: 100px !important;
        color: #D4AF37 !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase;
        backdrop-filter: blur(6px);
        animation: mtPulseBadge 3s ease-in-out infinite;
    }
    @keyframes mtPulseBadge {
        0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55,.4); }
        50% { box-shadow: 0 0 0 8px rgba(212, 175, 55,0); }
    }

    /* ════════════════════════════════════════════════════════
     * 2. CTA Buttons — premium look
     * ════════════════════════════════════════════════════════ */
    .hero .btn-primary,
    .hero a[href*="services"],
    .hero a.cta-primary,
    .btn.btn-primary {
        background: linear-gradient(135deg, #D4AF37 0%, #e55a2b 100%) !important;
        color: #fff !important;
        padding: 14px 30px !important;
        border-radius: 14px !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 10px 30px rgba(212, 175, 55,.45),
            0 0 0 1px rgba(255,255,255,.1) inset !important;
        transition: all .35s cubic-bezier(.2,.9,.3,1.1) !important;
    }
    .hero .btn-primary::before,
    .btn.btn-primary::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
        transition: left .6s ease;
    }
    .hero .btn-primary:hover::before,
    .btn.btn-primary:hover::before {
        left: 100%;
    }
    .hero .btn-primary:hover,
    .btn.btn-primary:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow:
            0 16px 40px rgba(212, 175, 55,.6),
            0 0 0 1px rgba(255,255,255,.15) inset !important;
    }

    /* ════════════════════════════════════════════════════════
     * 3. الـ 4 Service Cards (right side of hero) — Premium
     * ════════════════════════════════════════════════════════ */
    .hero-cards .card,
    .floating-card,
    .service-mini-card,
    [class*="hero"] [class*="card"]:not(.calc-card) {
        background: linear-gradient(135deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.03) 100%) !important;
        backdrop-filter: blur(16px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
        border: 1px solid rgba(212, 175, 55,.25) !important;
        border-radius: 18px !important;
        padding: 16px 20px !important;
        box-shadow:
            0 10px 30px rgba(0,0,0,.35),
            0 0 0 1px rgba(255,255,255,.05) inset,
            0 -1px 0 rgba(212, 175, 55,.1) inset !important;
        transition: all .4s cubic-bezier(.2,.9,.3,1.1) !important;
        position: relative;
        overflow: hidden;
    }
    .hero-cards .card::before,
    .floating-card::before,
    .service-mini-card::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 18px;
        padding: 1px;
        background: linear-gradient(135deg,
            rgba(212, 175, 55,.5),
            transparent 40%,
            transparent 60%,
            rgba(245,200,66,.3));
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .4s;
        pointer-events: none;
    }
    .hero-cards .card:hover::before,
    .floating-card:hover::before,
    .service-mini-card:hover::before {
        opacity: 1;
    }
    .hero-cards .card:hover,
    .floating-card:hover,
    .service-mini-card:hover {
        transform: translateY(-8px) scale(1.04) !important;
        background: linear-gradient(135deg,
            rgba(212, 175, 55,.12),
            rgba(245,200,66,.06)) !important;
        box-shadow:
            0 25px 50px rgba(212, 175, 55,.35),
            0 0 0 1px rgba(255,255,255,.1) inset !important;
    }
    .hero-cards .card *,
    .floating-card * {
        opacity: 1 !important;
    }
    .hero-cards .card h3, .hero-cards .card h4,
    .floating-card h3, .floating-card h4 {
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        margin: 0 0 4px !important;
        letter-spacing: -0.01em;
    }
    .hero-cards .card p,
    .floating-card p {
        color: #f5c842 !important;
        font-size: 12px !important;
        font-weight: 600;
        opacity: .9 !important;
    }
    .hero-cards .card svg,
    .floating-card svg,
    .hero-cards .card .iconify,
    .floating-card .iconify {
        color: #D4AF37 !important;
        width: 28px !important;
        height: 28px !important;
        filter: drop-shadow(0 4px 12px rgba(212, 175, 55,.55));
        transition: transform .3s, filter .3s;
    }
    .hero-cards .card:hover svg,
    .floating-card:hover svg,
    .hero-cards .card:hover .iconify,
    .floating-card:hover .iconify {
        transform: scale(1.15) rotate(-5deg);
        filter: drop-shadow(0 6px 18px rgba(212, 175, 55,.85));
    }

    /* ════════════════════════════════════════════════════════
     * 4. Hero Stats Row — premium boxes
     * ════════════════════════════════════════════════════════ */
/* moved to mt-contiant-style.php */
    /* moved to mt-contiant-style.php */
    /* moved to mt-contiant-style.php */

    /* ════════════════════════════════════════════════════════
     * 5. Section dividers — wave/diagonal
     * ════════════════════════════════════════════════════════ */
    section + section,
    .hero + section {
        position: relative;
    }
    section[class*="services"]::before,
    section[class*="why"]::before,
    section.section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(212, 175, 55,.4) 20%,
            rgba(245,200,66,.5) 50%,
            rgba(212, 175, 55,.4) 80%,
            transparent);
        opacity: .6;
    }

    /* Section title — premium */
    section h2,
    .section-title h2,
    .section h2 {
        font-size: clamp(28px, 3.5vw, 44px) !important;
        font-weight: 900 !important;
        background: linear-gradient(135deg, #ffffff 0%, #e8e8ee 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 40px rgba(212, 175, 55,.15);
        margin-bottom: 16px;
        letter-spacing: -0.02em;
    }
    section .eyebrow,
    .section-badge {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 5px 14px !important;
        background: rgba(212, 175, 55,.12);
        border: 1px solid rgba(212, 175, 55,.3);
        border-radius: 100px;
        color: #D4AF37 !important;
        font-weight: 800 !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    /* ════════════════════════════════════════════════════════
     * 6. Service cards (9-grid section) — premium 3D feel
     * ════════════════════════════════════════════════════════ */
    .service-card, .services .card, .service-item {
        background: linear-gradient(135deg,
            rgba(19,26,44,.95),
            rgba(26,31,58,.85)) !important;
        border: 1px solid rgba(212, 175, 55,.18) !important;
        border-radius: 20px !important;
        padding: 28px 24px !important;
        position: relative;
        overflow: hidden;
        transition: all .4s cubic-bezier(.2,.9,.3,1.1) !important;
    }
    .service-card::after {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 120px; height: 120px;
        background: radial-gradient(circle, rgba(212, 175, 55,.15), transparent 70%);
        border-radius: 50%;
        opacity: 0;
        transition: opacity .4s, transform .4s;
    }
    .service-card:hover::after {
        opacity: 1;
        transform: scale(1.4);
    }
    .service-card:hover {
        transform: translateY(-10px);
        border-color: rgba(212, 175, 55,.4) !important;
        box-shadow:
            0 30px 60px rgba(212, 175, 55,.25),
            0 0 0 1px rgba(212, 175, 55,.2) inset !important;
    }
    .service-card .service-icon,
    .service-card .icon,
    .service-card svg {
        width: 56px !important;
        height: 56px !important;
        background: linear-gradient(135deg, #D4AF37, #e55a2b) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin-bottom: 18px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 24px rgba(212, 175, 55,.4) !important;
        transition: all .35s !important;
    }
    .service-card:hover .service-icon,
    .service-card:hover .icon {
        transform: scale(1.1) rotate(-3deg);
        box-shadow: 0 16px 32px rgba(212, 175, 55,.6) !important;
    }
    .service-card h3,
    .service-card h4 {
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 19px !important;
        margin-bottom: 10px;
        letter-spacing: -0.01em;
    }
    .service-card p {
        color: #b5bccb !important;
        font-size: 14.5px !important;
        line-height: 1.75 !important;
    }

    /* ════════════════════════════════════════════════════════
     * 7. Premium scrollbar
     * ════════════════════════════════════════════════════════ */
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: rgba(10,14,26,.5); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #D4AF37, #e55a2b);
        border-radius: 6px;
        border: 2px solid rgba(10,14,26,.5);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #ff7a45, #f0633a);
    }

    /* ════════════════════════════════════════════════════════
     * 8. Selection highlight color
     * ════════════════════════════════════════════════════════ */
    ::selection {
        background: rgba(212, 175, 55,.4);
        color: #fff;
    }

    /* ════════════════════════════════════════════════════════
     * 9. Smooth focus ring (accessibility + style)
     * ════════════════════════════════════════════════════════ */
    a:focus-visible, button:focus-visible, input:focus-visible {
        outline: 2px solid #D4AF37;
        outline-offset: 3px;
        border-radius: 4px;
    }

    /* ════════════════════════════════════════════════════════
     * 10. Floating ambient particles (CSS only)
     * ════════════════════════════════════════════════════════ */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background-image:
            radial-gradient(2px 2px at 20% 30%, rgba(212, 175, 55,.5), transparent),
            radial-gradient(1.5px 1.5px at 65% 70%, rgba(245,200,66,.4), transparent),
            radial-gradient(1px 1px at 85% 20%, rgba(212, 175, 55,.3), transparent),
            radial-gradient(2px 2px at 10% 85%, rgba(245,200,66,.35), transparent),
            radial-gradient(1px 1px at 50% 50%, rgba(212, 175, 55,.25), transparent);
        background-size: 100% 100%;
        pointer-events: none;
        z-index: 1;
        opacity: .6;
        animation: mtParticles 25s linear infinite;
    }
    @keyframes mtParticles {
        from { background-position: 0% 0%; }
        to { background-position: 100% 100%; }
    }

    /* ════════════════════════════════════════════════════════
     * 11. Card glow on hover (للحاسبات)
     * ════════════════════════════════════════════════════════ */
    .calculator-card, .calc-card, [class*="calc"][class*="card"] {
        position: relative;
        transition: all .4s !important;
    }
    .calculator-card::before,
    .calc-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(135deg, #D4AF37, #f5c842, #D4AF37);
        background-size: 200% 200%;
        opacity: 0;
        z-index: -1;
        transition: opacity .4s;
        animation: mtGradientShift 4s ease infinite;
    }
    .calculator-card:hover::before,
    .calc-card:hover::before {
        opacity: 1;
    }
    @keyframes mtGradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }