@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --primary:#1f2937;
    --accent:#ef4444;
    --muted:#6b7280;
    --container:1200px;
}

*{box-sizing:border-box}
body{
    font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--primary);
    -webkit-font-smoothing:antialiased;
}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 20px;
}

header{
    background:#ffffff;
    border-bottom:1px solid #e6e9ee;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
}
.site-title{
    margin:0;
    font-size:1.4rem;
    font-weight:700;
    color:var(--primary);
}

.nav-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:18px;
    align-items:center;
}
.nav-list a{ color:var(--primary); text-decoration:none; font-weight:600 }
.nav-list a:hover{ color:var(--accent) }

main{ padding:40px 0 }

.hero{ display:flex; gap:30px; align-items:center; background:linear-gradient(180deg, rgba(239,68,68,0.05), transparent); padding:30px; border-radius:10px }
.hero h2{ margin:0 0 10px 0; font-size:1.6rem }
.hero p{ margin:0 0 16px 0; color:var(--muted) }
.btn{ display:inline-block; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600 }

.section-card{ background:var(--card); padding:20px; border-radius:10px; box-shadow:0 6px 18px rgba(15,23,42,0.06); margin-bottom:20px }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:8px; display:block }

.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{ background:var(--card); padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(15,23,42,0.04) }
.card h3{ margin-top:0 }

form{ background:var(--card); padding:20px; border-radius:10px; display:flex; flex-direction:column; gap:12px }
input[type="text"], input[type="email"], textarea{ padding:10px; border:1px solid #e6e9ee; border-radius:8px; font-size:0.95rem }
button{ background:var(--primary); color:#fff; padding:10px 14px; border-radius:8px; border:none; cursor:pointer }
button:hover{ opacity:0.95 }

footer{ padding:20px 0; text-align:center; color:var(--muted); font-size:0.95rem }

@media (max-width:900px){
    .gallery{ grid-template-columns:repeat(2,1fr) }
    .service-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){
    .header-inner{ flex-direction:column; gap:12px; align-items:flex-start }
    .nav-list{ flex-wrap:wrap }
    .gallery{ grid-template-columns:1fr }
    .service-grid{ grid-template-columns:1fr }
    .hero{ flex-direction:column }
}