/* base.css - system typography and layout reset */
:root{
  --bg: #f7f9fb;
  --card-bg: #ffffff;
  --text: #0f1724;
  --muted: #556076;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(15,23,36,0.06);
  --container: 1100px;
  --accent: #0ea5a3;
  --accent-2: #2563eb;
  --accent-3: #7c3aed;
  --glass: rgba(255,255,255,0.6);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.header{
  position:fixed;left:0;right:0;top:0;backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7));
  border-bottom:1px solid rgba(15,23,36,0.04);
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.hero{padding:120px 0 60px 0;display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.service-card{padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,252,1));border:1px solid rgba(15,23,36,0.03)}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.footer{padding:48px 0;background:transparent;border-top:1px solid rgba(15,23,36,0.04);margin-top:40px}
.footer .cols{display:grid;grid-template-columns:1fr 280px;gap:20px}
.small{font-size:14px;color:var(--muted)}
.center{text-align:center}
.pattern{opacity:0.08}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
input,textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(15,23,36,0.08);font-size:15px}
label{font-weight:700;font-size:14px;color:var(--muted);display:block;margin-bottom:6px}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:100px}
  .header{padding:10px 14px}
  .container{padding:0 16px}
}