/* styles.css */
/* ===== CSS Variables ===== */
:root{
    --clr-primary:#00C9FF;
    --clr-secondary:#9C27B0;
    --clr-dark:#081229;
    --clr-light:#f5f7fa;
    --clr-white:#ffffff;

    --radius:12px;
    --transition:.3s ease;
    --shadow:0 12px 30px rgba(0,0,0,.15);
    --font-main:'Poppins',sans-serif;
}

/* ========== Base Reset ========== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);line-height:1.6;color:#222;background:var(--clr-light);overflow-x:hidden}
img{max-width:100%;display:block}

/* Containers */
.container{max-width:1200px;margin-inline:auto;padding-inline:20px}

/* Header */
.header{position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 4px rgba(0,0,0,.07);z-index:100}
.nav{display:flex;justify-content:space-between;align-items:center;padding-block:14px}
.logo img{height:44px}
.nav-menu{display:flex;gap:40px;list-style:none}
.nav-menu a{color:#222;font-weight:500;text-decoration:none;transition:color var(--transition)}
.nav-menu a:hover{color:var(--clr-secondary)}

/* Burger */
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.menu-toggle span{width:26px;height:3px;background:#222;border-radius:3px;transition:all var(--transition)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--clr-primary)0%,var(--clr-secondary)100%);color:var(--clr-white);padding:160px 0 120px;clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}
.hero-content{max-width:820px}
.hero h1{font-size:clamp(32px,6vw,58px);font-weight:700;margin-bottom:36px}
.cta-button{display:inline-block;background:var(--clr-white);color:var(--clr-secondary);padding:16px 34px;border-radius:var(--radius);font-weight:600;font-size:18px;text-decoration:none;transition:all var(--transition)}
.cta-button:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* Sections */
.section-tag{font-size:14px;letter-spacing:2px;font-weight:700;text-transform:uppercase;margin-bottom:60px;text-align:center;color:#666}
.section-tag.light{color:#ccc}
.services,.testimonials{background:var(--clr-light);padding:100px 0}
.about{background:var(--clr-white);padding:100px 0}
.featured{background:var(--clr-dark);color:var(--clr-white);padding:100px 0 120px;clip-path:polygon(0 0,100% 0,100% 97%,0 100%)}
.portfolio{background:var(--clr-white);padding:100px 0}

/* Grids */
.services-grid,.projects-grid,.portfolio-items,.testimonials-grid{display:grid;gap:40px}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.projects-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:40px}
.portfolio-items{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Service Item */
.service-item{text-align:center;padding:34px 28px;border-radius:var(--radius);background:var(--clr-white);box-shadow:var(--shadow);transition:transform var(--transition)}
.service-item:hover{transform:translateY(-6px)}
.service-icon{margin-inline:auto;width:90px;height:90px;border:2px solid var(--clr-primary);border-radius:50%;display:grid;place-items:center;margin-bottom:26px}
.service-icon svg{width:58px;height:58px;stroke:var(--clr-primary);fill:none;stroke-width:2}
.service-item h3{font-size:22px;font-weight:600;margin-bottom:12px;color:#222}
.service-item p{font-size:15px;color:#555}

/* Project cards */
.project-card{display:block;border-radius:var(--radius);overflow:hidden;transition:transform var(--transition)}
.project-card.large img{height:420px;object-fit:cover}
.project-card img{height:240px;width:100%;object-fit:cover;transition:transform var(--transition)}
.project-card:hover img{transform:scale(1.05)}
.project-info{padding:24px 20px;background:rgba(0,0,0,.7);color:var(--clr-white);position:relative;top:-5px}
.project-info h3{font-size:24px;font-weight:600;margin-bottom:8px}
.project-info p{font-size:16px;color:#e4e4e4}

/* Portfolio thumbnails */
.portfolio-item{position:relative;border-radius:var(--radius);overflow:hidden;transition:transform var(--transition)}
.portfolio-item:hover{transform:translateY(-6px)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8)0%,transparent 70%);color:var(--clr-white);padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
.portfolio-overlay h3{font-size:20px;font-weight:600;margin-bottom:6px}
.portfolio-overlay p{font-size:14px}

/* About */
.about p{font-size:18px;max-width:820px;margin-inline:auto;margin-bottom:26px;color:#555}

/* Testimonials */
.testimonial{background:var(--clr-white);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow);font-size:16px;color:#444;position:relative}
.stars{color:#FFD700;font-size:18px;margin-bottom:12px}
.testimonial cite{display:block;margin-top:18px;font-style:normal;font-weight:600}

/* Footer */
.footer{background:var(--clr-secondary);color:var(--clr-white);padding:80px 0 40px}
.footer-content{display:flex;flex-wrap:wrap;gap:60px;justify-content:space-between;align-items:flex-start}
.footer-brand img{height:60px;margin-bottom:18px}
.footer-brand p{font-size:18px;opacity:.9}
.footer-info a{color:var(--clr-white);text-decoration:none;transition:opacity var(--transition)}
.footer-info a:hover{opacity:.8}
.social-links{display:flex;gap:16px;margin-top:24px}
.social-links a{width:44px;height:44px;background:rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:background var(--transition)}
.social-links a:hover{background:rgba(255,255,255,.3)}
.social-links svg{width:22px;height:22px;fill:currentColor}
.footer-copy{text-align:center;font-size:14px;margin-top:40px;opacity:.8}

/* Animations */
.fade-in{animation:fadeInUp .8s ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* Burger + responsive */
@media(max-width:900px){
    .nav-menu{position:fixed;top:70px;right:-100%;flex-direction:column;background:var(--clr-white);width:240px;height:calc(100vh - 70px);padding:40px 20px;transition:right var(--transition);box-shadow:var(--shadow)}
    .nav-menu.active{right:0}

    .menu-toggle{display:flex}
    body.menu-open{overflow:hidden}
}

@media(max-width:600px){
    .hero{padding:140px 0 100px}
    .hero h1{font-size:28px}
}