*{margin:0;padding:0;box-sizing:border-box;transition:background 0.3s,color 0.2s,transform 0.3s}
:root{--primary:#6C63FF;--secondary:#FF6584;--dark:#1E1E2C;--darker:#14141f;--light:#F4F4F9;--lighter:#FFFFFF;--text:#333;--text-light:#777;--shadow:0 5px 15px rgba(0,0,0,0.1);--nav-height:70px}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--light);color:var(--text);line-height:1.6;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
header{height:var(--nav-height);position:fixed;width:100%;top:0;z-index:100;background:rgba(244,244,249,0.95);backdrop-filter:blur(5px)}
.dark-mode header{background:rgba(30,30,44,0.95)}
nav{height:100%;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:700;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.back-btn{color:var(--text);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:0.5rem}
.dark-mode .back-btn{color:#eee}
.project-hero{min-height:calc(100vh - var(--nav-height));display:flex;align-items:center;padding-top:var(--nav-height)}
.project-hero .container{display:flex;align-items:center;gap:3rem}
.hero-content{flex:1}
.hero-image{flex:1;text-align:center}
.project-hero h1{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:1.5rem;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.project-hero p{font-size:1.1rem;color:var(--text-light);margin-bottom:2rem;max-width:600px}
.dark-mode .project-hero p{color:#bbb}
.cta-button{display:inline-block;padding:0.8rem 1.8rem;background:linear-gradient(to right,var(--primary),var(--secondary));color:white;border-radius:50px;font-weight:600;box-shadow:var(--shadow);transition:transform 0.3s,box-shadow 0.3s;text-decoration:none}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(108,99,255,0.3)}
.hero-image img{max-width:100%;border-radius:20px;animation:float 6s ease-in-out infinite}
.project-section{padding:5rem 0}
.project-section h2{font-size:2rem;margin-bottom:2rem;color:var(--primary);margin-top:-50px}
.features-grid,.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.feature-card,.service-card{background:var(--lighter);border-radius:12px;padding:2rem;transition:transform 0.3s}
.dark-mode .feature-card,.dark-mode .service-card{background:var(--darker)}
.feature-card:hover,.service-card:hover{transform:translateY(-5px)}
.feature-card i,.service-card i{font-size:2rem;color:var(--primary);margin-bottom:1rem}
.feature-card h3,.service-card h3{margin-bottom:1rem}
footer{background:var(--lighter);padding:2rem 0;box-shadow:0 -5px 15px rgba(0,0,0,0.1)}
footer .footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
footer p{font-size:1rem;color:var(--text-light)}
footer .social-links{display:flex;gap:2.5rem}
footer .social-link{font-size:2.5rem;color:var(--text-light);transition:color 0.3s,transform 0.3s}
footer .social-link:hover{color:var(--primary);transform:translateY(-3px)}
footer .social-link i{transition:transform 0.3s}
footer .social-link:hover i{transform:scale(1.2)}
.dark-mode footer{background:var(--darker)}
.dark-mode footer .social-link{color:#bbb}
.dark-mode footer .social-link:hover{color:var(--secondary)}
.dark-mode{background:var(--dark);color:#eee}
.link{color:#6C63FF;font-size:medium}
.case-studies{background:var(--light);padding:4rem 0}
.dark-mode .case-studies{background:var(--darker)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.case-card{background:var(--lighter);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.dark-mode .case-card{background:var(--dark)}
.case-card img{width:100%;height:200px;object-fit:cover}
.case-content{padding:1.5rem}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@media (max-width:992px){.project-hero .container{flex-direction:column;text-align:center}.project-hero p{margin-left:auto;margin-right:auto}}
@media (max-width:768px){.hero-image img{max-width:80%}}
@media (max-width:576px){.project-hero h1{font-size:2rem}.project-hero p{font-size:1rem}.cta-button{padding:0.7rem 1.5rem;font-size:0.9rem}}