:root { --primary: #2563eb; --dark: #0f172a; --light: #f8fafc; } body { margin: 0; font-family: 'Inter', sans-serif; background: var(--light); color: var(--dark); } .navbar { display: flex; justify-content: space-between; padding: 2rem 5%; align-items: center; } .navbar ul { display: flex; list-style: none; gap: 2rem; } .navbar a { text-decoration: none; color: var(--dark); font-weight: 600; transition: color 0.3s; } .navbar a:hover { color: var(--primary); } .hero { height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 10%; } .hero h1 { font-size: 4rem; margin-bottom: 1rem; } .cta { padding: 1rem 2rem; background: var(--primary); color: white; border: none; border-radius: 0.5rem; cursor: pointer; transition: transform 0.2s; } .cta:hover { transform: translateY(-5px); } .content { padding: 5rem 10%; }

/* Karbon Sites Branding */

  #karbon-promo-banner {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease-in-out;
  }
  #karbon-promo-banner:hover {
      transform: scale(1.05);
  }