/* YINEI (以内咨询) — shared site styles */
:root {
    --primary-blue: #1e3a8a;
    --secondary-blue: #3b82f6;
    --accent-gold: #f59e0b;
    --dark-blue: #1e40af;
    --light-blue: #dbeafe;
    --text-dark: #1f2937;
    --text-light: #6b7280;
}

body { font-family: 'Inter', sans-serif; line-height: 1.6; }
.font-display { font-family: 'Playfair Display', serif; }

/* RTL support (Arabic) */
html[dir="rtl"] body { text-align: right; }

.hero-bg {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9), rgba(30, 64, 175, 0.8)),
                url('/resources/hero-bg.png') center/cover no-repeat;
    min-height: 100vh;
}
.tech-bg {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.05), rgba(245, 158, 11, 0.05)),
                url('/resources/tech-bg.png') center/cover no-repeat;
}
.page-hero {
    background: linear-gradient(135deg, rgba(30,58,138,0.92), rgba(30,64,175,0.85)),
                url('/resources/tech-bg-1.png') center/cover no-repeat;
}

.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.gradient-text {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.btn-primary { background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); transition: all 0.3s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(30,58,138,0.3); }
.btn-secondary { background: linear-gradient(135deg, var(--accent-gold), #d97706); transition: all 0.3s ease; }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(245,158,11,0.3); }

.animate-fade-in { animation: fadeIn 0.8s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.6s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.mobile-menu { transform: translateX(-100%); transition: transform 0.3s ease; }
.mobile-menu.active { transform: translateX(0); }
/* RTL: anchor the drawer to the right edge so translateX(100%) hides it off-screen
   (the template hard-codes left-0, which would otherwise park it mid-screen). */
html[dir="rtl"] .mobile-menu { left: auto; right: 0; transform: translateX(100%); }
html[dir="rtl"] .mobile-menu.active { transform: translateX(0); }
/* RTL: language dropdowns are positioned right-0; the mobile controls sit on the
   left edge in RTL, so re-anchor the menus to the left to keep them on-screen. */
html[dir="rtl"] #langMenu,
html[dir="rtl"] #mobileLangMenu { right: auto; left: 0; }

.service-icon {
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    color: white; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1rem;
}

/* Article / prose styling for news & service detail bodies */
.prose h2 { font-size: 1.6rem; font-weight: 700; color: var(--text-dark); margin: 1.8rem 0 0.8rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); margin: 1.4rem 0 0.6rem; }
.prose p { margin: 0.8rem 0; color: #374151; }
.prose ul, .prose ol { margin: 0.8rem 0 0.8rem 1.5rem; color: #374151; }
.prose ul li { list-style: disc; margin: 0.4rem 0; }
.prose ol li { list-style: decimal; margin: 0.4rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.6rem 0.8rem; text-align: left; }
.prose th { background: #f3f4f6; font-weight: 600; }
.prose a { color: var(--secondary-blue); text-decoration: underline; }

.news-card { transition: all 0.3s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,0.1); }