* {margin: 0;padding: 0;box-sizing: border-box} body {font-family: 'Cairo', sans-serif;background: #0a0e27;color: #e8edf5;line-height: 1.6;font-size: 16px} .container {width: 100%;padding: 0 1rem;margin: 0 auto} .btn {display: inline-block;padding: 0.8rem 1.5rem;border-radius: 25px;text-decoration: none;font-weight: 600;text-align: center;transition: all 0.3s ease} .btn-primary {background: #FFB800;color: #000} .btn-primary:hover {background: #ffc933;transform: translateY(-2px)} .section {padding: 2rem 1rem} .section-title {font-size: 1.8rem;color: #FFB800;text-align: center;margin-bottom: 2rem} .card {background: #1a1f3a;border-radius: 15px;padding: 1.5rem;margin-bottom: 1.5rem;border: 1px solid rgba(255,184,0,0.2)} .grid {display: grid;gap: 1.5rem;grid-template-columns: 1fr} @media (min-width: 768px) {.container {max-width: 720px;padding: 0 2rem} .section {padding: 3rem 2rem} .section-title {font-size: 2.2rem} .grid {grid-template-columns: repeat(2, 1fr)} } @media (min-width: 1024px) {.container {max-width: 1200px} .section {padding: 4rem 2rem} .section-title {font-size: 2.5rem} .grid {grid-template-columns: repeat(3, 1fr)} }