/* Reset-ish */
    :root{
        --bg:#fafafa; --card:#ffffff; --accent:#0078d4; --muted:#6b7280; --maxw:1100px;
        --radius:12px; --gap:18px;
        --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      }
      *{box-sizing:border-box}
      html,body{height:100%}
      body{margin:0;font-family:var(--ff-sans);background:var(--bg);color:#111;line-height:1.45}
      a{color:var(--accent);text-decoration:none}
  
      .container{max-width:var(--maxw);margin:0 auto;padding:20px}
  
      /* Header */
      header.site{background:linear-gradient(90deg, #0f172a, rgba(15,23,42,0.7));color:#fff}
      .site .topbar{display:flex;align-items:center;justify-content:space-between; padding:14px 20px}
      .brand{display:flex;gap:12px;align-items:center}
      .logo{width:48px;height:48px;border-radius:11px;display:flex;justify-content:center;}
      .brand h1{font-size:18px;margin:0}
      nav.main{display:flex;gap:14px;align-items:center; margin-bottom: 20px; }
      nav.main a{color:rgb(208, 211, 201);padding:8px;border-radius:8px}
      nav.main a:hover{background:rgba(255,255,255,0.05)}
      .cta{background:hsl(0, 0%, 100%);color:var(--accent) !important;padding:8px 12px;border-radius:8px;font-weight:600}
      
      
  
      /* Mobile menu */
      .menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:20px;}
      .hero{padding:30px 20px}
      .hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
      .hero .card{background:rgba(255,255,255,0.05);padding:22px;border-radius:12px}
      .hero h2{margin:8px 0 6px;font-size:24px}
      .hero p{color:#d1d5db}
      .stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
      .stat{background:var(--card);color:#111;padding:12px;border-radius:10px;min-width:120px;flex:1}
  
      /* Services */
      .services{padding:18px 0}
      .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
      .service{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
      .service h3{margin:8px 0}
      .service p{color:var(--muted);font-size:14px}
  
      /* About & contact */
      .split{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:18px}
      .card{background:var(--card);padding:18px;border-radius:12px}
  
      footer{padding:18px;color:var(--muted);font-size:14px}
  
      /* small screens */
      @media (max-width:900px){
        .container{padding:16px}
        .grid{grid-template-columns:1fr}
        .split{grid-template-columns:1fr}
        nav.main{display:none}
        .menu-btn{display:inline-block}
      }
  
      /* large screens */
      @media (min-width:901px){
        .hero-grid{grid-template-columns:1fr 420px}
        .grid{grid-template-columns:repeat(3,1fr)}
      }
  
      /* small visual tweaks */
      .phone{font-weight:700}
      .map-placeholder{height:220px;border-radius:10px;background:linear-gradient(135deg,#e6eef8,#f8fafc);display:flex;align-items:center;justify-content:center;color:var(--muted)}
  
      /* accessibility focus */
      a:focus, button:focus{outline:3px solid rgba(0,120,212,0.18);outline-offset:2px}