/* Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Nunito', sans-serif; }
body { background:#fff; color:#222; line-height:1.6; }
.container { width:90%; max-width:1000px; margin:auto; }

/* Header */
.header { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-bottom:1px solid #eee; }
.header .logo { font-weight:600; font-size:1.6rem; letter-spacing:1px; }
.header nav a { margin-left:1rem; text-decoration:none; color:#222; font-weight:500; }
.header nav a:hover { color:#555; }

/* Hero */
.hero { text-align:center; padding:5rem 0; border-bottom:1px solid #eee; }
.hero h2 { font-weight:400; font-size:2rem; margin-bottom:1rem; }
.hero em { font-style:normal; font-weight:600; color:#333; }
.cta-button { display:inline-block; margin-top:1rem; padding:0.8rem 2rem; border:1px solid #222; border-radius:4px; text-decoration:none; color:#222; transition:0.3s; }
.cta-button:hover { background:#f4f4f4; }

/* Sections */
section { padding:4rem 0; }
h2 { text-align:center; font-weight:600; margin-bottom:2rem; position:relative; }
h2::after { content:''; display:block; width:50px; height:2px; background:#222; margin:0.5rem auto 0; }

/* Services */
.service-list { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.service-item { border:1px solid #222; padding:1rem 1.5rem; border-radius:6px; min-width:180px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.5rem; transition:0.3s; cursor:pointer; }
.service-item:hover { background:#f4f4f4; }
.service-item svg { margin-bottom:0.5rem; width:50px; height:50px; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s ease; }
.service-item:hover svg { stroke-dashoffset: 0; }

/* Portfolio */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1rem; }
.portfolio-item { border:1px solid #222; padding:2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.5rem; transition:0.3s; cursor:pointer; }
.portfolio-item:hover { background:#f4f4f4; }
.portfolio-item svg { width:60px; height:60px; stroke-dasharray: 150; stroke-dashoffset: 150; transition: stroke-dashoffset 1s ease; }
.portfolio-item:hover svg { stroke-dashoffset: 0; }

/* Contact */
.contact form { max-width:500px; margin:auto; display:flex; flex-direction:column; gap:1rem; }
.contact input, .contact textarea { padding:0.8rem; border:1px solid #222; border-radius:4px; width:100%; }
.contact button { padding:1rem; border:none; background:#222; color:#fff; font-weight:600; cursor:pointer; border-radius:4px; transition:0.3s; }
.contact button:hover { background:#555; }
.success { text-align:center; color:green; margin-bottom:1rem; }
.note { font-size:0.9rem; text-align:center; margin-top:1rem; color:#555; }

/* Footer */
.footer { text-align:center; padding:2rem 0; border-top:1px solid #eee; font-size:0.9rem; }
.footer a { color:#222; text-decoration:none; }
.footer a:hover { text-decoration:underline; }

/* Mobile */
@media(max-width:768px){
    .header { flex-direction:column; }
    .header nav { margin-top:1rem; }
}