:root {--primary: #FFB800;--primary-dark: #e6a600;--dark-bg: #0a0e27;--dark-secondary: #1a1f3a;--text-light: #e8edf5;--text-muted: #a8b3c1;--accent: #00d4aa} * {margin: 0;padding: 0;box-sizing: border-box} body {font-family: 'Cairo', 'Segoe UI', sans-serif;background: var(--dark-bg);color: var(--text-light);line-height: 1.6} .container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;width: 100%;position: relative} .section {padding: 4rem 0} .hero {padding: 6rem 0;text-align: center;background: linear-gradient(135deg, var(--dark-bg), var(--dark-secondary))} .badge {display: inline-block;padding: 0.5rem 1rem;border-radius: 25px;font-size: 0.9rem;margin-bottom: 1rem;background: rgba(255, 184, 0, 0.1);color: var(--primary)} .gradient-text {background: linear-gradient(135deg, var(--primary), var(--accent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .btn {display: inline-block;padding: 1rem 2rem;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease} .btn-primary {background: var(--primary);color: #000} .btn-secondary {background: transparent;color: var(--primary);border: 2px solid var(--primary)} .btn:hover {transform: translateY(-2px)} .grid {display: grid;gap: 2rem} .grid-2 {grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))} .grid-3 {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))} .grid-4 {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))} .card {background: var(--dark-secondary);padding: 2rem;border-radius: 15px;border: 1px solid rgba(255, 184, 0, 0.1);transition: all 0.3s ease} .card:hover {border-color: var(--primary);transform: translateY(-5px)} .card-icon {font-size: 3rem;color: var(--primary);margin-bottom: 1rem} .section-title {font-size: 2.5rem;margin-bottom: 1rem;text-align: center;color: var(--primary)} .section-subtitle {text-align: center;color: var(--text-muted);margin-bottom: 3rem;font-size: 1.1rem} .text-center {text-align: center} h1 {font-size: 3rem;margin-bottom: 1.5rem;line-height: 1.2} h2 {font-size: 2rem;margin-bottom: 1rem} h3 {font-size: 1.5rem;margin-bottom: 1rem;color: var(--primary)} p {margin-bottom: 1rem;color: var(--text-muted)} @media (max-width: 768px) {h1 {font-size: 2rem} .section-title {font-size: 2rem} .grid-2, .grid-3, .grid-4 {grid-template-columns: 1fr} .section {padding: 2rem 0} .hero {padding: 4rem 0} } article, .blog-content, .article-content {max-width: 900px;margin-left: auto;margin-right: auto;padding: 0 1.5rem;width: 100%;display: block} .blog-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 2rem;justify-content: center}