/* ============================================================
 * Morphism landing page
 * ========================================================== */

.morphism-home {
  min-height: calc(100vh - 110px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4rem 1.5rem;
}

.morphism-home-main {
  width: 100%;
  max-width: 620px;

  text-align: center;
}


/* Brand */

.morphism-home-brand {
  display: inline-flex;
  align-items: baseline;

  margin-bottom: 1.25rem;

  font-family:
    ui-monospace,
    "Cascadia Code",
    "SFMono-Regular",
    "Roboto Mono",
    "Liberation Mono",
    Menlo,
    Consolas,
    monospace;
}

.morphism-home-name {
  color: #e1e9e3;

  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 600;

  letter-spacing: 0.035em;
}

.morphism-home-service {
  margin-left: 0.55rem;

  color: #71897d;

  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 450;
}


/* Description */

.morphism-home-description {
  margin: 0 0 2.5rem;

  color: #899b8f;

  font-size: 1rem;
  letter-spacing: 0.035em;
}


/* Actions */

.morphism-home-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.8rem;

  flex-wrap: wrap;
}

.morphism-home-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 0.65rem 1.15rem;

  border-radius: 7px;

  font-size: 0.9rem;
  font-weight: 500;

  text-decoration: none;
}

.morphism-home-primary {
  background: #719b7d;
  border: 1px solid #719b7d;

  color: #0c120e !important;
}

.morphism-home-primary:hover {
  background: #86b091;
  border-color: #86b091;

  color: #09100b !important;
}

.morphism-home-secondary {
  background: #17221b;

  border: 1px solid #35483c;

  color: #c5d1c9 !important;
}

.morphism-home-secondary:hover {
  background: #1f2d25;

  border-color: #496050;

  color: #e1e9e3 !important;
}


/* Mobile */

@media (max-width: 600px) {
  .morphism-home {
    min-height: calc(100vh - 95px);
    padding: 3rem 1.25rem;
  }

  .morphism-home-actions {
    flex-direction: column;
  }

  .morphism-home-actions a {
    width: min(100%, 260px);
  }
}