/* Minimal responsive styles for Labelly */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap");
:root{
  --accent:#2b6ef3;
  --accent-2:#ffb347;
  --bg:#f7f8fb;
  --ink:#0f172a;
  --muted:#5b6676;
  --logo-bg:#111827;
  --panel:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
body{
  font-family:"Source Sans 3", system-ui, Arial, sans-serif;
  margin:0;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{font-family:"Space Grotesk", system-ui, Arial, sans-serif;letter-spacing:-0.01em}
.container{max-width:1040px;margin:0 auto;padding:1.25rem}
.site-header{background:var(--panel);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 1.25rem}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:30px;width:auto;display:block}
nav a{margin-left:1rem;color:var(--muted);text-decoration:none}
nav a.btn, button.btn{
  background:var(--logo-bg);
  color:#fff;
  padding:0.55rem 0.9rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 16px rgba(17,24,39,0.25);
}
.cta{
  background:#f8fafc;
  color:#111827;
  padding:0.55rem 0.9rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(15,23,42,0.08);
}
.hero{padding:4rem 0;background:linear-gradient(135deg,#eef2ff,#ffffff)}
.hero .container{display:grid;gap:2rem;align-items:center}
.hero h1{font-size:2rem;margin:0 0 0.6rem}
.hero-media img{width:100%;max-width:520px;height:auto;border-radius:16px;border:1px solid var(--border);background:#fff}
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  padding:2.5rem 0;
}
.features article{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.25rem;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
}
.features h3{margin:0 0 0.4rem}
.service-visual{margin:1rem 0 1.5rem}
.service-visual img{width:100%;max-width:720px;height:auto;border-radius:14px;border:1px solid var(--border);background:#fff}
.services-grid{display:grid;gap:2rem;align-items:start}
.services-secondary{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.25rem;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
}
.services-secondary h2{margin-top:0}
.services-primary{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.25rem;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
}
.services-primary h2{margin-top:0}
.services-process{
  margin-top:2rem;
  padding:1.25rem 1.5rem;
  background:var(--panel);
  border:1px dashed var(--border);
  border-radius:14px;
}
.services-process h2{margin-top:0}
.why{padding:2.25rem 0;background:var(--bg)}
.why .container{
  background:#0f172a;
  color:#e5e7eb;
  border-radius:16px;
  padding:2rem;
}
.why h2{color:#f8fafc}
.why ul{color:#cbd5f5}
.why ul{padding-left:1.2rem}
.site-footer{
  border-top:1px solid var(--border);
  padding:1.5rem 0;
  color:var(--muted);
  font-size:0.92rem;
  background:var(--panel);
}
.contact-form{display:grid;gap:0.85rem;max-width:560px}
label input, label textarea{
  width:100%;
  padding:0.6rem 0.7rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
@media(min-width:800px){.hero h1{font-size:2.7rem}}
@media(min-width:900px){.hero .container{grid-template-columns:1.1fr 0.9fr}}
@media(min-width:980px){.services-grid{grid-template-columns:1.4fr 0.9fr}}



@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b1120;
    --ink:#e5e7eb;
    --muted:#94a3b8;
    --panel:#111827;
    --border:#1f2937;
  }
  .hero{background:linear-gradient(135deg,#0b1120,#111827)}
  .features article{box-shadow:0 10px 24px rgba(2,6,23,0.35)}
  .site-footer{background:var(--panel)}
  .why .container{background:#111827}
}