*{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;overflow-x: hidden} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px} header{background: linear-gradient(135deg,#1976D2 0%,#2196F3 100%);color: white;padding: 1rem 0;position: fixed;width: 100%;top: 0;z-index: 1000;backdrop-filter: blur(10px)} nav{display: flex;justify-content: space-between;align-items: center} .logo{font-size: 1.5rem;font-weight: 700;display: flex;align-items: center;gap: 0.5rem;color: white;text-decoration: none;transition: opacity 0.3s ease} .logo:hover{opacity: 0.8} .logo-image{height: 32px;width: auto} .nav-links{display: flex;list-style: none;gap: 2rem} .nav-links a{color: white;text-decoration: none;font-weight: 500;transition: opacity 0.3s ease} .nav-links a:hover{opacity: 0.8} .mobile-menu-toggle{display: none;flex-direction: column;background: none;border: none;cursor: pointer;padding: 0;width: 30px;height: 24px;justify-content: space-between} .mobile-menu-toggle span{display: block;height: 3px;width: 100%;background: white;border-radius: 2px;transition: all 0.3s ease} .mobile-menu-toggle.active span:nth-child(1){transform: rotate(45deg) translate(6px,6px)} .mobile-menu-toggle.active span:nth-child(2){opacity: 0} .mobile-menu-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(6px,-6px)} .hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin-top: 0} .custom-shape-divider-bottom-1753974991{position: absolute;bottom: 0;left: 0;width: 100%;overflow: hidden;line-height: 0;transform: rotate(180deg)} .custom-shape-divider-bottom-1753974991 svg{position: relative;display: block;width: calc(100% + 1.3px);height: 70px} .custom-shape-divider-bottom-1753974991 .shape-fill{fill: #FFFFFF} .hero-content{position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;max-width: 1200px;margin: 0 auto} .hero-text{text-align: left} .hero-image{display: flex;justify-content: center;align-items: center} .hero-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.2);transition: transform 0.3s ease} .hero-img:hover{transform: translateY(-10px)} .hero h1{font-size: 3.5rem;font-weight: 700;margin-bottom: 1rem;line-height: 1.2} .hero .subtitle{font-size: 1.3rem;margin-bottom: 2rem;opacity: 0.9;max-width: 500px} .cta-buttons{display: flex;gap: 1rem;justify-content: flex-start;flex-wrap: wrap;margin-top: 2rem} .btn{display: inline-flex;align-items: center;gap: 0.5rem;padding: 1rem 2rem;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;font-size: 1rem} .btn-primary{background: white;color: #1976D2;box-shadow: 0 4px 15px rgba(0,0,0,0.2)} .btn-primary:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.3)} .btn-secondary{background: rgba(255,255,255,0.2);color: white;border: 2px solid rgba(255,255,255,0.3)} .btn-secondary:hover{background: rgba(255,255,255,0.3)} .problem{padding: 80px 0;background: #FFFFFF} .problem-layout{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center} .problem-content{text-align: left} .problem-image{display: flex;justify-content: center;align-items: center} .problem-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .problem-img:hover{transform: translateY(-5px)} .problem h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 1.5rem;font-weight: 600} .problem p{font-size: 1.2rem;color: #666;margin-bottom: 2rem} .stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 2rem;margin-top: 3rem} .stat{text-align: center;padding: 2rem;background: white;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.1)} .stat-number{font-size: 3rem;font-weight: 700;color: #1976D2;display: block} .stat-label{color: #666;font-weight: 500} .features{padding: 80px 0;background: #F8F9FA} .features-intro{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;margin-bottom: 4rem} .features-image{display: flex;justify-content: center;align-items: center} .features-intro-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .features-intro-img:hover{transform: translateY(-5px)} .features-content{text-align: left} .features-content h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 1.5rem;font-weight: 600} .features-content p{font-size: 1.1rem;color: #666;line-height: 1.7;margin-bottom: 1.5rem} .features-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 3rem;margin-top: 3rem} .feature{text-align: center;padding: 2rem;border-radius: 20px;transition: transform 0.3s ease} .feature:hover{transform: translateY(-5px)} .feature:nth-child(odd){background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%)} .feature:nth-child(even){background: linear-gradient(135deg,#F3E5F5 0%,#E1BEE7 100%)} .feature-icon{font-size: 3rem;margin-bottom: 1rem;display: block} .feature h3{font-size: 1.5rem;color: #0D47A1;margin-bottom: 1rem;font-weight: 600} .feature p{color: #666;line-height: 1.6} .how-it-works{padding: 80px 0;background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%)} .how-it-works-header{text-align: center;margin-bottom: 4rem} .how-it-works-header h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 2rem;font-weight: 600} .process-image{display: flex;justify-content: center;margin-bottom: 2rem} .process-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .process-img:hover{transform: translateY(-5px)} .steps{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin-top: 3rem} .step{background: white;padding: 2rem;border-radius: 20px;text-align: center;box-shadow: 0 4px 15px rgba(0,0,0,0.1);position: relative} .step-number{position: absolute;top: -15px;left: 50%;transform: translateX(-50%);background: #1976D2;color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem} .step h3{color: #0D47A1;margin: 1rem 0;font-weight: 600} .step p{color: #666} .benefits{padding: 80px 0;background: white} .benefits-layout{display: grid;grid-template-columns: 2fr 1fr;gap: 4rem;align-items: center} .benefits-content h2{text-align: left;font-size: 2.5rem;color: #0D47A1;margin-bottom: 3rem;font-weight: 600} .benefits-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 2rem} .benefits-image{display: flex;justify-content: center;align-items: center} .benefits-img{width: 100%;max-width: 400px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .benefits-img:hover{transform: translateY(-5px)} .benefit{display: flex;align-items: flex-start;gap: 1rem;padding: 1.5rem;border-radius: 15px;background: #F8F9FA} .benefit-icon{font-size: 2rem;color: #1976D2;flex-shrink: 0} .benefit h3{color: #0D47A1;margin-bottom: 0.5rem;font-weight: 600} .benefit p{color: #666} .download{padding: 80px 0;background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white} .download-layout{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center} .download-content{text-align: left} .download-content h2{font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .download-content p{font-size: 1.2rem;margin-bottom: 2rem;opacity: 0.9} .download-image{display: flex;justify-content: center;align-items: center} .download-img{width: 100%;max-width: 400px;height: auto;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.3);transition: transform 0.3s ease} .download-img:hover{transform: translateY(-10px)} .app-badges{display: flex;justify-content: center;gap: 1rem;flex-wrap: wrap} .app-badge{display: inline-block;transition: transform 0.3s ease} .app-badge:hover{transform: scale(1.05)} .app-badge img{height: 60px;border-radius: 10px} .email-signup{background: rgba(255,255,255,0.1);border-radius: 20px;padding: 2rem;margin: 2rem 0;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.2)} .email-signup h3{font-size: 1.5rem;margin-bottom: 0.5rem;font-weight: 600} .email-signup p{margin-bottom: 1.5rem;opacity: 0.9} .signup-form{max-width: 400px;margin: 0 auto} .form-row{display: flex;gap: 0.5rem;flex-wrap: wrap} .form-row input{flex: 1;min-width: 250px;padding: 0.75rem 1rem;border: 2px solid rgba(255,255,255,0.3);border-radius: 25px;background: rgba(255,255,255,0.1);color: white;font-size: 1rem;backdrop-filter: blur(10px)} .form-row input::placeholder{color: rgba(255,255,255,0.7)} .form-row input:focus{outline: none;border-color: rgba(255,255,255,0.6);background: rgba(255,255,255,0.2)} .signup-btn{padding: 0.75rem 1.5rem;background: white;color: #1976D2;border: none;border-radius: 25px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;white-space: nowrap} .signup-btn:hover{transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0,0,0,0.2)} .signup-btn:disabled{opacity: 0.7;cursor: not-allowed;transform: none} .app-store-section{margin: 2rem 0} .app-badge-link{display: inline-block;transition: transform 0.3s ease} .app-badge-link:hover{transform: scale(1.05)} .app-badge-link img{height: 60px;border-radius: 10px} .success-message{background: rgba(76,175,80,0.2);color: white;padding: 1rem;border-radius: 10px;border: 1px solid rgba(76,175,80,0.5);margin-bottom: 1rem;display: none;backdrop-filter: blur(10px)} footer{background: #0D47A1;color: white;padding: 2rem 0;text-align: center} .footer-content{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem} .footer-links{display: flex;gap: 2rem;list-style: none} .footer-links a{color: white;text-decoration: none;opacity: 0.8;transition: opacity 0.3s ease} .footer-links a:hover{opacity: 1} @media (max-width: 768px){.container{padding: 0 15px} .mobile-menu-toggle{display: flex} .nav-links{position: fixed;top: 70px;left: 0;width: 100%;background: linear-gradient(135deg,#1976D2 0%,#2196F3 100%);flex-direction: column;padding: 2rem 0;gap: 0;transform: translateX(-100%);transition: transform 0.3s ease;box-shadow: 0 4px 15px rgba(0,0,0,0.2);z-index: 999} .nav-links.active{transform: translateX(0)} .nav-links li{text-align: center;padding: 0.75rem 0;border-bottom: 1px solid rgba(255,255,255,0.1)} .nav-links li:last-child{border-bottom: none} .nav-links a{display: block;padding: 0.5rem 1rem;font-size: 1.1rem} .hero{padding: 100px 0 60px} .hero-content{grid-template-columns: 1fr;gap: 2rem;text-align: center} .hero-text{text-align: center} .hero h1{font-size: 2.2rem;line-height: 1.3} .hero .subtitle{font-size: 1.1rem;padding: 0 10px;max-width: none;margin: 0 auto 2rem auto} .cta-buttons{justify-content: center;flex-direction: column;align-items: center;gap: 0.75rem} .btn{width: 100%;max-width: 280px;justify-content: center} .hero-img{max-width: 350px} .problem{padding: 60px 0} .problem-layout{grid-template-columns: 1fr;gap: 2rem} .problem-content{text-align: center} .problem h2{font-size: 2rem;line-height: 1.3} .problem p{font-size: 1.1rem;padding: 0 10px} .problem-img{max-width: 400px} .stats{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .stat{padding: 1.5rem} .features{padding: 60px 0} .features-intro{grid-template-columns: 1fr;gap: 2rem;text-align: center} .features-content{text-align: center} .features-content h2{font-size: 2rem;line-height: 1.3} .features-intro-img{max-width: 400px} .features-grid{grid-template-columns: 1fr;gap: 2rem;margin-top: 2rem} .feature{padding: 1.5rem} .how-it-works{padding: 60px 0} .how-it-works-header h2{font-size: 2rem;line-height: 1.3} .process-img{max-width: 400px} .steps{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .step{padding: 1.5rem;margin-top: 15px} .benefits{padding: 60px 0} .benefits-layout{grid-template-columns: 1fr;gap: 2rem} .benefits-content h2{font-size: 2rem;line-height: 1.3;text-align: center} .benefits-grid{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .benefit{padding: 1.25rem;flex-direction: column;text-align: center;gap: 0.75rem} .benefit-icon{align-self: center} .benefits-img{max-width: 350px} .download{padding: 60px 0} .download-layout{grid-template-columns: 1fr;gap: 2rem;text-align: center} .download-content{text-align: center} .download-content h2{font-size: 2rem;line-height: 1.3} .download-content p{font-size: 1.1rem;padding: 0 10px} .download-img{max-width: 300px} .footer-content{flex-direction: column;text-align: center;gap: 1.5rem} .footer-links{justify-content: center;flex-wrap: wrap;gap: 1rem} } @media (max-width: 480px){.container{padding: 0 10px} .hero h1{font-size: 1.8rem} .hero .subtitle{font-size: 1rem} .problem h2,.features h2,.how-it-works h2,.benefits h2,.download h2{font-size: 1.75rem} .stat-number{font-size: 2.5rem} .feature-icon{font-size: 2.5rem} .step-number{width: 35px;height: 35px;font-size: 1rem} .benefit-icon{font-size: 1.75rem} } html{scroll-behavior: smooth} .fade-in{opacity: 0;transform: translateY(30px);transition: all 0.6s ease} .fade-in.visible{opacity: 1;transform: translateY(0)} .blog-hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin-top: 0} .blog-hero h1{font-size: 3rem;font-weight: 700;margin-bottom: 1rem;color: white} .blog-hero p{font-size: 1.2rem;max-width: 600px;margin: 0 auto;background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5);padding: 0.75rem 1.5rem;border-radius: 25px;display: inline-block;backdrop-filter: blur(10px)} .blog-index{padding: 80px 0;background: #f8f9fa} .blog-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 2rem;margin-bottom: 4rem} .no-posts-message{text-align: center;background: white;border-radius: 20px;padding: 4rem 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);max-width: 600px;margin: 0 auto} .no-posts-icon{font-size: 4rem;margin-bottom: 1.5rem;display: block} .no-posts-message h2{color: #0D47A1;font-size: 2rem;margin-bottom: 1.5rem;font-weight: 600} .no-posts-message p{color: #666;font-size: 1.1rem;line-height: 1.6;margin-bottom: 2rem;max-width: 500px;margin-left: auto;margin-right: auto} .no-posts-message .btn{display: inline-flex;align-items: center;gap: 0.5rem;padding: 1rem 2rem;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;background: #1976D2;color: white;box-shadow: 0 4px 15px rgba(25,118,210,0.3)} .no-posts-message .btn:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(25,118,210,0.4);text-decoration: none} .blog-card{background: white;border-radius: 15px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-card:hover{transform: translateY(-5px)} .blog-card-image{width: 100%;height: 200px;object-fit: cover} .blog-card-content{padding: 1.5rem} .blog-card-title a{color: #0d47a1;text-decoration: none;font-size: 1.25rem;font-weight: 600} .blog-card-excerpt{color: #666;margin: 1rem 0;line-height: 1.6} .blog-card-meta{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;font-size: 0.9rem;color: #888} .tags{display: flex;gap: 0.5rem;flex-wrap: wrap} .tag{background: #e3f2fd;color: #1976d2;padding: 0.25rem 0.5rem;border-radius: 12px;font-size: 0.8rem;text-decoration: none} .read-more{color: #1976d2;text-decoration: none;font-weight: 500} .blog-post-hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin: 0} .blog-post-title{font-size: 2.5rem;margin-bottom: 1rem;line-height: 1.2;color: white} .blog-post-meta{display: flex;gap: 1rem;align-items: center;justify-content: center;margin-bottom: 1.5rem;color: rgba(255,255,255,0.9)} .blog-post-hero .tags{justify-content: center} .blog-post-hero .tag{background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5)} .blog-post-hero .tag:hover{background: rgba(255,255,255,0.5)} .blog-post-content{margin: 4rem 0 2rem 0} .blog-post-content p{margin-bottom: 1.5rem;line-height: 1.7} .blog-post-content h2{color: #0d47a1;margin: 2rem 0 1rem} .blog-post-content h3{color: #1976d2;margin: 1.5rem 0 0.5rem} .blog-post-content ul,.blog-post-content ol{margin: 1rem 0;padding-left: 2rem} .blog-post-content li{margin-bottom: 0.5rem} .blog-content-box{margin: 2rem 0;padding: 1.5rem;border-radius: 8px} .blog-content-box-red{background: linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);border-left: 4px solid #ef4444} .blog-content-box-yellow{background: linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-left: 4px solid #f59e0b} .blog-content-box-green{background: linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border-left: 4px solid #10b981} .blog-content-box-blue{background: linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%);border-left: 4px solid #6366f1} .blog-content-box-purple{background: linear-gradient(135deg,#ddd6fe 0%,#c4b5fd 100%);border-left: 4px solid #8b5cf6} .blog-content-box-gradient{background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);color: white} .blog-content-box-light{background: #f8f9fa;border: 1px solid #dee2e6} .blog-content-box-orange{background: linear-gradient(135deg,#ffeaa7 0%,#fab1a0 100%);border-left: 4px solid #f59e0b} .blog-content-box-teal{background: linear-gradient(135deg,#a8e6cf 0%,#88d8c0 100%);border-left: 4px solid #14b8a6} .blog-content-box-cyan{background: linear-gradient(135deg,#e8f4fd 0%,#d1ecf1 100%);border-left: 4px solid #0891b2} .blog-content-box-red-light{background: #fff5f5;border-left: 4px solid #e53e3e} .blog-content-box h4{margin-top: 0;text-align: center;margin-bottom: 1rem} .blog-content-box-red h4{color: #991b1b} .blog-content-box-yellow h4{color: #92400e} .blog-content-box-green h4{color: #065f46} .blog-content-box-blue h4{color: #3730a3} .blog-content-box-purple h4{color: #5b21b6} .blog-content-box-gradient h4{color: white} .blog-content-box-orange h4{color: #2d3436} .blog-content-box-teal h4{color: #2d3436} .blog-content-box-cyan h4{color: #0c4a6e} .blog-content-box-red-light h4{color: #c53030} .chart-container{position: relative;height: 300px;margin: 1rem 0} .chart-container-large{height: 350px} .blog-flex-grid{display: flex;flex-wrap: wrap;gap: 1rem;margin-top: 1rem} .blog-grid{display: grid;gap: 1rem;margin-top: 1rem} .blog-grid-2{grid-template-columns: repeat(2,1fr)} .blog-grid-3{grid-template-columns: repeat(3,1fr)} .blog-grid-4{grid-template-columns: repeat(4,1fr)} .blog-grid-auto{grid-template-columns: repeat(auto-fit,minmax(250px,1fr))} .blog-card{padding: 1rem;background: rgba(255,255,255,0.7);border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .blog-card-white{background: white} .blog-card-flex-1{flex: 1;min-width: 200px} .blog-card-flex-1-large{flex: 1;min-width: 280px} .blog-card-text-center{text-align: center} .blog-card-icon{font-size: 1.5rem;margin-right: 0.5rem} .blog-card-icon-large{font-size: 2.5rem;margin-bottom: 0.5rem} .blog-card-header{display: flex;align-items: center;margin-bottom: 0.5rem} .blog-card-title{font-size: 0.9rem} .blog-card-title-red{color: #92400e} .blog-card-title-green{color: #065f46} .blog-card-title-blue{color: #3730a3} .blog-card-title-purple{color: #5b21b6} .blog-card-title-dark-red{color: #991b1b} .blog-card-text{margin: 0;color: #374151;font-size: 0.8rem;line-height: 1.4} .blog-card ul,.blog-content-box ul,.blog-flex-grid ul,.blog-content-box .blog-card ul,.blog-content-box .blog-flex-grid ul{margin: 0 !important;padding: 0 !important;padding-left: 1rem !important;color: #374151 !important;font-size: 0.8rem !important;line-height: 1.4 !important;list-style-type: disc !important;list-style-position: inside !important} .blog-card li,.blog-content-box li,.blog-flex-grid li,.blog-content-box .blog-card li,.blog-content-box .blog-flex-grid li{margin: 0 !important;padding: 0 !important;color: #374151 !important;font-size: 0.8rem !important;line-height: 1.4 !important} .blog-card-text-small{color: #374151;line-height: 1.4;font-size: 0.85rem} .blog-card strong{display: block;margin-bottom: 0.5rem} .blog-timeline-item{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 1rem;background: rgba(255,255,255,0.1);border-radius: 6px} .blog-timeline-marker{width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 0.5rem;font-weight: bold;color: white} .blog-timeline-marker-green{background: #10b981} .blog-timeline-marker-green-alt{background: #28a745} .blog-timeline-marker-blue{background: #3b82f6} .blog-timeline-marker-purple{background: #8b5cf6} .blog-timeline-marker-orange{background: #f59e0b} .blog-timeline-marker-yellow{background: #ffc107} .blog-timeline-marker-red{background: #dc3545} .blog-timeline-item strong{color: white !important;display: block;margin-bottom: 0.5rem} .blog-timeline-item small{color: rgba(255,255,255,0.9)} .blog-content-box-gradient .blog-timeline-item strong,.blog-content-box-gradient .blog-timeline-item{color: white !important} .blog-schedule-card{padding: 1.5rem;border-radius: 8px} .blog-schedule-card-green{background: #e8f5e8;border-left: 4px solid #28a745} .blog-schedule-card-yellow{background: #fff3cd;border-left: 4px solid #ffc107} .blog-schedule-card-blue{background: #d1ecf1;border-left: 4px solid #17a2b8} .blog-schedule-card-red{background: #f8d7da;border-left: 4px solid #dc3545} .blog-schedule-card h5{margin-top: 0} .blog-schedule-card-green h5{color: #155724} .blog-schedule-card-yellow h5{color: #856404} .blog-schedule-card-blue h5{color: #0c5460} .blog-schedule-card-red h5{color: #721c24} .blog-schedule-card p{margin-bottom: 0.5rem;font-size: 0.9rem} .blog-schedule-card-text{font-size: 0.8rem;color: #666} .blog-schedule-card-text strong{display: inline} .blog-warning-card{padding: 1rem;background: #fef2f2;border-radius: 6px;border-left: 3px solid #ef4444} .blog-warning-card-icon{font-size: 1.5rem;margin-bottom: 0.5rem} .blog-warning-card strong{color: #991b1b;font-size: 0.9rem;display: block} .blog-warning-card small{color: #666} .blog-impact-card{padding: 1rem;background: #fef2f2;border-radius: 6px;border-left: 3px solid #ef4444;text-align: center} .blog-impact-card .blog-card-icon-large{color: #ef4444} .blog-impact-card strong{color: #991b1b;display: block;margin-bottom: 0.5rem} .blog-impact-card small{color: #666} .blog-stat-card{text-align: center;padding: 1.5rem;background: rgba(255,255,255,0.7);border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .blog-stat-number{font-size: 3rem;font-weight: bold;color: #dc2626;margin-bottom: 0.5rem} .blog-stat-card strong{color: #0c4a6e;display: block;margin-bottom: 0.5rem} .blog-stat-card small{color: #666} .blog-cause-item{display: flex;align-items: center;padding: 1rem;background: rgba(255,255,255,0.4);border-radius: 6px} .blog-cause-icon{font-size: 2rem;margin-right: 0.75rem} .blog-cause-item strong{display: block;margin-bottom: 0.25rem} .blog-cause-item small{color: #666} .blog-warning-item{display: flex;align-items: center;padding: 0.75rem;background: white;border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .blog-warning-icon{font-size: 1.5rem;margin-right: 0.75rem;color: #e53e3e} .blog-warning-item strong{color: #991b1b;display: block} .blog-warning-item small{color: #666} .blog-energy-card{text-align: center;padding: 1.5rem;background: rgba(255,255,255,0.8);border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .blog-energy-card-orange{background: rgba(255,255,255,0.3)} .blog-energy-card-teal{background: rgba(255,255,255,0.4)} .blog-energy-card-icon{font-size: 2.5rem;margin-bottom: 0.5rem;display: block} .blog-energy-card strong{display: block;margin-bottom: 0.5rem} .blog-energy-card-red strong{color: #991b1b} .blog-energy-card-purple strong{color: #5b21b6} .blog-energy-card small{color: #374151;line-height: 1.4} .blog-metric-card{flex: 1 1 240px;max-width: 280px;text-align: center;padding: 1.5rem;background: rgba(255,255,255,0.9);border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);display: flex;flex-direction: column;justify-content: space-between;min-height: 140px} .blog-metric-card-icon{font-size: 2rem;margin-bottom: 0.5rem;display: block} .blog-metric-card-icon-green{color: #10b981} .blog-metric-card-icon-yellow{color: #f59e0b} .blog-metric-card-icon-blue{color: #3b82f6} .blog-metric-card-icon-purple{color: #8b5cf6} .blog-metric-card-icon-emerald{color: #28a745} .blog-metric-card-icon-cyan{color: #17a2b8} .blog-metric-card-icon-amber{color: #ffc107} .blog-metric-card-icon-rose{color: #dc3545} .blog-metric-card strong{color: #065f46;display: block;margin-bottom: 0.5rem} .blog-metric-progress-bar{background: #e5e7eb;height: 8px;border-radius: 4px;margin: 0.5rem 0;position: relative;overflow: hidden} .blog-metric-progress-fill{height: 100%;border-radius: 4px;position: absolute;top: 0;left: 0} .blog-metric-progress-fill-green{background: #10b981} .blog-metric-progress-fill-yellow{background: #f59e0b} .blog-metric-progress-fill-blue{background: #3b82f6} .blog-metric-progress-fill-purple{background: #8b5cf6} .blog-metric-card small{color: #374151;font-weight: 600} @media (max-width: 768px){.blog-grid-2,.blog-grid-3,.blog-grid-4{grid-template-columns: 1fr} .blog-card-flex-1,.blog-card-flex-1-large{min-width: 100%} .blog-metric-card{max-width: 100%} } .blog-post-content blockquote{border-left: 4px solid #1976d2;padding-left: 1rem;margin: 1.5rem 0;font-style: italic;color: #666} .blog-post-content strong{color: #0d47a1} .blog-post-content div[style*="background"] ul{margin: 0 !important;padding-left: 1rem !important;color: #374151 !important;font-size: 0.8rem !important;line-height: 1.4 !important;list-style-type: disc !important} .blog-post-content div[style*="background"] li{margin: 0 !important;padding: 0 !important} .blog-post-content div[style*="background"] p{margin: 0 !important;color: #374151 !important;font-size: 0.8rem !important;line-height: 1.4 !important} .direct-link{display: none} .content-card{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);margin-bottom: 2rem;margin-top: 2rem} .last-updated{color: #666;font-style: italic;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 2px solid #E3F2FD} .content-card h1{color: #0D47A1;font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .content-card h2{color: #1976D2;font-size: 1.5rem;margin: 2rem 0 1rem 0;font-weight: 600} .content-card h3{color: #0D47A1;font-size: 1.2rem;margin: 1.5rem 0 0.5rem 0;font-weight: 600} .content-card p{margin-bottom: 1rem;color: #555} .content-card ul{margin: 1rem 0 1rem 2rem;color: #555} .content-card li{margin-bottom: 0.5rem} .highlight{background: #E3F2FD;padding: 1rem;border-radius: 8px;border-left: 4px solid #1976D2;margin: 1rem 0} .warning{background: #FFF3E0;padding: 1rem;border-radius: 8px;border-left: 4px solid #FF9800;margin: 1rem 0} .contact-info{background: #F3E5F5;padding: 1.5rem;border-radius: 10px;margin: 2rem 0} .hero-section{text-align: center;margin-bottom: 3rem;margin-top: 2rem} .hero-section h1{color: #0D47A1;font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .hero-section p{color: #666;font-size: 1.2rem;max-width: 600px;margin: 0 auto} .support-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-bottom: 3rem} .support-card{background: white;border-radius: 15px;padding: 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);text-align: center;transition: transform 0.3s ease} .support-card:hover{transform: translateY(-5px)} .support-card-icon{font-size: 3rem;margin-bottom: 1rem;display: block} .support-card h3{color: #1976D2;font-size: 1.3rem;margin-bottom: 1rem;font-weight: 600} .support-card p{color: #666;margin-bottom: 1.5rem} .support-card .btn{display: inline-block;background: #1976D2;color: white;padding: 0.75rem 1.5rem;border-radius: 25px;text-decoration: none;font-weight: 500;transition: background 0.3s ease} .support-card .btn:hover{background: #0D47A1} .faq-section{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);margin-bottom: 3rem} .faq-section h2{color: #0D47A1;font-size: 2rem;margin-bottom: 2rem;text-align: center;font-weight: 600} .faq-item{border-bottom: 1px solid #E3F2FD;padding: 1.5rem 0} .faq-item:last-child{border-bottom: none} .faq-question{color: #1976D2;font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;cursor: pointer;display: flex;justify-content: space-between;align-items: center} .faq-question::after{content: "+";font-size: 1.5rem;transition: transform 0.3s ease} .faq-question.active::after{transform: rotate(45deg)} .faq-answer{color: #666;max-height: 0;overflow: hidden;transition: max-height 0.3s ease} .faq-answer.active{max-height: 400px;padding-top: 0.5rem} .faq-answer ul{margin: 0.5rem 0 0.5rem 1.5rem} .getting-started-steps{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-top: 2rem} .step-card{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 2rem;position: relative;transition: transform 0.3s ease} .step-card:hover{transform: translateY(-5px)} .step-card .step-number{position: absolute;top: -15px;left: 2rem;background: #1976D2;color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem} .step-card h3{color: #0D47A1;font-size: 1.3rem;margin: 1rem 0;font-weight: 600} .step-card ul{color: #666;margin-left: 1.5rem} .step-card li{margin-bottom: 0.5rem} .tips-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-top: 2rem} .tip-card{background: white;border-radius: 15px;padding: 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);text-align: center;transition: transform 0.3s ease} .tip-card:hover{transform: translateY(-5px)} .tip-icon{font-size: 3rem;margin-bottom: 1rem;display: block;color: #1976D2} .tip-card h3{color: #0D47A1;font-size: 1.3rem;margin-bottom: 1rem;font-weight: 600} .tip-card ul{text-align: left;color: #666;margin-left: 1.5rem} .tip-card li{margin-bottom: 0.5rem} .tip-card strong{color: #1976D2} .troubleshooting-section h3{color: #1976D2;font-size: 1.4rem;margin: 2rem 0 1rem 0;font-weight: 600;border-bottom: 2px solid #E3F2FD;padding-bottom: 0.5rem} .troubleshooting-section h3:first-child{margin-top: 0} .issue-item{margin-bottom: 2rem;padding: 1.5rem;background: #F8F9FA;border-radius: 10px;border-left: 4px solid #1976D2} .issue-item h4{color: #0D47A1;font-size: 1.1rem;margin-bottom: 1rem;font-weight: 600} .issue-item ul{color: #666;margin-left: 1.5rem} .issue-item li{margin-bottom: 0.5rem} .contact-section{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 3rem;text-align: center} .contact-section h2{color: #0D47A1;font-size: 2rem;margin-bottom: 1rem;font-weight: 600} .contact-section p{color: #666;margin-bottom: 2rem;font-size: 1.1rem} .contact-methods{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin-top: 2rem} .contact-method{background: white;padding: 1.5rem;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .contact-method-icon{font-size: 2rem;margin-bottom: 1rem;display: block;color: #1976D2} .contact-method h3{color: #0D47A1;margin-bottom: 0.5rem;font-weight: 600} .contact-method p{color: #666;margin: 0} .contact-method a{color: #1976D2;text-decoration: none} .contact-method a:hover{text-decoration: underline} .contact-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;margin-bottom: 3rem} .contact-form-section{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1)} .contact-form-section h2{color: #0D47A1;font-size: 1.8rem;margin-bottom: 1.5rem;font-weight: 600} .form-group{margin-bottom: 1.5rem} .form-group label{display: block;color: #333;font-weight: 500;margin-bottom: 0.5rem} .form-group input,.form-group select,.form-group textarea{width: 100%;padding: 0.75rem;border: 2px solid #E3F2FD;border-radius: 8px;font-size: 1rem;font-family: inherit;transition: border-color 0.3s ease} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline: none;border-color: #1976D2} .form-group textarea{resize: vertical;min-height: 120px} .form-group select{cursor: pointer} .submit-btn{background: #1976D2;color: white;padding: 1rem 2rem;border: none;border-radius: 25px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: background 0.3s ease;width: 100%} .submit-btn:hover{background: #0D47A1} .contact-info-section{display: flex;flex-direction: column;gap: 2rem} .response-time{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 2rem;text-align: center;margin-bottom: 3rem} .response-time h2{color: #0D47A1;font-size: 1.5rem;margin-bottom: 1rem;font-weight: 600} .response-time p{color: #666;margin-bottom: 1rem} .response-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 1rem;margin-top: 1.5rem} .response-item{background: white;padding: 1rem;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .response-item h4{color: #1976D2;font-weight: 600;margin-bottom: 0.5rem} .response-item p{color: #666;font-size: 0.9rem;margin: 0} .success-message{background: #E8F5E8;color: #2E7D32;padding: 1rem;border-radius: 8px;border-left: 4px solid #4CAF50;margin-bottom: 1rem;display: none} @media (max-width: 768px){.contact-grid{grid-template-columns: 1fr;gap: 2rem;margin-bottom: 2rem} .contact-form-section{padding: 2rem 1.5rem} .contact-form-section h2{font-size: 1.5rem} .contact-info-section{gap: 1.5rem} .response-time{padding: 1.5rem;margin-bottom: 2rem} .response-time h2{font-size: 1.3rem} .response-grid{grid-template-columns: 1fr;gap: 1rem} } @media (max-width: 480px){.contact-form-section{padding: 1.5rem 1rem} .response-time{padding: 1.25rem} } @media (max-width: 768px){.content-card{padding: 2rem 1.5rem;margin-bottom: 1.5rem} .content-card h1{font-size: 2rem;line-height: 1.3} .content-card h2{font-size: 1.3rem} .content-card h3{font-size: 1.1rem} .highlight,.contact-info{padding: 1.25rem;margin: 1.5rem 0} } @media (max-width: 480px){.content-card{padding: 1.5rem 1rem} .content-card h1{font-size: 1.75rem} .content-card h2{font-size: 1.2rem} .content-card h3{font-size: 1rem} .highlight,.contact-info{padding: 1rem} } .blog-post-footer{background: #f8f9fa;padding: 3rem 0} .blog-post-cta{text-align: center;background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 4rem 2rem;border-radius: 20px;margin: 4rem 0;box-shadow: 0 8px 30px rgba(13,71,161,0.3)} .blog-post-cta > *{position: relative;z-index: 2} .blog-post-cta h3{color: white;font-size: 2rem;margin-bottom: 1.5rem;font-weight: 600} .blog-post-cta p{color: rgba(255,255,255,0.9);font-size: 1.2rem;margin-bottom: 2.5rem;max-width: 500px;margin-left: auto;margin-right: auto} .blog-post-navigation{display: flex;justify-content: space-between;gap: 1rem} .nav-link{flex: 1;padding: 1rem;background: white;border-radius: 10px;text-decoration: none;color: #0d47a1;text-align: center;transition: transform 0.3s ease} .nav-link:hover{transform: translateY(-2px);text-decoration: none} .newsletter-signup{background: white;padding: 3rem;border-radius: 20px;text-align: center;margin-top: 3rem} .newsletter-form{display: flex;gap: 1rem;max-width: 400px;margin: 0 auto} .newsletter-form input{flex: 1;padding: 0.75rem;border: 2px solid #e0e0e0;border-radius: 25px;font-size: 1rem} .newsletter-form button{padding: 0.75rem 1.5rem;background: #1976d2;color: white;border: none;border-radius: 25px;font-weight: 600;cursor: pointer;transition: background 0.3s ease} .newsletter-form button:hover{background: #0d47a1} .tag-page{padding: 40px 0 80px;background: #f8f9fa} .tag-header{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 60px;text-align: center;margin: 0;position: relative;overflow: hidden} .tag-header h1{color: white;margin-bottom: 0.5rem;font-size: 2.5rem;font-weight: 700} .tag-header p{font-size: 1.2rem;max-width: 600px;margin: 0 auto;background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5);padding: 0.75rem 1.5rem;border-radius: 25px;display: inline-block;backdrop-filter: blur(10px)} .back-link{display: inline-block;margin-top: 2rem;color: #1976d2;text-decoration: none;font-weight: 500} .back-link:hover{text-decoration: underline} .blog-image-center{width: 100%;max-width: 600px;height: auto;display: block;margin: 2rem auto;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-image-center:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.15)} .blog-image-small{width: 100%;max-width: 400px;height: auto;float: right;margin: 1rem 0 1rem 2rem;border-radius: 8px;box-shadow: 0 3px 12px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-image-small:hover{transform: translateY(-2px)} .blog-infographic{width: 100%;max-width: 700px;height: auto;display: block;margin: 2.5rem auto;border-radius: 12px;box-shadow: 0 6px 20px rgba(0,0,0,0.15);transition: transform 0.3s ease} .blog-infographic:hover{transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0,0,0,0.2)} .blog-image-inline{width: 100%;max-width: 300px;height: auto;float: left;margin: 0.5rem 1.5rem 1rem 0;border-radius: 8px;box-shadow: 0 3px 12px rgba(0,0,0,0.1)} .blog-image-full-width{width: 100%;height: auto;margin: 2rem 0;border-radius: 12px;box-shadow: 0 5px 18px rgba(0,0,0,0.12)} .clearfix::after{content: "";display: table;clear: both} .premium-features{padding: 80px 0;background: linear-gradient(135deg,#F8F9FA 0%,#E3F2FD 100%)} .premium-header{text-align: center;margin-bottom: 4rem} .premium-header h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 1rem;font-weight: 600} .premium-subtitle{font-size: 1.2rem;color: #666;max-width: 600px;margin: 0 auto} .premium-category{margin-bottom: 4rem} .premium-category-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 3px solid #1976D2} .premium-category-header h3{font-size: 2rem;color: #0D47A1;font-weight: 600;margin: 0} .premium-badge{background: linear-gradient(135deg,#FF6B35 0%,#F7931E 100%);color: white;padding: 0.5rem 1rem;border-radius: 20px;font-weight: 600;font-size: 0.9rem;box-shadow: 0 2px 10px rgba(255,107,53,0.3)} .premium-features-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(400px,1fr));gap: 2rem} .premium-feature{background: white;padding: 2rem;border-radius: 20px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease;border-left: 4px solid #1976D2} .premium-feature:hover{transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0,0,0,0.15)} .premium-feature-icon{font-size: 3rem;margin-bottom: 1rem;display: block;color: #1976D2} .premium-feature h4{font-size: 1.4rem;color: #0D47A1;margin-bottom: 1rem;font-weight: 600} .premium-feature p{color: #666;margin-bottom: 1.5rem;line-height: 1.6} .premium-feature-list{list-style: none;padding: 0;margin: 0} .premium-feature-list li{color: #555;margin-bottom: 0.75rem;padding-left: 1.5rem;position: relative;line-height: 1.5} .premium-feature-list li::before{content: "✓";position: absolute;left: 0;color: #4CAF50;font-weight: bold;font-size: 1.1rem} .premium-cta{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;border-radius: 25px;padding: 3rem;text-align: center;box-shadow: 0 8px 30px rgba(13,71,161,0.3);position: relative;overflow: hidden} .premium-cta::before{content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);animation: shimmer 3s ease-in-out infinite} @keyframes shimmer{0%,100%{transform: translateX(-100%) translateY(-100%) rotate(45deg)} 50%{transform: translateX(100%) translateY(100%) rotate(45deg)} } .premium-cta-content{position: relative;z-index: 2} .premium-cta h3{font-size: 2.2rem;margin-bottom: 2rem;font-weight: 600;color: white} .premium-benefits{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin-bottom: 3rem} .premium-benefit{display: flex;align-items: flex-start;gap: 1rem;text-align: left} .premium-benefit-icon{font-size: 2.5rem;flex-shrink: 0;margin-top: 0.25rem} .premium-benefit h4{color: white;font-size: 1.2rem;margin-bottom: 0.5rem;font-weight: 600} .premium-benefit p{color: rgba(255,255,255,0.9);line-height: 1.5;margin: 0} .premium-highlights{display: flex;justify-content: center;flex-wrap: wrap;gap: 1rem;margin-bottom: 2.5rem} .premium-highlight{background: rgba(255,255,255,0.2);color: white;padding: 0.5rem 1rem;border-radius: 20px;font-weight: 500;border: 1px solid rgba(255,255,255,0.3);backdrop-filter: blur(10px)} .btn-premium{background: linear-gradient(135deg,#FF6B35 0%,#F7931E 100%);color: white;padding: 1rem 2.5rem;border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 1.1rem;display: inline-flex;align-items: center;gap: 0.5rem;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(255,107,53,0.4);border: none;cursor: pointer} .btn-premium:hover{transform: translateY(-3px);box-shadow: 0 8px 25px rgba(255,107,53,0.5);text-decoration: none;color: white} @media (max-width: 768px){.premium-features{padding: 60px 0} .premium-header h2{font-size: 2rem;line-height: 1.3} .premium-subtitle{font-size: 1.1rem;padding: 0 10px} .premium-category-header{flex-direction: column;gap: 1rem;text-align: center} .premium-category-header h3{font-size: 1.75rem} .premium-features-grid{grid-template-columns: 1fr;gap: 1.5rem} .premium-feature{padding: 1.5rem} .premium-feature h4{font-size: 1.25rem} .premium-cta{padding: 2rem 1.5rem;border-radius: 20px} .premium-cta h3{font-size: 1.8rem} .premium-benefits{grid-template-columns: 1fr;gap: 1.5rem;text-align: center} .premium-benefit{flex-direction: column;text-align: center;gap: 0.75rem} .premium-highlights{flex-direction: column;align-items: center;gap: 0.75rem} .premium-highlight{display: inline-block} } @media (max-width: 480px){.premium-header h2{font-size: 1.75rem} .premium-category-header h3{font-size: 1.5rem} .premium-feature{padding: 1.25rem} .premium-feature-icon{font-size: 2.5rem} .premium-cta{padding: 1.5rem 1rem} .premium-cta h3{font-size: 1.5rem} .premium-benefit-icon{font-size: 2rem} } @media (max-width: 768px){.blog-hero{padding: 100px 0 60px} .blog-hero h1{font-size: 2.5rem} .blog-hero p{font-size: 1.1rem;padding: 0 10px} .blog-grid{grid-template-columns: 1fr;gap: 1.5rem} .no-posts-message{padding: 3rem 1.5rem;margin: 0 15px} .no-posts-message h2{font-size: 1.75rem} .no-posts-message p{font-size: 1rem} .blog-post-title{font-size: 2rem} .blog-post-navigation{flex-direction: column} .newsletter-form{flex-direction: column} .blog-card-meta{flex-direction: column;align-items: flex-start;gap: 0.5rem} .blog-header h1{font-size: 2.5rem} .blog-image-center{max-width: 100%;margin: 1.5rem auto;border-radius: 8px} .blog-image-small{float: none;max-width: 100%;margin: 1.5rem auto;display: block} .blog-infographic{max-width: 100%;margin: 2rem auto;border-radius: 10px} .blog-image-inline{float: none;max-width: 100%;margin: 1rem auto;display: block} .blog-image-full-width{margin: 1.5rem 0;border-radius: 10px} } @media (max-width: 480px){.blog-hero h1{font-size: 2rem} .blog-hero p{font-size: 1rem} .blog-index{padding: 40px 0} .blog-post-content{padding: 2rem 0} .blog-post-header{padding: 80px 0 40px} .blog-post-title{font-size: 1.75rem} .blog-header h1{font-size: 2rem} .blog-header{padding: 80px 0 40px} }