* {margin: 0;padding: 0;box-sizing: border-box} body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height: 1.6;color: #333;background-color: #fff} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px} .header {background: #fff;box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1000} .nav-container {background: white;box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1000;padding: 1rem;display: flex;justify-content: space-between;align-items: center} .nav-logo a {text-decoration: none;color: #333} .nav-logo h1 {font-size: 1.8rem;font-weight: 700;color: #2563eb} .nav-logo span {font-size: 0.9rem;color: #666} .nav-menu {display: flex;gap: 2rem} .nav-link {text-decoration: none;color: #333;font-weight: 500;transition: color 0.3s ease} .nav-link:hover {color: #2563eb} .nav-toggle {display: none;flex-direction: column;cursor: pointer} .nav-toggle span {width: 25px;height: 3px;background: #333;margin: 3px 0;transition: 0.3s} .hero {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;text-align: center;padding: 4rem} .hero-container {display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;align-items: center} .hero-title {font-size: 3rem;font-weight: 700;margin-bottom: 1rem;line-height: 1.2} .hero-subtitle {font-size: 1.2rem;margin-bottom: 2rem;opacity: 0.9} .hero-cta {display: flex;gap: 1rem} .btn {display: inline-block;padding: 12px 24px;text-decoration: none;border-radius: 8px;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer} .btn-primary {background: #2563eb;color: white} .btn-primary:hover {background: #1d4ed8;transform: translateY(-2px)} .btn-secondary {background: transparent;color: white;border: 2px solid white} .btn-secondary:hover {background: white;color: #2563eb} .hero-image img {width: 100%;border-radius: 12px;box-shadow: 0 20px 40px rgba(0,0,0,0.1)} .articles-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2rem;margin-top: 2rem} .article-card {background: white;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 20px rgba(0,0,0,0.1);transition: transform 0.3s ease, box-shadow 0.3s ease} .article-card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0,0,0,0.15)} .article-image {overflow: hidden} .article-image img {width: 100%;height: 100%;object-fit: contain;background: #fff;transition: transform 0.3s ease} .article-card:hover .article-image img {transform: scale(1.05)} .article-content {padding: 1.5rem} .article-meta {display: flex;gap: 1rem;margin-bottom: 1rem;font-size: 0.9rem;color: #666} .article-category {background: #e0e7ff;color: #3730a3;padding: 4px 8px;border-radius: 4px;font-weight: 500} .article-title {font-size: 1.3rem;margin-bottom: 0.5rem} .article-title a {text-decoration: none;color: #333} .article-title a:hover {color: #2563eb} .article-excerpt {color: #666;margin-bottom: 1rem} .article-footer {display: flex;justify-content: space-between;align-items: center;font-size: 0.9rem} .article-author {color: #666} .read-more {color: #2563eb;text-decoration: none;font-weight: 500} .read-more:hover {text-decoration: underline} .section-title {font-size: 2.5rem;font-weight: 700;text-align: center;margin-bottom: 3rem;color: #1f2937} .categories {background: #f8fafc;padding: 4rem 0} .categories-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem} .category-card {background: white;padding: 2rem;border-radius: 12px;text-align: center;box-shadow: 0 4px 20px rgba(0,0,0,0.1);transition: transform 0.3s ease} .category-card:hover {transform: translateY(-5px)} .category-icon {font-size: 3rem;margin-bottom: 1rem} .category-card h3 {font-size: 1.5rem;margin-bottom: 1rem;color: #1f2937} .category-card p {color: #666;margin-bottom: 1.5rem} .category-link {color: #2563eb;text-decoration: none;font-weight: 500} .category-link:hover {text-decoration: underline} .why-us {padding: 4rem 0} .features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem} .feature {text-align: center;padding: 2rem} .feature-icon {font-size: 3rem;margin-bottom: 1rem} .feature h3 {font-size: 1.3rem;margin-bottom: 1rem;color: #1f2937} .feature p {color: #666} .footer {background: #1f2937;color: white;padding: 3rem} .footer-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-bottom: 2rem} .footer-section h3, .footer-section h4 {margin-bottom: 1rem;color: #f9fafb} .footer-section ul {list-style: none} .footer-section ul li {margin-bottom: 0.5rem} .footer-section ul li a {color: #d1d5db;text-decoration: none} .footer-section ul li a:hover {color: white} .footer-bottom {border-top: 1px solid #374151;padding-top: 1rem;text-align: center;color: #9ca3af} .affiliate-disclosure {font-size: 0.9rem;margin-top: 0.5rem} .article-full {padding: 2rem 0} .article-header {text-align: center;margin-bottom: 3rem} .article-header .article-meta {justify-content: center;margin-bottom: 1.5rem} .article-header .article-title {font-size: 2.5rem;margin-bottom: 1rem;line-height: 1.2} .article-header .article-subtitle {font-size: 1.2rem;color: #666;margin-bottom: 2rem} .article-featured-image {max-width: 800px;margin: 0 auto} .article-featured-image img {width: 100%;border-radius: 12px} .article-content {max-width: 800px;margin: 0 auto;font-size: 1.1rem;line-height: 1.8} .article-content h2 {font-size: 1.8rem;margin: 2rem 0 1rem;color: #1f2937} .article-content h3 {font-size: 1.4rem;margin: 1.5rem 0 0.5rem;color: #1f2937} .article-content p {margin-bottom: 1.5rem} .article-content ul, .article-content ol {margin-bottom: 1.5rem;padding-left: 2rem} .article-content li {margin-bottom: 0.5rem} .article-content blockquote {border-left: 4px solid #2563eb;padding-left: 1rem;margin: 2rem 0;font-style: italic;color: #666} .products-section {margin: 3rem 0;padding: 2rem;background: #f8fafc;border-radius: 12px} .products-section h2 {text-align: center;margin-bottom: 2rem} .products-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 1.5rem} .product-card {background: white;padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .product-image {text-align: center;margin-bottom: 1rem} .product-image img {max-width: 200px;height: auto} .product-name {font-size: 1.2rem;margin-bottom: 0.5rem;color: #1f2937} .product-price {font-size: 1.1rem;font-weight: 600;color: #059669;margin-bottom: 1rem} .article-footer {margin-top: 3rem;padding-top: 2rem;border-top: 1px solid #e5e7eb} .article-tags {margin-bottom: 2rem} .tag {display: inline-block;background: #e0e7ff;color: #3730a3;padding: 4px 12px;border-radius: 20px;font-size: 0.9rem;margin-right: 0.5rem;margin-bottom: 0.5rem} .article-share h4 {margin-bottom: 1rem} .share-buttons {display: flex;gap: 1rem} .share-btn {padding: 8px 16px;border-radius: 6px;text-decoration: none;color: white;font-weight: 500;font-size: 0.9rem} .share-btn.twitter {background: #1da1f2} .share-btn.facebook {background: #1877f2} .share-btn.linkedin {background: #0077b5} .share-btn:hover {opacity: 0.9} .related-articles {background: #f8fafc;padding: 3rem 0;margin-top: 3rem} .related-articles h2 {text-align: center;margin-bottom: 2rem} .main {min-height: calc(100vh - 200px)} .article-container {display: grid;grid-template-columns: 1fr 300px;gap: 2rem;max-width: 1200px;margin: 0 auto;padding: 2rem 20px} .article-content {background: white;border-radius: 12px;padding: 2rem;box-shadow: 0 4px 20px rgba(0,0,0,0.1)} .article-header {margin-bottom: 2rem;border-bottom: 2px solid #f0f0f0;padding-bottom: 1rem} .article-meta {display: flex;gap: 1rem;margin-bottom: 1rem;font-size: 0.9rem;color: #666} .article-intro {font-size: 1.2rem;color: #555;margin-bottom: 2rem;padding: 1.5rem;background: #f8fafc;border-radius: 8px;border-left: 4px solid #2563eb} .comparison-table {margin: 2rem 0;overflow-x: auto;background: white;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1)} .comparison-table table {width: 100%;border-collapse: collapse;font-size: 0.95rem} .comparison-table th {background: #2563eb;color: white;padding: 1rem;text-align: left;font-weight: 600;border-bottom: 2px solid #1d4ed8} .comparison-table td {padding: 1rem;border-bottom: 1px solid #e5e7eb;vertical-align: top} .comparison-table tr:nth-child(even) {background: #f9fafb} .comparison-table tr:hover {background: #f3f4f6} .comparison-table .top-pick {background: #fef3c7 !important;border-left: 4px solid #f59e0b} .comparison-table .top-pick td:first-child {font-weight: 600;color: #92400e} .badge {display: inline-block;padding: 4px 12px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px} .badge.top-pick {background: #fef3c7;color: #92400e} .badge.alternative {background: #dbeafe;color: #1e40af} .badge.budget {background: #dcfce7;color: #166534} .btn-table {display: inline-block;padding: 8px 16px;background: #2563eb;color: white;text-decoration: none;border-radius: 6px;font-size: 0.9rem;font-weight: 500;transition: all 0.3s ease} .btn-table:hover {background: #1d4ed8;transform: translateY(-1px)} .product-highlight {background: #f8fafc;border: 2px solid #e0e7ff;border-radius: 12px;padding: 2rem;margin: 2rem 0} .product-highlight h3 {color: #2563eb;margin-bottom: 1rem;font-size: 1.4rem} .product-specs {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem;margin: 1.5rem 0} .spec-item {padding: 0.5rem;background: white;border-radius: 6px;border-left: 3px solid #2563eb} .spec-item strong {color: #374151} .product-cta {text-align: center;margin-top: 1.5rem;padding-top: 1.5rem;border-top: 1px solid #e5e7eb} .rating {display: block;margin: 1rem 0;font-size: 0.9rem;color: #666} .short-link {font-size: 0.8rem;color: #666;margin-top: 0.5rem} .faq-item {margin-bottom: 1.5rem;border: 1px solid #e5e7eb;border-radius: 8px;overflow: hidden} .faq-item h4 {background: #f9fafb;padding: 1rem;margin: 0;cursor: pointer;font-size: 1.1rem;color: #374151;border-bottom: 1px solid #e5e7eb} .faq-item p {padding: 1rem;margin: 0;background: white} .affiliate-links-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.5rem;margin: 2rem 0} .affiliate-link-card {background: white;border: 1px solid #e5e7eb;border-radius: 8px;padding: 1.5rem;text-align: center;transition: all 0.3s ease} .affiliate-link-card:hover {box-shadow: 0 4px 20px rgba(0,0,0,0.1);transform: translateY(-2px)} .article-sidebar {background: white;border-radius: 12px;padding: 1.5rem;box-shadow: 0 4px 20px rgba(0,0,0,0.1);height: fit-content;position: sticky;top: 2rem} .sidebar-widget {margin-bottom: 2rem} .sidebar-widget h3 {color: #374151;margin-bottom: 1rem;font-size: 1.2rem;border-bottom: 2px solid #e5e7eb;padding-bottom: 0.5rem} .newsletter-form {background: #f8fafc;padding: 1.5rem;border-radius: 8px;text-align: center} .newsletter-form input[type="email"] {width: 100%;padding: 0.75rem;border: 1px solid #d1d5db;border-radius: 6px;margin-bottom: 1rem;font-size: 0.9rem} .newsletter-form button {width: 100%;padding: 0.75rem;background: #2563eb;color: white;border: none;border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease} .newsletter-form button:hover {background: #1d4ed8} .cta-section {background: linear-gradient(135deg, #2563eb, #1d4ed8);color: white;padding: 3rem 2rem;text-align: center;border-radius: 12px;margin: 3rem 0} .cta-section h2 {margin-bottom: 1rem;font-size: 2rem} .cta-section p {margin-bottom: 2rem;font-size: 1.1rem;opacity: 0.9} @media (max-width: 768px) {.article-container {grid-template-columns: 1fr;gap: 1rem;padding: 1rem} .article-content {padding: 1.5rem} .product-specs {grid-template-columns: 1fr} .comparison-table {font-size: 0.85rem} .comparison-table th, .comparison-table td {padding: 0.75rem 0.5rem} .affiliate-links-grid {grid-template-columns: 1fr} .article-sidebar {position: static;margin-top: 2rem} } @media (max-width: 480px) {html, body {overflow-x: hidden;width: 100vw;box-sizing: border-box} .container, .article-content {max-width: 100vw;box-sizing: border-box} }