/* Services Page Styles */
:root { --space-sm: 10px; --space-md: 20px; --space-lg: 60px; }

/* Services Overview */
.services-overview { background: var(--bg-color); }
.services-overview .section-header { margin-bottom: 50px; }
.services-overview .section-subtitle { max-width: 700px; margin: 15px auto 0; font-size: 1.1rem; }
.services-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.category-card { text-align: center; padding: 40px 30px; border-radius: 20px; position: relative; overflow: hidden; transition: var(--transition); }
.category-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); transform: scaleX(0); transition: transform 0.3s ease; }
.category-card:hover::before { transform: scaleX(1); }
.category-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.category-icon { width: 90px; height: 90px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; transition: var(--transition); }
.category-icon svg { width: 45px; height: 45px; color: var(--secondary-color); }
.category-card:hover .category-icon { transform: scale(1.1) rotate(5deg); }
.category-card h3 { font-size: 1.4rem; margin-bottom: 15px; }
.category-card p { color: var(--text-light); margin-bottom: 20px; line-height: 1.6; }

/* Service Detail Sections */
.service-detail { background: var(--bg-secondary); }
.service-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.service-content.reverse { direction: rtl; }
.service-content.reverse > * { direction: ltr; }
.service-info h2 { font-size: 2rem; margin-bottom: 20px; color: var(--secondary-color); }
.service-info > p { color: var(--text-light); line-height: 1.8; margin-bottom: 25px; }
.service-features { margin-top: 20px; }
.service-features li { display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--border-color); font-weight: 500; transition: var(--transition); }
.service-features li:last-child { border-bottom: none; }
.service-features li:hover { padding-left: 10px; }
.service-features svg { width: 22px; height: 22px; color: var(--primary-color); flex-shrink: 0; }
.service-visual { display: flex; align-items: center; justify-content: center; }
.service-image-placeholder { width: 100%; max-width: 400px; aspect-ratio: 1; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px rgba(201, 162, 39, 0.25); position: relative; }
.service-image-placeholder::before { content: ''; position: absolute; top: -15px; right: -15px; width: 100%; height: 100%; border: 3px solid var(--primary-color); border-radius: 30px; z-index: -1; opacity: 0.3; }
.service-image-placeholder svg { width: 50%; height: 50%; color: var(--secondary-color); opacity: 0.3; }

/* Mobile App Services */
.mobile-app-services { background: var(--bg-color); }
.mobile-app-services .section-header { margin-bottom: 50px; }
.app-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.app-service-card { text-align: center; padding: 35px 25px; border-radius: 20px; position: relative; }
.app-service-card::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary-color); border-radius: 0 0 3px 3px; }
.app-service-card:hover { transform: translateY(-5px); }
.app-service-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 50%; padding: 20px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.app-service-icon svg { width: 100%; height: 100%; color: var(--secondary-color); }
.app-service-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.app-service-card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; }

/* Ad Integration */
.ad-integration { background: var(--bg-secondary); }
.ad-integration .section-header { margin-bottom: 50px; }
.ad-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 60px; }
.ad-platform { text-align: center; padding: 30px 20px; background: var(--bg-color); border-radius: 16px; transition: var(--transition); }
.ad-platform:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.ad-platform svg { width: 50px; height: 50px; color: var(--primary-color); margin-bottom: 15px; }
.ad-platform h4 { font-size: 1rem; margin-bottom: 8px; }
.ad-platform p { color: var(--text-light); font-size: 0.85rem; margin-bottom: 0; }

/* Ad Types */
.ad-types { margin-top: 20px; }
.ad-types h3 { font-size: 1.5rem; margin-bottom: 30px; }
.ad-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.ad-type-card { text-align: center; padding: 30px 20px; border-radius: 16px; }
.ad-type-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 18px; padding: 18px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.ad-type-icon svg { width: 100%; height: 100%; color: var(--secondary-color); }
.ad-type-card h4 { font-size: 1.1rem; margin-bottom: 10px; }
.ad-type-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 0; }

/* Process Section */
.process-section { background: var(--bg-color); }
.process-section .section-header { margin-bottom: 50px; }
.process-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 45px; left: 60px; right: 60px; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); z-index: 0; }
.process-step { text-align: center; position: relative; z-index: 1; }
.step-number { width: 90px; height: 90px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--secondary-color); margin: 0 auto 20px; box-shadow: 0 10px 30px rgba(201, 162, 39, 0.3); transition: var(--transition); }
.process-step:hover .step-number { transform: scale(1.1); }
.process-step h4 { font-size: 1.1rem; margin-bottom: 10px; }
.process-step p { color: var(--text-light); font-size: 0.9rem; line-height: 1.5; }

/* CTA Section */
.contact-cta { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--bg-dark) 100%); color: var(--text-white); text-align: center; padding: 80px 0; position: relative; overflow: hidden; }
.contact-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 50%); animation: rotate 20s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.contact-cta .container { position: relative; z-index: 1; }
.contact-cta h2 { font-size: 2.5rem; margin-bottom: 15px; }
.contact-cta p { opacity: 0.9; margin-bottom: 30px; font-size: 1.1rem; }

/* Responsive */
@media (max-width: 1024px) {
    .services-categories { grid-template-columns: repeat(2, 1fr); }
    .app-services-grid { grid-template-columns: repeat(2, 1fr); }
    .ad-platforms { grid-template-columns: repeat(3, 1fr); }
    .ad-types-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .process-steps::before { display: none; }
}
@media (max-width: 768px) {
    .services-categories { grid-template-columns: 1fr; }
    .service-content { grid-template-columns: 1fr; gap: 40px; }
    .service-content.reverse { direction: ltr; }
    .service-visual { order: -1; }
    .service-image-placeholder { max-width: 300px; margin: 0 auto; }
    .app-services-grid { grid-template-columns: 1fr; }
    .ad-platforms { grid-template-columns: repeat(2, 1fr); }
    .ad-types-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .step-number { width: 70px; height: 70px; font-size: 1.5rem; }
    .contact-cta h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
    .ad-platforms { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; }
}