/* styles.css */
:root{
  --accent:#0b5ed7; --dark:#0f1724; --muted:#6b7280; 
  --bg:#f7fbff; --card:#ffffff; --radius:12px;
  --maxw:1200px;
  font-family: Inter, system-ui;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--dark)}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

/* Header */
.site-header{background:transparent;position:sticky;top:0;backdrop-filter:blur(6px);z-index:999}
.header-inner{display:flex;align-items:center;justify-content:space-between}

.logo{width:60px;height:60px;object-fit:contain;border-radius:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-title{font-weight:700;font-size:20px}
.brand-sub{font-size:12px;color:var(--muted)}

.main-nav{display:flex;align-items:center;gap:20px}
.nav-links{display:flex;gap:16px;list-style:none}
.nav-links a{text-decoration:none;color:var(--dark);padding:8px}
.nav-links a:hover{background:#eef4ff;border-radius:6px}

.btn{padding:10px 14px;border-radius:8px;text-decoration:none}
.btn.primary{background:var(--accent);color:white}

/* Hero */
.hero{margin-top:25px;display:grid;grid-template-columns:1fr 380px;gap:20px}
.hero-card{background:white;padding:20px;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.06)}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.service{background:white;padding:18px;border-radius:12px;border:1px solid #e6eef7}

/* Pricing */
.pricing-grid{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}
.price-card{background:white;padding:16px;border-radius:10px;border:1px solid #e6eef7;min-width:240px}

/* Footer */
.site-footer{margin-top:40px;color:var(--muted)}
.footer-inner{display:flex;gap:25px;flex-wrap:wrap;padding:20px 0}
.footer-col{min-width:200px}
.footer-bottom{text-align:center;padding:12px;margin-top:12px;border-top:1px solid #e6eef7}

/* Responsive */
@media(max-width:900px){ 
  .hero{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr}
  .nav-links{display:none;flex-direction:column;background:white;padding:12px;border-radius:8px;position:absolute;right:20px;top:70px;box-shadow:0 5px 20px rgba(0,0,0,0.1)}
  .nav-links.show{display:flex}
  .nav-toggle{display:block}
}
.nav-toggle{display:none;background:none;border:none;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:#000;margin:5px;display:block}