/* Basic responsive stylesheet for OΔSYX site */
:root{
  --accent:#0b7285;
  --muted:#6c757d;
  --bg:#f8fafb;
  --card:#ffffff;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#111; background:var(--bg);}
.container{max-width:var(--max-width); margin:0 auto; padding:1rem}
.site-header{background:linear-gradient(90deg,#fff, #f6fbfc); border-bottom:1px solid #e6eef0}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:0.75rem; text-decoration:none; color:inherit}
.logo{height:56px; width:56px; object-fit:contain}
.brand-title{margin:0; font-size:1.1rem}
.brand-sub{margin:0; color:var(--muted); font-size:0.85rem}
.main-nav a{margin-left:0.75rem; color:var(--accent); text-decoration:none}
.hero{background:transparent; padding:2rem 0}
.hero h2{margin:0 0 0.5rem 0}
.services ul{padding-left:1.25rem}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.card{background:var(--card); padding:1rem; border-radius:8px; box-shadow:0 1px 2px rgba(10,10,10,0.04)}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:0.5rem 0.9rem; border-radius:6px; text-decoration:none}
.site-footer{border-top:1px solid #e6eef0; padding:1rem 0; margin-top:2rem}
.foot-small{color:var(--muted); font-size:0.9rem}
@media(max-width:700px){
  .header-inner{flex-direction:column; align-items:flex-start; gap:0.6rem}
  .main-nav a{margin-left:0.5rem}
}