/* ===============================
   Multi Media Concepts – Huisstijl
   =============================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

   :root {
     --mmc-blue: #3ea6ff;
     --mmc-dark: #0d2135;
     --mmc-light: #eaf4ff;
     --mmc-text: #1a1a1a;
     --mmc-white: #ffffff;
   }
   
   body {
     font-family: 'Inter', sans-serif;
     color: var(--mmc-text);
     background-color: var(--mmc-light);
     margin: 0;
     padding: 0;
     line-height: 1.6;
   }
   
   header {
     background-color: var(--mmc-dark);
     color: var(--mmc-white);
     position: sticky;
     top: 0;
     z-index: 1000;
     padding: 1rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   header a {
     color: var(--mmc-white);
     text-decoration: none;
     margin-left: 1.5rem;
     font-weight: 500;
     transition: color 0.3s ease;
   }
   
   header a:hover {
     color: var(--mmc-blue);
   }
   
   .hero {
     background-color: var(--mmc-light);
     text-align: center;
     padding: 8rem 2rem 6rem;
   }
   
   .hero h1 {
     font-size: 3.5rem;
     font-weight: 800;
     color: var(--mmc-blue);
     margin-bottom: 0.5rem;
   }
   
   .hero h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--mmc-text);
     margin-bottom: 1.5rem;
   }
   
   .hero p {
     max-width: 700px;
     margin: 0 auto 2rem;
     color: var(--mmc-text);
   }
   
   .btn-primary {
     background-color: var(--mmc-blue);
     color: var(--mmc-white);
     border: none;
     border-radius: 8px;
     padding: 0.75rem 1.5rem;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: background-color 0.3s ease, transform 0.2s ease;
   }
   
   .btn-primary:hover {
     background-color: #3293e6;
     transform: translateY(-2px);
   }
   
   .section-dark {
     background-color: var(--mmc-dark);
     color: var(--mmc-white);
     padding: 5rem 2rem;
     text-align: center;
   }
   
   .section-dark h2 {
     color: var(--mmc-blue);
   }
   
   .section-dark a {
     color: var(--mmc-blue);
     text-decoration: none;
   }
   
   .section-light {
     background-color: var(--mmc-light);
     color: var(--mmc-text);
     padding: 5rem 2rem;
     text-align: center;
   }
   
   footer {
     background-color: var(--mmc-dark);
     color: var(--mmc-white);
     padding: 2rem;
     text-align: center;
     font-size: 0.9rem;
   }
   
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
   }