*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Arial,sans-serif;color:rgba(77,77,77,1);line-height:1.6}.container{width:90%;max-width:1200px;margin:0 auto}.site-header{background:#000;color:#333;padding:8px 0;position:fixed;top:0;left:0;width:100%;z-index:1000;backdrop-filter:blur(6px)}.site-header .container{display:flex;justify-content:space-between;align-items:center;padding:0 20px}.logo img{height:50px;width:50px;object-fit:cover;border-radius:50%}.nav a{color:#fff;text-decoration:none;margin-left:20px;font-weight:500;transition:.3s}.nav a:hover{color:#722cff}.btn{background:linear-gradient(90deg,#722cff,rgb(114,44,255));background-size:200% 100%;padding:8px 16px;border-radius:6px;font-weight:700;text-decoration:none;color:#fff!important;transition:all .4s ease;display:inline-block}.btn:hover{background-position:100% 0;transform:translateY(-2px) scale(1.03);box-shadow:0 6px 14px rgba(42,70,197,.35)}.hero{background:#f9f9f9;color:#2e2e2e;text-align:center;padding:120px 20px 90px}.hero h1{font-size:3.5rem;margin-bottom:10px}.hero h2{font-size:2.5rem;margin-bottom:10px}.hero p{font-size:1.2rem;margin-bottom:25px}.about-content{display:flex;align-items:center;justify-content:space-between;gap:2rem}.about-text{flex:1}.about-image{flex:1;text-align:center}.about-image img{max-width:100%;height:auto}.section{padding:30px 20px}.section.gray{background:#f9f9f9}.section h2{text-align:center;margin-bottom:40px;font-size:2rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{position:relative;background-size:contain;background-position:center;background-repeat:no-repeat;height:250px;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .3s ease}.card .overlay{position:absolute;inset:0;transition:background .3s ease}.card-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;opacity:0;transition:opacity .3s ease;text-align:center}.card:hover .card-content{opacity:1;background-color:#fff}.card-content h3{margin-bottom:10px;font-size:1.4rem;font-weight:700;color:#6a11cb}.card-content p{font-size:1rem;line-height:1.4;max-width:90%}.card:hover{background-image:none!important;transform:scale(1.05)}#contact{text-align:center}.contact-form{max-width:400px;margin:20px auto;display:flex;flex-direction:column;gap:15px}.contact-form input{width:100%;padding:12px 15px;border:2px solid #ccc;border-radius:8px;font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease}.contact-form input:focus{border-color:rgb(114,44,255);box-shadow:0 0 8px rgba(114,44,255,.3);outline:none}.contact-form button{background:linear-gradient(90deg,rgb(114,44,255),rgb(168,85,247));color:#fff;font-size:1rem;font-weight:700;padding:12px 20px;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,background .3s ease}.contact-form button:hover{transform:scale(1.05);background:linear-gradient(90deg,rgb(168,85,247),rgb(114,44,255))}.site-footer{background:#111;color:#fff;text-align:center;padding:20px 0;margin-top:40px;font-size:.9rem}body::before{content:"";position:fixed;inset:0;background:rgb(114,44,255) url("../img/image.png") no-repeat center center;background-size:contain;z-index:9999;animation:fadeOut 2.5s ease forwards}@keyframes fadeOut{0%{opacity:1}60%{opacity:1}100%{opacity:0;visibility:hidden}}@media(max-width:992px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.about-content{flex-direction:column;text-align:center}.site-header .container{align-items:flex-start}.about-image{margin-top:1.5rem}.card .card-content{opacity:0}.card:focus,.card:active{background-image:none!important}.card:focus .card-content,.card:active .card-content{opacity:1;background-color:#fff}.card::after{content:"Tap to reveal";position:absolute;bottom:0;left:0;width:100%;text-align:center;padding:8px;font-size:.9rem;font-weight:600;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}.card:focus::after,.card:active::after{opacity:0;visibility:hidden}}@media(max-width:600px){.nav{text-align:center;margin-top:10px}.nav a[href="#about"],.nav a[href="#benefits"]{display:none}.cards{grid-template-columns:1fr}.hero h1{font-size:3rem}.hero h2{font-size:1.5rem}}