*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#333;overflow-x:hidden;scroll-behavior:smooth} header{background:rgba(255,255,255,0.95);color:#1e293b;padding:1rem 0;position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,0.1);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f0;transition:all 0.3s ease} header.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f0} nav{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center} .logo{display:flex;align-items:center}.logo a{font-size:1.8rem;font-weight:bold;background:linear-gradient(45deg,#2563eb,#3b82f6);background-clip:text;-webkit-background-clip:text;color:transparent;text-decoration:none;transition:all 0.3s ease}.logo a:hover{transform:scale(1.05)} .nav-links{display:flex;list-style:none;gap:2rem} .nav-links.mobile-visible{display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.95);padding:1rem;z-index:1000;box-shadow:0 4px 6px rgba(0,0,0,0.1);backdrop-filter:blur(10px);border-top:1px solid #e2e8f0;animation:slideDown 0.3s ease} .nav-links.mobile-hidden{display:none !important} @keyframes slideDown{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } .nav-links a{color:#334155;text-decoration:none;font-weight:500;transition:all 0.3s ease;position:relative} .nav-links a:hover{color:#2563eb} .nav-links a::after{content:'';position:absolute;width:0;height:2px;bottom:-5px;left:0;background:#2563eb;transition:width 0.3s ease} .nav-links a:hover::after{width:100%} .hero{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);color:#1e293b;padding:120px 0 80px;text-align:center;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%232563eb" opacity="0.05"><polygon points="0,0 1000,0 1000,100 0,80"/></svg>') repeat-x;background-size:100px 100px} .hero-content{max-width:1000px;margin:0 auto;padding:0 2rem;position:relative;z-index:1} .hero h1{font-size:3rem;margin-bottom:1.5rem;font-weight:700;line-height:1.2} .hero p{font-size:1.3rem;margin-bottom:2rem;opacity:0.9} .cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .btn{padding:12px 30px;border:none;border-radius:50px;font-weight:600;text-decoration:none;display:inline-block;transition:all 0.3s ease;cursor:pointer} .btn-primary{background:#2563eb;color:white;box-shadow:0 4px 15px rgba(37,99,235,0.3)} .btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4)} .btn-secondary{background:transparent;color:#2563eb;border:2px solid #2563eb} .btn-secondary:hover{background:#2563eb;color:white} .features{padding:80px 0;background:#f8fafc} .container{max-width:1200px;margin:0 auto;padding:0 2rem} .section-header{text-align:center;margin-bottom:4rem} .section-header h2{font-size:2.5rem;margin-bottom:1rem;color:#1a202c} .section-header p{font-size:1.2rem;color:#4a5568;max-width:600px;margin:0 auto} .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:2rem} .feature-card{background:white;padding:2rem;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:all 0.3s ease;text-align:center} .feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.15)} .feature-icon{width:80px;height:80px;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border-radius:50%;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;font-size:2rem;color:white} .feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:#1a202c} .feature-card p{color:#4a5568;line-height:1.7} .services{padding:80px 0;background:white} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(350px,100%),1fr));gap:3rem;margin-top:3rem} .service-card{padding:2.5rem;border-radius:15px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-left:5px solid #2563eb} .service-card h3{font-size:1.5rem;margin-bottom:1rem;color:#1a202c} .service-card p{color:#4a5568;line-height:1.7} .faq{padding:80px 0;background:#f8fafc} .faq-item{background:white;margin-bottom:2rem;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:2rem} .faq-question{font-size:1.3rem;font-weight:600;color:#1a202c;margin-bottom:1rem;line-height:1.4} .faq-answer{color:#4a5568;line-height:1.7;font-weight:400} .contact{padding:80px 0;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:white;text-align:center} .contact h2{font-size:2.5rem;margin-bottom:1rem} .contact p{font-size:1.2rem;margin-bottom:2rem;opacity:0.9} .contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:2rem;margin-top:3rem} .contact-item{background:rgba(255,255,255,0.1);padding:2rem;border-radius:15px;backdrop-filter:blur(10px)} .contact-item h3{margin-bottom:1rem;font-size:1.3rem} footer{background:#1a202c;color:white;text-align:center;padding:2rem 0} .mobile-menu-btn{display:none;background:none;border:none;color:#334155;font-size:1.5rem;cursor:pointer} @media (max-width:992px){.hero h1{font-size:2.5rem} .section-header h2{font-size:2.2rem} .features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem} .services-grid{grid-template-columns:1fr;gap:2rem} } @media (max-width:768px){nav{padding:0 1rem} .nav-links{display:none} .mobile-menu-btn{display:block} .hero{padding:100px 0 60px} .hero h1{font-size:1.9rem;line-height:1.3;margin-bottom:1rem} .hero p{font-size:1.1rem;margin-bottom:1.5rem} .hero-content{padding:0 1rem} .cta-buttons{flex-direction:column;align-items:center;gap:0.8rem} .btn{width:100%;max-width:250px;text-align:center} .container{padding:0 1rem} .section-header h2{font-size:1.8rem;margin-bottom:0.8rem} .section-header p{font-size:1rem} .features,.services,.faq,.contact{padding:60px 0} .features-grid,.services-grid{grid-template-columns:1fr;gap:1.5rem} .feature-card,.service-card{padding:1.5rem} .feature-icon{width:60px;height:60px;font-size:1.5rem;margin-bottom:1rem} .feature-card h3,.service-card h3{font-size:1.3rem;margin-bottom:0.8rem} .contact-info{grid-template-columns:1fr;gap:1.5rem} .contact-item{padding:1.5rem} .faq-item{padding:1.5rem;margin-bottom:1.5rem} .faq-question{font-size:1.1rem;margin-bottom:0.8rem} } @media (max-width:480px){.hero h1{font-size:1.5rem} .hero p{font-size:1rem} .section-header h2{font-size:1.6rem} .feature-card,.service-card,.faq-item{padding:1.2rem} .contact-item{padding:1.2rem} .feature-icon{width:50px;height:50px;font-size:1.2rem} .btn{padding:10px 20px;font-size:0.9rem} } @media (max-width:360px){.hero h1{font-size:1.4rem} .logo a{font-size:1.5rem} .feature-card h3,.service-card h3{font-size:1.2rem} .feature-card p,.service-card p,.faq-answer{font-size:0.9rem} } @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } .feature-card,.service-card,.faq-item{animation:fadeInUp 0.6s ease forwards} .feature-card:nth-child(1){animation-delay:0.1s} .feature-card:nth-child(2){animation-delay:0.2s} .feature-card:nth-child(3){animation-delay:0.3s}